@cere/cere-design-system 0.1.0 → 0.2.0

package/dist/chunk-AWVNEU6R.mjs

@@ -0,0 +1,1478 @@
+import {
+  IconButton
+} from "./chunk-5ASG6G6U.mjs";
+import {
+  TextField
+} from "./chunk-ZP26PGMS.mjs";
+import {
+  Link
+} from "./chunk-PHMNZK2R.mjs";
+import {
+  Button
+} from "./chunk-BOQPWZIB.mjs";
+import {
+  Badge
+} from "./chunk-QBCRH7YF.mjs";
+import {
+  webSurfaceTokens
+} from "./chunk-WC2TCWXK.mjs";
+
+// src/components/navigation/Dropdown/Dropdown.tsx
+import Popover from "@mui/material/Popover";
+import { useCallback, useRef } from "react";
+
+// src/components/navigation/Dropdown/DropdownAnchor.tsx
+import { forwardRef } from "react";
+import Stack from "@mui/material/Stack";
+import { styled } from "@mui/material/styles";
+import { avatarClasses } from "@mui/material/Avatar";
+import Typography from "@mui/material/Typography";
+import Button2 from "@mui/material/Button";
+import { ArrowDropUp, ArrowDropDown } from "@mui/icons-material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Clickable = styled(Button2)({
+  padding: 0
+});
+var Anchor = styled(Stack)(({ theme, variant }) => ({
+  height: 40,
+  borderRadius: 25,
+  padding: theme.spacing(1),
+  color: theme.palette.text.secondary,
+  backgroundColor: variant !== "header" ? theme.palette.grey[200] : "transparent",
+  cursor: "pointer"
+}));
+var Left = styled("div")(({ theme }) => ({
+  [`& .${avatarClasses.root}`]: {
+    width: 30,
+    height: 30,
+    borderWidth: 2,
+    borderStyle: "solid",
+    borderColor: theme.palette.background.paper
+  }
+}));
+var Center = styled(Typography)(({ theme }) => ({
+  fontWeight: theme.typography.fontWeightBold,
+  color: theme.palette.text.primary
+}));
+var DropdownAnchor = forwardRef(
+  ({ open, label, leftElement, onOpen, variant, ...props }, ref) => /* @__PURE__ */ jsx(Clickable, { ref, ...props, color: "inherit", variant: "text", onClick: onOpen, children: /* @__PURE__ */ jsxs(Anchor, { variant, spacing: 1, direction: "row", alignItems: "stretch", children: [
+    /* @__PURE__ */ jsx(Left, { children: leftElement }),
+    /* @__PURE__ */ jsx(Center, { variant: "body1", children: label }),
+    variant !== "header" && (open ? /* @__PURE__ */ jsx(ArrowDropUp, {}) : /* @__PURE__ */ jsx(ArrowDropDown, {}))
+  ] }) })
+);
+DropdownAnchor.displayName = "DropdownAnchor";
+
+// src/components/navigation/Dropdown/Dropdown.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Dropdown = ({
+  open,
+  label,
+  leftElement,
+  direction = "left",
+  children,
+  onToggle,
+  dense = false,
+  disableGutters = false,
+  disablePaddings = false,
+  variant,
+  renderAnchor = ({ ref, open: open2, onOpen }) => /* @__PURE__ */ jsx2(DropdownAnchor, { ref, open: open2, label, leftElement, onOpen, variant })
+}) => {
+  const anchorRef = useRef(null);
+  const horizontal = direction === "left" ? "right" : "left";
+  const onOpen = useCallback(() => onToggle?.(true), [onToggle]);
+  const padding = dense ? 1 : 2;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    renderAnchor({ ref: anchorRef, onOpen, open }),
+    /* @__PURE__ */ jsx2(
+      Popover,
+      {
+        "aria-label": "Overlay",
+        open,
+        onClose: () => onToggle?.(false),
+        anchorEl: anchorRef.current,
+        anchorOrigin: {
+          horizontal,
+          vertical: "bottom"
+        },
+        transformOrigin: {
+          horizontal,
+          vertical: -8
+        },
+        slotProps: {
+          paper: {
+            elevation: 0,
+            sx: {
+              padding: disablePaddings ? 0 : padding,
+              paddingX: !disablePaddings && disableGutters ? 0 : padding,
+              borderRadius: 3,
+              border: "1px solid",
+              borderColor: "divider",
+              boxShadow: 2
+            }
+          }
+        },
+        children
+      }
+    )
+  ] });
+};
+
+// src/components/navigation/Sidebar.tsx
+import Drawer from "@mui/material/Drawer";
+import List from "@mui/material/List";
+import Box from "@mui/material/Box";
+import { styled as styled3 } from "@mui/material/styles";
+
+// src/components/navigation/SidebarItem.tsx
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import { styled as styled2 } from "@mui/material/styles";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var StyledListItemButton = styled2(ListItemButton, {
+  shouldForwardProp: (prop) => prop !== "selected" && prop !== "size"
+})(({ theme, selected, size = "medium" }) => {
+  const heightMap = {
+    small: "40px",
+    medium: "56px",
+    large: "64px"
+  };
+  return {
+    height: heightMap[size],
+    paddingLeft: "16px",
+    paddingRight: "16px",
+    borderRadius: "8px",
+    margin: "4px 8px",
+    color: selected ? theme.palette.primary.main : theme.palette.text.primary,
+    backgroundColor: selected ? theme.palette.background.selected : "transparent",
+    "&:hover": {
+      backgroundColor: selected ? theme.palette.background.selected : theme.palette.grey[50]
+    },
+    "& .MuiListItemIcon-root": {
+      color: selected ? theme.palette.primary.main : theme.palette.text.secondary,
+      minWidth: "40px"
+    },
+    "& .MuiListItemText-primary": {
+      fontWeight: selected ? 600 : 400,
+      color: selected ? theme.palette.primary.main : theme.palette.text.primary
+    }
+  };
+});
+var SidebarItem = ({
+  label,
+  icon,
+  selected = false,
+  onClick,
+  size = "medium",
+  endIcon,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs3(StyledListItemButton, { selected, size, onClick, children: [
+    icon && /* @__PURE__ */ jsx3(ListItemIcon, { children: icon }),
+    /* @__PURE__ */ jsx3(ListItemText, { primary: label }),
+    endIcon && /* @__PURE__ */ jsx3("div", { style: { marginLeft: "auto" }, children: endIcon }),
+    children
+  ] });
+};
+
+// src/components/navigation/Sidebar.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var StyledDrawer = styled3(Drawer)(({ theme }) => ({
+  "& .MuiDrawer-paper": {
+    backgroundColor: theme.palette.background.paper,
+    borderRight: `1px solid ${theme.palette.grey[200]}`,
+    boxShadow: "none"
+  }
+}));
+var Sidebar = ({
+  open = true,
+  width = 280,
+  items,
+  onClose,
+  variant = "permanent"
+}) => {
+  return /* @__PURE__ */ jsx4(
+    StyledDrawer,
+    {
+      variant,
+      open,
+      onClose,
+      sx: {
+        width,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width,
+          boxSizing: "border-box"
+        }
+      },
+      children: /* @__PURE__ */ jsx4(Box, { sx: { overflow: "auto", padding: "8px 0" }, children: /* @__PURE__ */ jsx4(List, { children: items.map((item, index) => /* @__PURE__ */ jsx4(SidebarItem, { ...item }, index)) }) })
+    }
+  );
+};
+
+// src/components/navigation/Stepper.tsx
+import MuiStepper from "@mui/material/Stepper";
+import MuiStep from "@mui/material/Step";
+import MuiStepLabel from "@mui/material/StepLabel";
+import MuiStepContent from "@mui/material/StepContent";
+import MuiStepButton from "@mui/material/StepButton";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Stepper = (props) => {
+  return /* @__PURE__ */ jsx5(MuiStepper, { ...props });
+};
+var Step = (props) => {
+  return /* @__PURE__ */ jsx5(MuiStep, { ...props });
+};
+var StepLabel = (props) => {
+  return /* @__PURE__ */ jsx5(MuiStepLabel, { ...props });
+};
+var StepContent = (props) => {
+  return /* @__PURE__ */ jsx5(MuiStepContent, { ...props });
+};
+var StepButton = (props) => {
+  return /* @__PURE__ */ jsx5(MuiStepButton, { ...props });
+};
+
+// src/components/navigation/NumberedStepper.tsx
+import React from "react";
+import { styled as styled4 } from "@mui/material/styles";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var Root = styled4("ol")({
+  listStyle: "none",
+  padding: 0,
+  margin: 0,
+  display: "flex",
+  flexDirection: "column",
+  gap: 8
+});
+var Row = styled4("li")({
+  display: "flex",
+  gap: 10,
+  alignItems: "center"
+});
+var Num = styled4("span", {
+  shouldForwardProp: (p) => p !== "state"
+})(({ state }) => ({
+  width: 24,
+  height: 24,
+  flexShrink: 0,
+  borderRadius: "50%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: 12,
+  fontWeight: 600,
+  border: `1px solid ${webSurfaceTokens.strokeOnMed}`,
+  background: webSurfaceTokens.surfaceContrast,
+  color: webSurfaceTokens.textSecondary,
+  ...state === "active" && {
+    background: webSurfaceTokens.cVioletLight,
+    borderColor: webSurfaceTokens.cViolet,
+    color: webSurfaceTokens.cVioletDark
+  },
+  ...state === "done" && {
+    background: webSurfaceTokens.cViolet,
+    borderColor: webSurfaceTokens.cViolet,
+    color: "white"
+  }
+}));
+var Label = styled4("span", {
+  shouldForwardProp: (p) => p !== "active"
+})(({ active }) => ({
+  fontSize: 13,
+  color: active ? webSurfaceTokens.textPrimary : webSurfaceTokens.textSecondary,
+  fontWeight: active ? 500 : 400
+}));
+var NumberedStepper = React.forwardRef(
+  function NumberedStepper2({ steps, current, className }, ref) {
+    return /* @__PURE__ */ jsx6(Root, { ref, className, children: steps.map((s, i) => {
+      const state = i < current ? "done" : i === current ? "active" : "pending";
+      return /* @__PURE__ */ jsxs4(Row, { ...state === "active" ? { "aria-current": "step" } : {}, children: [
+        /* @__PURE__ */ jsx6(Num, { state, children: state === "done" ? "\u2713" : i + 1 }),
+        /* @__PURE__ */ jsx6(Label, { active: state === "active", children: s.label })
+      ] }, s.key);
+    }) });
+  }
+);
+
+// src/components/navigation/SideNav/SideNav.tsx
+import React2, { useState, useCallback as useCallback2 } from "react";
+import Box2 from "@mui/material/Box";
+import { styled as styled5 } from "@mui/material/styles";
+
+// src/components/navigation/SideNav/styles.ts
+var scrollbarStyles = {
+  "&::-webkit-scrollbar": {
+    width: "8px"
+  },
+  "&::-webkit-scrollbar-track": {
+    backgroundColor: "transparent"
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: "4px",
+    "&:hover": {
+      backgroundColor: "rgba(0, 0, 0, 0.3)"
+    }
+  }
+};
+
+// src/components/navigation/SideNav/SideNav.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var SideNavContext = React2.createContext({
+  collapsed: false,
+  showTooltips: true
+});
+var SideNavContainer = styled5(Box2, {
+  shouldForwardProp: (prop) => !["navWidth", "navPosition", "showBorder", "backgroundColor", "isCollapsed", "collapsedWidth", "transitionDuration"].includes(prop)
+})(({ theme, navWidth = 280, navPosition = "left", showBorder = true, backgroundColor, isCollapsed = false, collapsedWidth = 68, transitionDuration = 300 }) => ({
+  width: isCollapsed ? collapsedWidth : navWidth,
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  backgroundColor: backgroundColor || theme.palette.background.paper,
+  overflow: "hidden",
+  transition: `width ${transitionDuration}ms ${theme.transitions.easing.easeInOut}`,
+  // Disable transition for reduced motion preference
+  "@media (prefers-reduced-motion: reduce)": {
+    transition: "none"
+  },
+  // Border on the appropriate side
+  ...showBorder && {
+    borderRight: navPosition === "left" ? `1px solid ${theme.palette.divider}` : "none",
+    borderLeft: navPosition === "right" ? `1px solid ${theme.palette.divider}` : "none"
+  }
+}));
+var HeaderSection = styled5(Box2)(({ theme }) => ({
+  flexShrink: 0,
+  backgroundColor: theme.palette.background.paper
+}));
+var NavigationSection = styled5(Box2)(() => ({
+  flexGrow: 1,
+  overflowY: "auto",
+  overflowX: "hidden",
+  ...scrollbarStyles
+}));
+var FooterSection = styled5(Box2)(({ theme }) => ({
+  flexShrink: 0,
+  backgroundColor: theme.palette.background.paper
+}));
+var Header = React2.memo(({ children, className }) => {
+  const { collapsed, onToggleCollapse } = React2.useContext(SideNavContext);
+  const enhancedChildren = React2.Children.map(children, (child) => {
+    if (React2.isValidElement(child)) {
+      return React2.cloneElement(child, {
+        collapsed,
+        onCollapse: onToggleCollapse
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsx7(HeaderSection, { className, "data-testid": "sidenav-header", children: enhancedChildren });
+});
+Header.displayName = "SideNav.Header";
+var Navigation = React2.memo(({ children, className }) => {
+  const { collapsed, showTooltips } = React2.useContext(SideNavContext);
+  const enhancedChildren = React2.Children.map(children, (child) => {
+    if (React2.isValidElement(child)) {
+      return React2.cloneElement(child, {
+        collapsed,
+        showTooltips
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsx7(NavigationSection, { className, "data-testid": "sidenav-navigation", children: enhancedChildren });
+});
+Navigation.displayName = "SideNav.Navigation";
+var Footer = React2.memo(({ children, className }) => {
+  const { collapsed } = React2.useContext(SideNavContext);
+  const enhancedChildren = React2.Children.map(children, (child) => {
+    if (React2.isValidElement(child)) {
+      return React2.cloneElement(child, {
+        compact: collapsed
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsx7(FooterSection, { className, "data-testid": "sidenav-footer", children: enhancedChildren });
+});
+Footer.displayName = "SideNav.Footer";
+var SideNav = Object.assign(
+  React2.memo(({
+    width = 280,
+    collapsedWidth = 68,
+    collapsed: controlledCollapsed,
+    defaultCollapsed = false,
+    onCollapseChange,
+    transitionDuration = 300,
+    showTooltips = true,
+    position = "left",
+    showBorder = true,
+    backgroundColor,
+    children,
+    className,
+    ariaLabel = "Main navigation"
+  }) => {
+    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+    const isControlled = controlledCollapsed !== void 0;
+    const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+    const handleToggleCollapse = useCallback2(() => {
+      const newCollapsed = !collapsed;
+      if (!isControlled) {
+        setInternalCollapsed(newCollapsed);
+      }
+      if (onCollapseChange) {
+        onCollapseChange(newCollapsed);
+      }
+    }, [collapsed, isControlled, onCollapseChange]);
+    const contextValue = {
+      collapsed,
+      showTooltips,
+      onToggleCollapse: handleToggleCollapse
+    };
+    return /* @__PURE__ */ jsx7(SideNavContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx7(
+      SideNavContainer,
+      {
+        role: "navigation",
+        "aria-label": ariaLabel,
+        navWidth: width,
+        collapsedWidth,
+        isCollapsed: collapsed,
+        transitionDuration,
+        navPosition: position,
+        showBorder,
+        backgroundColor,
+        className,
+        children
+      }
+    ) });
+  }),
+  {
+    Header,
+    Navigation,
+    Footer
+  }
+);
+SideNav.displayName = "SideNav";
+
+// src/components/navigation/SideNav/SideNavHeader.tsx
+import React3 from "react";
+import Box3 from "@mui/material/Box";
+import Typography2 from "@mui/material/Typography";
+import IconButton2 from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import ButtonBase from "@mui/material/ButtonBase";
+import { styled as styled6 } from "@mui/material/styles";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var HeaderContainer = styled6(Box3, {
+  shouldForwardProp: (prop) => prop !== "isCollapsed"
+})(({ theme, isCollapsed }) => ({
+  display: "flex",
+  flexDirection: isCollapsed ? "column" : "row",
+  alignItems: "center",
+  justifyContent: isCollapsed ? "center" : "flex-start",
+  gap: isCollapsed ? theme.spacing(1) : theme.spacing(1.5),
+  padding: theme.spacing(2),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  transition: theme.transitions.create(["gap", "justify-content", "flex-direction"], {
+    duration: theme.transitions.duration.shorter
+  })
+}));
+var BrandingButton = styled6(ButtonBase)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1.5),
+  minWidth: 0,
+  padding: 0,
+  borderRadius: theme.shape.borderRadius,
+  // Subtle hover feedback only when clickable
+  "&:hover": {
+    opacity: 0.8
+  },
+  "&:focus-visible": {
+    outline: `2px solid ${theme.palette.primary.main}`,
+    outlineOffset: 2
+  }
+}));
+var SideNavHeader = React3.memo(({
+  logo,
+  title,
+  showCollapseButton = true,
+  onCollapse,
+  onLogoClick,
+  ariaLabel,
+  collapsed = false
+}) => {
+  const headerAriaLabel = ariaLabel || `${title} navigation header`;
+  const brandingContent = /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    logo && /* @__PURE__ */ jsx8(
+      Box3,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0
+        },
+        children: logo
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsx8(
+      Typography2,
+      {
+        variant: "subtitle1",
+        sx: {
+          fontWeight: 700,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          minWidth: 0
+        },
+        children: title
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs5(
+    HeaderContainer,
+    {
+      "data-testid": "sidenav-header-content",
+      "aria-label": headerAriaLabel,
+      isCollapsed: collapsed,
+      children: [
+        onLogoClick ? /* @__PURE__ */ jsx8(
+          BrandingButton,
+          {
+            onClick: onLogoClick,
+            "aria-label": `Go to ${title} home`,
+            "data-testid": "sidenav-home-link",
+            children: brandingContent
+          }
+        ) : /* @__PURE__ */ jsx8(
+          Box3,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1.5,
+              minWidth: 0
+            },
+            children: brandingContent
+          }
+        ),
+        showCollapseButton && /* @__PURE__ */ jsx8(
+          Tooltip,
+          {
+            title: collapsed ? "Expand navigation" : "Collapse navigation",
+            placement: "right",
+            arrow: true,
+            children: /* @__PURE__ */ jsx8(
+              IconButton2,
+              {
+                onClick: onCollapse,
+                "aria-label": collapsed ? "Expand navigation" : "Collapse navigation",
+                "aria-expanded": !collapsed,
+                size: "small",
+                sx: {
+                  flexShrink: 0,
+                  marginLeft: collapsed ? 0 : "auto",
+                  color: "text.secondary",
+                  "&:hover": {
+                    backgroundColor: "action.hover",
+                    color: "text.primary"
+                  }
+                },
+                children: collapsed ? /* @__PURE__ */ jsx8(ChevronRightIcon, {}) : /* @__PURE__ */ jsx8(ChevronLeftIcon, {})
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+SideNavHeader.displayName = "SideNavHeader";
+
+// src/components/navigation/SideNav/NavigationList.tsx
+import React5, { useState as useState2 } from "react";
+import List2 from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+
+// src/components/navigation/SideNav/NavigationItem.tsx
+import React4 from "react";
+import ListItemButton2 from "@mui/material/ListItemButton";
+import ListItemIcon2 from "@mui/material/ListItemIcon";
+import ListItemText2 from "@mui/material/ListItemText";
+import Box4 from "@mui/material/Box";
+import Tooltip2 from "@mui/material/Tooltip";
+import { styled as styled7 } from "@mui/material/styles";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var StyledListItemButton2 = styled7(ListItemButton2, {
+  shouldForwardProp: (prop) => !["selected", "size", "iconPosition", "isCollapsed"].includes(prop)
+})(({ theme, selected, size, isCollapsed }) => {
+  const heights = {
+    small: 40,
+    medium: 48,
+    large: 56
+  };
+  return {
+    minHeight: heights[size] || heights.medium,
+    padding: theme.spacing(1, 1.5),
+    // 8px 12px
+    margin: theme.spacing(0.5, 1),
+    // 4px 8px
+    borderRadius: theme.shape.borderRadius,
+    gap: isCollapsed ? 0 : theme.spacing(1),
+    // No gap in collapsed mode
+    justifyContent: isCollapsed ? "center" : "flex-start",
+    transition: theme.transitions.create(
+      ["background-color", "color", "justify-content"],
+      { duration: theme.transitions.duration.shortest }
+    ),
+    // Default state
+    color: theme.palette.text.primary,
+    backgroundColor: "transparent",
+    "& .MuiListItemIcon-root": {
+      minWidth: "auto",
+      color: theme.palette.text.secondary
+    },
+    // Hover state
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover,
+      "& .MuiListItemIcon-root": {
+        color: theme.palette.text.primary
+      }
+    },
+    // Selected state
+    ...selected && {
+      color: theme.palette.primary.main,
+      backgroundColor: theme.palette.action.selected,
+      "& .MuiListItemIcon-root": {
+        minWidth: "auto",
+        color: theme.palette.primary.main
+      },
+      "&:hover": {
+        backgroundColor: theme.palette.action.selected,
+        "& .MuiListItemIcon-root": {
+          color: theme.palette.primary.main
+        }
+      }
+    },
+    // Disabled state
+    "&.Mui-disabled": {
+      opacity: 1,
+      color: theme.palette.text.disabled,
+      "& .MuiListItemIcon-root": {
+        color: theme.palette.action.disabled
+      }
+    }
+  };
+});
+var NavigationItem = React4.memo(
+  // Public ref typed `HTMLElement` because MuiListItemButton renders one of
+  // `<li>` (default), `<a>` (when `href` is set), or `<button>` (when
+  // `component="button"`). Pinning to HTMLDivElement would have misled
+  // consumers about the runtime element.
+  React4.forwardRef(function NavigationItem2({
+    id,
+    label,
+    icon,
+    iconPosition = "left",
+    selected = false,
+    disabled = false,
+    onClick,
+    endContent,
+    href,
+    ariaLabel,
+    size = "medium",
+    collapsed = false,
+    showTooltip = true,
+    tooltipPlacement = "right",
+    ...rest
+  }, ref) {
+    const handleClick = () => {
+      if (!disabled && onClick) {
+        onClick(id);
+      }
+    };
+    const iconElement = icon && /* @__PURE__ */ jsx9(
+      ListItemIcon2,
+      {
+        sx: {
+          fontSize: 24,
+          width: 24,
+          height: 24,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: icon
+      }
+    );
+    const labelElement = /* @__PURE__ */ jsx9(
+      ListItemText2,
+      {
+        primary: label,
+        primaryTypographyProps: {
+          sx: {
+            fontWeight: 400,
+            fontSize: 16,
+            lineHeight: 1.5,
+            letterSpacing: "0.0168em",
+            display: collapsed ? "none" : "block",
+            opacity: collapsed ? 0 : 1,
+            transition: (theme) => theme.transitions.create(["opacity"], {
+              duration: theme.transitions.duration.shorter
+            })
+          }
+        }
+      }
+    );
+    const buttonContent = /* @__PURE__ */ jsxs6(
+      StyledListItemButton2,
+      {
+        ref,
+        selected,
+        disabled,
+        onClick: handleClick,
+        ...href && { component: "a", href },
+        "aria-label": ariaLabel || label,
+        "aria-current": selected ? "page" : void 0,
+        "aria-disabled": disabled,
+        size,
+        isCollapsed: collapsed,
+        ...rest,
+        children: [
+          icon && iconPosition === "left" && iconElement,
+          labelElement,
+          icon && iconPosition === "right" && iconElement,
+          endContent && !collapsed && /* @__PURE__ */ jsx9(
+            Box4,
+            {
+              sx: {
+                marginLeft: "auto",
+                display: "flex",
+                alignItems: "center"
+              },
+              children: endContent
+            }
+          )
+        ]
+      }
+    );
+    if (collapsed && showTooltip) {
+      return /* @__PURE__ */ jsx9(
+        Tooltip2,
+        {
+          title: label,
+          placement: tooltipPlacement,
+          enterDelay: 200,
+          leaveDelay: 0,
+          arrow: true,
+          children: buttonContent
+        }
+      );
+    }
+    return buttonContent;
+  })
+);
+NavigationItem.displayName = "NavigationItem";
+
+// src/components/navigation/SideNav/NavigationList.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var NavigationList = React5.memo(({
+  items,
+  selectedId,
+  onSelectionChange,
+  maxHeight = "auto",
+  ariaLabel = "Navigation menu",
+  collapsed = false,
+  showTooltips = true
+}) => {
+  const [internalSelectedId, setInternalSelectedId] = useState2(
+    selectedId
+  );
+  const isControlled = selectedId !== void 0;
+  const currentSelectedId = isControlled ? selectedId : internalSelectedId;
+  const handleItemClick = (id) => {
+    if (!isControlled) {
+      setInternalSelectedId(id);
+    }
+    if (onSelectionChange) {
+      onSelectionChange(id);
+    }
+  };
+  return /* @__PURE__ */ jsx10(
+    List2,
+    {
+      role: "list",
+      "aria-label": ariaLabel,
+      sx: {
+        padding: 0,
+        maxHeight,
+        overflowY: maxHeight !== "auto" ? "auto" : "visible",
+        overflowX: "hidden",
+        ...maxHeight !== "auto" ? scrollbarStyles : {}
+      },
+      children: items.map((item, index) => {
+        const isSelected = currentSelectedId === item.id;
+        return /* @__PURE__ */ jsx10(
+          ListItem,
+          {
+            role: "listitem",
+            sx: {
+              padding: 0,
+              display: "block"
+            },
+            children: /* @__PURE__ */ jsx10(
+              NavigationItem,
+              {
+                ...item,
+                selected: isSelected,
+                collapsed,
+                showTooltip: showTooltips,
+                onClick: (id) => {
+                  if (item.disabled) {
+                    return;
+                  }
+                  if (item.onClick) {
+                    item.onClick(id);
+                  }
+                  handleItemClick(id);
+                }
+              }
+            )
+          },
+          `${item.id}-${index}`
+        );
+      })
+    }
+  );
+});
+NavigationList.displayName = "NavigationList";
+
+// src/components/navigation/SideNav/ConnectionStatus.tsx
+import React6 from "react";
+import Box5 from "@mui/material/Box";
+import Typography3 from "@mui/material/Typography";
+import Tooltip3 from "@mui/material/Tooltip";
+import { styled as styled8 } from "@mui/material/styles";
+import PowerIcon from "@mui/icons-material/Power";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var StatusPill = styled8(Box5, {
+  shouldForwardProp: (prop) => !["variant", "interactive"].includes(prop)
+})(({ theme, variant = "info", interactive }) => {
+  const variantColors = {
+    success: {
+      background: theme.palette.success.light + "20",
+      text: theme.palette.success.dark
+    },
+    warning: {
+      background: theme.palette.warning.light + "20",
+      text: theme.palette.warning.dark
+    },
+    error: {
+      background: theme.palette.error.light + "20",
+      text: theme.palette.error.dark
+    },
+    info: {
+      background: theme.palette.grey[100],
+      text: theme.palette.text.primary
+    }
+  };
+  const colors = variantColors[variant] || variantColors.info;
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing(1),
+    padding: theme.spacing(0.75, 1.5),
+    // 6px 12px
+    borderRadius: 16,
+    // Always pill-shaped
+    backgroundColor: colors.background,
+    cursor: interactive ? "pointer" : "default",
+    transition: theme.transitions.create(["background-color", "transform"], {
+      duration: theme.transitions.duration.shortest
+    }),
+    maxWidth: "100%",
+    ...interactive && {
+      "&:hover": {
+        backgroundColor: colors.background + "40",
+        // Slightly darker on hover
+        transform: "scale(1.02)"
+      },
+      "&:active": {
+        transform: "scale(0.98)"
+      }
+    },
+    "& .status-text": {
+      color: colors.text,
+      fontWeight: 500,
+      fontSize: 14,
+      lineHeight: 1.5,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      minWidth: 0
+      // Allow text to shrink and truncate in flex container
+    }
+  };
+});
+var ConnectionStatus = React6.memo(({
+  status,
+  variant = "info",
+  icon,
+  onClick,
+  compact = false,
+  compactText
+}) => {
+  const interactive = !!onClick;
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  };
+  const statusContent = /* @__PURE__ */ jsxs7(
+    StatusPill,
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "aria-label": compact ? status : void 0,
+      variant,
+      interactive,
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsx11(
+          Box5,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              fontSize: 16,
+              color: "inherit"
+            },
+            children: icon || /* @__PURE__ */ jsx11(PowerIcon, { fontSize: "small" })
+          }
+        ),
+        /* @__PURE__ */ jsx11(Typography3, { className: "status-text", variant: "body2", children: compact ? compactText ?? status : status })
+      ]
+    }
+  );
+  if (compact) {
+    return /* @__PURE__ */ jsx11(
+      Box5,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          padding: 1
+        },
+        children: /* @__PURE__ */ jsx11(Tooltip3, { title: status, placement: "right", arrow: true, children: statusContent })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx11(
+    Box5,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        padding: 1
+      },
+      children: statusContent
+    }
+  );
+});
+ConnectionStatus.displayName = "ConnectionStatus";
+
+// src/components/navigation/SideNav/AccountSection.tsx
+import React7 from "react";
+import Box6 from "@mui/material/Box";
+import Avatar from "@mui/material/Avatar";
+import Typography4 from "@mui/material/Typography";
+import Button3 from "@mui/material/Button";
+import IconButton3 from "@mui/material/IconButton";
+import Tooltip4 from "@mui/material/Tooltip";
+import { styled as styled9 } from "@mui/material/styles";
+import LogoutIcon from "@mui/icons-material/Logout";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var AccountContainer = styled9(Box6, {
+  shouldForwardProp: (prop) => !["layout", "isCompact"].includes(prop)
+})(({ theme, layout = "horizontal", isCompact }) => ({
+  display: "flex",
+  flexDirection: isCompact ? "column" : "row",
+  alignItems: "center",
+  justifyContent: isCompact ? "center" : "flex-start",
+  gap: isCompact ? theme.spacing(1) : theme.spacing(1.5),
+  padding: theme.spacing(2),
+  borderTop: `1px solid ${theme.palette.divider}`,
+  transition: theme.transitions.create(["gap", "justify-content"], {
+    duration: theme.transitions.duration.shorter
+  }),
+  ...layout === "vertical" && !isCompact && {
+    flexDirection: "column",
+    textAlign: "center"
+  }
+}));
+var deriveInitials = (name) => {
+  if (!name || name.trim() === "") {
+    return "?";
+  }
+  const words = name.trim().split(/\s+/);
+  if (words.length === 1) {
+    return words[0][0].toUpperCase();
+  }
+  if (words.length === 2) {
+    return (words[0][0] + words[1][0]).toUpperCase();
+  }
+  return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+};
+var AccountSection = React7.memo(({
+  user,
+  onLogout,
+  showEmail = false,
+  layout = "horizontal",
+  compact = false
+}) => {
+  const initials = user.initials || deriveInitials(user.name);
+  const avatarSrc = user.avatarUrl;
+  if (compact) {
+    return /* @__PURE__ */ jsxs8(AccountContainer, { layout, isCompact: true, "aria-label": "Account section", children: [
+      /* @__PURE__ */ jsx12(
+        Tooltip4,
+        {
+          title: `${user.name}${user.email ? ` (${user.email})` : ""}`,
+          placement: "right",
+          arrow: true,
+          children: /* @__PURE__ */ jsx12(
+            Avatar,
+            {
+              src: avatarSrc,
+              alt: user.name,
+              sx: {
+                width: 40,
+                height: 40,
+                backgroundColor: "primary.main",
+                fontSize: 16,
+                fontWeight: 600,
+                flexShrink: 0,
+                cursor: "default"
+              },
+              children: initials
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx12(Tooltip4, { title: "Logout", placement: "right", arrow: true, children: /* @__PURE__ */ jsx12(
+        IconButton3,
+        {
+          onClick: onLogout,
+          "aria-label": "Logout",
+          size: "small",
+          sx: {
+            color: "text.secondary",
+            "&:hover": {
+              backgroundColor: "action.hover",
+              color: "text.primary"
+            }
+          },
+          children: /* @__PURE__ */ jsx12(LogoutIcon, { fontSize: "small" })
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs8(AccountContainer, { layout, isCompact: false, "aria-label": "Account section", children: [
+    /* @__PURE__ */ jsx12(
+      Avatar,
+      {
+        src: avatarSrc,
+        alt: user.name,
+        sx: {
+          width: 40,
+          height: 40,
+          backgroundColor: "primary.main",
+          fontSize: 16,
+          fontWeight: 600,
+          flexShrink: 0
+        },
+        children: initials
+      }
+    ),
+    /* @__PURE__ */ jsxs8(
+      Box6,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 0.5,
+          flexGrow: 1,
+          minWidth: 0
+          // Allow text truncation
+        },
+        children: [
+          /* @__PURE__ */ jsx12(
+            Typography4,
+            {
+              variant: "body2",
+              sx: {
+                fontWeight: 600,
+                lineHeight: 1.5,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: user.name
+            }
+          ),
+          showEmail && user.email && /* @__PURE__ */ jsx12(
+            Typography4,
+            {
+              variant: "caption",
+              sx: {
+                color: "text.secondary",
+                lineHeight: 1.5,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                display: "block"
+              },
+              children: user.email
+            }
+          ),
+          /* @__PURE__ */ jsx12(
+            Button3,
+            {
+              onClick: onLogout,
+              "aria-label": "Logout",
+              startIcon: /* @__PURE__ */ jsx12(LogoutIcon, { fontSize: "small" }),
+              sx: {
+                color: "text.secondary",
+                textTransform: "none",
+                fontSize: "14px",
+                fontWeight: 400,
+                padding: "4px 8px",
+                justifyContent: "flex-start",
+                alignSelf: "flex-start",
+                minWidth: "auto",
+                "&:hover": {
+                  backgroundColor: "action.hover",
+                  color: "text.primary"
+                }
+              },
+              children: "Logout"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+AccountSection.displayName = "AccountSection";
+
+// src/components/navigation/Tab.tsx
+import MuiTab from "@mui/material/Tab";
+import { styled as styled10 } from "@mui/material/styles";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var StyledTab = styled10(MuiTab)(({ theme }) => ({
+  textTransform: "none",
+  minHeight: "48px",
+  fontWeight: 400,
+  color: theme.palette.text.primary,
+  borderBottom: "2px solid transparent",
+  "&:hover": {
+    color: theme.palette.primary.main
+  },
+  "&.Mui-selected": {
+    fontWeight: 600,
+    color: theme.palette.primary.main,
+    borderBottom: `2px solid ${theme.palette.primary.main}`
+  }
+}));
+var Tab = ({
+  badge,
+  badgeVariant = "primary",
+  label,
+  ...props
+}) => {
+  const tabLabel = badge !== void 0 ? /* @__PURE__ */ jsx13(Badge, { variant: badgeVariant, badgeContent: badge, children: label }) : label;
+  return /* @__PURE__ */ jsx13(StyledTab, { label: tabLabel, ...props });
+};
+
+// src/components/navigation/Menu.tsx
+import React8 from "react";
+import MuiMenu from "@mui/material/Menu";
+import MuiMenuItem from "@mui/material/MenuItem";
+import ListItemIcon3 from "@mui/material/ListItemIcon";
+import ListItemText3 from "@mui/material/ListItemText";
+import Divider from "@mui/material/Divider";
+import { styled as styled11 } from "@mui/material/styles";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var StyledMenu = styled11(MuiMenu)(({ theme }) => ({
+  "& .MuiPaper-root": {
+    borderRadius: 8,
+    boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)",
+    minWidth: 200
+  },
+  "& .MuiMenuItem-root": {
+    padding: "8px 16px",
+    "&:hover": {
+      backgroundColor: theme.palette.background.selected
+    }
+  }
+}));
+var Menu = React8.forwardRef(function Menu2({ anchorEl, onClose, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx14(
+    StyledMenu,
+    {
+      ref,
+      anchorEl,
+      open: Boolean(anchorEl),
+      onClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      ...props,
+      children
+    }
+  );
+});
+var MenuItem = React8.forwardRef(function MenuItem2({ icon, label, onClick, disabled = false, divider = false }, ref) {
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+    /* @__PURE__ */ jsxs9(MuiMenuItem, { ref, onClick, disabled, children: [
+      icon && /* @__PURE__ */ jsx14(ListItemIcon3, { children: icon }),
+      /* @__PURE__ */ jsx14(ListItemText3, { children: label })
+    ] }),
+    divider && /* @__PURE__ */ jsx14(Divider, {})
+  ] });
+});
+
+// src/components/navigation/Pagination.tsx
+import MuiPagination from "@mui/material/Pagination";
+import { styled as styled12 } from "@mui/material/styles";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var StyledPagination = styled12(MuiPagination)(({ theme }) => ({
+  "& .MuiPaginationItem-root": {
+    "&.Mui-selected": {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+      "&:hover": {
+        backgroundColor: theme.palette.primary.light
+      }
+    },
+    "&:hover": {
+      backgroundColor: theme.palette.background.selected
+    }
+  }
+}));
+var Pagination = ({ color = "primary", ...props }) => {
+  return /* @__PURE__ */ jsx15(StyledPagination, { color, ...props });
+};
+
+// src/components/navigation/Selector.tsx
+import { useState as useState3 } from "react";
+import Box7 from "@mui/material/Box";
+import Typography5 from "@mui/material/Typography";
+import Avatar2 from "@mui/material/Avatar";
+import Menu3 from "@mui/material/Menu";
+import InputAdornment from "@mui/material/InputAdornment";
+import List3 from "@mui/material/List";
+import ListItemButton3 from "@mui/material/ListItemButton";
+import ListItemAvatar from "@mui/material/ListItemAvatar";
+import ListItemText4 from "@mui/material/ListItemText";
+import CircularProgress from "@mui/material/CircularProgress";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import SearchIcon from "@mui/icons-material/Search";
+import AddIcon from "@mui/icons-material/Add";
+import { useTheme } from "@mui/material/styles";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+var Selector = ({
+  options,
+  selectedId,
+  onSelect,
+  onCreate,
+  loading = false,
+  placeholder = "Select...",
+  emptyMessage = "No items found",
+  compact = false,
+  renderSelected,
+  width = 350
+}) => {
+  const theme = useTheme();
+  const [anchorEl, setAnchorEl] = useState3(null);
+  const [searchTerm, setSearchTerm] = useState3("");
+  const open = Boolean(anchorEl);
+  const selectedOption = options.find((opt) => opt.id === selectedId);
+  const filteredOptions = options.filter(
+    (opt) => opt.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+  const handleOpen = (event) => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+    setSearchTerm("");
+  };
+  const handleSelect = (id) => {
+    onSelect(id);
+    handleClose();
+  };
+  const defaultRenderSelected = (option) => /* @__PURE__ */ jsxs10(Box7, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+    option.avatar ? /* @__PURE__ */ jsx16(Avatar2, { src: option.avatar, sx: { width: 20, height: 20 } }) : option.icon ? option.icon : /* @__PURE__ */ jsx16(Avatar2, { sx: { width: 20, height: 20, bgcolor: theme.palette.primary.main, fontSize: "0.7rem" }, children: option.name.charAt(0) }),
+    /* @__PURE__ */ jsx16(Typography5, { variant: "body2", children: option.name })
+  ] });
+  if (compact) {
+    return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+      /* @__PURE__ */ jsx16(IconButton, { onClick: handleOpen, size: "small", children: selectedOption ? selectedOption.avatar ? /* @__PURE__ */ jsx16(Avatar2, { src: selectedOption.avatar, sx: { width: 32, height: 32 } }) : /* @__PURE__ */ jsx16(Avatar2, { sx: { width: 32, height: 32, bgcolor: theme.palette.primary.main }, children: selectedOption.name.charAt(0) }) : /* @__PURE__ */ jsx16(Avatar2, { sx: { width: 32, height: 32, bgcolor: theme.palette.grey[400] }, children: "?" }) }),
+      /* @__PURE__ */ jsx16(
+        Menu3,
+        {
+          anchorEl,
+          open,
+          onClose: handleClose,
+          PaperProps: {
+            sx: { width, maxHeight: 600, mt: 1 }
+          },
+          children: loading ? /* @__PURE__ */ jsx16(Box7, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx16(CircularProgress, { size: 24 }) }) : /* @__PURE__ */ jsxs10(Fragment4, { children: [
+            options.length > 5 && /* @__PURE__ */ jsx16(Box7, { sx: { p: 1, borderBottom: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ jsx16(
+              TextField,
+              {
+                size: "small",
+                fullWidth: true,
+                placeholder: "Search...",
+                value: searchTerm,
+                onChange: (e) => setSearchTerm(e.target.value),
+                InputProps: {
+                  startAdornment: /* @__PURE__ */ jsx16(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx16(SearchIcon, { fontSize: "small" }) })
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxs10(List3, { sx: { maxHeight: 400, overflow: "auto" }, children: [
+              filteredOptions.map((option) => /* @__PURE__ */ jsxs10(
+                ListItemButton3,
+                {
+                  selected: option.id === selectedId,
+                  onClick: () => handleSelect(option.id),
+                  disabled: option.disabled,
+                  children: [
+                    option.avatar ? /* @__PURE__ */ jsx16(ListItemAvatar, { children: /* @__PURE__ */ jsx16(Avatar2, { src: option.avatar }) }) : option.icon ? /* @__PURE__ */ jsx16(ListItemAvatar, { children: option.icon }) : /* @__PURE__ */ jsx16(ListItemAvatar, { children: /* @__PURE__ */ jsx16(Avatar2, { sx: { bgcolor: theme.palette.primary.main }, children: option.name.charAt(0) }) }),
+                    /* @__PURE__ */ jsx16(ListItemText4, { primary: option.name, secondary: option.description })
+                  ]
+                },
+                option.id
+              )),
+              filteredOptions.length === 0 && /* @__PURE__ */ jsx16(Box7, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx16(Typography5, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
+            ] }),
+            onCreate && /* @__PURE__ */ jsx16(Box7, { sx: { p: 1, borderTop: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ jsx16(
+              Button,
+              {
+                fullWidth: true,
+                startIcon: /* @__PURE__ */ jsx16(AddIcon, {}),
+                onClick: () => {
+                  onCreate();
+                  handleClose();
+                },
+                children: "Create New"
+              }
+            ) })
+          ] })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsxs10(Box7, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+      selectedOption ? renderSelected ? /* @__PURE__ */ jsx16(Link, { onClick: handleOpen, underline: "hover", children: renderSelected(selectedOption) }) : /* @__PURE__ */ jsx16(Link, { onClick: handleOpen, underline: "hover", children: defaultRenderSelected(selectedOption) }) : /* @__PURE__ */ jsx16(Typography5, { variant: "body2", color: "text.secondary", children: placeholder }),
+      /* @__PURE__ */ jsx16(IconButton, { onClick: handleOpen, size: "small", sx: { p: 0.2, ml: 0.5 }, children: /* @__PURE__ */ jsx16(KeyboardArrowDownIcon, { fontSize: "small" }) })
+    ] }),
+    /* @__PURE__ */ jsx16(
+      Menu3,
+      {
+        anchorEl,
+        open,
+        onClose: handleClose,
+        PaperProps: {
+          sx: { width, maxHeight: 600, mt: 1 }
+        },
+        children: loading ? /* @__PURE__ */ jsx16(Box7, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx16(CircularProgress, { size: 24 }) }) : /* @__PURE__ */ jsxs10(Fragment4, { children: [
+          options.length > 5 && /* @__PURE__ */ jsx16(Box7, { sx: { p: 1, borderBottom: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ jsx16(
+            TextField,
+            {
+              size: "small",
+              fullWidth: true,
+              placeholder: "Search...",
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              InputProps: {
+                startAdornment: /* @__PURE__ */ jsx16(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx16(SearchIcon, { fontSize: "small" }) })
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs10(List3, { sx: { maxHeight: 400, overflow: "auto" }, children: [
+            filteredOptions.map((option) => /* @__PURE__ */ jsxs10(
+              ListItemButton3,
+              {
+                selected: option.id === selectedId,
+                onClick: () => handleSelect(option.id),
+                disabled: option.disabled,
+                children: [
+                  option.avatar ? /* @__PURE__ */ jsx16(ListItemAvatar, { children: /* @__PURE__ */ jsx16(Avatar2, { src: option.avatar }) }) : option.icon ? /* @__PURE__ */ jsx16(ListItemAvatar, { children: option.icon }) : /* @__PURE__ */ jsx16(ListItemAvatar, { children: /* @__PURE__ */ jsx16(Avatar2, { sx: { bgcolor: theme.palette.primary.main }, children: option.name.charAt(0) }) }),
+                  /* @__PURE__ */ jsx16(ListItemText4, { primary: option.name, secondary: option.description })
+                ]
+              },
+              option.id
+            )),
+            filteredOptions.length === 0 && /* @__PURE__ */ jsx16(Box7, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx16(Typography5, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
+          ] }),
+          onCreate && /* @__PURE__ */ jsx16(Box7, { sx: { p: 1, borderTop: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ jsx16(
+            Button,
+            {
+              fullWidth: true,
+              startIcon: /* @__PURE__ */ jsx16(AddIcon, {}),
+              onClick: () => {
+                onCreate();
+                handleClose();
+              },
+              children: "Create New"
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
+};
+
+export {
+  DropdownAnchor,
+  Dropdown,
+  SidebarItem,
+  Sidebar,
+  Stepper,
+  Step,
+  StepLabel,
+  StepContent,
+  StepButton,
+  NumberedStepper,
+  SideNav,
+  SideNavHeader,
+  NavigationItem,
+  NavigationList,
+  ConnectionStatus,
+  AccountSection,
+  Tab,
+  Menu,
+  MenuItem,
+  Pagination,
+  Selector
+};
+//# sourceMappingURL=chunk-AWVNEU6R.mjs.map