@cere/cere-design-system 0.1.0 → 0.2.0

package/dist/chunk-AJBM7IE6.mjs

@@ -1,2366 +0,0 @@
-import {
-  IconButton
-} from "./chunk-5ASG6G6U.mjs";
-import {
-  TextField
-} from "./chunk-ZP26PGMS.mjs";
-import {
-  Link
-} from "./chunk-PHMNZK2R.mjs";
-import {
-  Button
-} from "./chunk-FFZ5S7PQ.mjs";
-import {
-  Badge
-} from "./chunk-QBCRH7YF.mjs";
-import {
-  webSurfaceTokens
-} from "./chunk-PWF2NJDB.mjs";
-
-// src/components/navigation/Dropdown/Dropdown.tsx
-import { Popover } from "@mui/material";
-import { useCallback, useRef } from "react";
-
-// src/components/navigation/Dropdown/DropdownAnchor.tsx
-import { forwardRef } from "react";
-import { Stack, styled, avatarClasses, Typography, Button as Button2 } from "@mui/material";
-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,
-  List,
-  styled as styled3,
-  Box
-} from "@mui/material";
-
-// src/components/navigation/SidebarItem.tsx
-import {
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  styled as styled2
-} from "@mui/material";
-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/ServiceSelector.tsx
-import { useState, useCallback as useCallback2 } from "react";
-import {
-  Box as Box2,
-  Typography as Typography2,
-  Avatar,
-  Tooltip,
-  IconButton as IconButton2,
-  Link as Link2,
-  Chip,
-  TextField as TextField2,
-  InputAdornment,
-  List as List2,
-  ListItem,
-  ListItemAvatar,
-  ListItemText as ListItemText2,
-  Button as Button3,
-  Menu
-} from "@mui/material";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import ArchiveIcon from "@mui/icons-material/Archive";
-import UnarchiveIcon from "@mui/icons-material/Unarchive";
-import SearchIcon from "@mui/icons-material/Search";
-import AddIcon from "@mui/icons-material/Add";
-import CheckIcon from "@mui/icons-material/Check";
-import SettingsIcon from "@mui/icons-material/Settings";
-import PersonAddAltIcon from "@mui/icons-material/PersonAddAlt";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var ServiceSelectorButton = ({
-  services,
-  selectedServiceId,
-  loading = false,
-  compact = false,
-  onSelectService,
-  onServiceClick,
-  onCreateService,
-  onServiceCreated,
-  isManager = false,
-  sx = {},
-  panelWidth = 350,
-  onOpenSettings,
-  onOpenAddMember
-}) => {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [showArchived, setShowArchived] = useState(false);
-  const handleOpenSelector = (event) => {
-    event.stopPropagation();
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-    setSearchTerm("");
-    setShowArchived(false);
-  };
-  const handleServiceClick = (e) => {
-    e.stopPropagation();
-    if (selectedServiceId && onServiceClick) {
-      onServiceClick(selectedServiceId);
-    }
-  };
-  const handleSelectService = useCallback2(
-    (serviceId) => {
-      handleClose();
-      if (onSelectService) {
-        onSelectService(serviceId);
-      }
-    },
-    [onSelectService]
-  );
-  const handleCreateClick = () => {
-    handleClose();
-    if (onCreateService) {
-      onCreateService();
-    }
-  };
-  const selectedService = Array.isArray(services) ? services.find((s) => s.id === selectedServiceId) : null;
-  const filteredServices = services.filter((service) => {
-    const matchesSearch = searchTerm === "" || service.name.toLowerCase().includes(searchTerm.toLowerCase());
-    const isArchived = service.archived === true;
-    const matchesArchivedFilter = showArchived ? isArchived : !isArchived;
-    return matchesSearch && matchesArchivedFilter;
-  });
-  if (compact) {
-    return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-      /* @__PURE__ */ jsx5(Box2, { sx: { position: "relative" }, children: /* @__PURE__ */ jsx5(Tooltip, { title: "Select service", placement: "right", children: /* @__PURE__ */ jsx5(
-        IconButton2,
-        {
-          onClick: handleOpenSelector,
-          sx: {
-            p: 1,
-            "&:hover": {
-              bgcolor: "rgba(0, 0, 0, 0.04)"
-            },
-            ...sx
-          },
-          children: /* @__PURE__ */ jsx5(
-            Avatar,
-            {
-              sx: {
-                width: 32,
-                height: 32,
-                bgcolor: selectedServiceId ? "primary.main" : "grey.400",
-                fontSize: "0.9rem"
-              },
-              children: selectedService ? selectedService.name.charAt(0) : "D"
-            }
-          )
-        }
-      ) }) }),
-      /* @__PURE__ */ jsx5(
-        ServiceSelectorPanel,
-        {
-          open: Boolean(anchorEl),
-          anchorEl,
-          onClose: handleClose,
-          services,
-          selectedServiceId,
-          onSelectService: handleSelectService,
-          onCreateService: handleCreateClick,
-          onServiceCreated,
-          loading,
-          width: panelWidth,
-          isManager,
-          selectedService,
-          searchTerm,
-          onSearchChange: setSearchTerm,
-          showArchived,
-          onToggleArchived: () => setShowArchived(!showArchived),
-          filteredServices,
-          onOpenSettings,
-          onOpenAddMember
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsxs4(Box2, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
-      selectedService ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        isManager ? /* @__PURE__ */ jsxs4(
-          Link2,
-          {
-            underline: "hover",
-            color: "inherit",
-            onClick: handleServiceClick,
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              fontSize: "0.875rem",
-              cursor: "pointer",
-              mr: 0.5
-            },
-            children: [
-              /* @__PURE__ */ jsx5(
-                Avatar,
-                {
-                  sx: {
-                    width: 20,
-                    height: 20,
-                    bgcolor: "primary.main",
-                    fontSize: "0.7rem",
-                    mr: 0.5
-                  },
-                  children: selectedService.name.charAt(0)
-                }
-              ),
-              selectedService.name
-            ]
-          }
-        ) : /* @__PURE__ */ jsxs4(
-          Box2,
-          {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              fontSize: "0.875rem",
-              mr: 0.5,
-              color: "text.primary"
-            },
-            children: [
-              /* @__PURE__ */ jsx5(
-                Avatar,
-                {
-                  sx: {
-                    width: 20,
-                    height: 20,
-                    bgcolor: "primary.main",
-                    fontSize: "0.7rem",
-                    mr: 0.5
-                  },
-                  children: selectedService.name.charAt(0)
-                }
-              ),
-              selectedService.name
-            ]
-          }
-        ),
-        selectedService.archived && /* @__PURE__ */ jsx5(
-          Chip,
-          {
-            size: "small",
-            label: "Archived",
-            color: "error",
-            variant: "outlined",
-            sx: {
-              ml: 0.5,
-              height: 20,
-              fontSize: "0.8rem",
-              "& .MuiChip-label": { px: 1 },
-              "& .MuiChip-icon": { fontSize: "0.7rem", ml: 0.5 }
-            }
-          }
-        )
-      ] }) : /* @__PURE__ */ jsx5(
-        Typography2,
-        {
-          variant: "body2",
-          color: "text.secondary",
-          sx: {
-            fontSize: "0.875rem"
-          },
-          children: "Select Service"
-        }
-      ),
-      /* @__PURE__ */ jsx5(
-        IconButton2,
-        {
-          onClick: handleOpenSelector,
-          size: "small",
-          sx: {
-            p: 0.2,
-            ml: 0.5,
-            color: "text.secondary"
-          },
-          children: /* @__PURE__ */ jsx5(KeyboardArrowDownIcon, { fontSize: "small" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx5(
-      ServiceSelectorPanel,
-      {
-        open: Boolean(anchorEl),
-        anchorEl,
-        onClose: handleClose,
-        services,
-        selectedServiceId,
-        onSelectService: handleSelectService,
-        onCreateService: handleCreateClick,
-        onServiceCreated,
-        loading,
-        width: panelWidth,
-        isManager,
-        selectedService,
-        searchTerm,
-        onSearchChange: setSearchTerm,
-        showArchived,
-        onToggleArchived: () => setShowArchived(!showArchived),
-        filteredServices,
-        onOpenSettings,
-        onOpenAddMember
-      }
-    )
-  ] });
-};
-var ServiceSelectorPanel = ({
-  open,
-  anchorEl,
-  onClose,
-  services,
-  selectedServiceId,
-  onSelectService,
-  onCreateService,
-  onServiceCreated,
-  loading = false,
-  width = 350,
-  isManager = false,
-  selectedService,
-  searchTerm: externalSearchTerm,
-  onSearchChange: externalOnSearchChange,
-  showArchived: externalShowArchived,
-  onToggleArchived: externalOnToggleArchived,
-  filteredServices: externalFilteredServices,
-  onOpenSettings,
-  onOpenAddMember
-}) => {
-  const [internalSearchTerm, setInternalSearchTerm] = useState("");
-  const [internalShowArchived, setInternalShowArchived] = useState(false);
-  const searchTerm = externalSearchTerm !== void 0 ? externalSearchTerm : internalSearchTerm;
-  const setSearchTerm = externalOnSearchChange || setInternalSearchTerm;
-  const showArchived = externalShowArchived !== void 0 ? externalShowArchived : internalShowArchived;
-  const toggleArchived = externalOnToggleArchived || (() => setInternalShowArchived(!internalShowArchived));
-  const filteredServices = externalFilteredServices || services.filter((service) => {
-    const matchesSearch = searchTerm === "" || service.name.toLowerCase().includes(searchTerm.toLowerCase());
-    const isArchived = service.archived === true;
-    const matchesArchivedFilter = showArchived ? isArchived : !isArchived;
-    return matchesSearch && matchesArchivedFilter;
-  });
-  const handleCreateClick = () => {
-    if (onCreateService) {
-      onCreateService();
-    } else {
-      onClose();
-      if (onServiceCreated) {
-        onServiceCreated();
-      }
-    }
-  };
-  return /* @__PURE__ */ jsxs4(
-    Menu,
-    {
-      anchorEl,
-      open,
-      onClose,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "left"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      PaperProps: {
-        sx: {
-          width,
-          maxHeight: "80vh",
-          borderRadius: 1,
-          boxShadow: "0 2px 10px rgba(0, 0, 0, 0.12)",
-          overflow: "hidden",
-          mt: 1
-        }
-      },
-      children: [
-        selectedService && /* @__PURE__ */ jsxs4(
-          Box2,
-          {
-            sx: {
-              paddingLeft: 2,
-              paddingRight: 2,
-              paddingTop: 1.5,
-              paddingBottom: 1.5,
-              borderBottom: 1,
-              borderColor: "divider"
-            },
-            children: [
-              /* @__PURE__ */ jsxs4(Box2, { sx: {
-                display: "flex",
-                alignItems: "center",
-                mb: 1.5
-              }, children: [
-                /* @__PURE__ */ jsx5(
-                  Avatar,
-                  {
-                    sx: {
-                      width: 32,
-                      height: 32,
-                      bgcolor: "primary.main",
-                      fontSize: "0.9rem",
-                      mr: 1.5
-                    },
-                    children: selectedService.name.charAt(0)
-                  }
-                ),
-                /* @__PURE__ */ jsx5(Box2, { sx: { flex: 1 }, children: /* @__PURE__ */ jsxs4(Box2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                  /* @__PURE__ */ jsx5(Typography2, { variant: "subtitle1", sx: { fontWeight: 600, fontSize: "1rem" }, children: selectedService.name }),
-                  /* @__PURE__ */ jsx5(
-                    Box2,
-                    {
-                      sx: {
-                        display: "inline-block",
-                        bgcolor: "rgba(0, 0, 0, 0.04)",
-                        color: "text.secondary",
-                        px: 1,
-                        py: 0.3,
-                        borderRadius: "12px",
-                        fontSize: "0.7rem",
-                        fontWeight: 500,
-                        lineHeight: 1
-                      },
-                      children: isManager ? "Manager" : "Viewer"
-                    }
-                  )
-                ] }) })
-              ] }),
-              (onOpenSettings || onOpenAddMember) && /* @__PURE__ */ jsxs4(Box2, { sx: { display: "flex", gap: 1 }, children: [
-                onOpenAddMember && /* @__PURE__ */ jsx5(
-                  Button3,
-                  {
-                    startIcon: /* @__PURE__ */ jsx5(PersonAddAltIcon, {}),
-                    variant: "outlined",
-                    size: "small",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onClose();
-                      onOpenAddMember(selectedServiceId || "");
-                    },
-                    disabled: !isManager,
-                    sx: {
-                      flex: 1,
-                      textTransform: "none",
-                      color: "text.secondary",
-                      fontSize: "0.8rem",
-                      py: 0.75,
-                      justifyContent: "flex-start",
-                      borderColor: "rgba(0, 0, 0, 0.12)",
-                      borderRadius: "6px",
-                      "&:hover": {
-                        borderColor: "rgba(0, 0, 0, 0.23)",
-                        backgroundColor: "rgba(0, 0, 0, 0.03)"
-                      },
-                      "&:disabled": {
-                        opacity: 0.5,
-                        cursor: "not-allowed"
-                      }
-                    },
-                    children: "Add member"
-                  }
-                ),
-                onOpenSettings && /* @__PURE__ */ jsx5(
-                  Button3,
-                  {
-                    startIcon: /* @__PURE__ */ jsx5(SettingsIcon, {}),
-                    variant: "outlined",
-                    size: "small",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onClose();
-                      onOpenSettings(selectedServiceId || "");
-                    },
-                    disabled: !isManager,
-                    sx: {
-                      flex: 1,
-                      textTransform: "none",
-                      color: "text.secondary",
-                      fontSize: "0.8rem",
-                      py: 0.75,
-                      justifyContent: "flex-start",
-                      borderColor: "rgba(0, 0, 0, 0.12)",
-                      borderRadius: "6px",
-                      "&:hover": {
-                        borderColor: "rgba(0, 0, 0, 0.23)",
-                        backgroundColor: "rgba(0, 0, 0, 0.03)"
-                      },
-                      "&:disabled": {
-                        opacity: 0.5,
-                        cursor: "not-allowed"
-                      }
-                    },
-                    children: "Settings"
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs4(Box2, { sx: { px: 2, pt: 2, pb: 1.5 }, children: [
-          /* @__PURE__ */ jsxs4(Box2, { sx: { display: "flex", alignItems: "center", mb: 1.5 }, children: [
-            /* @__PURE__ */ jsx5(
-              TextField2,
-              {
-                size: "small",
-                placeholder: "Search services...",
-                value: searchTerm,
-                onChange: (e) => setSearchTerm(e.target.value),
-                sx: { flex: 1 },
-                InputProps: {
-                  startAdornment: /* @__PURE__ */ jsx5(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx5(SearchIcon, { fontSize: "small", color: "action" }) }),
-                  sx: {
-                    borderRadius: 1.5,
-                    backgroundColor: "rgba(0, 0, 0, 0.04)",
-                    "& fieldset": { border: "none" },
-                    py: 0.5
-                  }
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx5(Tooltip, { title: showArchived ? "Show active" : "Show archived", children: /* @__PURE__ */ jsx5(
-              IconButton2,
-              {
-                size: "small",
-                onClick: toggleArchived,
-                color: showArchived ? "primary" : "default",
-                sx: { ml: 1 },
-                children: showArchived ? /* @__PURE__ */ jsx5(UnarchiveIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx5(ArchiveIcon, { fontSize: "small" })
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ jsx5(
-            Box2,
-            {
-              sx: {
-                maxHeight: 400,
-                overflow: "auto",
-                py: 1
-              },
-              children: loading ? /* @__PURE__ */ jsx5(Box2, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx5(Typography2, { variant: "body2", color: "text.secondary", children: "Loading services..." }) }) : filteredServices.length === 0 ? /* @__PURE__ */ jsx5(Box2, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx5(Typography2, { variant: "body2", color: "text.secondary", children: searchTerm ? `No ${showArchived ? "archived " : ""}services matching "${searchTerm}"` : showArchived ? "No archived services found" : "No active services found" }) }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                /* @__PURE__ */ jsxs4(
-                  Typography2,
-                  {
-                    variant: "caption",
-                    sx: {
-                      display: "block",
-                      px: 2.5,
-                      py: 0.5,
-                      color: "text.secondary",
-                      fontWeight: 600,
-                      textTransform: "uppercase",
-                      fontSize: "0.65rem",
-                      letterSpacing: 0.5
-                    },
-                    children: [
-                      "Services",
-                      showArchived && /* @__PURE__ */ jsx5(
-                        Chip,
-                        {
-                          size: "small",
-                          label: "Archived",
-                          color: "error",
-                          variant: "outlined",
-                          sx: {
-                            ml: 1,
-                            height: 20,
-                            fontSize: "0.6rem",
-                            "& .MuiChip-label": { px: 0.5 },
-                            "& .MuiChip-icon": { fontSize: "0.7rem", ml: 0.5 }
-                          }
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx5(List2, { disablePadding: true, children: filteredServices.map((service) => /* @__PURE__ */ jsxs4(
-                  ListItem,
-                  {
-                    sx: {
-                      py: 0.75,
-                      px: 2,
-                      cursor: "pointer",
-                      "&:hover": {
-                        backgroundColor: "rgba(0, 0, 0, 0.04)"
-                      },
-                      backgroundColor: service.id === selectedServiceId ? "rgba(25, 118, 210, 0.08)" : "transparent",
-                      position: "relative"
-                    },
-                    onClick: () => onSelectService(service.id),
-                    secondaryAction: service.id === selectedServiceId ? /* @__PURE__ */ jsx5(
-                      CheckIcon,
-                      {
-                        sx: {
-                          color: "primary.main",
-                          fontSize: "1.2rem"
-                        }
-                      }
-                    ) : null,
-                    children: [
-                      /* @__PURE__ */ jsx5(ListItemAvatar, { sx: { minWidth: 40 }, children: /* @__PURE__ */ jsx5(
-                        Avatar,
-                        {
-                          sx: {
-                            width: 26,
-                            height: 26,
-                            bgcolor: service.id === selectedServiceId ? "primary.main" : "grey.400",
-                            fontSize: "0.8rem"
-                          },
-                          src: service.avatar,
-                          children: service.name.charAt(0)
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx5(
-                        ListItemText2,
-                        {
-                          primary: /* @__PURE__ */ jsx5(Box2, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ jsx5(
-                            Typography2,
-                            {
-                              variant: "body2",
-                              sx: {
-                                fontWeight: service.id === selectedServiceId ? 600 : 400,
-                                color: service.id === selectedServiceId ? "primary.main" : "text.primary"
-                              },
-                              children: service.name
-                            }
-                          ) }),
-                          primaryTypographyProps: { sx: { fontWeight: 500 } },
-                          sx: { my: 0 }
-                        }
-                      )
-                    ]
-                  },
-                  service.id
-                )) })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx5(
-            Box2,
-            {
-              sx: {
-                paddingTop: 2,
-                paddingLeft: 2,
-                paddingRight: 2,
-                borderTop: 1,
-                borderColor: "divider"
-              },
-              children: /* @__PURE__ */ jsx5(
-                Button3,
-                {
-                  fullWidth: true,
-                  variant: "text",
-                  startIcon: /* @__PURE__ */ jsx5(AddIcon, {}),
-                  onClick: handleCreateClick,
-                  sx: {
-                    textTransform: "none",
-                    fontWeight: 500,
-                    justifyContent: "flex-start",
-                    color: "primary.main",
-                    py: 1,
-                    px: 1.5,
-                    "&:hover": {
-                      backgroundColor: "rgba(25, 118, 210, 0.08)"
-                    }
-                  },
-                  children: "New Service"
-                }
-              )
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-
-// src/components/navigation/WorkspaceSelector.tsx
-import React2, { useState as useState2, useCallback as useCallback3 } from "react";
-import {
-  Box as Box3,
-  Typography as Typography3,
-  Avatar as Avatar2,
-  IconButton as IconButton3,
-  Link as Link3,
-  TextField as TextField3,
-  InputAdornment as InputAdornment2,
-  List as List3,
-  ListItem as ListItem2,
-  ListItemAvatar as ListItemAvatar2,
-  ListItemText as ListItemText3,
-  Button as Button4,
-  Menu as Menu2
-} from "@mui/material";
-import KeyboardArrowDownIcon2 from "@mui/icons-material/KeyboardArrowDown";
-import SearchIcon2 from "@mui/icons-material/Search";
-import AddIcon2 from "@mui/icons-material/Add";
-import CheckIcon2 from "@mui/icons-material/Check";
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var WorkspaceSelectorButton = ({
-  workspaces,
-  selectedWorkspaceId,
-  loading = false,
-  onSelectWorkspace,
-  onWorkspaceClick,
-  onCreateWorkspace,
-  sx = {},
-  panelWidth = 350
-}) => {
-  const [anchorEl, setAnchorEl] = useState2(null);
-  const handleOpenSelector = (event) => {
-    event.stopPropagation();
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  const handleSelectWorkspace = useCallback3(
-    (workspaceId) => {
-      handleClose();
-      if (onSelectWorkspace) {
-        onSelectWorkspace(workspaceId);
-      }
-    },
-    [onSelectWorkspace]
-  );
-  const selectedWorkspace = Array.isArray(workspaces) ? workspaces.find((w) => w.id === selectedWorkspaceId) : null;
-  if (!workspaces || workspaces.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsxs5(Box3, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
-      selectedWorkspace ? /* @__PURE__ */ jsx6(Fragment3, { children: /* @__PURE__ */ jsxs5(
-        Link3,
-        {
-          underline: "hover",
-          color: "inherit",
-          onClick: (e) => {
-            e.stopPropagation();
-            if (onWorkspaceClick) {
-              onWorkspaceClick(selectedWorkspace.id);
-            }
-          },
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            fontSize: "0.875rem",
-            cursor: "pointer",
-            mr: 0.5
-          },
-          children: [
-            /* @__PURE__ */ jsx6(
-              Avatar2,
-              {
-                sx: {
-                  width: 20,
-                  height: 20,
-                  bgcolor: "secondary.main",
-                  fontSize: "0.7rem",
-                  mr: 0.5
-                },
-                children: selectedWorkspace.name.charAt(0)
-              }
-            ),
-            selectedWorkspace.name
-          ]
-        }
-      ) }) : /* @__PURE__ */ jsx6(
-        Typography3,
-        {
-          variant: "body2",
-          color: "text.secondary",
-          sx: {
-            fontSize: "0.875rem"
-          },
-          children: "Select Workspace"
-        }
-      ),
-      /* @__PURE__ */ jsx6(
-        IconButton3,
-        {
-          onClick: handleOpenSelector,
-          size: "small",
-          sx: {
-            p: 0.2,
-            ml: 0.5,
-            color: "text.secondary"
-          },
-          children: /* @__PURE__ */ jsx6(KeyboardArrowDownIcon2, { fontSize: "small" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx6(
-      WorkspaceSelectorPanel,
-      {
-        open: Boolean(anchorEl),
-        anchorEl,
-        onClose: handleClose,
-        workspaces,
-        selectedWorkspaceId,
-        onSelectWorkspace: handleSelectWorkspace,
-        onCreateWorkspace,
-        loading,
-        width: panelWidth
-      }
-    )
-  ] });
-};
-var WorkspaceSelectorPanel = ({
-  open,
-  anchorEl,
-  onClose,
-  workspaces,
-  selectedWorkspaceId,
-  onSelectWorkspace,
-  onCreateWorkspace,
-  loading = false,
-  width = 350
-}) => {
-  const [searchTerm, setSearchTerm] = useState2("");
-  React2.useEffect(() => {
-    if (open) {
-      setSearchTerm("");
-    }
-  }, [open]);
-  const filteredWorkspaces = workspaces.filter(
-    (w) => w.name.toLowerCase().includes(searchTerm.toLowerCase())
-  );
-  const handleCreateClick = () => {
-    onClose();
-    if (onCreateWorkspace) {
-      onCreateWorkspace();
-    }
-  };
-  const handleSelect = (workspaceId) => {
-    onSelectWorkspace(workspaceId);
-    onClose();
-  };
-  return /* @__PURE__ */ jsx6(
-    Menu2,
-    {
-      open,
-      anchorEl,
-      onClose,
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" },
-      PaperProps: {
-        sx: {
-          width,
-          maxHeight: 600,
-          mt: 1,
-          borderRadius: 2
-        }
-      },
-      children: /* @__PURE__ */ jsxs5(Box3, { children: [
-        /* @__PURE__ */ jsx6(Box3, { sx: { px: 2, pt: 2, pb: 1.5 }, children: /* @__PURE__ */ jsx6(
-          TextField3,
-          {
-            fullWidth: true,
-            size: "small",
-            placeholder: "Search workspaces...",
-            value: searchTerm,
-            onChange: (e) => setSearchTerm(e.target.value),
-            InputProps: {
-              startAdornment: /* @__PURE__ */ jsx6(InputAdornment2, { position: "start", children: /* @__PURE__ */ jsx6(SearchIcon2, { fontSize: "small" }) })
-            }
-          }
-        ) }),
-        /* @__PURE__ */ jsx6(Box3, { sx: { maxHeight: 400, overflowY: "auto" }, children: loading ? /* @__PURE__ */ jsx6(Box3, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx6(Typography3, { variant: "body2", color: "text.secondary", children: "Loading..." }) }) : filteredWorkspaces.length === 0 ? /* @__PURE__ */ jsx6(Box3, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx6(Typography3, { variant: "body2", color: "text.secondary", children: "No workspaces found" }) }) : /* @__PURE__ */ jsx6(List3, { dense: true, children: filteredWorkspaces.map((workspace) => /* @__PURE__ */ jsxs5(
-          ListItem2,
-          {
-            onClick: () => handleSelect(workspace.id),
-            sx: {
-              py: 0.5,
-              cursor: "pointer",
-              bgcolor: workspace.id === selectedWorkspaceId ? "action.selected" : "transparent",
-              "&:hover": {
-                bgcolor: "action.hover"
-              }
-            },
-            children: [
-              /* @__PURE__ */ jsx6(ListItemAvatar2, { children: /* @__PURE__ */ jsx6(
-                Avatar2,
-                {
-                  sx: { width: 32, height: 32, bgcolor: "secondary.main" },
-                  children: workspace.name.charAt(0)
-                }
-              ) }),
-              /* @__PURE__ */ jsx6(
-                ListItemText3,
-                {
-                  primary: /* @__PURE__ */ jsxs5(Box3, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                    /* @__PURE__ */ jsx6(Typography3, { variant: "body2", fontWeight: 500, children: workspace.name }),
-                    workspace.id === selectedWorkspaceId && /* @__PURE__ */ jsx6(CheckIcon2, { fontSize: "small", color: "primary" })
-                  ] }),
-                  secondary: workspace.description
-                }
-              )
-            ]
-          },
-          workspace.id
-        )) }) }),
-        /* @__PURE__ */ jsx6(
-          Box3,
-          {
-            sx: {
-              paddingTop: 2,
-              paddingLeft: 2,
-              paddingRight: 2,
-              borderTop: 1,
-              borderColor: "divider"
-            },
-            children: /* @__PURE__ */ jsx6(
-              Button4,
-              {
-                fullWidth: true,
-                variant: "text",
-                startIcon: /* @__PURE__ */ jsx6(AddIcon2, {}),
-                onClick: handleCreateClick,
-                sx: {
-                  textTransform: "none",
-                  fontWeight: 500,
-                  justifyContent: "flex-start",
-                  color: "primary.main",
-                  py: 1,
-                  px: 1.5,
-                  "&:hover": {
-                    backgroundColor: "rgba(25, 118, 210, 0.08)"
-                  }
-                },
-                children: "New Workspace"
-              }
-            )
-          }
-        )
-      ] })
-    }
-  );
-};
-
-// src/components/navigation/Stepper.tsx
-import {
-  Stepper as MuiStepper,
-  Step as MuiStep,
-  StepLabel as MuiStepLabel,
-  StepContent as MuiStepContent,
-  StepButton as MuiStepButton
-} from "@mui/material";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Stepper = (props) => {
-  return /* @__PURE__ */ jsx7(MuiStepper, { ...props });
-};
-var Step = (props) => {
-  return /* @__PURE__ */ jsx7(MuiStep, { ...props });
-};
-var StepLabel = (props) => {
-  return /* @__PURE__ */ jsx7(MuiStepLabel, { ...props });
-};
-var StepContent = (props) => {
-  return /* @__PURE__ */ jsx7(MuiStepContent, { ...props });
-};
-var StepButton = (props) => {
-  return /* @__PURE__ */ jsx7(MuiStepButton, { ...props });
-};
-
-// src/components/navigation/NumberedStepper.tsx
-import React3 from "react";
-import { styled as styled4 } from "@mui/material/styles";
-import { jsx as jsx8, jsxs as jsxs6 } 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 = React3.forwardRef(
-  function NumberedStepper2({ steps, current, className }, ref) {
-    return /* @__PURE__ */ jsx8(Root, { ref, className, children: steps.map((s, i) => {
-      const state = i < current ? "done" : i === current ? "active" : "pending";
-      return /* @__PURE__ */ jsxs6(Row, { ...state === "active" ? { "aria-current": "step" } : {}, children: [
-        /* @__PURE__ */ jsx8(Num, { state, children: state === "done" ? "\u2713" : i + 1 }),
-        /* @__PURE__ */ jsx8(Label, { active: state === "active", children: s.label })
-      ] }, s.key);
-    }) });
-  }
-);
-
-// src/components/navigation/SideNav/SideNav.tsx
-import React4, { useState as useState3, useCallback as useCallback4 } from "react";
-import { Box as Box4 } from "@mui/material";
-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 jsx9 } from "react/jsx-runtime";
-var SideNavContext = React4.createContext({
-  collapsed: false,
-  showTooltips: true
-});
-var SideNavContainer = styled5(Box4, {
-  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(Box4)(({ theme }) => ({
-  flexShrink: 0,
-  backgroundColor: theme.palette.background.paper
-}));
-var NavigationSection = styled5(Box4)(() => ({
-  flexGrow: 1,
-  overflowY: "auto",
-  overflowX: "hidden",
-  ...scrollbarStyles
-}));
-var FooterSection = styled5(Box4)(({ theme }) => ({
-  flexShrink: 0,
-  backgroundColor: theme.palette.background.paper
-}));
-var Header = React4.memo(({ children, className }) => {
-  const { collapsed, onToggleCollapse } = React4.useContext(SideNavContext);
-  const enhancedChildren = React4.Children.map(children, (child) => {
-    if (React4.isValidElement(child)) {
-      return React4.cloneElement(child, {
-        collapsed,
-        onCollapse: onToggleCollapse
-      });
-    }
-    return child;
-  });
-  return /* @__PURE__ */ jsx9(HeaderSection, { className, "data-testid": "sidenav-header", children: enhancedChildren });
-});
-Header.displayName = "SideNav.Header";
-var Navigation = React4.memo(({ children, className }) => {
-  const { collapsed, showTooltips } = React4.useContext(SideNavContext);
-  const enhancedChildren = React4.Children.map(children, (child) => {
-    if (React4.isValidElement(child)) {
-      return React4.cloneElement(child, {
-        collapsed,
-        showTooltips
-      });
-    }
-    return child;
-  });
-  return /* @__PURE__ */ jsx9(NavigationSection, { className, "data-testid": "sidenav-navigation", children: enhancedChildren });
-});
-Navigation.displayName = "SideNav.Navigation";
-var Footer = React4.memo(({ children, className }) => {
-  const { collapsed } = React4.useContext(SideNavContext);
-  const enhancedChildren = React4.Children.map(children, (child) => {
-    if (React4.isValidElement(child)) {
-      return React4.cloneElement(child, {
-        compact: collapsed
-      });
-    }
-    return child;
-  });
-  return /* @__PURE__ */ jsx9(FooterSection, { className, "data-testid": "sidenav-footer", children: enhancedChildren });
-});
-Footer.displayName = "SideNav.Footer";
-var SideNav = Object.assign(
-  React4.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] = useState3(defaultCollapsed);
-    const isControlled = controlledCollapsed !== void 0;
-    const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
-    const handleToggleCollapse = useCallback4(() => {
-      const newCollapsed = !collapsed;
-      if (!isControlled) {
-        setInternalCollapsed(newCollapsed);
-      }
-      if (onCollapseChange) {
-        onCollapseChange(newCollapsed);
-      }
-    }, [collapsed, isControlled, onCollapseChange]);
-    const contextValue = {
-      collapsed,
-      showTooltips,
-      onToggleCollapse: handleToggleCollapse
-    };
-    return /* @__PURE__ */ jsx9(SideNavContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx9(
-      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 React5 from "react";
-import { Box as Box5, Typography as Typography4, IconButton as IconButton4, Tooltip as Tooltip2, ButtonBase } from "@mui/material";
-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 Fragment4, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
-var HeaderContainer = styled6(Box5, {
-  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 = React5.memo(({
-  logo,
-  title,
-  showCollapseButton = true,
-  onCollapse,
-  onLogoClick,
-  ariaLabel,
-  collapsed = false
-}) => {
-  const headerAriaLabel = ariaLabel || `${title} navigation header`;
-  const brandingContent = /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    logo && /* @__PURE__ */ jsx10(
-      Box5,
-      {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          flexShrink: 0
-        },
-        children: logo
-      }
-    ),
-    !collapsed && /* @__PURE__ */ jsx10(
-      Typography4,
-      {
-        variant: "subtitle1",
-        sx: {
-          fontWeight: 700,
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-          minWidth: 0
-        },
-        children: title
-      }
-    )
-  ] });
-  return /* @__PURE__ */ jsxs7(
-    HeaderContainer,
-    {
-      "data-testid": "sidenav-header-content",
-      "aria-label": headerAriaLabel,
-      isCollapsed: collapsed,
-      children: [
-        onLogoClick ? /* @__PURE__ */ jsx10(
-          BrandingButton,
-          {
-            onClick: onLogoClick,
-            "aria-label": `Go to ${title} home`,
-            "data-testid": "sidenav-home-link",
-            children: brandingContent
-          }
-        ) : /* @__PURE__ */ jsx10(
-          Box5,
-          {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: 1.5,
-              minWidth: 0
-            },
-            children: brandingContent
-          }
-        ),
-        showCollapseButton && /* @__PURE__ */ jsx10(
-          Tooltip2,
-          {
-            title: collapsed ? "Expand navigation" : "Collapse navigation",
-            placement: "right",
-            arrow: true,
-            children: /* @__PURE__ */ jsx10(
-              IconButton4,
-              {
-                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__ */ jsx10(ChevronRightIcon, {}) : /* @__PURE__ */ jsx10(ChevronLeftIcon, {})
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-});
-SideNavHeader.displayName = "SideNavHeader";
-
-// src/components/navigation/SideNav/NavigationList.tsx
-import React7, { useState as useState4 } from "react";
-import { List as List4, ListItem as ListItem3 } from "@mui/material";
-
-// src/components/navigation/SideNav/NavigationItem.tsx
-import React6 from "react";
-import {
-  ListItemButton as ListItemButton2,
-  ListItemIcon as ListItemIcon2,
-  ListItemText as ListItemText4,
-  Box as Box6,
-  Tooltip as Tooltip3
-} from "@mui/material";
-import { styled as styled7 } from "@mui/material/styles";
-import { jsx as jsx11, jsxs as jsxs8 } 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 = React6.memo(
-  React6.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__ */ jsx11(
-      ListItemIcon2,
-      {
-        sx: {
-          fontSize: 24,
-          width: 24,
-          height: 24,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        children: icon
-      }
-    );
-    const labelElement = /* @__PURE__ */ jsx11(
-      ListItemText4,
-      {
-        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__ */ jsxs8(
-      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__ */ jsx11(
-            Box6,
-            {
-              sx: {
-                marginLeft: "auto",
-                display: "flex",
-                alignItems: "center"
-              },
-              children: endContent
-            }
-          )
-        ]
-      }
-    );
-    if (collapsed && showTooltip) {
-      return /* @__PURE__ */ jsx11(
-        Tooltip3,
-        {
-          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 jsx12 } from "react/jsx-runtime";
-var NavigationList = React7.memo(({
-  items,
-  selectedId,
-  onSelectionChange,
-  maxHeight = "auto",
-  ariaLabel = "Navigation menu",
-  collapsed = false,
-  showTooltips = true
-}) => {
-  const [internalSelectedId, setInternalSelectedId] = useState4(
-    selectedId
-  );
-  const isControlled = selectedId !== void 0;
-  const currentSelectedId = isControlled ? selectedId : internalSelectedId;
-  const handleItemClick = (id) => {
-    if (!isControlled) {
-      setInternalSelectedId(id);
-    }
-    if (onSelectionChange) {
-      onSelectionChange(id);
-    }
-  };
-  return /* @__PURE__ */ jsx12(
-    List4,
-    {
-      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__ */ jsx12(
-          ListItem3,
-          {
-            role: "listitem",
-            sx: {
-              padding: 0,
-              display: "block"
-            },
-            children: /* @__PURE__ */ jsx12(
-              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 React8 from "react";
-import { Box as Box7, Typography as Typography5, Tooltip as Tooltip4 } from "@mui/material";
-import { styled as styled8 } from "@mui/material/styles";
-import PowerIcon from "@mui/icons-material/Power";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
-var StatusPill = styled8(Box7, {
-  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 = React8.memo(({
-  status,
-  variant = "info",
-  icon,
-  onClick,
-  compact = false,
-  compactText
-}) => {
-  const interactive = !!onClick;
-  const handleClick = () => {
-    if (onClick) {
-      onClick();
-    }
-  };
-  const statusContent = /* @__PURE__ */ jsxs9(
-    StatusPill,
-    {
-      role: "status",
-      "aria-live": "polite",
-      "aria-atomic": "true",
-      "aria-label": compact ? status : void 0,
-      variant,
-      interactive,
-      onClick: handleClick,
-      children: [
-        /* @__PURE__ */ jsx13(
-          Box7,
-          {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              fontSize: 16,
-              color: "inherit"
-            },
-            children: icon || /* @__PURE__ */ jsx13(PowerIcon, { fontSize: "small" })
-          }
-        ),
-        /* @__PURE__ */ jsx13(Typography5, { className: "status-text", variant: "body2", children: compact ? compactText ?? status : status })
-      ]
-    }
-  );
-  if (compact) {
-    return /* @__PURE__ */ jsx13(
-      Box7,
-      {
-        sx: {
-          display: "flex",
-          justifyContent: "center",
-          padding: 1
-        },
-        children: /* @__PURE__ */ jsx13(Tooltip4, { title: status, placement: "right", arrow: true, children: statusContent })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx13(
-    Box7,
-    {
-      sx: {
-        display: "flex",
-        justifyContent: "center",
-        padding: 1
-      },
-      children: statusContent
-    }
-  );
-});
-ConnectionStatus.displayName = "ConnectionStatus";
-
-// src/components/navigation/SideNav/AccountSection.tsx
-import React9 from "react";
-import { Box as Box8, Avatar as Avatar3, Typography as Typography6, Button as Button5, IconButton as IconButton5, Tooltip as Tooltip5 } from "@mui/material";
-import { styled as styled9 } from "@mui/material/styles";
-import LogoutIcon from "@mui/icons-material/Logout";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
-var AccountContainer = styled9(Box8, {
-  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 = React9.memo(({
-  user,
-  onLogout,
-  showEmail = false,
-  layout = "horizontal",
-  compact = false
-}) => {
-  const initials = user.initials || deriveInitials(user.name);
-  const avatarSrc = user.avatarUrl;
-  if (compact) {
-    return /* @__PURE__ */ jsxs10(AccountContainer, { layout, isCompact: true, "aria-label": "Account section", children: [
-      /* @__PURE__ */ jsx14(
-        Tooltip5,
-        {
-          title: `${user.name}${user.email ? ` (${user.email})` : ""}`,
-          placement: "right",
-          arrow: true,
-          children: /* @__PURE__ */ jsx14(
-            Avatar3,
-            {
-              src: avatarSrc,
-              alt: user.name,
-              sx: {
-                width: 40,
-                height: 40,
-                backgroundColor: "primary.main",
-                fontSize: 16,
-                fontWeight: 600,
-                flexShrink: 0,
-                cursor: "default"
-              },
-              children: initials
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx14(Tooltip5, { title: "Logout", placement: "right", arrow: true, children: /* @__PURE__ */ jsx14(
-        IconButton5,
-        {
-          onClick: onLogout,
-          "aria-label": "Logout",
-          size: "small",
-          sx: {
-            color: "text.secondary",
-            "&:hover": {
-              backgroundColor: "action.hover",
-              color: "text.primary"
-            }
-          },
-          children: /* @__PURE__ */ jsx14(LogoutIcon, { fontSize: "small" })
-        }
-      ) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs10(AccountContainer, { layout, isCompact: false, "aria-label": "Account section", children: [
-    /* @__PURE__ */ jsx14(
-      Avatar3,
-      {
-        src: avatarSrc,
-        alt: user.name,
-        sx: {
-          width: 40,
-          height: 40,
-          backgroundColor: "primary.main",
-          fontSize: 16,
-          fontWeight: 600,
-          flexShrink: 0
-        },
-        children: initials
-      }
-    ),
-    /* @__PURE__ */ jsxs10(
-      Box8,
-      {
-        sx: {
-          display: "flex",
-          flexDirection: "column",
-          gap: 0.5,
-          flexGrow: 1,
-          minWidth: 0
-          // Allow text truncation
-        },
-        children: [
-          /* @__PURE__ */ jsx14(
-            Typography6,
-            {
-              variant: "body2",
-              sx: {
-                fontWeight: 600,
-                lineHeight: 1.5,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: user.name
-            }
-          ),
-          showEmail && user.email && /* @__PURE__ */ jsx14(
-            Typography6,
-            {
-              variant: "caption",
-              sx: {
-                color: "text.secondary",
-                lineHeight: 1.5,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-                display: "block"
-              },
-              children: user.email
-            }
-          ),
-          /* @__PURE__ */ jsx14(
-            Button5,
-            {
-              onClick: onLogout,
-              "aria-label": "Logout",
-              startIcon: /* @__PURE__ */ jsx14(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 jsx15 } 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__ */ jsx15(Badge, { variant: badgeVariant, badgeContent: badge, children: label }) : label;
-  return /* @__PURE__ */ jsx15(StyledTab, { label: tabLabel, ...props });
-};
-
-// src/components/navigation/Menu.tsx
-import React10 from "react";
-import {
-  Menu as MuiMenu,
-  MenuItem as MuiMenuItem,
-  ListItemIcon as ListItemIcon3,
-  ListItemText as ListItemText5,
-  Divider
-} from "@mui/material";
-import { styled as styled11 } from "@mui/material/styles";
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs11 } 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 Menu3 = React10.forwardRef(function Menu4({ anchorEl, onClose, children, ...props }, ref) {
-  return /* @__PURE__ */ jsx16(
-    StyledMenu,
-    {
-      ref,
-      anchorEl,
-      open: Boolean(anchorEl),
-      onClose,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "left"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      ...props,
-      children
-    }
-  );
-});
-var MenuItem = React10.forwardRef(function MenuItem2({ icon, label, onClick, disabled = false, divider = false }, ref) {
-  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
-    /* @__PURE__ */ jsxs11(MuiMenuItem, { ref, onClick, disabled, children: [
-      icon && /* @__PURE__ */ jsx16(ListItemIcon3, { children: icon }),
-      /* @__PURE__ */ jsx16(ListItemText5, { children: label })
-    ] }),
-    divider && /* @__PURE__ */ jsx16(Divider, {})
-  ] });
-});
-
-// src/components/navigation/Pagination.tsx
-import MuiPagination from "@mui/material/Pagination";
-import { styled as styled12 } from "@mui/material/styles";
-import { jsx as jsx17 } 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__ */ jsx17(StyledPagination, { color, ...props });
-};
-
-// src/components/navigation/Selector.tsx
-import { useState as useState5 } from "react";
-import {
-  Box as Box9,
-  Typography as Typography7,
-  Avatar as Avatar4,
-  Menu as Menu5,
-  InputAdornment as InputAdornment3,
-  List as List5,
-  ListItemButton as ListItemButton3,
-  ListItemAvatar as ListItemAvatar3,
-  ListItemText as ListItemText6,
-  CircularProgress
-} from "@mui/material";
-import KeyboardArrowDownIcon3 from "@mui/icons-material/KeyboardArrowDown";
-import SearchIcon3 from "@mui/icons-material/Search";
-import AddIcon3 from "@mui/icons-material/Add";
-import { useTheme } from "@mui/material/styles";
-import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs12 } 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] = useState5(null);
-  const [searchTerm, setSearchTerm] = useState5("");
-  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__ */ jsxs12(Box9, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-    option.avatar ? /* @__PURE__ */ jsx18(Avatar4, { src: option.avatar, sx: { width: 20, height: 20 } }) : option.icon ? option.icon : /* @__PURE__ */ jsx18(Avatar4, { sx: { width: 20, height: 20, bgcolor: theme.palette.primary.main, fontSize: "0.7rem" }, children: option.name.charAt(0) }),
-    /* @__PURE__ */ jsx18(Typography7, { variant: "body2", children: option.name })
-  ] });
-  if (compact) {
-    return /* @__PURE__ */ jsxs12(Fragment6, { children: [
-      /* @__PURE__ */ jsx18(IconButton, { onClick: handleOpen, size: "small", children: selectedOption ? selectedOption.avatar ? /* @__PURE__ */ jsx18(Avatar4, { src: selectedOption.avatar, sx: { width: 32, height: 32 } }) : /* @__PURE__ */ jsx18(Avatar4, { sx: { width: 32, height: 32, bgcolor: theme.palette.primary.main }, children: selectedOption.name.charAt(0) }) : /* @__PURE__ */ jsx18(Avatar4, { sx: { width: 32, height: 32, bgcolor: theme.palette.grey[400] }, children: "?" }) }),
-      /* @__PURE__ */ jsx18(
-        Menu5,
-        {
-          anchorEl,
-          open,
-          onClose: handleClose,
-          PaperProps: {
-            sx: { width, maxHeight: 600, mt: 1 }
-          },
-          children: loading ? /* @__PURE__ */ jsx18(Box9, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx18(CircularProgress, { size: 24 }) }) : /* @__PURE__ */ jsxs12(Fragment6, { children: [
-            options.length > 5 && /* @__PURE__ */ jsx18(Box9, { sx: { p: 1, borderBottom: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ jsx18(
-              TextField,
-              {
-                size: "small",
-                fullWidth: true,
-                placeholder: "Search...",
-                value: searchTerm,
-                onChange: (e) => setSearchTerm(e.target.value),
-                InputProps: {
-                  startAdornment: /* @__PURE__ */ jsx18(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx18(SearchIcon3, { fontSize: "small" }) })
-                }
-              }
-            ) }),
-            /* @__PURE__ */ jsxs12(List5, { sx: { maxHeight: 400, overflow: "auto" }, children: [
-              filteredOptions.map((option) => /* @__PURE__ */ jsxs12(
-                ListItemButton3,
-                {
-                  selected: option.id === selectedId,
-                  onClick: () => handleSelect(option.id),
-                  disabled: option.disabled,
-                  children: [
-                    option.avatar ? /* @__PURE__ */ jsx18(ListItemAvatar3, { children: /* @__PURE__ */ jsx18(Avatar4, { src: option.avatar }) }) : option.icon ? /* @__PURE__ */ jsx18(ListItemAvatar3, { children: option.icon }) : /* @__PURE__ */ jsx18(ListItemAvatar3, { children: /* @__PURE__ */ jsx18(Avatar4, { sx: { bgcolor: theme.palette.primary.main }, children: option.name.charAt(0) }) }),
-                    /* @__PURE__ */ jsx18(ListItemText6, { primary: option.name, secondary: option.description })
-                  ]
-                },
-                option.id
-              )),
-              filteredOptions.length === 0 && /* @__PURE__ */ jsx18(Box9, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx18(Typography7, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
-            ] }),
-            onCreate && /* @__PURE__ */ jsx18(Box9, { sx: { p: 1, borderTop: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ jsx18(
-              Button,
-              {
-                fullWidth: true,
-                startIcon: /* @__PURE__ */ jsx18(AddIcon3, {}),
-                onClick: () => {
-                  onCreate();
-                  handleClose();
-                },
-                children: "Create New"
-              }
-            ) })
-          ] })
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs12(Fragment6, { children: [
-    /* @__PURE__ */ jsxs12(Box9, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-      selectedOption ? renderSelected ? /* @__PURE__ */ jsx18(Link, { onClick: handleOpen, underline: "hover", children: renderSelected(selectedOption) }) : /* @__PURE__ */ jsx18(Link, { onClick: handleOpen, underline: "hover", children: defaultRenderSelected(selectedOption) }) : /* @__PURE__ */ jsx18(Typography7, { variant: "body2", color: "text.secondary", children: placeholder }),
-      /* @__PURE__ */ jsx18(IconButton, { onClick: handleOpen, size: "small", sx: { p: 0.2, ml: 0.5 }, children: /* @__PURE__ */ jsx18(KeyboardArrowDownIcon3, { fontSize: "small" }) })
-    ] }),
-    /* @__PURE__ */ jsx18(
-      Menu5,
-      {
-        anchorEl,
-        open,
-        onClose: handleClose,
-        PaperProps: {
-          sx: { width, maxHeight: 600, mt: 1 }
-        },
-        children: loading ? /* @__PURE__ */ jsx18(Box9, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx18(CircularProgress, { size: 24 }) }) : /* @__PURE__ */ jsxs12(Fragment6, { children: [
-          options.length > 5 && /* @__PURE__ */ jsx18(Box9, { sx: { p: 1, borderBottom: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ jsx18(
-            TextField,
-            {
-              size: "small",
-              fullWidth: true,
-              placeholder: "Search...",
-              value: searchTerm,
-              onChange: (e) => setSearchTerm(e.target.value),
-              InputProps: {
-                startAdornment: /* @__PURE__ */ jsx18(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx18(SearchIcon3, { fontSize: "small" }) })
-              }
-            }
-          ) }),
-          /* @__PURE__ */ jsxs12(List5, { sx: { maxHeight: 400, overflow: "auto" }, children: [
-            filteredOptions.map((option) => /* @__PURE__ */ jsxs12(
-              ListItemButton3,
-              {
-                selected: option.id === selectedId,
-                onClick: () => handleSelect(option.id),
-                disabled: option.disabled,
-                children: [
-                  option.avatar ? /* @__PURE__ */ jsx18(ListItemAvatar3, { children: /* @__PURE__ */ jsx18(Avatar4, { src: option.avatar }) }) : option.icon ? /* @__PURE__ */ jsx18(ListItemAvatar3, { children: option.icon }) : /* @__PURE__ */ jsx18(ListItemAvatar3, { children: /* @__PURE__ */ jsx18(Avatar4, { sx: { bgcolor: theme.palette.primary.main }, children: option.name.charAt(0) }) }),
-                  /* @__PURE__ */ jsx18(ListItemText6, { primary: option.name, secondary: option.description })
-                ]
-              },
-              option.id
-            )),
-            filteredOptions.length === 0 && /* @__PURE__ */ jsx18(Box9, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx18(Typography7, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
-          ] }),
-          onCreate && /* @__PURE__ */ jsx18(Box9, { sx: { p: 1, borderTop: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ jsx18(
-            Button,
-            {
-              fullWidth: true,
-              startIcon: /* @__PURE__ */ jsx18(AddIcon3, {}),
-              onClick: () => {
-                onCreate();
-                handleClose();
-              },
-              children: "Create New"
-            }
-          ) })
-        ] })
-      }
-    )
-  ] });
-};
-
-export {
-  DropdownAnchor,
-  Dropdown,
-  SidebarItem,
-  Sidebar,
-  ServiceSelectorButton,
-  WorkspaceSelectorButton,
-  Stepper,
-  Step,
-  StepLabel,
-  StepContent,
-  StepButton,
-  NumberedStepper,
-  SideNav,
-  SideNavHeader,
-  NavigationItem,
-  NavigationList,
-  ConnectionStatus,
-  AccountSection,
-  Tab,
-  Menu3 as Menu,
-  MenuItem,
-  Pagination,
-  Selector
-};
-//# sourceMappingURL=chunk-AJBM7IE6.mjs.map