@cere/cere-design-system 0.1.0 → 0.2.0

package/dist/{chunk-EOF3QNPF.js → chunk-KKIKOIMP.js}

@@ -9,27 +9,31 @@ var _chunkJBHRAAN3js = require('./chunk-JBHRAAN3.js');
 var _chunkU2QHFISGjs = require('./chunk-U2QHFISG.js');
 
 
-var _chunkMNM6HE72js = require('./chunk-MNM6HE72.js');
+var _chunkLVJSKRX3js = require('./chunk-LVJSKRX3.js');
 
 
 var _chunkBIZK6FUDjs = require('./chunk-BIZK6FUD.js');
 
 
-var _chunkZGCN5WCGjs = require('./chunk-ZGCN5WCG.js');
+var _chunkXZZZ4MZVjs = require('./chunk-XZZZ4MZV.js');
 
 // src/components/navigation/Dropdown/Dropdown.tsx
-var _material = require('@mui/material');
+var _Popover = require('@mui/material/Popover'); var _Popover2 = _interopRequireDefault(_Popover);
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 // src/components/navigation/Dropdown/DropdownAnchor.tsx
 
-
+var _Stack = require('@mui/material/Stack'); var _Stack2 = _interopRequireDefault(_Stack);
+var _styles = require('@mui/material/styles');
+var _Avatar = require('@mui/material/Avatar'); var _Avatar2 = _interopRequireDefault(_Avatar);
+var _Typography = require('@mui/material/Typography'); var _Typography2 = _interopRequireDefault(_Typography);
+var _Button = require('@mui/material/Button'); var _Button2 = _interopRequireDefault(_Button);
 var _iconsmaterial = require('@mui/icons-material');
 var _jsxruntime = require('react/jsx-runtime');
-var Clickable = _material.styled.call(void 0, (0, _material.Button))({
+var Clickable = _styles.styled.call(void 0, (0, _Button2.default))({
   padding: 0
 });
-var Anchor = _material.styled.call(void 0, (0, _material.Stack))(({ theme, variant }) => ({
+var Anchor = _styles.styled.call(void 0, (0, _Stack2.default))(({ theme, variant }) => ({
   height: 40,
   borderRadius: 25,
   padding: theme.spacing(1),
@@ -37,8 +41,8 @@ var Anchor = _material.styled.call(void 0, (0, _material.Stack))(({ theme, varia
   backgroundColor: variant !== "header" ? theme.palette.grey[200] : "transparent",
   cursor: "pointer"
 }));
-var Left = _material.styled.call(void 0, "div")(({ theme }) => ({
-  [`& .${_material.avatarClasses.root}`]: {
+var Left = _styles.styled.call(void 0, "div")(({ theme }) => ({
+  [`& .${_Avatar.avatarClasses.root}`]: {
     width: 30,
     height: 30,
     borderWidth: 2,
@@ -46,7 +50,7 @@ var Left = _material.styled.call(void 0, "div")(({ theme }) => ({
     borderColor: theme.palette.background.paper
   }
 }));
-var Center = _material.styled.call(void 0, (0, _material.Typography))(({ theme }) => ({
+var Center = _styles.styled.call(void 0, (0, _Typography2.default))(({ theme }) => ({
   fontWeight: theme.typography.fontWeightBold,
   color: theme.palette.text.primary
 }));
@@ -81,7 +85,7 @@ var Dropdown = ({
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     renderAnchor({ ref: anchorRef, onOpen, open }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _material.Popover,
+      _Popover2.default,
       {
         "aria-label": "Overlay",
         open,
@@ -115,22 +119,18 @@ var Dropdown = ({
 };
 
 // src/components/navigation/Sidebar.tsx
-
-
-
-
-
+var _Drawer = require('@mui/material/Drawer'); var _Drawer2 = _interopRequireDefault(_Drawer);
+var _List = require('@mui/material/List'); var _List2 = _interopRequireDefault(_List);
+var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
 
 
 // src/components/navigation/SidebarItem.tsx
+var _ListItemButton = require('@mui/material/ListItemButton'); var _ListItemButton2 = _interopRequireDefault(_ListItemButton);
+var _ListItemIcon = require('@mui/material/ListItemIcon'); var _ListItemIcon2 = _interopRequireDefault(_ListItemIcon);
+var _ListItemText = require('@mui/material/ListItemText'); var _ListItemText2 = _interopRequireDefault(_ListItemText);
 
 
-
-
-
-
-
-var StyledListItemButton = _material.styled.call(void 0, _material.ListItemButton, {
+var StyledListItemButton = _styles.styled.call(void 0, _ListItemButton2.default, {
   shouldForwardProp: (prop) => prop !== "selected" && prop !== "size"
 })(({ theme, selected, size = "medium" }) => {
   const heightMap = {
@@ -169,8 +169,8 @@ var SidebarItem = ({
   children
 }) => {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledListItemButton, { selected, size, onClick, children: [
-    icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemIcon, { children: icon }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemText, { primary: label }),
+    icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemIcon2.default, { children: icon }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: label }),
     endIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { marginLeft: "auto" }, children: endIcon }),
     children
   ] });
@@ -178,7 +178,7 @@ var SidebarItem = ({
 
 // src/components/navigation/Sidebar.tsx
 
-var StyledDrawer = _material.styled.call(void 0, (0, _material.Drawer))(({ theme }) => ({
+var StyledDrawer = _styles.styled.call(void 0, (0, _Drawer2.default))(({ theme }) => ({
   "& .MuiDrawer-paper": {
     backgroundColor: theme.palette.background.paper,
     borderRight: `1px solid ${theme.palette.grey[200]}`,
@@ -206,933 +206,37 @@ var Sidebar = ({
           boxSizing: "border-box"
         }
       },
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { overflow: "auto", padding: "8px 0" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.List, { children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarItem, { ...item }, index)) }) })
-    }
-  );
-};
-
-// src/components/navigation/ServiceSelector.tsx
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var _KeyboardArrowDown = require('@mui/icons-material/KeyboardArrowDown'); var _KeyboardArrowDown2 = _interopRequireDefault(_KeyboardArrowDown);
-var _Archive = require('@mui/icons-material/Archive'); var _Archive2 = _interopRequireDefault(_Archive);
-var _Unarchive = require('@mui/icons-material/Unarchive'); var _Unarchive2 = _interopRequireDefault(_Unarchive);
-var _Search = require('@mui/icons-material/Search'); var _Search2 = _interopRequireDefault(_Search);
-var _Add = require('@mui/icons-material/Add'); var _Add2 = _interopRequireDefault(_Add);
-var _Check = require('@mui/icons-material/Check'); var _Check2 = _interopRequireDefault(_Check);
-var _Settings = require('@mui/icons-material/Settings'); var _Settings2 = _interopRequireDefault(_Settings);
-var _PersonAddAlt = require('@mui/icons-material/PersonAddAlt'); var _PersonAddAlt2 = _interopRequireDefault(_PersonAddAlt);
-
-var ServiceSelectorButton = ({
-  services,
-  selectedServiceId,
-  loading = false,
-  compact = false,
-  onSelectService,
-  onServiceClick,
-  onCreateService,
-  onServiceCreated,
-  isManager = false,
-  sx = {},
-  panelWidth = 350,
-  onOpenSettings,
-  onOpenAddMember
-}) => {
-  const [anchorEl, setAnchorEl] = _react.useState.call(void 0, null);
-  const [searchTerm, setSearchTerm] = _react.useState.call(void 0, "");
-  const [showArchived, setShowArchived] = _react.useState.call(void 0, 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 = _react.useCallback.call(void 0, 
-    (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__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { position: "relative" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: "Select service", placement: "right", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _material.IconButton,
-        {
-          onClick: handleOpenSelector,
-          sx: {
-            p: 1,
-            "&:hover": {
-              bgcolor: "rgba(0, 0, 0, 0.04)"
-            },
-            ...sx
-          },
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _material.Avatar,
-            {
-              sx: {
-                width: 32,
-                height: 32,
-                bgcolor: selectedServiceId ? "primary.main" : "grey.400",
-                fontSize: "0.9rem"
-              },
-              children: selectedService ? selectedService.name.charAt(0) : "D"
-            }
-          )
-        }
-      ) }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        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__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
-      selectedService ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        isManager ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          _material.Link,
-          {
-            underline: "hover",
-            color: "inherit",
-            onClick: handleServiceClick,
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              fontSize: "0.875rem",
-              cursor: "pointer",
-              mr: 0.5
-            },
-            children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _material.Avatar,
-                {
-                  sx: {
-                    width: 20,
-                    height: 20,
-                    bgcolor: "primary.main",
-                    fontSize: "0.7rem",
-                    mr: 0.5
-                  },
-                  children: selectedService.name.charAt(0)
-                }
-              ),
-              selectedService.name
-            ]
-          }
-        ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          _material.Box,
-          {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              fontSize: "0.875rem",
-              mr: 0.5,
-              color: "text.primary"
-            },
-            children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _material.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__ */ _jsxruntime.jsx.call(void 0, 
-          _material.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__ */ _jsxruntime.jsx.call(void 0, 
-        _material.Typography,
-        {
-          variant: "body2",
-          color: "text.secondary",
-          sx: {
-            fontSize: "0.875rem"
-          },
-          children: "Select Service"
-        }
-      ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _material.IconButton,
-        {
-          onClick: handleOpenSelector,
-          size: "small",
-          sx: {
-            p: 0.2,
-            ml: 0.5,
-            color: "text.secondary"
-          },
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KeyboardArrowDown2.default, { fontSize: "small" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      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] = _react.useState.call(void 0, "");
-  const [internalShowArchived, setInternalShowArchived] = _react.useState.call(void 0, 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__ */ _jsxruntime.jsxs.call(void 0, 
-    _material.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__ */ _jsxruntime.jsxs.call(void 0, 
-          _material.Box,
-          {
-            sx: {
-              paddingLeft: 2,
-              paddingRight: 2,
-              paddingTop: 1.5,
-              paddingBottom: 1.5,
-              borderBottom: 1,
-              borderColor: "divider"
-            },
-            children: [
-              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: {
-                display: "flex",
-                alignItems: "center",
-                mb: 1.5
-              }, children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _material.Avatar,
-                  {
-                    sx: {
-                      width: 32,
-                      height: 32,
-                      bgcolor: "primary.main",
-                      fontSize: "0.9rem",
-                      mr: 1.5
-                    },
-                    children: selectedService.name.charAt(0)
-                  }
-                ),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { flex: 1 }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "subtitle1", sx: { fontWeight: 600, fontSize: "1rem" }, children: selectedService.name }),
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _material.Box,
-                    {
-                      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__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", gap: 1 }, children: [
-                onOpenAddMember && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _material.Button,
-                  {
-                    startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PersonAddAlt2.default, {}),
-                    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__ */ _jsxruntime.jsx.call(void 0, 
-                  _material.Button,
-                  {
-                    startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Settings2.default, {}),
-                    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__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { px: 2, pt: 2, pb: 1.5 }, children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", mb: 1.5 }, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _material.TextField,
-              {
-                size: "small",
-                placeholder: "Search services...",
-                value: searchTerm,
-                onChange: (e) => setSearchTerm(e.target.value),
-                sx: { flex: 1 },
-                InputProps: {
-                  startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.InputAdornment, { position: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Search2.default, { fontSize: "small", color: "action" }) }),
-                  sx: {
-                    borderRadius: 1.5,
-                    backgroundColor: "rgba(0, 0, 0, 0.04)",
-                    "& fieldset": { border: "none" },
-                    py: 0.5
-                  }
-                }
-              }
-            ),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: showArchived ? "Show active" : "Show archived", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _material.IconButton,
-              {
-                size: "small",
-                onClick: toggleArchived,
-                color: showArchived ? "primary" : "default",
-                sx: { ml: 1 },
-                children: showArchived ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Unarchive2.default, { fontSize: "small" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Archive2.default, { fontSize: "small" })
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _material.Box,
-            {
-              sx: {
-                maxHeight: 400,
-                overflow: "auto",
-                py: 1
-              },
-              children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: "Loading services..." }) }) : filteredServices.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: searchTerm ? `No ${showArchived ? "archived " : ""}services matching "${searchTerm}"` : showArchived ? "No archived services found" : "No active services found" }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                  _material.Typography,
-                  {
-                    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__ */ _jsxruntime.jsx.call(void 0, 
-                        _material.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__ */ _jsxruntime.jsx.call(void 0, _material.List, { disablePadding: true, children: filteredServices.map((service) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                  _material.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__ */ _jsxruntime.jsx.call(void 0, 
-                      _Check2.default,
-                      {
-                        sx: {
-                          color: "primary.main",
-                          fontSize: "1.2rem"
-                        }
-                      }
-                    ) : null,
-                    children: [
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemAvatar, { sx: { minWidth: 40 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _material.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__ */ _jsxruntime.jsx.call(void 0, 
-                        _material.ListItemText,
-                        {
-                          primary: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                            _material.Typography,
-                            {
-                              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__ */ _jsxruntime.jsx.call(void 0, 
-            _material.Box,
-            {
-              sx: {
-                paddingTop: 2,
-                paddingLeft: 2,
-                paddingRight: 2,
-                borderTop: 1,
-                borderColor: "divider"
-              },
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _material.Button,
-                {
-                  fullWidth: true,
-                  variant: "text",
-                  startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Add2.default, {}),
-                  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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var WorkspaceSelectorButton = ({
-  workspaces,
-  selectedWorkspaceId,
-  loading = false,
-  onSelectWorkspace,
-  onWorkspaceClick,
-  onCreateWorkspace,
-  sx = {},
-  panelWidth = 350
-}) => {
-  const [anchorEl, setAnchorEl] = _react.useState.call(void 0, null);
-  const handleOpenSelector = (event) => {
-    event.stopPropagation();
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  const handleSelectWorkspace = _react.useCallback.call(void 0, 
-    (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__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
-      selectedWorkspace ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _material.Link,
-        {
-          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__ */ _jsxruntime.jsx.call(void 0, 
-              _material.Avatar,
-              {
-                sx: {
-                  width: 20,
-                  height: 20,
-                  bgcolor: "secondary.main",
-                  fontSize: "0.7rem",
-                  mr: 0.5
-                },
-                children: selectedWorkspace.name.charAt(0)
-              }
-            ),
-            selectedWorkspace.name
-          ]
-        }
-      ) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _material.Typography,
-        {
-          variant: "body2",
-          color: "text.secondary",
-          sx: {
-            fontSize: "0.875rem"
-          },
-          children: "Select Workspace"
-        }
-      ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _material.IconButton,
-        {
-          onClick: handleOpenSelector,
-          size: "small",
-          sx: {
-            p: 0.2,
-            ml: 0.5,
-            color: "text.secondary"
-          },
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KeyboardArrowDown2.default, { fontSize: "small" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      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] = _react.useState.call(void 0, "");
-  _react2.default.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__ */ _jsxruntime.jsx.call(void 0, 
-    _material.Menu,
-    {
-      open,
-      anchorEl,
-      onClose,
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" },
-      PaperProps: {
-        sx: {
-          width,
-          maxHeight: 600,
-          mt: 1,
-          borderRadius: 2
-        }
-      },
-      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { px: 2, pt: 2, pb: 1.5 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _material.TextField,
-          {
-            fullWidth: true,
-            size: "small",
-            placeholder: "Search workspaces...",
-            value: searchTerm,
-            onChange: (e) => setSearchTerm(e.target.value),
-            InputProps: {
-              startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.InputAdornment, { position: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Search2.default, { fontSize: "small" }) })
-            }
-          }
-        ) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { maxHeight: 400, overflowY: "auto" }, children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: "Loading..." }) }) : filteredWorkspaces.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: "No workspaces found" }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.List, { dense: true, children: filteredWorkspaces.map((workspace) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          _material.ListItem,
-          {
-            onClick: () => handleSelect(workspace.id),
-            sx: {
-              py: 0.5,
-              cursor: "pointer",
-              bgcolor: workspace.id === selectedWorkspaceId ? "action.selected" : "transparent",
-              "&:hover": {
-                bgcolor: "action.hover"
-              }
-            },
-            children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemAvatar, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _material.Avatar,
-                {
-                  sx: { width: 32, height: 32, bgcolor: "secondary.main" },
-                  children: workspace.name.charAt(0)
-                }
-              ) }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _material.ListItemText,
-                {
-                  primary: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", fontWeight: 500, children: workspace.name }),
-                    workspace.id === selectedWorkspaceId && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Check2.default, { fontSize: "small", color: "primary" })
-                  ] }),
-                  secondary: workspace.description
-                }
-              )
-            ]
-          },
-          workspace.id
-        )) }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _material.Box,
-          {
-            sx: {
-              paddingTop: 2,
-              paddingLeft: 2,
-              paddingRight: 2,
-              borderTop: 1,
-              borderColor: "divider"
-            },
-            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _material.Button,
-              {
-                fullWidth: true,
-                variant: "text",
-                startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Add2.default, {}),
-                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"
-              }
-            )
-          }
-        )
-      ] })
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { overflow: "auto", padding: "8px 0" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _List2.default, { children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarItem, { ...item }, index)) }) })
     }
   );
 };
 
 // src/components/navigation/Stepper.tsx
-
-
-
-
-
-
-
+var _Stepper = require('@mui/material/Stepper'); var _Stepper2 = _interopRequireDefault(_Stepper);
+var _Step = require('@mui/material/Step'); var _Step2 = _interopRequireDefault(_Step);
+var _StepLabel = require('@mui/material/StepLabel'); var _StepLabel2 = _interopRequireDefault(_StepLabel);
+var _StepContent = require('@mui/material/StepContent'); var _StepContent2 = _interopRequireDefault(_StepContent);
+var _StepButton = require('@mui/material/StepButton'); var _StepButton2 = _interopRequireDefault(_StepButton);
 
 var Stepper = (props) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Stepper, { ...props });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Stepper2.default, { ...props });
 };
 var Step = (props) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Step, { ...props });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Step2.default, { ...props });
 };
 var StepLabel = (props) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.StepLabel, { ...props });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _StepLabel2.default, { ...props });
 };
 var StepContent = (props) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.StepContent, { ...props });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _StepContent2.default, { ...props });
 };
 var StepButton = (props) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.StepButton, { ...props });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _StepButton2.default, { ...props });
 };
 
 // src/components/navigation/NumberedStepper.tsx
 
-var _styles = require('@mui/material/styles');
+
 
 var Root = _styles.styled.call(void 0, "ol")({
   listStyle: "none",
@@ -1159,17 +263,17 @@ var Num = _styles.styled.call(void 0, "span", {
   justifyContent: "center",
   fontSize: 12,
   fontWeight: 600,
-  border: `1px solid ${_chunkZGCN5WCGjs.webSurfaceTokens.strokeOnMed}`,
-  background: _chunkZGCN5WCGjs.webSurfaceTokens.surfaceContrast,
-  color: _chunkZGCN5WCGjs.webSurfaceTokens.textSecondary,
+  border: `1px solid ${_chunkXZZZ4MZVjs.webSurfaceTokens.strokeOnMed}`,
+  background: _chunkXZZZ4MZVjs.webSurfaceTokens.surfaceContrast,
+  color: _chunkXZZZ4MZVjs.webSurfaceTokens.textSecondary,
   ...state === "active" && {
-    background: _chunkZGCN5WCGjs.webSurfaceTokens.cVioletLight,
-    borderColor: _chunkZGCN5WCGjs.webSurfaceTokens.cViolet,
-    color: _chunkZGCN5WCGjs.webSurfaceTokens.cVioletDark
+    background: _chunkXZZZ4MZVjs.webSurfaceTokens.cVioletLight,
+    borderColor: _chunkXZZZ4MZVjs.webSurfaceTokens.cViolet,
+    color: _chunkXZZZ4MZVjs.webSurfaceTokens.cVioletDark
   },
   ...state === "done" && {
-    background: _chunkZGCN5WCGjs.webSurfaceTokens.cViolet,
-    borderColor: _chunkZGCN5WCGjs.webSurfaceTokens.cViolet,
+    background: _chunkXZZZ4MZVjs.webSurfaceTokens.cViolet,
+    borderColor: _chunkXZZZ4MZVjs.webSurfaceTokens.cViolet,
     color: "white"
   }
 }));
@@ -1177,7 +281,7 @@ var Label = _styles.styled.call(void 0, "span", {
   shouldForwardProp: (p) => p !== "active"
 })(({ active }) => ({
   fontSize: 13,
-  color: active ? _chunkZGCN5WCGjs.webSurfaceTokens.textPrimary : _chunkZGCN5WCGjs.webSurfaceTokens.textSecondary,
+  color: active ? _chunkXZZZ4MZVjs.webSurfaceTokens.textPrimary : _chunkXZZZ4MZVjs.webSurfaceTokens.textSecondary,
   fontWeight: active ? 500 : 400
 }));
 var NumberedStepper = _react2.default.forwardRef(
@@ -1220,7 +324,7 @@ var SideNavContext = _react2.default.createContext({
   collapsed: false,
   showTooltips: true
 });
-var SideNavContainer = _styles.styled.call(void 0, _material.Box, {
+var SideNavContainer = _styles.styled.call(void 0, _Box2.default, {
   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,
@@ -1240,17 +344,17 @@ var SideNavContainer = _styles.styled.call(void 0, _material.Box, {
     borderLeft: navPosition === "right" ? `1px solid ${theme.palette.divider}` : "none"
   }
 }));
-var HeaderSection = _styles.styled.call(void 0, (0, _material.Box))(({ theme }) => ({
+var HeaderSection = _styles.styled.call(void 0, (0, _Box2.default))(({ theme }) => ({
   flexShrink: 0,
   backgroundColor: theme.palette.background.paper
 }));
-var NavigationSection = _styles.styled.call(void 0, (0, _material.Box))(() => ({
+var NavigationSection = _styles.styled.call(void 0, (0, _Box2.default))(() => ({
   flexGrow: 1,
   overflowY: "auto",
   overflowX: "hidden",
   ...scrollbarStyles
 }));
-var FooterSection = _styles.styled.call(void 0, (0, _material.Box))(({ theme }) => ({
+var FooterSection = _styles.styled.call(void 0, (0, _Box2.default))(({ theme }) => ({
   flexShrink: 0,
   backgroundColor: theme.palette.background.paper
 }));
@@ -1357,10 +461,14 @@ SideNav.displayName = "SideNav";
 
 
 
+var _IconButton = require('@mui/material/IconButton'); var _IconButton2 = _interopRequireDefault(_IconButton);
+var _Tooltip = require('@mui/material/Tooltip'); var _Tooltip2 = _interopRequireDefault(_Tooltip);
+var _ButtonBase = require('@mui/material/ButtonBase'); var _ButtonBase2 = _interopRequireDefault(_ButtonBase);
+
 var _ChevronLeft = require('@mui/icons-material/ChevronLeft'); var _ChevronLeft2 = _interopRequireDefault(_ChevronLeft);
 var _ChevronRight = require('@mui/icons-material/ChevronRight'); var _ChevronRight2 = _interopRequireDefault(_ChevronRight);
 
-var HeaderContainer = _styles.styled.call(void 0, _material.Box, {
+var HeaderContainer = _styles.styled.call(void 0, _Box2.default, {
   shouldForwardProp: (prop) => prop !== "isCollapsed"
 })(({ theme, isCollapsed }) => ({
   display: "flex",
@@ -1374,7 +482,7 @@ var HeaderContainer = _styles.styled.call(void 0, _material.Box, {
     duration: theme.transitions.duration.shorter
   })
 }));
-var BrandingButton = _styles.styled.call(void 0, (0, _material.ButtonBase))(({ theme }) => ({
+var BrandingButton = _styles.styled.call(void 0, (0, _ButtonBase2.default))(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing(1.5),
@@ -1402,7 +510,7 @@ var SideNavHeader = _react2.default.memo(({
   const headerAriaLabel = ariaLabel || `${title} navigation header`;
   const brandingContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     logo && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _material.Box,
+      _Box2.default,
       {
         sx: {
           display: "flex",
@@ -1414,7 +522,7 @@ var SideNavHeader = _react2.default.memo(({
       }
     ),
     !collapsed && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _material.Typography,
+      _Typography2.default,
       {
         variant: "subtitle1",
         sx: {
@@ -1444,7 +552,7 @@ var SideNavHeader = _react2.default.memo(({
             children: brandingContent
           }
         ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _material.Box,
+          _Box2.default,
           {
             sx: {
               display: "flex",
@@ -1456,13 +564,13 @@ var SideNavHeader = _react2.default.memo(({
           }
         ),
         showCollapseButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _material.Tooltip,
+          _Tooltip2.default,
           {
             title: collapsed ? "Expand navigation" : "Collapse navigation",
             placement: "right",
             arrow: true,
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _material.IconButton,
+              _IconButton2.default,
               {
                 onClick: onCollapse,
                 "aria-label": collapsed ? "Expand navigation" : "Collapse navigation",
@@ -1491,6 +599,7 @@ SideNavHeader.displayName = "SideNavHeader";
 // src/components/navigation/SideNav/NavigationList.tsx
 
 
+var _ListItem = require('@mui/material/ListItem'); var _ListItem2 = _interopRequireDefault(_ListItem);
 
 // src/components/navigation/SideNav/NavigationItem.tsx
 
@@ -1501,9 +610,7 @@ SideNavHeader.displayName = "SideNavHeader";
 
 
 
-
-
-var StyledListItemButton2 = _styles.styled.call(void 0, _material.ListItemButton, {
+var StyledListItemButton2 = _styles.styled.call(void 0, _ListItemButton2.default, {
   shouldForwardProp: (prop) => !["selected", "size", "iconPosition", "isCollapsed"].includes(prop)
 })(({ theme, selected, size, isCollapsed }) => {
   const heights = {
@@ -1565,6 +672,10 @@ var StyledListItemButton2 = _styles.styled.call(void 0, _material.ListItemButton
   };
 });
 var NavigationItem = _react2.default.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.
   _react2.default.forwardRef(function NavigationItem2({
     id,
     label,
@@ -1588,7 +699,7 @@ var NavigationItem = _react2.default.memo(
       }
     };
     const iconElement = icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _material.ListItemIcon,
+      _ListItemIcon2.default,
       {
         sx: {
           fontSize: 24,
@@ -1602,7 +713,7 @@ var NavigationItem = _react2.default.memo(
       }
     );
     const labelElement = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _material.ListItemText,
+      _ListItemText2.default,
       {
         primary: label,
         primaryTypographyProps: {
@@ -1639,7 +750,7 @@ var NavigationItem = _react2.default.memo(
           labelElement,
           icon && iconPosition === "right" && iconElement,
           endContent && !collapsed && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _material.Box,
+            _Box2.default,
             {
               sx: {
                 marginLeft: "auto",
@@ -1654,7 +765,7 @@ var NavigationItem = _react2.default.memo(
     );
     if (collapsed && showTooltip) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _material.Tooltip,
+        _Tooltip2.default,
         {
           title: label,
           placement: tooltipPlacement,
@@ -1695,7 +806,7 @@ var NavigationList = _react2.default.memo(({
     }
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _material.List,
+    _List2.default,
     {
       role: "list",
       "aria-label": ariaLabel,
@@ -1709,7 +820,7 @@ var NavigationList = _react2.default.memo(({
       children: items.map((item, index) => {
         const isSelected = currentSelectedId === item.id;
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _material.ListItem,
+          _ListItem2.default,
           {
             role: "listitem",
             sx: {
@@ -1747,9 +858,11 @@ NavigationList.displayName = "NavigationList";
 
 
 
+
+
 var _Power = require('@mui/icons-material/Power'); var _Power2 = _interopRequireDefault(_Power);
 
-var StatusPill = _styles.styled.call(void 0, _material.Box, {
+var StatusPill = _styles.styled.call(void 0, _Box2.default, {
   shouldForwardProp: (prop) => !["variant", "interactive"].includes(prop)
 })(({ theme, variant = "info", interactive }) => {
   const variantColors = {
@@ -1835,7 +948,7 @@ var ConnectionStatus = _react2.default.memo(({
       onClick: handleClick,
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _material.Box,
+          _Box2.default,
           {
             sx: {
               display: "flex",
@@ -1846,25 +959,25 @@ var ConnectionStatus = _react2.default.memo(({
             children: icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Power2.default, { fontSize: "small" })
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { className: "status-text", variant: "body2", children: compact ? _nullishCoalesce(compactText, () => ( status)) : status })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { className: "status-text", variant: "body2", children: compact ? _nullishCoalesce(compactText, () => ( status)) : status })
       ]
     }
   );
   if (compact) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _material.Box,
+      _Box2.default,
       {
         sx: {
           display: "flex",
           justifyContent: "center",
           padding: 1
         },
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: status, placement: "right", arrow: true, children: statusContent })
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Tooltip2.default, { title: status, placement: "right", arrow: true, children: statusContent })
       }
     );
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _material.Box,
+    _Box2.default,
     {
       sx: {
         display: "flex",
@@ -1881,9 +994,14 @@ ConnectionStatus.displayName = "ConnectionStatus";
 
 
 
+
+
+
+
+
 var _Logout = require('@mui/icons-material/Logout'); var _Logout2 = _interopRequireDefault(_Logout);
 
-var AccountContainer = _styles.styled.call(void 0, _material.Box, {
+var AccountContainer = _styles.styled.call(void 0, _Box2.default, {
   shouldForwardProp: (prop) => !["layout", "isCompact"].includes(prop)
 })(({ theme, layout = "horizontal", isCompact }) => ({
   display: "flex",
@@ -1926,13 +1044,13 @@ var AccountSection = _react2.default.memo(({
   if (compact) {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AccountContainer, { layout, isCompact: true, "aria-label": "Account section", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _material.Tooltip,
+        _Tooltip2.default,
         {
           title: `${user.name}${user.email ? ` (${user.email})` : ""}`,
           placement: "right",
           arrow: true,
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _material.Avatar,
+            _Avatar2.default,
             {
               src: avatarSrc,
               alt: user.name,
@@ -1950,8 +1068,8 @@ var AccountSection = _react2.default.memo(({
           )
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: "Logout", placement: "right", arrow: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _material.IconButton,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Tooltip2.default, { title: "Logout", placement: "right", arrow: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _IconButton2.default,
         {
           onClick: onLogout,
           "aria-label": "Logout",
@@ -1970,7 +1088,7 @@ var AccountSection = _react2.default.memo(({
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AccountContainer, { layout, isCompact: false, "aria-label": "Account section", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _material.Avatar,
+      _Avatar2.default,
       {
         src: avatarSrc,
         alt: user.name,
@@ -1986,7 +1104,7 @@ var AccountSection = _react2.default.memo(({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _material.Box,
+      _Box2.default,
       {
         sx: {
           display: "flex",
@@ -1998,7 +1116,7 @@ var AccountSection = _react2.default.memo(({
         },
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _material.Typography,
+            _Typography2.default,
             {
               variant: "body2",
               sx: {
@@ -2012,7 +1130,7 @@ var AccountSection = _react2.default.memo(({
             }
           ),
           showEmail && user.email && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _material.Typography,
+            _Typography2.default,
             {
               variant: "caption",
               sx: {
@@ -2027,7 +1145,7 @@ var AccountSection = _react2.default.memo(({
             }
           ),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _material.Button,
+            _Button2.default,
             {
               onClick: onLogout,
               "aria-label": "Logout",
@@ -2087,16 +1205,14 @@ var Tab = ({
 
 // src/components/navigation/Menu.tsx
 
+var _Menu = require('@mui/material/Menu'); var _Menu2 = _interopRequireDefault(_Menu);
+var _MenuItem = require('@mui/material/MenuItem'); var _MenuItem2 = _interopRequireDefault(_MenuItem);
 
 
+var _Divider = require('@mui/material/Divider'); var _Divider2 = _interopRequireDefault(_Divider);
 
 
-
-
-
-
-
-var StyledMenu = _styles.styled.call(void 0, (0, _material.Menu))(({ theme }) => ({
+var StyledMenu = _styles.styled.call(void 0, (0, _Menu2.default))(({ theme }) => ({
   "& .MuiPaper-root": {
     borderRadius: 8,
     boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)",
@@ -2109,7 +1225,7 @@ var StyledMenu = _styles.styled.call(void 0, (0, _material.Menu))(({ theme }) =>
     }
   }
 }));
-var Menu3 = _react2.default.forwardRef(function Menu4({ anchorEl, onClose, children, ...props }, ref) {
+var Menu = _react2.default.forwardRef(function Menu2({ anchorEl, onClose, children, ...props }, ref) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     StyledMenu,
     {
@@ -2132,11 +1248,11 @@ var Menu3 = _react2.default.forwardRef(function Menu4({ anchorEl, onClose, child
 });
 var MenuItem = _react2.default.forwardRef(function MenuItem2({ icon, label, onClick, disabled = false, divider = false }, ref) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.MenuItem, { ref, onClick, disabled, children: [
-      icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemIcon, { children: icon }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemText, { children: label })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _MenuItem2.default, { ref, onClick, disabled, children: [
+      icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemIcon2.default, { children: icon }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { children: label })
     ] }),
-    divider && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, {})
+    divider && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, {})
   ] });
 });
 
@@ -2168,17 +1284,15 @@ var Pagination = ({ color = "primary", ...props }) => {
 
 
 
+var _InputAdornment = require('@mui/material/InputAdornment'); var _InputAdornment2 = _interopRequireDefault(_InputAdornment);
 
 
+var _ListItemAvatar = require('@mui/material/ListItemAvatar'); var _ListItemAvatar2 = _interopRequireDefault(_ListItemAvatar);
 
-
-
-
-
-
-
-
-
+var _CircularProgress = require('@mui/material/CircularProgress'); var _CircularProgress2 = _interopRequireDefault(_CircularProgress);
+var _KeyboardArrowDown = require('@mui/icons-material/KeyboardArrowDown'); var _KeyboardArrowDown2 = _interopRequireDefault(_KeyboardArrowDown);
+var _Search = require('@mui/icons-material/Search'); var _Search2 = _interopRequireDefault(_Search);
+var _Add = require('@mui/icons-material/Add'); var _Add2 = _interopRequireDefault(_Add);
 
 
 var Selector = ({
@@ -2213,15 +1327,15 @@ var Selector = ({
     onSelect(id);
     handleClose();
   };
-  const defaultRenderSelected = (option) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-    option.avatar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { src: option.avatar, sx: { width: 20, height: 20 } }) : option.icon ? option.icon : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { sx: { width: 20, height: 20, bgcolor: theme.palette.primary.main, fontSize: "0.7rem" }, children: option.name.charAt(0) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", children: option.name })
+  const defaultRenderSelected = (option) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+    option.avatar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Avatar2.default, { src: option.avatar, sx: { width: 20, height: 20 } }) : option.icon ? option.icon : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Avatar2.default, { sx: { width: 20, height: 20, bgcolor: theme.palette.primary.main, fontSize: "0.7rem" }, children: option.name.charAt(0) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "body2", children: option.name })
   ] });
   if (compact) {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOWWDNDF4js.IconButton, { onClick: handleOpen, size: "small", children: selectedOption ? selectedOption.avatar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { src: selectedOption.avatar, sx: { width: 32, height: 32 } }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { sx: { width: 32, height: 32, bgcolor: theme.palette.primary.main }, children: selectedOption.name.charAt(0) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { sx: { width: 32, height: 32, bgcolor: theme.palette.grey[400] }, children: "?" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOWWDNDF4js.IconButton, { onClick: handleOpen, size: "small", children: selectedOption ? selectedOption.avatar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Avatar2.default, { src: selectedOption.avatar, sx: { width: 32, height: 32 } }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Avatar2.default, { sx: { width: 32, height: 32, bgcolor: theme.palette.primary.main }, children: selectedOption.name.charAt(0) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Avatar2.default, { sx: { width: 32, height: 32, bgcolor: theme.palette.grey[400] }, children: "?" }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _material.Menu,
+        _Menu2.default,
         {
           anchorEl,
           open,
@@ -2229,8 +1343,8 @@ var Selector = ({
           PaperProps: {
             sx: { width, maxHeight: 600, mt: 1 }
           },
-          children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CircularProgress, { size: 24 }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-            options.length > 5 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 1, borderBottom: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CircularProgress2.default, { size: 24 }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            options.length > 5 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { p: 1, borderBottom: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               _chunkJBHRAAN3js.TextField,
               {
                 size: "small",
@@ -2239,28 +1353,28 @@ var Selector = ({
                 value: searchTerm,
                 onChange: (e) => setSearchTerm(e.target.value),
                 InputProps: {
-                  startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.InputAdornment, { position: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Search2.default, { fontSize: "small" }) })
+                  startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _InputAdornment2.default, { position: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Search2.default, { fontSize: "small" }) })
                 }
               }
             ) }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.List, { sx: { maxHeight: 400, overflow: "auto" }, children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _List2.default, { sx: { maxHeight: 400, overflow: "auto" }, children: [
               filteredOptions.map((option) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                _material.ListItemButton,
+                _ListItemButton2.default,
                 {
                   selected: option.id === selectedId,
                   onClick: () => handleSelect(option.id),
                   disabled: option.disabled,
                   children: [
-                    option.avatar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemAvatar, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { src: option.avatar }) }) : option.icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemAvatar, { children: option.icon }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemAvatar, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { sx: { bgcolor: theme.palette.primary.main }, children: option.name.charAt(0) }) }),
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemText, { primary: option.name, secondary: option.description })
+                    option.avatar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemAvatar2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Avatar2.default, { src: option.avatar }) }) : option.icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemAvatar2.default, { children: option.icon }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemAvatar2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Avatar2.default, { sx: { bgcolor: theme.palette.primary.main }, children: option.name.charAt(0) }) }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: option.name, secondary: option.description })
                   ]
                 },
                 option.id
               )),
-              filteredOptions.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
+              filteredOptions.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
             ] }),
-            onCreate && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 1, borderTop: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkMNM6HE72js.Button,
+            onCreate && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { p: 1, borderTop: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunkLVJSKRX3js.Button,
               {
                 fullWidth: true,
                 startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Add2.default, {}),
@@ -2277,12 +1391,12 @@ var Selector = ({
     ] });
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-      selectedOption ? renderSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkU2QHFISGjs.Link, { onClick: handleOpen, underline: "hover", children: renderSelected(selectedOption) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkU2QHFISGjs.Link, { onClick: handleOpen, underline: "hover", children: defaultRenderSelected(selectedOption) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: placeholder }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+      selectedOption ? renderSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkU2QHFISGjs.Link, { onClick: handleOpen, underline: "hover", children: renderSelected(selectedOption) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkU2QHFISGjs.Link, { onClick: handleOpen, underline: "hover", children: defaultRenderSelected(selectedOption) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "body2", color: "text.secondary", children: placeholder }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOWWDNDF4js.IconButton, { onClick: handleOpen, size: "small", sx: { p: 0.2, ml: 0.5 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KeyboardArrowDown2.default, { fontSize: "small" }) })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _material.Menu,
+      _Menu2.default,
       {
         anchorEl,
         open,
@@ -2290,8 +1404,8 @@ var Selector = ({
         PaperProps: {
           sx: { width, maxHeight: 600, mt: 1 }
         },
-        children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CircularProgress, { size: 24 }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-          options.length > 5 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 1, borderBottom: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CircularProgress2.default, { size: 24 }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          options.length > 5 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { p: 1, borderBottom: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _chunkJBHRAAN3js.TextField,
             {
               size: "small",
@@ -2300,28 +1414,28 @@ var Selector = ({
               value: searchTerm,
               onChange: (e) => setSearchTerm(e.target.value),
               InputProps: {
-                startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.InputAdornment, { position: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Search2.default, { fontSize: "small" }) })
+                startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _InputAdornment2.default, { position: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Search2.default, { fontSize: "small" }) })
               }
             }
           ) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.List, { sx: { maxHeight: 400, overflow: "auto" }, children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _List2.default, { sx: { maxHeight: 400, overflow: "auto" }, children: [
             filteredOptions.map((option) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              _material.ListItemButton,
+              _ListItemButton2.default,
               {
                 selected: option.id === selectedId,
                 onClick: () => handleSelect(option.id),
                 disabled: option.disabled,
                 children: [
-                  option.avatar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemAvatar, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { src: option.avatar }) }) : option.icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemAvatar, { children: option.icon }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemAvatar, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Avatar, { sx: { bgcolor: theme.palette.primary.main }, children: option.name.charAt(0) }) }),
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ListItemText, { primary: option.name, secondary: option.description })
+                  option.avatar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemAvatar2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Avatar2.default, { src: option.avatar }) }) : option.icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemAvatar2.default, { children: option.icon }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemAvatar2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Avatar2.default, { sx: { bgcolor: theme.palette.primary.main }, children: option.name.charAt(0) }) }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: option.name, secondary: option.description })
                 ]
               },
               option.id
             )),
-            filteredOptions.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
+            filteredOptions.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
           ] }),
-          onCreate && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { p: 1, borderTop: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkMNM6HE72js.Button,
+          onCreate && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { p: 1, borderTop: `1px solid ${theme.palette.grey[200]}` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkLVJSKRX3js.Button,
             {
               fullWidth: true,
               startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Add2.default, {}),
@@ -2360,7 +1474,5 @@ var Selector = ({
 
 
 
-
-
-exports.DropdownAnchor = DropdownAnchor; exports.Dropdown = Dropdown; exports.SidebarItem = SidebarItem; exports.Sidebar = Sidebar; exports.ServiceSelectorButton = ServiceSelectorButton; exports.WorkspaceSelectorButton = WorkspaceSelectorButton; exports.Stepper = Stepper; exports.Step = Step; exports.StepLabel = StepLabel; exports.StepContent = StepContent; exports.StepButton = StepButton; exports.NumberedStepper = NumberedStepper; exports.SideNav = SideNav; exports.SideNavHeader = SideNavHeader; exports.NavigationItem = NavigationItem; exports.NavigationList = NavigationList; exports.ConnectionStatus = ConnectionStatus; exports.AccountSection = AccountSection; exports.Tab = Tab; exports.Menu = Menu3; exports.MenuItem = MenuItem; exports.Pagination = Pagination; exports.Selector = Selector;
-//# sourceMappingURL=chunk-EOF3QNPF.js.map
+exports.DropdownAnchor = DropdownAnchor; exports.Dropdown = Dropdown; exports.SidebarItem = SidebarItem; exports.Sidebar = Sidebar; exports.Stepper = Stepper; exports.Step = Step; exports.StepLabel = StepLabel; exports.StepContent = StepContent; exports.StepButton = StepButton; exports.NumberedStepper = NumberedStepper; exports.SideNav = SideNav; exports.SideNavHeader = SideNavHeader; exports.NavigationItem = NavigationItem; exports.NavigationList = NavigationList; exports.ConnectionStatus = ConnectionStatus; exports.AccountSection = AccountSection; exports.Tab = Tab; exports.Menu = Menu; exports.MenuItem = MenuItem; exports.Pagination = Pagination; exports.Selector = Selector;
+//# sourceMappingURL=chunk-KKIKOIMP.js.map