@cere/cere-design-system 0.0.2

package/dist/index.js

@@ -0,0 +1,3194 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Accordion: () => Accordion,
+  Alert: () => Alert,
+  AppBar: () => AppBar,
+  AppLoading: () => AppLoading,
+  Avatar: () => Avatar4,
+  Background: () => import_reactflow2.Background,
+  BackgroundVariant: () => import_reactflow2.BackgroundVariant,
+  Badge: () => Badge,
+  Box: () => import_material19.Box,
+  Breadcrumbs: () => Breadcrumbs,
+  Button: () => Button,
+  ButtonGroup: () => ButtonGroup,
+  Card: () => Card,
+  CardActions: () => CardActions,
+  CardContent: () => CardContent,
+  CardHeader: () => CardHeader,
+  Checkbox: () => Checkbox,
+  Chip: () => Chip2,
+  CircularProgress: () => CircularProgress6,
+  CodeEditor: () => CodeEditor,
+  Collapse: () => Collapse,
+  ConnectionLineType: () => import_reactflow2.ConnectionLineType,
+  Container: () => import_material21.Container,
+  Controls: () => import_reactflow2.Controls,
+  Dialog: () => Dialog,
+  Divider: () => Divider3,
+  Drawer: () => Drawer2,
+  Dropdown: () => Dropdown,
+  EmptyState: () => EmptyState,
+  FlowEditor: () => FlowEditor,
+  FormControl: () => import_material2.FormControl,
+  FormControlLabel: () => import_material2.FormControlLabel,
+  FormHelperText: () => import_material2.FormHelperText,
+  FormLabel: () => import_material2.FormLabel,
+  Grid: () => import_material16.Grid,
+  IconButton: () => IconButton,
+  InputAdornment: () => import_material2.InputAdornment,
+  InputLabel: () => import_material2.InputLabel,
+  Link: () => Link3,
+  List: () => List5,
+  ListItem: () => ListItem3,
+  ListItemIcon: () => import_material14.ListItemIcon,
+  ListItemSecondaryAction: () => import_material14.ListItemSecondaryAction,
+  ListItemText: () => import_material14.ListItemText,
+  Loading: () => Loading,
+  LoadingButton: () => LoadingButton,
+  Menu: () => Menu3,
+  MenuItem: () => MenuItem2,
+  MiniMap: () => import_reactflow2.MiniMap,
+  Pagination: () => Pagination,
+  Panel: () => import_reactflow3.Panel,
+  Paper: () => Paper,
+  Progress: () => Progress,
+  Radio: () => Radio,
+  RadioGroup: () => import_RadioGroup.default,
+  SearchField: () => SearchField,
+  Selector: () => Selector,
+  ServiceSelectorButton: () => ServiceSelectorButton,
+  Sidebar: () => Sidebar,
+  SidebarItem: () => SidebarItem,
+  Snackbar: () => Snackbar,
+  Stack: () => import_material18.Stack,
+  Step: () => Step,
+  StepButton: () => StepButton,
+  StepContent: () => StepContent,
+  StepLabel: () => StepLabel,
+  Stepper: () => Stepper,
+  Switch: () => Switch,
+  Tab: () => Tab,
+  Table: () => Table,
+  TableHeader: () => TableHeader,
+  TextField: () => TextField,
+  ToggleButton: () => ToggleButton,
+  ToggleButtonGroup: () => ToggleButtonGroup,
+  Toolbar: () => import_material22.Toolbar,
+  Tooltip: () => Tooltip2,
+  Typography: () => import_material20.Typography,
+  WorkspaceSelectorButton: () => WorkspaceSelectorButton,
+  colors: () => colors,
+  theme: () => theme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/theme/index.ts
+var import_styles = require("@mui/material/styles");
+var colors = {
+  primary: {
+    main: "#1976d2",
+    // ROB primary color
+    light: "#1976d2",
+    // Same as main for selected background
+    dark: "#1565c0",
+    contrastText: "#FFFFFF"
+  },
+  secondary: {
+    main: "#666666",
+    light: "#999999",
+    dark: "#333333",
+    contrastText: "#FFFFFF"
+  },
+  success: {
+    main: "#10B981",
+    light: "#34D399",
+    dark: "#059669",
+    contrastText: "#FFFFFF"
+  },
+  error: {
+    main: "#EF4444",
+    light: "#F87171",
+    dark: "#DC2626",
+    contrastText: "#FFFFFF"
+  },
+  warning: {
+    main: "#F59E0B",
+    light: "#FBBF24",
+    dark: "#D97706",
+    contrastText: "#FFFFFF"
+  },
+  tertiary: {
+    main: "#F59E0B",
+    light: "#FBBF24",
+    dark: "#D97706",
+    contrastText: "#1A1A1A"
+  },
+  grey: {
+    50: "#FAFAFA",
+    100: "#F5F5F5",
+    200: "#EEEEEE",
+    300: "#E0E0E0",
+    400: "#BDBDBD",
+    500: "#9E9E9E",
+    600: "#757575",
+    700: "#616161",
+    800: "#424242",
+    900: "#212121"
+  },
+  text: {
+    primary: "#1A1A1A",
+    secondary: "#666666",
+    disabled: "#999999"
+  },
+  background: {
+    default: "#FFFFFF",
+    paper: "#FFFFFF",
+    selected: "rgba(123, 44, 191, 0.1)"
+  }
+};
+var theme = (0, import_styles.createTheme)({
+  palette: {
+    mode: "light",
+    primary: colors.primary,
+    secondary: colors.secondary,
+    success: colors.success,
+    error: colors.error,
+    warning: colors.warning,
+    grey: colors.grey,
+    text: colors.text,
+    background: colors.background
+  },
+  typography: {
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Human Sans', 'Nohemi', sans-serif",
+    h1: {
+      fontWeight: 700,
+      fontSize: "96px",
+      lineHeight: 1.2
+    },
+    h2: {
+      fontWeight: 700,
+      fontSize: "60px",
+      lineHeight: 1.2
+    },
+    h3: {
+      fontWeight: 700,
+      fontSize: "48px",
+      lineHeight: 1.2
+    },
+    h4: {
+      fontWeight: 600,
+      fontSize: "34px",
+      lineHeight: 1.2
+    },
+    h5: {
+      fontWeight: 600,
+      fontSize: "24px",
+      lineHeight: 1.2
+    },
+    h6: {
+      fontWeight: 600,
+      fontSize: "20px",
+      lineHeight: 1.2
+    },
+    subtitle1: {
+      fontWeight: 700,
+      fontSize: "16px",
+      lineHeight: 1.5
+    },
+    subtitle2: {
+      fontWeight: 700,
+      fontSize: "14px",
+      lineHeight: 1.5
+    },
+    body1: {
+      fontWeight: 400,
+      fontSize: "16px",
+      lineHeight: 1.5
+    },
+    body2: {
+      fontWeight: 400,
+      fontSize: "14px",
+      lineHeight: 1.5
+    },
+    button: {
+      fontWeight: 700,
+      fontSize: "14px",
+      textTransform: "uppercase",
+      letterSpacing: "0.5px"
+    },
+    caption: {
+      fontWeight: 400,
+      fontSize: "12px",
+      lineHeight: 1.5
+    },
+    overline: {
+      fontWeight: 800,
+      fontSize: "10px",
+      textTransform: "uppercase",
+      letterSpacing: "1px"
+    }
+  },
+  shape: {
+    borderRadius: 16
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: "none",
+          borderRadius: 12,
+          fontWeight: 600,
+          padding: "8px 24px",
+          boxShadow: "none",
+          "&:hover": {
+            boxShadow: "none"
+          }
+        },
+        sizeSmall: {
+          padding: "4px 12px",
+          fontSize: "12px"
+        },
+        sizeMedium: {
+          padding: "8px 24px",
+          fontSize: "14px"
+        },
+        sizeLarge: {
+          padding: "12px 24px",
+          fontSize: "16px"
+        }
+      }
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          "& .MuiOutlinedInput-root": {
+            borderRadius: 12
+          }
+        }
+      }
+    },
+    MuiSelect: {
+      styleOverrides: {
+        root: {
+          borderRadius: 12
+        }
+      }
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: 16,
+          fontWeight: 500
+        }
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.05)",
+          border: "1px solid rgba(0, 0, 0, 0.05)"
+        }
+      }
+    },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          borderRight: "1px solid rgba(0, 0, 0, 0.05)"
+        }
+      }
+    },
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8
+        },
+        filled: {
+          borderRadius: 8
+        }
+      }
+    }
+  }
+});
+
+// src/components/buttons/Button.tsx
+var import_Button = __toESM(require("@mui/material/Button"));
+var import_styles2 = require("@mui/material/styles");
+var import_jsx_runtime = require("react/jsx-runtime");
+var StyledPrimaryButton = (0, import_styles2.styled)(import_Button.default)(() => ({
+  backgroundColor: colors.primary.main,
+  color: colors.primary.contrastText,
+  "&:hover": {
+    backgroundColor: colors.primary.light
+  },
+  "&:active": {
+    backgroundColor: colors.primary.dark
+  },
+  "&:disabled": {
+    backgroundColor: colors.grey[300],
+    color: colors.grey[500]
+  }
+}));
+var StyledSecondaryButton = (0, import_styles2.styled)(import_Button.default)(() => ({
+  backgroundColor: "transparent",
+  color: colors.primary.main,
+  border: `1px solid ${colors.primary.main}`,
+  "&:hover": {
+    backgroundColor: colors.background.selected,
+    borderColor: colors.primary.light
+  },
+  "&:active": {
+    backgroundColor: colors.background.selected,
+    borderColor: colors.primary.dark
+  },
+  "&:disabled": {
+    borderColor: colors.grey[300],
+    color: colors.grey[500]
+  }
+}));
+var StyledTertiaryButton = (0, import_styles2.styled)(import_Button.default)(() => ({
+  backgroundColor: "transparent",
+  color: colors.tertiary.main,
+  "&:hover": {
+    backgroundColor: "rgba(245, 158, 11, 0.1)"
+  },
+  "&:active": {
+    backgroundColor: "rgba(245, 158, 11, 0.2)"
+  },
+  "&:disabled": {
+    color: colors.grey[500]
+  }
+}));
+var Button = ({
+  variant = "primary",
+  children,
+  startIcon,
+  endIcon,
+  ...props
+}) => {
+  const buttonProps = {
+    ...props,
+    startIcon,
+    endIcon
+  };
+  switch (variant) {
+    case "primary":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledPrimaryButton, { ...buttonProps, children });
+    case "secondary":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSecondaryButton, { ...buttonProps, children });
+    case "tertiary":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTertiaryButton, { ...buttonProps, children });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledPrimaryButton, { ...buttonProps, children });
+  }
+};
+
+// src/components/buttons/IconButton.tsx
+var import_IconButton = __toESM(require("@mui/material/IconButton"));
+var import_styles3 = require("@mui/material/styles");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var StyledIconButton = (0, import_styles3.styled)(import_IconButton.default, {
+  shouldForwardProp: (prop) => prop !== "buttonVariant"
+})(({ buttonVariant = "default" }) => {
+  const variants = {
+    primary: {
+      color: colors.primary.main,
+      "&:hover": {
+        backgroundColor: colors.background.selected
+      }
+    },
+    secondary: {
+      color: colors.text.secondary,
+      "&:hover": {
+        backgroundColor: colors.grey[50]
+      }
+    },
+    default: {
+      color: colors.text.primary,
+      "&:hover": {
+        backgroundColor: colors.grey[50]
+      }
+    }
+  };
+  return variants[buttonVariant] || variants.default;
+});
+var IconButton = ({
+  variant = "default",
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledIconButton, { buttonVariant: variant, ...props });
+};
+
+// src/components/buttons/LoadingButton.tsx
+var import_lab = require("@mui/lab");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var LoadingButton = ({
+  loading = false,
+  loadingPosition = "center",
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_lab.LoadingButton,
+    {
+      loading,
+      loadingPosition,
+      ...props
+    }
+  );
+};
+
+// src/components/buttons/ButtonGroup.tsx
+var import_material = require("@mui/material");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ButtonGroup = ({
+  orientation = "horizontal",
+  size = "medium",
+  variant = "outlined",
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_material.ButtonGroup,
+    {
+      orientation,
+      size,
+      variant,
+      ...props
+    }
+  );
+};
+
+// src/components/inputs/TextField.tsx
+var import_TextField = __toESM(require("@mui/material/TextField"));
+var import_styles4 = require("@mui/material/styles");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var StyledTextField = (0, import_styles4.styled)(import_TextField.default)(({ error }) => ({
+  "& .MuiOutlinedInput-root": {
+    "&:hover fieldset": {
+      borderColor: error ? colors.error.main : colors.primary.main
+    },
+    "&.Mui-focused fieldset": {
+      borderColor: error ? colors.error.main : colors.primary.main
+    },
+    "&.Mui-error fieldset": {
+      borderColor: colors.error.main
+    }
+  },
+  "& .MuiInputLabel-root": {
+    "&.Mui-focused": {
+      color: error ? colors.error.main : colors.primary.main
+    }
+  }
+}));
+var TextField = ({
+  size = "medium",
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledTextField, { size: size === "medium" ? "medium" : "small", ...props });
+};
+
+// src/components/inputs/SearchField.tsx
+var import_Search = __toESM(require("@mui/icons-material/Search"));
+var import_InputAdornment = __toESM(require("@mui/material/InputAdornment"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SearchField = ({
+  placeholder = "Search...",
+  onSearch,
+  onChange,
+  ...props
+}) => {
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(e);
+    }
+    if (onSearch) {
+      onSearch(e.target.value);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    TextField,
+    {
+      placeholder,
+      onChange: handleChange,
+      InputProps: {
+        startAdornment: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_InputAdornment.default, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Search.default, { style: { fontSize: 18, color: "#999" } }) })
+      },
+      ...props
+    }
+  );
+};
+
+// src/components/inputs/FormControl.tsx
+var import_material2 = require("@mui/material");
+
+// src/components/inputs/Dropdown.tsx
+var import_material3 = require("@mui/material");
+var import_styles5 = require("@mui/material/styles");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var StyledFormControl = (0, import_styles5.styled)(import_material3.FormControl)({
+  minWidth: 120
+});
+var StyledSelect = (0, import_styles5.styled)(import_material3.Select)(({ error }) => ({
+  "&:hover .MuiOutlinedInput-notchedOutline": {
+    borderColor: error ? colors.error.main : colors.primary.main
+  },
+  "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+    borderColor: error ? colors.error.main : colors.primary.main
+  }
+}));
+var Dropdown = ({
+  label,
+  options,
+  size = "medium",
+  placeholder,
+  value,
+  ...props
+}) => {
+  const selectSize = size === "large" ? "medium" : size;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(StyledFormControl, { size: selectSize, error: props.error, fullWidth: props.fullWidth, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material3.InputLabel, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      StyledSelect,
+      {
+        value: value || "",
+        label,
+        size: selectSize,
+        ...props,
+        children: [
+          placeholder && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material3.MenuItem, { value: "", disabled: true, children: placeholder }),
+          options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material3.MenuItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/inputs/ToggleButton.tsx
+var import_material4 = require("@mui/material");
+var import_styles6 = require("@mui/material/styles");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ToggleButton = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material4.ToggleButton, { ...props });
+};
+var StyledToggleButtonGroup = (0, import_styles6.styled)(import_material4.ToggleButtonGroup)({
+  "& .MuiToggleButton-root": {
+    border: `1px solid ${colors.grey[300]}`,
+    "&.Mui-selected": {
+      backgroundColor: colors.primary.main,
+      color: colors.primary.contrastText,
+      "&:hover": {
+        backgroundColor: colors.primary.light
+      }
+    },
+    "&:hover": {
+      backgroundColor: colors.grey[50]
+    }
+  }
+});
+var ToggleButtonGroup = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledToggleButtonGroup, { ...props });
+};
+
+// src/components/inputs/Switch.tsx
+var import_Switch = __toESM(require("@mui/material/Switch"));
+var import_styles7 = require("@mui/material/styles");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var StyledSwitch = (0, import_styles7.styled)(import_Switch.default)(({ theme: theme2 }) => ({
+  width: 44,
+  height: 24,
+  padding: 0,
+  "& .MuiSwitch-switchBase": {
+    padding: 0,
+    margin: 2,
+    transitionDuration: "300ms",
+    "&.Mui-checked": {
+      transform: "translateX(20px)",
+      color: "#fff",
+      "& + .MuiSwitch-track": {
+        backgroundColor: colors.success.main,
+        opacity: 1,
+        border: 0
+      },
+      "&.Mui-disabled + .MuiSwitch-track": {
+        opacity: 0.5
+      }
+    },
+    "&.Mui-focusVisible .MuiSwitch-thumb": {
+      color: colors.success.main,
+      border: `6px solid #fff`
+    },
+    "&.Mui-disabled .MuiSwitch-thumb": {
+      color: colors.grey[300]
+    },
+    "&.Mui-disabled + .MuiSwitch-track": {
+      opacity: 0.5,
+      backgroundColor: colors.grey[300]
+    }
+  },
+  "& .MuiSwitch-thumb": {
+    boxSizing: "border-box",
+    width: 20,
+    height: 20
+  },
+  "& .MuiSwitch-track": {
+    borderRadius: 24 / 2,
+    backgroundColor: colors.grey[300],
+    opacity: 1,
+    transition: theme2.transitions.create(["background-color"], {
+      duration: 500
+    })
+  }
+}));
+var Switch = ({
+  label,
+  labelPosition = "right",
+  ...props
+}) => {
+  const switchComponent = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledSwitch, { ...props });
+  if (!label) {
+    return switchComponent;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    labelPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: label }),
+    switchComponent,
+    labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: label })
+  ] });
+};
+
+// src/components/inputs/Checkbox.tsx
+var import_Checkbox = __toESM(require("@mui/material/Checkbox"));
+var import_styles8 = require("@mui/material/styles");
+var import_FormControlLabel = __toESM(require("@mui/material/FormControlLabel"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var StyledCheckbox = (0, import_styles8.styled)(import_Checkbox.default)(() => ({
+  color: colors.grey[400],
+  "&.Mui-checked": {
+    color: colors.primary.main
+  },
+  "&.MuiCheckbox-indeterminate": {
+    color: colors.primary.main
+  },
+  "&.Mui-disabled": {
+    color: colors.grey[300]
+  },
+  "&:hover": {
+    backgroundColor: colors.background.selected
+  },
+  "&.Mui-focusVisible": {
+    outline: `2px solid ${colors.primary.main}`,
+    outlineOffset: 2
+  }
+}));
+var Checkbox = ({
+  label,
+  labelPosition = "right",
+  ...props
+}) => {
+  const checkboxComponent = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledCheckbox, { ...props });
+  if (!label) {
+    return checkboxComponent;
+  }
+  const labelPlacementMap = {
+    left: "start",
+    right: "end"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_FormControlLabel.default,
+    {
+      control: checkboxComponent,
+      label,
+      labelPlacement: labelPlacementMap[labelPosition] || "end"
+    }
+  );
+};
+
+// src/components/inputs/Radio.tsx
+var import_Radio = __toESM(require("@mui/material/Radio"));
+var import_styles9 = require("@mui/material/styles");
+var import_FormControlLabel2 = __toESM(require("@mui/material/FormControlLabel"));
+var import_RadioGroup = __toESM(require("@mui/material/RadioGroup"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var StyledRadio = (0, import_styles9.styled)(import_Radio.default)(() => ({
+  color: colors.grey[400],
+  "&.Mui-checked": {
+    color: colors.primary.main
+  },
+  "&.Mui-disabled": {
+    color: colors.grey[300]
+  },
+  "&:hover": {
+    backgroundColor: colors.background.selected
+  },
+  "&.Mui-focusVisible": {
+    outline: `2px solid ${colors.primary.main}`,
+    outlineOffset: 2
+  }
+}));
+var Radio = ({
+  label,
+  labelPosition = "right",
+  ...props
+}) => {
+  const radioComponent = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledRadio, { ...props });
+  if (!label) {
+    return radioComponent;
+  }
+  const labelPlacementMap = {
+    left: "start",
+    right: "end"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_FormControlLabel2.default,
+    {
+      control: radioComponent,
+      label,
+      labelPlacement: labelPlacementMap[labelPosition] || "end"
+    }
+  );
+};
+
+// src/components/navigation/Sidebar.tsx
+var import_material6 = require("@mui/material");
+
+// src/components/navigation/SidebarItem.tsx
+var import_material5 = require("@mui/material");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var StyledListItemButton = (0, import_material5.styled)(import_material5.ListItemButton, {
+  shouldForwardProp: (prop) => prop !== "selected" && prop !== "size"
+})(({ 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 ? colors.primary.main : colors.text.primary,
+    backgroundColor: selected ? colors.background.selected : "transparent",
+    "&:hover": {
+      backgroundColor: selected ? colors.background.selected : colors.grey[50]
+    },
+    "& .MuiListItemIcon-root": {
+      color: selected ? colors.primary.main : colors.text.secondary,
+      minWidth: "40px"
+    },
+    "& .MuiListItemText-primary": {
+      fontWeight: selected ? 600 : 400,
+      color: selected ? colors.primary.main : colors.text.primary
+    }
+  };
+});
+var SidebarItem = ({
+  label,
+  icon,
+  selected = false,
+  onClick,
+  size = "medium",
+  endIcon,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(StyledListItemButton, { selected, size, onClick, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material5.ListItemIcon, { children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material5.ListItemText, { primary: label }),
+    endIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { marginLeft: "auto" }, children: endIcon }),
+    children
+  ] });
+};
+
+// src/components/navigation/Sidebar.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var StyledDrawer = (0, import_material6.styled)(import_material6.Drawer)(() => ({
+  "& .MuiDrawer-paper": {
+    backgroundColor: colors.background.paper,
+    borderRight: `1px solid ${colors.grey[200]}`,
+    boxShadow: "none"
+  }
+}));
+var Sidebar = ({
+  open = true,
+  width = 280,
+  items,
+  onClose,
+  variant = "permanent"
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    StyledDrawer,
+    {
+      variant,
+      open,
+      onClose,
+      sx: {
+        width,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width,
+          boxSizing: "border-box"
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material6.Box, { sx: { overflow: "auto", padding: "8px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material6.List, { children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SidebarItem, { ...item }, index)) }) })
+    }
+  );
+};
+
+// src/components/navigation/ServiceSelector.tsx
+var import_react = require("react");
+var import_material7 = require("@mui/material");
+var import_KeyboardArrowDown = __toESM(require("@mui/icons-material/KeyboardArrowDown"));
+var import_Archive = __toESM(require("@mui/icons-material/Archive"));
+var import_Unarchive = __toESM(require("@mui/icons-material/Unarchive"));
+var import_Search2 = __toESM(require("@mui/icons-material/Search"));
+var import_Add = __toESM(require("@mui/icons-material/Add"));
+var import_Check = __toESM(require("@mui/icons-material/Check"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ServiceSelectorButton = ({
+  services,
+  selectedServiceId,
+  loading = false,
+  compact = false,
+  onSelectService,
+  onServiceClick,
+  onCreateService,
+  onServiceCreated,
+  isManager = false,
+  sx = {},
+  panelWidth = 350
+}) => {
+  const [anchorEl, setAnchorEl] = (0, import_react.useState)(null);
+  const [searchTerm, setSearchTerm] = (0, import_react.useState)("");
+  const [showArchived, setShowArchived] = (0, import_react.useState)(false);
+  const handleOpenSelector = (event) => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+    setSearchTerm("");
+    setShowArchived(false);
+  };
+  const handleServiceClick = (e) => {
+    e.stopPropagation();
+    if (selectedServiceId && onServiceClick) {
+      onServiceClick(selectedServiceId);
+    }
+  };
+  const handleSelectService = (0, import_react.useCallback)(
+    (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__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.Box, { sx: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.Tooltip, { title: "Select service", placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_material7.IconButton,
+        {
+          onClick: handleOpenSelector,
+          sx: {
+            p: 1,
+            "&:hover": {
+              bgcolor: "rgba(0, 0, 0, 0.04)"
+            },
+            ...sx
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_material7.Avatar,
+            {
+              sx: {
+                width: 32,
+                height: 32,
+                bgcolor: selectedServiceId ? "primary.main" : "grey.400",
+                fontSize: "0.9rem"
+              },
+              children: selectedService ? selectedService.name.charAt(0) : "D"
+            }
+          )
+        }
+      ) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        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
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material7.Box, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
+      selectedService ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+        isManager ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          import_material7.Link,
+          {
+            underline: "hover",
+            color: "inherit",
+            onClick: handleServiceClick,
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              fontSize: "0.875rem",
+              cursor: "pointer",
+              mr: 0.5
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                import_material7.Avatar,
+                {
+                  sx: {
+                    width: 20,
+                    height: 20,
+                    bgcolor: "primary.main",
+                    fontSize: "0.7rem",
+                    mr: 0.5
+                  },
+                  children: selectedService.name.charAt(0)
+                }
+              ),
+              selectedService.name
+            ]
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          import_material7.Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              fontSize: "0.875rem",
+              mr: 0.5,
+              color: "text.primary"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                import_material7.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__ */ (0, import_jsx_runtime14.jsx)(
+          import_material7.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__ */ (0, import_jsx_runtime14.jsx)(
+        import_material7.Typography,
+        {
+          variant: "body2",
+          color: "text.secondary",
+          sx: {
+            fontSize: "0.875rem"
+          },
+          children: "Select Service"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_material7.IconButton,
+        {
+          onClick: handleOpenSelector,
+          size: "small",
+          sx: {
+            p: 0.2,
+            ml: 0.5,
+            color: "text.secondary"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_KeyboardArrowDown.default, { fontSize: "small" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      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
+      }
+    )
+  ] });
+};
+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
+}) => {
+  const [internalSearchTerm, setInternalSearchTerm] = (0, import_react.useState)("");
+  const [internalShowArchived, setInternalShowArchived] = (0, import_react.useState)(false);
+  const searchTerm = externalSearchTerm !== void 0 ? externalSearchTerm : internalSearchTerm;
+  const setSearchTerm = externalOnSearchChange || setInternalSearchTerm;
+  const showArchived = externalShowArchived !== void 0 ? externalShowArchived : internalShowArchived;
+  const toggleArchived = externalOnToggleArchived || (() => setInternalShowArchived(!internalShowArchived));
+  const filteredServices = externalFilteredServices || services.filter((service) => {
+    const matchesSearch = searchTerm === "" || service.name.toLowerCase().includes(searchTerm.toLowerCase());
+    const isArchived = service.archived === true;
+    const matchesArchivedFilter = showArchived ? isArchived : !isArchived;
+    return matchesSearch && matchesArchivedFilter;
+  });
+  const handleCreateClick = () => {
+    if (onCreateService) {
+      onCreateService();
+    } else {
+      onClose();
+      if (onServiceCreated) {
+        onServiceCreated();
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    import_material7.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__ */ (0, import_jsx_runtime14.jsx)(
+          import_material7.Box,
+          {
+            sx: {
+              paddingLeft: 2,
+              paddingRight: 2,
+              paddingTop: 0.5,
+              borderBottom: 1,
+              borderColor: "divider"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_material7.Box,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  mb: 1.5
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material7.Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    import_material7.Avatar,
+                    {
+                      sx: {
+                        width: 32,
+                        height: 32,
+                        bgcolor: "primary.main",
+                        fontSize: "0.9rem",
+                        mr: 1.5
+                      },
+                      children: selectedService.name.charAt(0)
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material7.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.Typography, { variant: "subtitle1", sx: { fontWeight: 600, fontSize: "1rem" }, children: selectedService.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      import_material7.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"
+                      }
+                    )
+                  ] }) })
+                ] })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material7.Box, { sx: { px: 2, pt: 2, pb: 1.5 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material7.Box, { sx: { display: "flex", alignItems: "center", mb: 1.5 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_material7.TextField,
+              {
+                size: "small",
+                placeholder: "Search services...",
+                value: searchTerm,
+                onChange: (e) => setSearchTerm(e.target.value),
+                sx: { flex: 1 },
+                InputProps: {
+                  startAdornment: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Search2.default, { fontSize: "small", color: "action" }) }),
+                  sx: {
+                    borderRadius: 1.5,
+                    backgroundColor: "rgba(0, 0, 0, 0.04)",
+                    "& fieldset": { border: "none" },
+                    py: 0.5
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.Tooltip, { title: showArchived ? "Show active" : "Show archived", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_material7.IconButton,
+              {
+                size: "small",
+                onClick: toggleArchived,
+                color: showArchived ? "primary" : "default",
+                sx: { ml: 1 },
+                children: showArchived ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Unarchive.default, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Archive.default, { fontSize: "small" })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_material7.Box,
+            {
+              sx: {
+                maxHeight: 400,
+                overflow: "auto",
+                py: 1
+              },
+              children: loading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.Typography, { variant: "body2", color: "text.secondary", children: "Loading services..." }) }) : filteredServices.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.Typography, { variant: "body2", color: "text.secondary", children: searchTerm ? `No ${showArchived ? "archived " : ""}services matching "${searchTerm}"` : showArchived ? "No archived services found" : "No active services found" }) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                  import_material7.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__ */ (0, import_jsx_runtime14.jsx)(
+                        import_material7.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__ */ (0, import_jsx_runtime14.jsx)(import_material7.List, { disablePadding: true, children: filteredServices.map((service) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                  import_material7.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__ */ (0, import_jsx_runtime14.jsx)(
+                      import_Check.default,
+                      {
+                        sx: {
+                          color: "primary.main",
+                          fontSize: "1.2rem"
+                        }
+                      }
+                    ) : null,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.ListItemAvatar, { sx: { minWidth: 40 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        import_material7.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__ */ (0, import_jsx_runtime14.jsx)(
+                        import_material7.ListItemText,
+                        {
+                          primary: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material7.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                            import_material7.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__ */ (0, import_jsx_runtime14.jsx)(
+            import_material7.Box,
+            {
+              sx: {
+                paddingTop: 2,
+                paddingLeft: 2,
+                paddingRight: 2,
+                borderTop: 1,
+                borderColor: "divider"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                import_material7.Button,
+                {
+                  fullWidth: true,
+                  variant: "text",
+                  startIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Add.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 import_react2 = __toESM(require("react"));
+var import_material8 = require("@mui/material");
+var import_KeyboardArrowDown2 = __toESM(require("@mui/icons-material/KeyboardArrowDown"));
+var import_Search3 = __toESM(require("@mui/icons-material/Search"));
+var import_Add2 = __toESM(require("@mui/icons-material/Add"));
+var import_Check2 = __toESM(require("@mui/icons-material/Check"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var WorkspaceSelectorButton = ({
+  workspaces,
+  selectedWorkspaceId,
+  loading = false,
+  onSelectWorkspace,
+  onWorkspaceClick,
+  onCreateWorkspace,
+  sx = {},
+  panelWidth = 350
+}) => {
+  const [anchorEl, setAnchorEl] = (0, import_react2.useState)(null);
+  const handleOpenSelector = (event) => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectWorkspace = (0, import_react2.useCallback)(
+    (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__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material8.Box, { sx: { display: "flex", alignItems: "center", ...sx }, children: [
+      selectedWorkspace ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        import_material8.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__ */ (0, import_jsx_runtime15.jsx)(
+              import_material8.Avatar,
+              {
+                sx: {
+                  width: 20,
+                  height: 20,
+                  bgcolor: "secondary.main",
+                  fontSize: "0.7rem",
+                  mr: 0.5
+                },
+                children: selectedWorkspace.name.charAt(0)
+              }
+            ),
+            selectedWorkspace.name
+          ]
+        }
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        import_material8.Typography,
+        {
+          variant: "body2",
+          color: "text.secondary",
+          sx: {
+            fontSize: "0.875rem"
+          },
+          children: "Select Workspace"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        import_material8.IconButton,
+        {
+          onClick: handleOpenSelector,
+          size: "small",
+          sx: {
+            p: 0.2,
+            ml: 0.5,
+            color: "text.secondary"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_KeyboardArrowDown2.default, { fontSize: "small" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      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] = (0, import_react2.useState)("");
+  import_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__ */ (0, import_jsx_runtime15.jsx)(
+    import_material8.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__ */ (0, import_jsx_runtime15.jsxs)(import_material8.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material8.Box, { sx: { px: 2, pt: 2, pb: 1.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_material8.TextField,
+          {
+            fullWidth: true,
+            size: "small",
+            placeholder: "Search workspaces...",
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            InputProps: {
+              startAdornment: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material8.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Search3.default, { fontSize: "small" }) })
+            }
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material8.Box, { sx: { maxHeight: 400, overflowY: "auto" }, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material8.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material8.Typography, { variant: "body2", color: "text.secondary", children: "Loading..." }) }) : filteredWorkspaces.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material8.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material8.Typography, { variant: "body2", color: "text.secondary", children: "No workspaces found" }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material8.List, { dense: true, children: filteredWorkspaces.map((workspace) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          import_material8.ListItem,
+          {
+            onClick: () => handleSelect(workspace.id),
+            sx: {
+              py: 0.5,
+              cursor: "pointer",
+              bgcolor: workspace.id === selectedWorkspaceId ? "action.selected" : "transparent",
+              "&:hover": {
+                bgcolor: "action.hover"
+              }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material8.ListItemAvatar, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_material8.Avatar,
+                {
+                  sx: { width: 32, height: 32, bgcolor: "secondary.main" },
+                  children: workspace.name.charAt(0)
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_material8.ListItemText,
+                {
+                  primary: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material8.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material8.Typography, { variant: "body2", fontWeight: 500, children: workspace.name }),
+                    workspace.id === selectedWorkspaceId && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Check2.default, { fontSize: "small", color: "primary" })
+                  ] }),
+                  secondary: workspace.description
+                }
+              )
+            ]
+          },
+          workspace.id
+        )) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_material8.Box,
+          {
+            sx: {
+              paddingTop: 2,
+              paddingLeft: 2,
+              paddingRight: 2,
+              borderTop: 1,
+              borderColor: "divider"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_material8.Button,
+              {
+                fullWidth: true,
+                variant: "text",
+                startIcon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_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"
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/components/navigation/Stepper.tsx
+var import_material9 = require("@mui/material");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Stepper = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material9.Stepper, { ...props });
+};
+var Step = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material9.Step, { ...props });
+};
+var StepLabel = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material9.StepLabel, { ...props });
+};
+var StepContent = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material9.StepContent, { ...props });
+};
+var StepButton = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material9.StepButton, { ...props });
+};
+
+// src/components/feedback/Badge.tsx
+var import_Badge = __toESM(require("@mui/material/Badge"));
+var import_styles10 = require("@mui/material/styles");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var getBadgeColor = (variant) => {
+  switch (variant) {
+    case "primary":
+      return colors.primary.main;
+    case "success":
+      return colors.success.main;
+    case "error":
+      return colors.error.main;
+    default:
+      return colors.grey[400];
+  }
+};
+var StyledBadge = (0, import_styles10.styled)(import_Badge.default, {
+  shouldForwardProp: (prop) => prop !== "badgeVariant"
+})(({ badgeVariant = "default" }) => ({
+  "& .MuiBadge-badge": {
+    backgroundColor: getBadgeColor(badgeVariant),
+    color: "#FFFFFF"
+  }
+}));
+var Badge = ({
+  variant = "default",
+  children,
+  badgeContent,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledBadge, { badgeVariant: variant, badgeContent, ...props, children });
+};
+
+// src/components/feedback/Chip.tsx
+var import_Chip = __toESM(require("@mui/material/Chip"));
+var import_styles11 = require("@mui/material/styles");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var StyledDefaultChip = (0, import_styles11.styled)(import_Chip.default)({
+  backgroundColor: colors.grey[100],
+  color: colors.text.primary,
+  "&:hover": {
+    backgroundColor: colors.grey[200]
+  }
+});
+var StyledActiveChip = (0, import_styles11.styled)(import_Chip.default)({
+  backgroundColor: colors.background.selected,
+  color: colors.primary.main,
+  "&:hover": {
+    backgroundColor: colors.background.selected
+  }
+});
+var Chip2 = ({
+  variant = "default",
+  ...props
+}) => {
+  if (variant === "active") {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StyledActiveChip, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StyledDefaultChip, { ...props });
+};
+
+// src/components/feedback/Tooltip.tsx
+var import_Tooltip = __toESM(require("@mui/material/Tooltip"));
+var import_styles12 = require("@mui/material/styles");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var StyledTooltip = (0, import_styles12.styled)(import_Tooltip.default)({
+  "& .MuiTooltip-tooltip": {
+    backgroundColor: colors.grey[800],
+    color: "#FFFFFF",
+    fontSize: "12px",
+    padding: "8px 12px",
+    borderRadius: "4px"
+  },
+  "& .MuiTooltip-arrow": {
+    color: colors.grey[800]
+  }
+});
+var Tooltip2 = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyledTooltip, { ...props });
+};
+
+// src/components/feedback/Progress.tsx
+var import_material10 = require("@mui/material");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var StyledLinearProgress = (0, import_material10.styled)(import_material10.LinearProgress)({
+  height: 4,
+  borderRadius: 2,
+  backgroundColor: colors.grey[200],
+  "& .MuiLinearProgress-bar": {
+    backgroundColor: colors.primary.main,
+    borderRadius: 2
+  }
+});
+var StyledCircularProgress = (0, import_material10.styled)(import_material10.CircularProgress)({
+  color: colors.primary.main
+});
+var Progress = ({
+  variant = "linear",
+  value,
+  size = 40,
+  thickness = 4
+}) => {
+  if (variant === "circular") {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledCircularProgress, { size, thickness });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    StyledLinearProgress,
+    {
+      variant: value !== void 0 ? "determinate" : "indeterminate",
+      value
+    }
+  );
+};
+
+// src/components/navigation/Tab.tsx
+var import_Tab = __toESM(require("@mui/material/Tab"));
+var import_styles13 = require("@mui/material/styles");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var StyledTab = (0, import_styles13.styled)(import_Tab.default)({
+  textTransform: "none",
+  minHeight: "48px",
+  fontWeight: 400,
+  color: colors.text.primary,
+  borderBottom: "2px solid transparent",
+  "&:hover": {
+    color: colors.primary.main
+  },
+  "&.Mui-selected": {
+    fontWeight: 600,
+    color: colors.primary.main,
+    borderBottom: `2px solid ${colors.primary.main}`
+  }
+});
+var Tab = ({
+  badge,
+  badgeVariant = "primary",
+  label,
+  ...props
+}) => {
+  const tabLabel = badge !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Badge, { variant: badgeVariant, badgeContent: badge, children: label }) : label;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledTab, { label: tabLabel, ...props });
+};
+
+// src/components/navigation/Menu.tsx
+var import_material11 = require("@mui/material");
+var import_styles14 = require("@mui/material/styles");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var StyledMenu = (0, import_styles14.styled)(import_material11.Menu)({
+  "& .MuiPaper-root": {
+    borderRadius: 8,
+    boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)",
+    minWidth: 200
+  },
+  "& .MuiMenuItem-root": {
+    padding: "8px 16px",
+    "&:hover": {
+      backgroundColor: colors.background.selected
+    }
+  }
+});
+var Menu3 = ({ anchorEl, onClose, children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    StyledMenu,
+    {
+      anchorEl,
+      open: Boolean(anchorEl),
+      onClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      ...props,
+      children
+    }
+  );
+};
+var MenuItem2 = ({
+  icon,
+  label,
+  onClick,
+  disabled = false,
+  divider = false
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_material11.MenuItem, { onClick, disabled, children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material11.ListItemIcon, { children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material11.ListItemText, { children: label })
+    ] }),
+    divider && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material11.Divider, {})
+  ] });
+};
+
+// src/components/navigation/Pagination.tsx
+var import_Pagination = __toESM(require("@mui/material/Pagination"));
+var import_styles15 = require("@mui/material/styles");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var StyledPagination = (0, import_styles15.styled)(import_Pagination.default)({
+  "& .MuiPaginationItem-root": {
+    "&.Mui-selected": {
+      backgroundColor: colors.primary.main,
+      color: colors.primary.contrastText,
+      "&:hover": {
+        backgroundColor: colors.primary.light
+      }
+    },
+    "&:hover": {
+      backgroundColor: colors.background.selected
+    }
+  }
+});
+var Pagination = ({ color = "primary", ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledPagination, { color, ...props });
+};
+
+// src/components/navigation/Selector.tsx
+var import_react3 = require("react");
+var import_material12 = require("@mui/material");
+var import_KeyboardArrowDown3 = __toESM(require("@mui/icons-material/KeyboardArrowDown"));
+var import_Search4 = __toESM(require("@mui/icons-material/Search"));
+var import_Add3 = __toESM(require("@mui/icons-material/Add"));
+
+// src/components/layout/Link.tsx
+var import_Link = __toESM(require("@mui/material/Link"));
+var import_styles16 = require("@mui/material/styles");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var StyledLink = (0, import_styles16.styled)(import_Link.default)({
+  color: colors.primary.main,
+  "&:hover": {
+    color: colors.primary.light
+  }
+});
+var Link3 = ({ underline = "hover", ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledLink, { underline, ...props });
+};
+
+// src/components/navigation/Selector.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Selector = ({
+  options,
+  selectedId,
+  onSelect,
+  onCreate,
+  loading = false,
+  placeholder = "Select...",
+  emptyMessage = "No items found",
+  compact = false,
+  renderSelected,
+  width = 350
+}) => {
+  const [anchorEl, setAnchorEl] = (0, import_react3.useState)(null);
+  const [searchTerm, setSearchTerm] = (0, import_react3.useState)("");
+  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__ */ (0, import_jsx_runtime25.jsxs)(import_material12.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+    option.avatar ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Avatar, { src: option.avatar, sx: { width: 20, height: 20 } }) : option.icon ? option.icon : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Avatar, { sx: { width: 20, height: 20, bgcolor: colors.primary.main, fontSize: "0.7rem" }, children: option.name.charAt(0) }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Typography, { variant: "body2", children: option.name })
+  ] });
+  if (compact) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { onClick: handleOpen, size: "small", children: selectedOption ? selectedOption.avatar ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Avatar, { src: selectedOption.avatar, sx: { width: 32, height: 32 } }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Avatar, { sx: { width: 32, height: 32, bgcolor: colors.primary.main }, children: selectedOption.name.charAt(0) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Avatar, { sx: { width: 32, height: 32, bgcolor: colors.grey[400] }, children: "?" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        import_material12.Menu,
+        {
+          anchorEl,
+          open,
+          onClose: handleClose,
+          PaperProps: {
+            sx: { width, maxHeight: 600, mt: 1 }
+          },
+          children: loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Box, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.CircularProgress, { size: 24 }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+            options.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Box, { sx: { p: 1, borderBottom: `1px solid ${colors.grey[200]}` }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              TextField,
+              {
+                size: "small",
+                fullWidth: true,
+                placeholder: "Search...",
+                value: searchTerm,
+                onChange: (e) => setSearchTerm(e.target.value),
+                InputProps: {
+                  startAdornment: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_Search4.default, { fontSize: "small" }) })
+                }
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_material12.List, { sx: { maxHeight: 400, overflow: "auto" }, children: [
+              filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                import_material12.ListItemButton,
+                {
+                  selected: option.id === selectedId,
+                  onClick: () => handleSelect(option.id),
+                  disabled: option.disabled,
+                  children: [
+                    option.avatar ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.ListItemAvatar, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Avatar, { src: option.avatar }) }) : option.icon ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.ListItemAvatar, { children: option.icon }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.ListItemAvatar, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Avatar, { sx: { bgcolor: colors.primary.main }, children: option.name.charAt(0) }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.ListItemText, { primary: option.name, secondary: option.description })
+                  ]
+                },
+                option.id
+              )),
+              filteredOptions.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Typography, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
+            ] }),
+            onCreate && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Box, { sx: { p: 1, borderTop: `1px solid ${colors.grey[200]}` }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              Button,
+              {
+                fullWidth: true,
+                startIcon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_Add3.default, {}),
+                onClick: () => {
+                  onCreate();
+                  handleClose();
+                },
+                children: "Create New"
+              }
+            ) })
+          ] })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_material12.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+      selectedOption ? renderSelected ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Link3, { onClick: handleOpen, underline: "hover", children: renderSelected(selectedOption) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Link3, { onClick: handleOpen, underline: "hover", children: defaultRenderSelected(selectedOption) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Typography, { variant: "body2", color: "text.secondary", children: placeholder }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { onClick: handleOpen, size: "small", sx: { p: 0.2, ml: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_KeyboardArrowDown3.default, { fontSize: "small" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      import_material12.Menu,
+      {
+        anchorEl,
+        open,
+        onClose: handleClose,
+        PaperProps: {
+          sx: { width, maxHeight: 600, mt: 1 }
+        },
+        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Box, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.CircularProgress, { size: 24 }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+          options.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Box, { sx: { p: 1, borderBottom: `1px solid ${colors.grey[200]}` }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            TextField,
+            {
+              size: "small",
+              fullWidth: true,
+              placeholder: "Search...",
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              InputProps: {
+                startAdornment: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_Search4.default, { fontSize: "small" }) })
+              }
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_material12.List, { sx: { maxHeight: 400, overflow: "auto" }, children: [
+            filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+              import_material12.ListItemButton,
+              {
+                selected: option.id === selectedId,
+                onClick: () => handleSelect(option.id),
+                disabled: option.disabled,
+                children: [
+                  option.avatar ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.ListItemAvatar, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Avatar, { src: option.avatar }) }) : option.icon ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.ListItemAvatar, { children: option.icon }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.ListItemAvatar, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Avatar, { sx: { bgcolor: colors.primary.main }, children: option.name.charAt(0) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.ListItemText, { primary: option.name, secondary: option.description })
+                ]
+              },
+              option.id
+            )),
+            filteredOptions.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Typography, { variant: "body2", color: "text.secondary", children: emptyMessage }) })
+          ] }),
+          onCreate && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material12.Box, { sx: { p: 1, borderTop: `1px solid ${colors.grey[200]}` }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            Button,
+            {
+              fullWidth: true,
+              startIcon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_Add3.default, {}),
+              onClick: () => {
+                onCreate();
+                handleClose();
+              },
+              children: "Create New"
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/components/layout/Dialog.tsx
+var import_material13 = require("@mui/material");
+var import_Close = __toESM(require("@mui/icons-material/Close"));
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Dialog = ({
+  open,
+  title,
+  onClose,
+  onSubmit,
+  submitLabel = "Save",
+  cancelLabel = "Cancel",
+  isLoading = false,
+  disableSubmit = false,
+  showActions = true,
+  headerAction,
+  fullWidth = true,
+  maxWidth = "md",
+  children,
+  dividers = true,
+  confirmBeforeClose = false,
+  ...dialogProps
+}) => {
+  const handleCloseAttempt = (e) => {
+    if (e) e.stopPropagation();
+    onClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    import_material13.Dialog,
+    {
+      open,
+      onClose: (_, reason) => {
+        if (reason === "backdropClick" || reason === "escapeKeyDown" && !confirmBeforeClose) {
+          onClose();
+        }
+      },
+      fullWidth,
+      maxWidth,
+      ...dialogProps,
+      PaperProps: {
+        sx: { minHeight: dialogProps.fullScreen ? void 0 : "auto" },
+        ...dialogProps.PaperProps
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material13.DialogTitle, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", p: 2 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material13.Box, { sx: { display: "flex", alignItems: "center" }, children: typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material13.Typography, { variant: "h6", children: title }) : title }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material13.Box, { sx: { display: "flex", alignItems: "center" }, children: [
+            headerAction,
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              import_material13.IconButton,
+              {
+                edge: "end",
+                color: "inherit",
+                onClick: handleCloseAttempt,
+                "aria-label": "close",
+                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_Close.default, {})
+              }
+            )
+          ] })
+        ] }),
+        dividers && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material13.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material13.DialogContent, { dividers, children }),
+        showActions && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+          dividers && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material13.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material13.DialogActions, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              import_material13.Button,
+              {
+                onClick: handleCloseAttempt,
+                disabled: isLoading,
+                children: cancelLabel
+              }
+            ),
+            onSubmit && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              import_material13.Button,
+              {
+                variant: "contained",
+                color: "primary",
+                onClick: onSubmit,
+                disabled: disableSubmit || isLoading,
+                startIcon: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material13.CircularProgress, { size: 20 }) : void 0,
+                children: submitLabel
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/layout/Drawer.tsx
+var import_Drawer = __toESM(require("@mui/material/Drawer"));
+var import_styles17 = require("@mui/material/styles");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var StyledDrawer2 = (0, import_styles17.styled)(import_Drawer.default, {
+  shouldForwardProp: (prop) => prop !== "width" && prop !== "miniWidth" && prop !== "collapsed"
+})(({ theme: theme2, width = 240, miniWidth = 72, collapsed }) => ({
+  width: collapsed ? miniWidth : width,
+  flexShrink: 0,
+  "& .MuiDrawer-paper": {
+    width: collapsed ? miniWidth : width,
+    boxSizing: "border-box",
+    boxShadow: "0px 2px 10px rgba(0, 0, 0, 0.05)",
+    transition: theme2.transitions.create("width", {
+      easing: theme2.transitions.easing.sharp,
+      duration: theme2.transitions.duration.enteringScreen
+    }),
+    overflow: collapsed ? "hidden" : "auto"
+  }
+}));
+var Drawer2 = ({
+  width = 240,
+  miniWidth = 72,
+  collapsed = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    StyledDrawer2,
+    {
+      width,
+      miniWidth,
+      collapsed,
+      ...props
+    }
+  );
+};
+
+// src/components/layout/Card.tsx
+var import_Card = __toESM(require("@mui/material/Card"));
+var import_CardContent = __toESM(require("@mui/material/CardContent"));
+var import_CardHeader = __toESM(require("@mui/material/CardHeader"));
+var import_CardActions = __toESM(require("@mui/material/CardActions"));
+var import_styles18 = require("@mui/material/styles");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var StyledCard = (0, import_styles18.styled)(import_Card.default, {
+  shouldForwardProp: (prop) => prop !== "hoverable" && prop !== "clickable"
+})(({ hoverable, clickable }) => ({
+  borderRadius: 8,
+  boxShadow: "0px 1px 3px rgba(0, 0, 0, 0.12)",
+  transition: "all 0.2s ease-in-out",
+  ...clickable && {
+    cursor: "pointer"
+  },
+  ...hoverable && {
+    "&:hover": {
+      boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)",
+      transform: "translateY(-2px)"
+    }
+  }
+}));
+var Card = ({ hoverable = false, clickable = false, children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StyledCard, { hoverable, clickable, ...props, children });
+};
+var CardContent = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_CardContent.default, { ...props });
+};
+var CardHeader = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_CardHeader.default, { ...props });
+};
+var CardActions = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_CardActions.default, { ...props });
+};
+
+// src/components/layout/List.tsx
+var import_material14 = require("@mui/material");
+var import_styles19 = require("@mui/material/styles");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var List5 = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material14.List, { ...props });
+};
+var StyledListItem = (0, import_styles19.styled)(import_material14.ListItem, {
+  shouldForwardProp: (prop) => prop !== "hoverable"
+})(({ hoverable = true }) => ({
+  border: `1px solid ${colors.grey[200]}`,
+  borderRadius: 8,
+  marginBottom: 8,
+  ...hoverable && {
+    "&:hover": {
+      backgroundColor: colors.grey[50]
+    }
+  }
+}));
+var ListItem3 = ({
+  primary,
+  secondary,
+  icon,
+  action,
+  hoverable = true,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(StyledListItem, { hoverable, ...props, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material14.ListItemIcon, { children: icon }),
+    (primary || secondary) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      import_material14.ListItemText,
+      {
+        primary,
+        secondary
+      }
+    ),
+    children,
+    action && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material14.ListItemSecondaryAction, { children: action })
+  ] });
+};
+
+// src/components/layout/Avatar.tsx
+var import_Avatar = __toESM(require("@mui/material/Avatar"));
+var import_styles20 = require("@mui/material/styles");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var sizeMap = {
+  small: 32,
+  medium: 40,
+  large: 56
+};
+var StyledAvatar = (0, import_styles20.styled)(import_Avatar.default, {
+  shouldForwardProp: (prop) => prop !== "avatarSize"
+})(({ avatarSize = 40 }) => ({
+  width: avatarSize,
+  height: avatarSize,
+  backgroundColor: colors.primary.main,
+  color: colors.primary.contrastText,
+  fontWeight: 600
+}));
+var Avatar4 = ({ size = "medium", ...props }) => {
+  const avatarSize = typeof size === "number" ? size : sizeMap[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StyledAvatar, { avatarSize, ...props });
+};
+
+// src/components/layout/Table.tsx
+var import_material15 = require("@mui/material");
+var import_styles21 = require("@mui/material/styles");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var StyledTableContainer = (0, import_styles21.styled)(import_material15.TableContainer)({
+  borderRadius: 8,
+  border: `1px solid ${colors.grey[200]}`
+});
+var StyledTableHead = (0, import_styles21.styled)(import_material15.TableHead)({
+  backgroundColor: colors.grey[50],
+  "& .MuiTableCell-head": {
+    fontWeight: 600,
+    color: colors.text.primary
+  }
+});
+var Table = ({ stickyHeader = false, children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StyledTableContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material15.Table, { stickyHeader, ...props, children }) });
+};
+var TableHeader = ({
+  columns,
+  orderBy,
+  order = "asc",
+  onSort
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StyledTableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material15.TableRow, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material15.TableCell, { align: column.align || "left", children: column.sortable && onSort ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_material15.TableSortLabel,
+    {
+      active: orderBy === column.id,
+      direction: orderBy === column.id ? order : "asc",
+      onClick: () => onSort(column.id),
+      children: column.label
+    }
+  ) : column.label }, column.id)) }) });
+};
+
+// src/components/layout/Grid.tsx
+var import_material16 = require("@mui/material");
+
+// src/components/layout/Breadcrumbs.tsx
+var import_Breadcrumbs = __toESM(require("@mui/material/Breadcrumbs"));
+var import_Link3 = __toESM(require("@mui/material/Link"));
+var import_Typography = __toESM(require("@mui/material/Typography"));
+var import_styles22 = require("@mui/material/styles");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var StyledBreadcrumbs = (0, import_styles22.styled)(import_Breadcrumbs.default)({
+  "& .MuiBreadcrumbs-ol": {
+    flexWrap: "nowrap"
+  },
+  "& .MuiBreadcrumbs-separator": {
+    color: colors.text.secondary
+  }
+});
+var StyledLink2 = (0, import_styles22.styled)(import_Link3.default)({
+  color: colors.primary.main,
+  textDecoration: "none",
+  "&:hover": {
+    textDecoration: "underline"
+  }
+});
+var Breadcrumbs = ({ items, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledBreadcrumbs, { ...props, children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    if (isLast || !item.href && !item.onClick) {
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_Typography.default, { color: "text.primary", children: item.label }, index);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      StyledLink2,
+      {
+        href: item.href,
+        onClick: (e) => {
+          if (item.onClick) {
+            e.preventDefault();
+            item.onClick();
+          }
+        },
+        children: item.label
+      },
+      index
+    );
+  }) });
+};
+
+// src/components/layout/Accordion.tsx
+var import_material17 = require("@mui/material");
+var import_ExpandMore = __toESM(require("@mui/icons-material/ExpandMore"));
+var import_styles23 = require("@mui/material/styles");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var StyledAccordion = (0, import_styles23.styled)(import_material17.Accordion)({
+  borderRadius: 8,
+  boxShadow: "none",
+  border: `1px solid ${colors.grey[200]}`,
+  "&:before": {
+    display: "none"
+  },
+  "&.Mui-expanded": {
+    margin: 0
+  }
+});
+var StyledAccordionSummary = (0, import_styles23.styled)(import_material17.AccordionSummary)({
+  backgroundColor: colors.grey[50],
+  borderRadius: "8px 8px 0 0",
+  "&.Mui-expanded": {
+    borderRadius: "8px 8px 0 0"
+  },
+  "& .MuiAccordionSummary-content": {
+    margin: "12px 0"
+  }
+});
+var StyledAccordionDetails = (0, import_styles23.styled)(import_material17.AccordionDetails)({
+  padding: "16px"
+});
+var Accordion = ({
+  title,
+  children,
+  defaultExpanded = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(StyledAccordion, { defaultExpanded, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StyledAccordionSummary, { expandIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ExpandMore.default, {}), children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StyledAccordionDetails, { children })
+  ] });
+};
+
+// src/components/layout/Paper.tsx
+var import_Paper = __toESM(require("@mui/material/Paper"));
+var import_styles24 = require("@mui/material/styles");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var StyledPaper = (0, import_styles24.styled)(import_Paper.default)({
+  borderRadius: 8,
+  "&.MuiPaper-elevation": {
+    boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.08)"
+  },
+  "&.MuiPaper-outlined": {
+    border: `1px solid ${colors.grey[200]}`,
+    boxShadow: "none"
+  }
+});
+var Paper = ({ variant = "elevation", ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StyledPaper, { variant, elevation: variant === "elevation" ? 1 : 0, ...props });
+};
+
+// src/components/layout/Divider.tsx
+var import_Divider = __toESM(require("@mui/material/Divider"));
+var import_styles25 = require("@mui/material/styles");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var StyledDivider = (0, import_styles25.styled)(import_Divider.default)({
+  borderColor: colors.grey[200]
+});
+var Divider3 = ({ ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledDivider, { ...props });
+};
+
+// src/components/layout/Stack.tsx
+var import_material18 = require("@mui/material");
+
+// src/components/layout/Box.tsx
+var import_material19 = require("@mui/material");
+
+// src/components/layout/Typography.tsx
+var import_material20 = require("@mui/material");
+
+// src/components/layout/Container.tsx
+var import_material21 = require("@mui/material");
+
+// src/components/layout/AppBar.tsx
+var import_material22 = require("@mui/material");
+var import_styles26 = require("@mui/material/styles");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var StyledAppBar = (0, import_styles26.styled)(import_material22.AppBar, {
+  shouldForwardProp: (prop) => prop !== "appBarHeight"
+})(({ appBarHeight = 64 }) => ({
+  backgroundColor: colors.background.paper,
+  borderBottom: `1px solid ${colors.grey[200]}`,
+  boxShadow: "none",
+  height: appBarHeight,
+  zIndex: 1300
+}));
+var StyledToolbar = (0, import_styles26.styled)(import_material22.Toolbar)(({ theme: theme2 }) => ({
+  height: "100%",
+  paddingLeft: theme2.spacing(2),
+  paddingRight: theme2.spacing(2),
+  gap: theme2.spacing(2)
+}));
+var AppBar = ({ height = 64, children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StyledAppBar, { position: "fixed", appBarHeight: height, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StyledToolbar, { children }) });
+};
+
+// src/components/layout/Collapse.tsx
+var import_material23 = require("@mui/material");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var Collapse = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material23.Collapse, { ...props });
+};
+
+// src/components/feedback/Alert.tsx
+var import_Alert = __toESM(require("@mui/material/Alert"));
+var import_material24 = require("@mui/material");
+var import_Snackbar = __toESM(require("@mui/material/Snackbar"));
+var import_styles27 = require("@mui/material/styles");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var StyledAlert = (0, import_styles27.styled)(import_Alert.default)({
+  borderRadius: 8,
+  "&.MuiAlert-filled": {
+    borderRadius: 8
+  }
+});
+var Alert = ({
+  severity = "info",
+  title,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(StyledAlert, { severity, ...props, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material24.AlertTitle, { children: title }),
+    children
+  ] });
+};
+var StyledSnackbar = (0, import_styles27.styled)(import_Snackbar.default)({});
+var Snackbar = ({
+  message,
+  severity = "info",
+  title,
+  variant = "filled",
+  onClose,
+  children,
+  anchorOrigin = { vertical: "bottom", horizontal: "center" },
+  autoHideDuration = 6e3,
+  ...props
+}) => {
+  const content = children || (message ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    Alert,
+    {
+      onClose,
+      severity,
+      variant,
+      title,
+      sx: { width: "100%", borderRadius: 2 },
+      children: message
+    }
+  ) : void 0);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    StyledSnackbar,
+    {
+      anchorOrigin,
+      autoHideDuration,
+      onClose,
+      ...props,
+      children: content
+    }
+  );
+};
+
+// src/components/feedback/EmptyState.tsx
+var import_material25 = require("@mui/material");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var EmptyState = ({
+  title = "No items found",
+  description,
+  icon,
+  action
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    import_material25.Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 6,
+        textAlign: "center",
+        minHeight: 200
+      },
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          import_material25.Box,
+          {
+            sx: {
+              color: colors.text.secondary,
+              marginBottom: 2,
+              fontSize: 64
+            },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material25.Typography, { variant: "h6", sx: { marginBottom: 1, color: colors.text.primary }, children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material25.Typography, { variant: "body2", sx: { color: colors.text.secondary, marginBottom: 3 }, children: description }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material25.Box, { children: action })
+      ]
+    }
+  );
+};
+
+// src/components/feedback/Loading.tsx
+var import_material26 = require("@mui/material");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var Loading = ({
+  message = "Loading...",
+  size = 40,
+  fullScreen = false
+}) => {
+  const content = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    import_material26.Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: 2,
+        ...fullScreen && {
+          height: "100vh",
+          width: "100vw",
+          position: "fixed",
+          top: 0,
+          left: 0,
+          backgroundColor: colors.background.default,
+          zIndex: 9999
+        },
+        ...!fullScreen && {
+          padding: 4
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material26.CircularProgress, { size, thickness: 4 }),
+        message && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material26.Typography, { variant: "body2", color: "text.secondary", children: message })
+      ]
+    }
+  );
+  return content;
+};
+
+// src/components/feedback/AppLoading.tsx
+var import_material27 = require("@mui/material");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var AppLoading = ({
+  message = "Loading...",
+  logo = "/icons/logo.png",
+  sx = {}
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    import_material27.Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh",
+        width: "100vw",
+        position: "fixed",
+        top: 0,
+        left: 0,
+        backgroundColor: "#f8f9fa",
+        // Light background
+        zIndex: 9999,
+        ...sx
+      },
+      children: [
+        logo && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          import_material27.Box,
+          {
+            component: "img",
+            src: logo,
+            alt: "Logo",
+            sx: {
+              height: 80,
+              width: "auto",
+              mb: 4
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material27.CircularProgress, { size: 40, thickness: 4, sx: { mb: 2 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material27.Typography, { variant: "body1", color: "text.secondary", children: message })
+      ]
+    }
+  );
+};
+
+// src/components/feedback/CircularProgress.tsx
+var import_material28 = require("@mui/material");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var CircularProgress6 = ({
+  size = 40,
+  thickness = 4,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_material28.CircularProgress, { size, thickness, ...props });
+};
+
+// src/components/third-party/FlowEditor.tsx
+var import_react4 = require("react");
+var import_reactflow = __toESM(require("reactflow"));
+var import_material29 = require("@mui/material");
+var import_styles28 = require("@mui/material/styles");
+var import_reactflow2 = require("reactflow");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var FlowEditor = ({
+  nodes,
+  edges,
+  onNodesChange,
+  onEdgesChange,
+  nodeTypes,
+  edgeTypes,
+  height = "600px",
+  showBackground = true,
+  backgroundVariant = import_reactflow.BackgroundVariant.Dots,
+  showControls = true,
+  showMinimap = false,
+  containerProps,
+  onInit,
+  ...reactFlowProps
+}) => {
+  const theme2 = (0, import_styles28.useTheme)();
+  const handleInit = (0, import_react4.useCallback)(
+    (instance) => {
+      if (onInit) {
+        onInit(instance);
+      }
+    },
+    [onInit]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_reactflow.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    import_material29.Box,
+    {
+      sx: {
+        width: "100%",
+        height: typeof height === "number" ? `${height}px` : height,
+        border: `1px solid ${theme2.palette.divider}`,
+        borderRadius: theme2.shape.borderRadius,
+        overflow: "hidden",
+        backgroundColor: theme2.palette.background.paper,
+        ...containerProps?.sx
+      },
+      ...containerProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        import_reactflow.default,
+        {
+          nodes,
+          edges,
+          onNodesChange,
+          onEdgesChange,
+          nodeTypes,
+          edgeTypes,
+          onInit: handleInit,
+          connectionLineType: import_reactflow.ConnectionLineType.SmoothStep,
+          defaultEdgeOptions: {
+            style: {
+              stroke: theme2.palette.primary.main,
+              strokeWidth: 2
+            }
+          },
+          style: {
+            backgroundColor: "transparent"
+          },
+          ...reactFlowProps,
+          children: [
+            showBackground && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              import_reactflow.Background,
+              {
+                variant: backgroundVariant,
+                gap: 16,
+                size: 1,
+                color: theme2.palette.divider
+              }
+            ),
+            showControls && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_reactflow.Controls, {}),
+            showMinimap && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              import_reactflow.MiniMap,
+              {
+                nodeColor: (node) => {
+                  const color = node.data?.color || theme2.palette.primary.main;
+                  return typeof color === "string" ? color : theme2.palette.primary.main;
+                },
+                nodeStrokeWidth: 3,
+                nodeBorderRadius: 8,
+                maskColor: `${theme2.palette.background.paper}80`,
+                style: {
+                  backgroundColor: theme2.palette.background.paper
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+
+// src/components/third-party/CodeEditor.tsx
+var import_react5 = require("react");
+var import_react6 = __toESM(require("@monaco-editor/react"));
+var import_material30 = require("@mui/material");
+var import_Fullscreen = __toESM(require("@mui/icons-material/Fullscreen"));
+var import_FullscreenExit = __toESM(require("@mui/icons-material/FullscreenExit"));
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var configureTypeScript = (monaco) => {
+  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.ES2020,
+    allowNonTsExtensions: true,
+    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+    module: monaco.languages.typescript.ModuleKind.CommonJS,
+    noEmit: false,
+    lib: ["es2020", "dom"],
+    noUnusedLocals: false,
+    noUnusedParameters: false,
+    noImplicitAny: false,
+    noImplicitReturns: false,
+    noFallthroughCasesInSwitch: false
+  });
+  monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    noSemanticValidation: false,
+    noSyntaxValidation: false,
+    noSuggestionDiagnostics: true,
+    diagnosticCodesToIgnore: [
+      6133,
+      // 'x' is declared but its value is never read
+      6196
+      // 'x' is declared but its value is never read (different variant)
+    ]
+  });
+};
+var CodeEditor = ({
+  value,
+  onChange,
+  language = "typescript",
+  height = "400px",
+  minHeight,
+  theme: themeProp,
+  lineNumbers = "on",
+  options,
+  onMount,
+  onValidate,
+  editorRef,
+  monacoRef,
+  onFullscreenChange,
+  containerProps,
+  typeDefinitions
+}) => {
+  const [isEditorReady, setIsEditorReady] = (0, import_react5.useState)(false);
+  const [validationErrors, setValidationErrors] = (0, import_react5.useState)([]);
+  const [isFullscreen, setIsFullscreen] = (0, import_react5.useState)(false);
+  const [tsCode, setTsCode] = (0, import_react5.useState)(value);
+  const [actualHeight, setActualHeight] = (0, import_react5.useState)(
+    typeof height === "number" ? `${height}px` : height
+  );
+  const internalEditorRef = (0, import_react5.useRef)(null);
+  const internalMonacoRef = (0, import_react5.useRef)(null);
+  const finalEditorRef = editorRef || internalEditorRef;
+  const finalMonacoRef = monacoRef || internalMonacoRef;
+  (0, import_react5.useEffect)(() => {
+    if (isFullscreen) {
+      setActualHeight("100vh");
+    } else {
+      setActualHeight(typeof height === "number" ? `${height}px` : height);
+    }
+  }, [height, isFullscreen]);
+  const toggleFullscreen = (0, import_react5.useCallback)(() => {
+    const newFullscreenState = !isFullscreen;
+    setIsFullscreen(newFullscreenState);
+    if (onFullscreenChange) {
+      onFullscreenChange(newFullscreenState);
+    }
+  }, [isFullscreen, onFullscreenChange]);
+  (0, import_react5.useEffect)(() => {
+    if (!isFullscreen) return;
+    function escapeHandler(event) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsFullscreen(false);
+        if (onFullscreenChange) {
+          onFullscreenChange(false);
+        }
+      }
+    }
+    window.addEventListener("keydown", escapeHandler, { capture: true });
+    return () => {
+      window.removeEventListener("keydown", escapeHandler, { capture: true });
+    };
+  }, [isFullscreen, onFullscreenChange]);
+  const handleEditorDidMount = (0, import_react5.useCallback)(
+    (editor, monaco) => {
+      console.log("CodeEditor: onMount called", { editor: !!editor, monaco: !!monaco });
+      try {
+        configureTypeScript(monaco);
+      } catch (e) {
+        console.error("CodeEditor: Failed to configure TypeScript", e);
+      }
+      if (finalEditorRef) {
+        finalEditorRef.current = editor;
+      }
+      if (finalMonacoRef) {
+        finalMonacoRef.current = monaco;
+      }
+      setIsEditorReady(true);
+      console.log("CodeEditor: Editor ready");
+      try {
+        editor.addCommand(monaco.KeyCode.Escape, () => {
+          if (isFullscreen) {
+            setIsFullscreen(false);
+            if (onFullscreenChange) {
+              onFullscreenChange(false);
+            }
+            return true;
+          }
+          return false;
+        });
+        editor.onDidChangeModelDecorations(() => {
+          const model2 = editor.getModel();
+          if (model2 && onValidate) {
+            const markers = monaco.editor.getModelMarkers({ resource: model2.uri });
+            onValidate(markers);
+            setValidationErrors(markers);
+          }
+        });
+        const model = editor.getModel();
+        if (model && onValidate) {
+          const markers = monaco.editor.getModelMarkers({ resource: model.uri });
+          onValidate(markers);
+          setValidationErrors(markers);
+        }
+      } catch (e) {
+        console.error("CodeEditor: Error setting up editor callbacks", e);
+      }
+      if (onMount) {
+        try {
+          onMount(editor, monaco);
+        } catch (e) {
+          console.error("CodeEditor: Error in custom onMount", e);
+        }
+      }
+    },
+    [isFullscreen, onFullscreenChange, onValidate, onMount, finalEditorRef, finalMonacoRef]
+  );
+  (0, import_react5.useEffect)(() => {
+    if (!isEditorReady || !finalMonacoRef?.current || !typeDefinitions) return;
+    const monaco = finalMonacoRef.current;
+    const definitions = Array.isArray(typeDefinitions) ? typeDefinitions : [typeDefinitions];
+    const uris = [];
+    try {
+      definitions.forEach((def, index) => {
+        if (def && def.trim()) {
+          const uri = `ts:filename/custom-types-${index}.d.ts`;
+          uris.push(uri);
+          monaco.languages.typescript.typescriptDefaults.addExtraLib(def, uri);
+        }
+      });
+    } catch (error) {
+      console.error("CodeEditor: Error adding type definitions:", error);
+    }
+  }, [isEditorReady, finalMonacoRef, typeDefinitions]);
+  const handleCodeChange = (newValue) => {
+    const valueStr = newValue || "";
+    setTsCode(valueStr);
+    onChange(valueStr);
+  };
+  (0, import_react5.useEffect)(() => {
+    if (value !== tsCode) {
+      setTsCode(value);
+      if (isEditorReady && finalEditorRef?.current) {
+        const editor = finalEditorRef.current;
+        const currentValue = editor.getValue();
+        if (currentValue !== value) {
+          editor.setValue(value);
+        }
+      }
+    }
+  }, [value, tsCode, isEditorReady, finalEditorRef]);
+  const editorMinHeight = minHeight ? typeof minHeight === "number" ? `${minHeight}px` : minHeight : "400px";
+  const defaultOptions = {
+    lineNumbers,
+    minimap: { enabled: false },
+    readOnly: false,
+    wordWrap: "on",
+    fontSize: 14,
+    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", Consolas, "source-code-pro", monospace',
+    automaticLayout: true,
+    scrollBeyondLastLine: false,
+    theme: themeProp || "vs",
+    ...options
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    import_material30.Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: isFullscreen ? "100vh" : editorMinHeight,
+        position: isFullscreen ? "fixed" : "relative",
+        top: isFullscreen ? 0 : "auto",
+        left: isFullscreen ? 0 : "auto",
+        right: isFullscreen ? 0 : "auto",
+        bottom: isFullscreen ? 0 : "auto",
+        zIndex: isFullscreen ? 9999 : "auto",
+        bgcolor: "background.paper",
+        p: isFullscreen ? 2 : 0
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        import_material30.Box,
+        {
+          sx: {
+            flex: 1,
+            border: 1,
+            borderColor: validationErrors.length > 0 ? "error.main" : "divider",
+            borderRadius: 1,
+            minHeight: editorMinHeight,
+            overflow: "hidden",
+            position: "relative",
+            display: "flex",
+            flexDirection: "column"
+          },
+          ...containerProps,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material30.Tooltip, { title: isFullscreen ? "Exit Fullscreen" : "Fullscreen", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              import_material30.IconButton,
+              {
+                onClick: toggleFullscreen,
+                size: "small",
+                sx: {
+                  position: "absolute",
+                  top: 8,
+                  right: 8,
+                  zIndex: 10,
+                  bgcolor: "rgba(255, 255, 255, 0.7)",
+                  "&:hover": {
+                    bgcolor: "rgba(255, 255, 255, 0.9)"
+                  },
+                  boxShadow: 1
+                },
+                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_FullscreenExit.default, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Fullscreen.default, { fontSize: "small" })
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              import_material30.Box,
+              {
+                sx: {
+                  flex: 1,
+                  display: "flex",
+                  overflow: "hidden",
+                  minHeight: editorMinHeight,
+                  position: "relative"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  import_react6.default,
+                  {
+                    height: actualHeight,
+                    defaultLanguage: language,
+                    defaultValue: value,
+                    value: tsCode,
+                    onChange: handleCodeChange,
+                    onMount: handleEditorDidMount,
+                    theme: themeProp || "vs",
+                    options: defaultOptions,
+                    loading: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material30.Box, { sx: { p: 2, textAlign: "center" }, children: "Loading Monaco Editor..." }),
+                    beforeMount: (monaco) => {
+                      console.log("CodeEditor: beforeMount called", { monaco: !!monaco });
+                    }
+                  }
+                )
+              }
+            ),
+            validationErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+              import_material30.Alert,
+              {
+                severity: "error",
+                sx: {
+                  position: "absolute",
+                  bottom: 8,
+                  left: 8,
+                  right: 8,
+                  zIndex: 20,
+                  boxShadow: 3,
+                  border: "1px solid",
+                  borderColor: "error.main",
+                  borderRadius: 1,
+                  maxHeight: "150px",
+                  overflow: "auto"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material30.Box, { sx: { mb: 1, fontWeight: 600 }, children: "Please fix the following errors:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material30.Box, { component: "ul", sx: { m: 0, pl: 2 }, children: [
+                    validationErrors.slice(0, 3).map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material30.Box, { component: "li", sx: { fontSize: "0.85rem" }, children: [
+                      "Line ",
+                      error.startLineNumber,
+                      ": ",
+                      error.message
+                    ] }, index)),
+                    validationErrors.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material30.Box, { component: "li", sx: { fontSize: "0.85rem" }, children: [
+                      validationErrors.length - 3,
+                      " more error",
+                      validationErrors.length - 3 > 1 ? "s" : "",
+                      "..."
+                    ] })
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/index.ts
+var import_reactflow3 = require("reactflow");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  Alert,
+  AppBar,
+  AppLoading,
+  Avatar,
+  Background,
+  BackgroundVariant,
+  Badge,
+  Box,
+  Breadcrumbs,
+  Button,
+  ButtonGroup,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  Checkbox,
+  Chip,
+  CircularProgress,
+  CodeEditor,
+  Collapse,
+  ConnectionLineType,
+  Container,
+  Controls,
+  Dialog,
+  Divider,
+  Drawer,
+  Dropdown,
+  EmptyState,
+  FlowEditor,
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  FormLabel,
+  Grid,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  Link,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  ListItemText,
+  Loading,
+  LoadingButton,
+  Menu,
+  MenuItem,
+  MiniMap,
+  Pagination,
+  Panel,
+  Paper,
+  Progress,
+  Radio,
+  RadioGroup,
+  SearchField,
+  Selector,
+  ServiceSelectorButton,
+  Sidebar,
+  SidebarItem,
+  Snackbar,
+  Stack,
+  Step,
+  StepButton,
+  StepContent,
+  StepLabel,
+  Stepper,
+  Switch,
+  Tab,
+  Table,
+  TableHeader,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+  Toolbar,
+  Tooltip,
+  Typography,
+  WorkspaceSelectorButton,
+  colors,
+  theme
+});
+//# sourceMappingURL=index.js.map