@cere/cere-design-system 0.0.45 → 0.2.0

package/dist/chunk-KKIKOIMP.js

@@ -0,0 +1,1478 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkOWWDNDF4js = require('./chunk-OWWDNDF4.js');
+
+
+var _chunkJBHRAAN3js = require('./chunk-JBHRAAN3.js');
+
+
+var _chunkU2QHFISGjs = require('./chunk-U2QHFISG.js');
+
+
+var _chunkLVJSKRX3js = require('./chunk-LVJSKRX3.js');
+
+
+var _chunkBIZK6FUDjs = require('./chunk-BIZK6FUD.js');
+
+
+var _chunkXZZZ4MZVjs = require('./chunk-XZZZ4MZV.js');
+
+// src/components/navigation/Dropdown/Dropdown.tsx
+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 = _styles.styled.call(void 0, (0, _Button2.default))({
+  padding: 0
+});
+var Anchor = _styles.styled.call(void 0, (0, _Stack2.default))(({ 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 = _styles.styled.call(void 0, "div")(({ theme }) => ({
+  [`& .${_Avatar.avatarClasses.root}`]: {
+    width: 30,
+    height: 30,
+    borderWidth: 2,
+    borderStyle: "solid",
+    borderColor: theme.palette.background.paper
+  }
+}));
+var Center = _styles.styled.call(void 0, (0, _Typography2.default))(({ theme }) => ({
+  fontWeight: theme.typography.fontWeightBold,
+  color: theme.palette.text.primary
+}));
+var DropdownAnchor = _react.forwardRef.call(void 0, 
+  ({ open, label, leftElement, onOpen, variant, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Clickable, { ref, ...props, color: "inherit", variant: "text", onClick: onOpen, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Anchor, { variant, spacing: 1, direction: "row", alignItems: "stretch", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Left, { children: leftElement }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Center, { variant: "body1", children: label }),
+    variant !== "header" && (open ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.ArrowDropUp, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.ArrowDropDown, {}))
+  ] }) })
+);
+DropdownAnchor.displayName = "DropdownAnchor";
+
+// src/components/navigation/Dropdown/Dropdown.tsx
+
+var Dropdown = ({
+  open,
+  label,
+  leftElement,
+  direction = "left",
+  children,
+  onToggle,
+  dense = false,
+  disableGutters = false,
+  disablePaddings = false,
+  variant,
+  renderAnchor = ({ ref, open: open2, onOpen }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownAnchor, { ref, open: open2, label, leftElement, onOpen, variant })
+}) => {
+  const anchorRef = _react.useRef.call(void 0, null);
+  const horizontal = direction === "left" ? "right" : "left";
+  const onOpen = _react.useCallback.call(void 0, () => _optionalChain([onToggle, 'optionalCall', _ => _(true)]), [onToggle]);
+  const padding = dense ? 1 : 2;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    renderAnchor({ ref: anchorRef, onOpen, open }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _Popover2.default,
+      {
+        "aria-label": "Overlay",
+        open,
+        onClose: () => _optionalChain([onToggle, 'optionalCall', _2 => _2(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
+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 = _styles.styled.call(void 0, _ListItemButton2.default, {
+  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__ */ _jsxruntime.jsxs.call(void 0, StyledListItemButton, { selected, size, onClick, children: [
+    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
+  ] });
+};
+
+// src/components/navigation/Sidebar.tsx
+
+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]}`,
+    boxShadow: "none"
+  }
+}));
+var Sidebar = ({
+  open = true,
+  width = 280,
+  items,
+  onClose,
+  variant = "permanent"
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledDrawer,
+    {
+      variant,
+      open,
+      onClose,
+      sx: {
+        width,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width,
+          boxSizing: "border-box"
+        }
+      },
+      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, _Stepper2.default, { ...props });
+};
+var Step = (props) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Step2.default, { ...props });
+};
+var StepLabel = (props) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _StepLabel2.default, { ...props });
+};
+var StepContent = (props) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _StepContent2.default, { ...props });
+};
+var StepButton = (props) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _StepButton2.default, { ...props });
+};
+
+// src/components/navigation/NumberedStepper.tsx
+
+
+
+var Root = _styles.styled.call(void 0, "ol")({
+  listStyle: "none",
+  padding: 0,
+  margin: 0,
+  display: "flex",
+  flexDirection: "column",
+  gap: 8
+});
+var Row = _styles.styled.call(void 0, "li")({
+  display: "flex",
+  gap: 10,
+  alignItems: "center"
+});
+var Num = _styles.styled.call(void 0, "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 ${_chunkXZZZ4MZVjs.webSurfaceTokens.strokeOnMed}`,
+  background: _chunkXZZZ4MZVjs.webSurfaceTokens.surfaceContrast,
+  color: _chunkXZZZ4MZVjs.webSurfaceTokens.textSecondary,
+  ...state === "active" && {
+    background: _chunkXZZZ4MZVjs.webSurfaceTokens.cVioletLight,
+    borderColor: _chunkXZZZ4MZVjs.webSurfaceTokens.cViolet,
+    color: _chunkXZZZ4MZVjs.webSurfaceTokens.cVioletDark
+  },
+  ...state === "done" && {
+    background: _chunkXZZZ4MZVjs.webSurfaceTokens.cViolet,
+    borderColor: _chunkXZZZ4MZVjs.webSurfaceTokens.cViolet,
+    color: "white"
+  }
+}));
+var Label = _styles.styled.call(void 0, "span", {
+  shouldForwardProp: (p) => p !== "active"
+})(({ active }) => ({
+  fontSize: 13,
+  color: active ? _chunkXZZZ4MZVjs.webSurfaceTokens.textPrimary : _chunkXZZZ4MZVjs.webSurfaceTokens.textSecondary,
+  fontWeight: active ? 500 : 400
+}));
+var NumberedStepper = _react2.default.forwardRef(
+  function NumberedStepper2({ steps, current, className }, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ref, className, children: steps.map((s, i) => {
+      const state = i < current ? "done" : i === current ? "active" : "pending";
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Row, { ...state === "active" ? { "aria-current": "step" } : {}, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Num, { state, children: state === "done" ? "\u2713" : i + 1 }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label, { active: state === "active", children: s.label })
+      ] }, s.key);
+    }) });
+  }
+);
+
+// src/components/navigation/SideNav/SideNav.tsx
+
+
+
+
+// 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
+
+var SideNavContext = _react2.default.createContext({
+  collapsed: false,
+  showTooltips: true
+});
+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,
+  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 = _styles.styled.call(void 0, (0, _Box2.default))(({ theme }) => ({
+  flexShrink: 0,
+  backgroundColor: theme.palette.background.paper
+}));
+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, _Box2.default))(({ theme }) => ({
+  flexShrink: 0,
+  backgroundColor: theme.palette.background.paper
+}));
+var Header = _react2.default.memo(({ children, className }) => {
+  const { collapsed, onToggleCollapse } = _react2.default.useContext(SideNavContext);
+  const enhancedChildren = _react2.default.Children.map(children, (child) => {
+    if (_react2.default.isValidElement(child)) {
+      return _react2.default.cloneElement(child, {
+        collapsed,
+        onCollapse: onToggleCollapse
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HeaderSection, { className, "data-testid": "sidenav-header", children: enhancedChildren });
+});
+Header.displayName = "SideNav.Header";
+var Navigation = _react2.default.memo(({ children, className }) => {
+  const { collapsed, showTooltips } = _react2.default.useContext(SideNavContext);
+  const enhancedChildren = _react2.default.Children.map(children, (child) => {
+    if (_react2.default.isValidElement(child)) {
+      return _react2.default.cloneElement(child, {
+        collapsed,
+        showTooltips
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NavigationSection, { className, "data-testid": "sidenav-navigation", children: enhancedChildren });
+});
+Navigation.displayName = "SideNav.Navigation";
+var Footer = _react2.default.memo(({ children, className }) => {
+  const { collapsed } = _react2.default.useContext(SideNavContext);
+  const enhancedChildren = _react2.default.Children.map(children, (child) => {
+    if (_react2.default.isValidElement(child)) {
+      return _react2.default.cloneElement(child, {
+        compact: collapsed
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FooterSection, { className, "data-testid": "sidenav-footer", children: enhancedChildren });
+});
+Footer.displayName = "SideNav.Footer";
+var SideNav = Object.assign(
+  _react2.default.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] = _react.useState.call(void 0, defaultCollapsed);
+    const isControlled = controlledCollapsed !== void 0;
+    const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+    const handleToggleCollapse = _react.useCallback.call(void 0, () => {
+      const newCollapsed = !collapsed;
+      if (!isControlled) {
+        setInternalCollapsed(newCollapsed);
+      }
+      if (onCollapseChange) {
+        onCollapseChange(newCollapsed);
+      }
+    }, [collapsed, isControlled, onCollapseChange]);
+    const contextValue = {
+      collapsed,
+      showTooltips,
+      onToggleCollapse: handleToggleCollapse
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SideNavContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      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
+
+
+
+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, _Box2.default, {
+  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 = _styles.styled.call(void 0, (0, _ButtonBase2.default))(({ 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 = _react2.default.memo(({
+  logo,
+  title,
+  showCollapseButton = true,
+  onCollapse,
+  onLogoClick,
+  ariaLabel,
+  collapsed = false
+}) => {
+  const headerAriaLabel = ariaLabel || `${title} navigation header`;
+  const brandingContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    logo && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _Box2.default,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0
+        },
+        children: logo
+      }
+    ),
+    !collapsed && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _Typography2.default,
+      {
+        variant: "subtitle1",
+        sx: {
+          fontWeight: 700,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          minWidth: 0
+        },
+        children: title
+      }
+    )
+  ] });
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    HeaderContainer,
+    {
+      "data-testid": "sidenav-header-content",
+      "aria-label": headerAriaLabel,
+      isCollapsed: collapsed,
+      children: [
+        onLogoClick ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          BrandingButton,
+          {
+            onClick: onLogoClick,
+            "aria-label": `Go to ${title} home`,
+            "data-testid": "sidenav-home-link",
+            children: brandingContent
+          }
+        ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _Box2.default,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1.5,
+              minWidth: 0
+            },
+            children: brandingContent
+          }
+        ),
+        showCollapseButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _Tooltip2.default,
+          {
+            title: collapsed ? "Expand navigation" : "Collapse navigation",
+            placement: "right",
+            arrow: true,
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _IconButton2.default,
+              {
+                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__ */ _jsxruntime.jsx.call(void 0, _ChevronRight2.default, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ChevronLeft2.default, {})
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+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
+
+
+
+
+
+
+
+
+var StyledListItemButton2 = _styles.styled.call(void 0, _ListItemButton2.default, {
+  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 = _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,
+    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__ */ _jsxruntime.jsx.call(void 0, 
+      _ListItemIcon2.default,
+      {
+        sx: {
+          fontSize: 24,
+          width: 24,
+          height: 24,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: icon
+      }
+    );
+    const labelElement = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _ListItemText2.default,
+      {
+        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__ */ _jsxruntime.jsxs.call(void 0, 
+      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__ */ _jsxruntime.jsx.call(void 0, 
+            _Box2.default,
+            {
+              sx: {
+                marginLeft: "auto",
+                display: "flex",
+                alignItems: "center"
+              },
+              children: endContent
+            }
+          )
+        ]
+      }
+    );
+    if (collapsed && showTooltip) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _Tooltip2.default,
+        {
+          title: label,
+          placement: tooltipPlacement,
+          enterDelay: 200,
+          leaveDelay: 0,
+          arrow: true,
+          children: buttonContent
+        }
+      );
+    }
+    return buttonContent;
+  })
+);
+NavigationItem.displayName = "NavigationItem";
+
+// src/components/navigation/SideNav/NavigationList.tsx
+
+var NavigationList = _react2.default.memo(({
+  items,
+  selectedId,
+  onSelectionChange,
+  maxHeight = "auto",
+  ariaLabel = "Navigation menu",
+  collapsed = false,
+  showTooltips = true
+}) => {
+  const [internalSelectedId, setInternalSelectedId] = _react.useState.call(void 0, 
+    selectedId
+  );
+  const isControlled = selectedId !== void 0;
+  const currentSelectedId = isControlled ? selectedId : internalSelectedId;
+  const handleItemClick = (id) => {
+    if (!isControlled) {
+      setInternalSelectedId(id);
+    }
+    if (onSelectionChange) {
+      onSelectionChange(id);
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _List2.default,
+    {
+      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__ */ _jsxruntime.jsx.call(void 0, 
+          _ListItem2.default,
+          {
+            role: "listitem",
+            sx: {
+              padding: 0,
+              display: "block"
+            },
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              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
+
+
+
+
+
+var _Power = require('@mui/icons-material/Power'); var _Power2 = _interopRequireDefault(_Power);
+
+var StatusPill = _styles.styled.call(void 0, _Box2.default, {
+  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 = _react2.default.memo(({
+  status,
+  variant = "info",
+  icon,
+  onClick,
+  compact = false,
+  compactText
+}) => {
+  const interactive = !!onClick;
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  };
+  const statusContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    StatusPill,
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "aria-label": compact ? status : void 0,
+      variant,
+      interactive,
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _Box2.default,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              fontSize: 16,
+              color: "inherit"
+            },
+            children: icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Power2.default, { fontSize: "small" })
+          }
+        ),
+        /* @__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, 
+      _Box2.default,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          padding: 1
+        },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Tooltip2.default, { title: status, placement: "right", arrow: true, children: statusContent })
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _Box2.default,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        padding: 1
+      },
+      children: statusContent
+    }
+  );
+});
+ConnectionStatus.displayName = "ConnectionStatus";
+
+// src/components/navigation/SideNav/AccountSection.tsx
+
+
+
+
+
+
+
+
+var _Logout = require('@mui/icons-material/Logout'); var _Logout2 = _interopRequireDefault(_Logout);
+
+var AccountContainer = _styles.styled.call(void 0, _Box2.default, {
+  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 = _react2.default.memo(({
+  user,
+  onLogout,
+  showEmail = false,
+  layout = "horizontal",
+  compact = false
+}) => {
+  const initials = user.initials || deriveInitials(user.name);
+  const avatarSrc = user.avatarUrl;
+  if (compact) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AccountContainer, { layout, isCompact: true, "aria-label": "Account section", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _Tooltip2.default,
+        {
+          title: `${user.name}${user.email ? ` (${user.email})` : ""}`,
+          placement: "right",
+          arrow: true,
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _Avatar2.default,
+            {
+              src: avatarSrc,
+              alt: user.name,
+              sx: {
+                width: 40,
+                height: 40,
+                backgroundColor: "primary.main",
+                fontSize: 16,
+                fontWeight: 600,
+                flexShrink: 0,
+                cursor: "default"
+              },
+              children: initials
+            }
+          )
+        }
+      ),
+      /* @__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",
+          size: "small",
+          sx: {
+            color: "text.secondary",
+            "&:hover": {
+              backgroundColor: "action.hover",
+              color: "text.primary"
+            }
+          },
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Logout2.default, { fontSize: "small" })
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AccountContainer, { layout, isCompact: false, "aria-label": "Account section", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _Avatar2.default,
+      {
+        src: avatarSrc,
+        alt: user.name,
+        sx: {
+          width: 40,
+          height: 40,
+          backgroundColor: "primary.main",
+          fontSize: 16,
+          fontWeight: 600,
+          flexShrink: 0
+        },
+        children: initials
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _Box2.default,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 0.5,
+          flexGrow: 1,
+          minWidth: 0
+          // Allow text truncation
+        },
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _Typography2.default,
+            {
+              variant: "body2",
+              sx: {
+                fontWeight: 600,
+                lineHeight: 1.5,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: user.name
+            }
+          ),
+          showEmail && user.email && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _Typography2.default,
+            {
+              variant: "caption",
+              sx: {
+                color: "text.secondary",
+                lineHeight: 1.5,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                display: "block"
+              },
+              children: user.email
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _Button2.default,
+            {
+              onClick: onLogout,
+              "aria-label": "Logout",
+              startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Logout2.default, { 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
+var _Tab = require('@mui/material/Tab'); var _Tab2 = _interopRequireDefault(_Tab);
+
+
+var StyledTab = _styles.styled.call(void 0, (0, _Tab2.default))(({ 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__ */ _jsxruntime.jsx.call(void 0, _chunkBIZK6FUDjs.Badge, { variant: badgeVariant, badgeContent: badge, children: label }) : label;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTab, { label: tabLabel, ...props });
+};
+
+// 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, _Menu2.default))(({ theme }) => ({
+  "& .MuiPaper-root": {
+    borderRadius: 8,
+    boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)",
+    minWidth: 200
+  },
+  "& .MuiMenuItem-root": {
+    padding: "8px 16px",
+    "&:hover": {
+      backgroundColor: theme.palette.background.selected
+    }
+  }
+}));
+var Menu = _react2.default.forwardRef(function Menu2({ anchorEl, onClose, children, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledMenu,
+    {
+      ref,
+      anchorEl,
+      open: Boolean(anchorEl),
+      onClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      ...props,
+      children
+    }
+  );
+});
+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, _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, _Divider2.default, {})
+  ] });
+});
+
+// src/components/navigation/Pagination.tsx
+var _Pagination = require('@mui/material/Pagination'); var _Pagination2 = _interopRequireDefault(_Pagination);
+
+
+var StyledPagination = _styles.styled.call(void 0, (0, _Pagination2.default))(({ 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__ */ _jsxruntime.jsx.call(void 0, StyledPagination, { color, ...props });
+};
+
+// src/components/navigation/Selector.tsx
+
+
+
+
+
+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 = ({
+  options,
+  selectedId,
+  onSelect,
+  onCreate,
+  loading = false,
+  placeholder = "Select...",
+  emptyMessage = "No items found",
+  compact = false,
+  renderSelected,
+  width = 350
+}) => {
+  const theme = _styles.useTheme.call(void 0, );
+  const [anchorEl, setAnchorEl] = _react.useState.call(void 0, null);
+  const [searchTerm, setSearchTerm] = _react.useState.call(void 0, "");
+  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__ */ _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, _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, 
+        _Menu2.default,
+        {
+          anchorEl,
+          open,
+          onClose: handleClose,
+          PaperProps: {
+            sx: { width, maxHeight: 600, mt: 1 }
+          },
+          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",
+                fullWidth: true,
+                placeholder: "Search...",
+                value: searchTerm,
+                onChange: (e) => setSearchTerm(e.target.value),
+                InputProps: {
+                  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, _List2.default, { sx: { maxHeight: 400, overflow: "auto" }, children: [
+              filteredOptions.map((option) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                _ListItemButton2.default,
+                {
+                  selected: option.id === selectedId,
+                  onClick: () => handleSelect(option.id),
+                  disabled: option.disabled,
+                  children: [
+                    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, _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, _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, {}),
+                onClick: () => {
+                  onCreate();
+                  handleClose();
+                },
+                children: "Create New"
+              }
+            ) })
+          ] })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__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, 
+      _Menu2.default,
+      {
+        anchorEl,
+        open,
+        onClose: handleClose,
+        PaperProps: {
+          sx: { width, maxHeight: 600, mt: 1 }
+        },
+        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",
+              fullWidth: true,
+              placeholder: "Search...",
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              InputProps: {
+                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, _List2.default, { sx: { maxHeight: 400, overflow: "auto" }, children: [
+            filteredOptions.map((option) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              _ListItemButton2.default,
+              {
+                selected: option.id === selectedId,
+                onClick: () => handleSelect(option.id),
+                disabled: option.disabled,
+                children: [
+                  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, _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, _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, {}),
+              onClick: () => {
+                onCreate();
+                handleClose();
+              },
+              children: "Create New"
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+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