@trinitydesign/design-system 1.2.0

package/dist/navigation.js

@@ -0,0 +1,2977 @@
+import * as H from "react";
+import { useState as z, useCallback as W, useRef as Oe, useEffect as $e } from "react";
+import { jsxs as i, jsx as e, Fragment as Te } from "react/jsx-runtime";
+import { useTheme as we, useMediaQuery as Ae, AppBar as mn, Toolbar as un, Box as l, Divider as pe, Typography as b, IconButton as v, Menu as me, MenuItem as O, Avatar as Pe, ListItemIcon as Z, ListItemText as ee, Drawer as Xe, InputBase as qe, Button as Je, List as gn, ListItem as fn, ListItemButton as xn, alpha as _e, Tooltip as U, TextField as tn, InputAdornment as yn, Stack as de, Chip as Cn, Fab as Sn, Badge as wn } from "@mui/material";
+import ge from "@mui/icons-material/Search";
+import Ee from "@mui/icons-material/Clear";
+import Ze from "@mui/icons-material/Apps";
+import De from "@mui/icons-material/KeyboardArrowDown";
+import Fe from "@mui/icons-material/HelpOutline";
+import je from "@mui/icons-material/NotificationsNone";
+import en from "@mui/icons-material/Logout";
+import Ce from "@mui/icons-material/OpenInNew";
+import { b as f, s as t, c as he, d as Y, I as ye, e as vn, A as kn, f as zn, g as In, h as Wn, i as An, j as Pn, k as En, l as Dn } from "./ai.js";
+import nn from "./assets/trinity-logo-white.svg";
+import { alpha as _, styled as $ } from "@mui/material/styles";
+import Ye from "@mui/icons-material/Close";
+import Tn from "@mui/icons-material/Menu";
+import Mn from "@mui/icons-material/HomeOutlined";
+import Ln from "@mui/icons-material/TrendingUp";
+import Rn from "@mui/icons-material/TrackChanges";
+import Bn from "@mui/icons-material/FolderOpen";
+import Hn from "@mui/icons-material/SupportAgent";
+import bn from "@mui/icons-material/AutoAwesome";
+import On from "@mui/icons-material/ChatBubbleOutline";
+import $n from "@mui/icons-material/DeleteOutline";
+import Nn from "@mui/icons-material/Edit";
+import Fn from "@mui/icons-material/MoreHoriz";
+import jn from "@mui/icons-material/Add";
+import Un from "@mui/icons-material/ChevronLeft";
+import Kn from "@mui/icons-material/Folder";
+import on from "@mui/icons-material/Star";
+import Vn from "@mui/icons-material/StarBorder";
+const rn = $("div")(({ theme: n, focused: o }) => ({
+  position: "relative",
+  borderRadius: `${t.borders.radius.menu}px`,
+  // 12px
+  backgroundColor: o === "true" ? n.palette.common.white : t.effects.onDark.subtle,
+  // 12% white
+  "&:hover": {
+    backgroundColor: o === "true" ? n.palette.common.white : "rgba(255, 255, 255, 0.15)"
+    // @intentional-color: hover state slightly stronger
+  },
+  marginRight: n.spacing(2),
+  marginLeft: n.spacing(2),
+  width: "100%",
+  maxWidth: 400,
+  transition: n.transitions.create(["background-color"]),
+  [n.breakpoints.up("sm")]: {
+    marginLeft: n.spacing(3),
+    width: "auto",
+    minWidth: 300
+  }
+})), an = $("div")(({ theme: n, focused: o }) => ({
+  padding: n.spacing(0, 2),
+  height: "100%",
+  position: "absolute",
+  pointerEvents: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: o === "true" ? f.primary.main : _(n.palette.common.white, 0.5)
+})), ln = $(qe)(({ theme: n, focused: o }) => ({
+  color: o === "true" ? f.primary.main : "inherit",
+  width: "100%",
+  "& .MuiInputBase-input": {
+    padding: n.spacing(1, 4, 1, 0),
+    paddingLeft: `calc(1em + ${n.spacing(4)})`,
+    transition: n.transitions.create("width"),
+    width: "100%",
+    fontSize: t.typography.body.small.fontSize,
+    // 14px
+    "&::placeholder": {
+      color: o === "true" ? f.neutral.gray500 : _(n.palette.common.white, 0.5),
+      opacity: 1
+    }
+  }
+})), sn = $(v)(({ show: n }) => ({
+  position: "absolute",
+  right: t.inline.tight,
+  // 4px
+  top: "50%",
+  transform: "translateY(-50%)",
+  padding: t.inline.tight,
+  // 4px
+  opacity: n === "true" ? 1 : 0,
+  pointerEvents: n === "true" ? "auto" : "none",
+  color: f.neutral.gray500,
+  "&:hover": {
+    backgroundColor: t.effects.overlay.hover
+    // 8%
+  }
+})), Qn = $(Je)(({ theme: n }) => ({
+  backgroundColor: t.effects.onDark.subtle,
+  // 12% white
+  color: n.palette.common.white,
+  borderRadius: `${t.borders.radius.menu}px`,
+  // 12px
+  padding: `${t.inline.tight}px ${t.inline.compact}px`,
+  // 6px 12px
+  textTransform: "none",
+  fontSize: t.typography.body.small.fontSize,
+  // 14px
+  fontWeight: t.typography.body.small.fontWeight,
+  // 400
+  minWidth: 180,
+  justifyContent: "space-between",
+  "&:hover": {
+    backgroundColor: "rgba(255, 255, 255, 0.15)"
+    // @intentional-color: hover state
+  }
+})), _n = () => /* @__PURE__ */ e(l, { sx: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ e("img", { src: nn, alt: "Trinity", height: 28 }) });
+function Gn({
+  appName: n = "App Name",
+  clientName: o = "Long Client Name 1",
+  clients: s = [
+    { id: "1", name: "Long Client Name 1" },
+    { id: "2", name: "Long Client Name 2" },
+    { id: "3", name: "Long Client Name 3" },
+    { id: "4", name: "Client ABC" },
+    { id: "5", name: "Client XYZ" }
+  ],
+  onClientChange: a,
+  userInitials: u = "RD",
+  userName: g = "Rahul M Desai",
+  userEmail: c = "rdesai@trinitylifesciences.com",
+  onSearch: h,
+  onAppsClick: A,
+  onUserMenuClick: E,
+  apps: y = [
+    { id: "launch-accelerator", name: "Launch Accelerator", url: "#" },
+    { id: "cloudcast", name: "CloudCast", url: "#" },
+    { id: "terra", name: "Terra", url: "#" },
+    { id: "market-intelligence", name: "Market Intelligence Dashboard", url: "#" }
+  ],
+  hideAppNameOnMobile: k = !0
+}) {
+  const L = we();
+  Ae(L.breakpoints.down("md"));
+  const N = Ae(L.breakpoints.down("sm")), [B, q] = H.useState(null), [I, R] = H.useState(null), [C, D] = H.useState(null), [m, T] = H.useState(o), [M, F] = H.useState(""), [K, S] = H.useState(!1), [V, d] = H.useState(!1), w = (x) => {
+    q(x.currentTarget);
+  }, oe = () => {
+    q(null);
+  }, re = (x) => {
+    T(x.name), a?.(x.id), oe();
+  }, ae = (x) => {
+    R(x.currentTarget);
+  }, ne = () => {
+    R(null);
+  }, G = (x) => {
+    E?.(x), ne();
+  }, le = (x) => {
+    D(x.currentTarget);
+  }, Q = () => {
+    D(null);
+  }, te = (x) => {
+    A?.(x), Q();
+  }, P = (x) => {
+    F(x.target.value);
+  }, se = (x) => {
+    x.key === "Enter" && h?.(M);
+  }, ce = () => {
+    F("");
+  }, Se = () => {
+    d(!0);
+  }, J = () => {
+    d(!1), F(""), S(!1);
+  }, fe = () => {
+    M.trim() && (h?.(M), J());
+  };
+  return /* @__PURE__ */ i(
+    mn,
+    {
+      position: "fixed",
+      elevation: 0,
+      component: "header",
+      sx: {
+        backgroundColor: f.primary.main,
+        borderBottom: `1px solid ${_(f.neutral.white, 0.1)}`,
+        borderRadius: 0
+      },
+      children: [
+        /* @__PURE__ */ i(
+          un,
+          {
+            component: "nav",
+            "aria-label": "Main navigation",
+            sx: { minHeight: 56, px: { xs: 2, sm: 3 } },
+            children: [
+              /* @__PURE__ */ i(l, { sx: { display: "flex", alignItems: "center", gap: { xs: 1, sm: 2 }, minWidth: 0 }, children: [
+                /* @__PURE__ */ e(_n, {}),
+                !(N && k) && /* @__PURE__ */ i(Te, { children: [
+                  /* @__PURE__ */ e(
+                    pe,
+                    {
+                      orientation: "vertical",
+                      flexItem: !0,
+                      sx: {
+                        backgroundColor: "rgba(255, 255, 255, 0.3)",
+                        // @intentional-color: decorative divider
+                        height: t.iconSize.prominent,
+                        // 24px
+                        alignSelf: "center",
+                        display: { xs: "none", sm: "block" }
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    b,
+                    {
+                      variant: "subtitle1",
+                      noWrap: !0,
+                      sx: {
+                        color: "white",
+                        fontWeight: t.typography.label.large.fontWeight,
+                        // 500
+                        fontSize: t.typography.body.small.fontSize,
+                        // 14px
+                        display: { xs: "none", sm: "block" }
+                      },
+                      children: n
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ e(l, { sx: { flexGrow: 1, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ i(
+                rn,
+                {
+                  focused: K.toString(),
+                  sx: { display: { xs: "none", md: "flex" } },
+                  children: [
+                    /* @__PURE__ */ e(an, { focused: K.toString(), children: /* @__PURE__ */ e(ge, {}) }),
+                    /* @__PURE__ */ e(
+                      ln,
+                      {
+                        placeholder: "Search",
+                        inputProps: { "aria-label": "search" },
+                        value: M,
+                        onChange: P,
+                        onKeyPress: se,
+                        onFocus: () => S(!0),
+                        onBlur: () => S(!1),
+                        focused: K.toString()
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      sn,
+                      {
+                        show: (M.length > 0).toString(),
+                        onClick: ce,
+                        size: "small",
+                        "aria-label": "Clear search",
+                        children: /* @__PURE__ */ e(Ee, { fontSize: "small" })
+                      }
+                    )
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ e(
+                v,
+                {
+                  onClick: Se,
+                  "aria-label": "Open search",
+                  sx: {
+                    display: { xs: "flex", md: "none" },
+                    color: t.effects.onDark.secondary,
+                    "&:hover": {
+                      backgroundColor: t.effects.onDark.subtle,
+                      color: f.neutral.white
+                    }
+                  },
+                  children: /* @__PURE__ */ e(ge, {})
+                }
+              ),
+              /* @__PURE__ */ i(l, { sx: { display: "flex", alignItems: "center", gap: { xs: 0.5, sm: 1.5 } }, children: [
+                /* @__PURE__ */ e(
+                  Qn,
+                  {
+                    onClick: w,
+                    endIcon: /* @__PURE__ */ e(De, {}),
+                    "aria-label": `Current client: ${m}. Click to switch clients`,
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": !!B,
+                    sx: {
+                      minWidth: { xs: 100, sm: 180 },
+                      maxWidth: { xs: 120, sm: "none" },
+                      "& .MuiButton-endIcon": {
+                        ml: { xs: 0, sm: 1 }
+                      }
+                    },
+                    children: /* @__PURE__ */ e(b, { noWrap: !0, sx: { maxWidth: { xs: 80, sm: "none" } }, children: m })
+                  }
+                ),
+                /* @__PURE__ */ i(
+                  me,
+                  {
+                    id: "client-menu",
+                    anchorEl: B,
+                    open: !!B,
+                    onClose: oe,
+                    anchorOrigin: {
+                      vertical: "bottom",
+                      horizontal: "right"
+                    },
+                    transformOrigin: {
+                      vertical: "top",
+                      horizontal: "right"
+                    },
+                    MenuListProps: {
+                      "aria-label": "Client selection",
+                      role: "listbox"
+                    },
+                    PaperProps: {
+                      sx: {
+                        mt: 1,
+                        minWidth: 220,
+                        borderRadius: t.borders.radiusPx.lg,
+                        // 12px
+                        boxShadow: t.effects.shadow.floating
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ e(
+                        b,
+                        {
+                          variant: "subtitle2",
+                          sx: { px: 2, py: 1.5, fontWeight: 600, color: "text.primary" },
+                          id: "client-menu-header",
+                          children: "Switch Clients"
+                        }
+                      ),
+                      s.map((x) => /* @__PURE__ */ e(
+                        O,
+                        {
+                          onClick: () => re(x),
+                          selected: x.name === m,
+                          "aria-selected": x.name === m,
+                          role: "option",
+                          sx: { py: 1 },
+                          children: x.name
+                        },
+                        x.id
+                      ))
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  v,
+                  {
+                    onClick: le,
+                    "aria-label": "Applications menu",
+                    "aria-haspopup": "menu",
+                    "aria-expanded": !!C,
+                    sx: {
+                      color: t.effects.onDark.secondary,
+                      // 70% white
+                      "&:hover": {
+                        backgroundColor: t.effects.onDark.subtle,
+                        // 12% white
+                        color: f.neutral.white
+                      }
+                    },
+                    children: /* @__PURE__ */ e(Ze, {})
+                  }
+                ),
+                /* @__PURE__ */ i(
+                  me,
+                  {
+                    anchorEl: C,
+                    open: !!C,
+                    onClose: Q,
+                    anchorOrigin: {
+                      vertical: "bottom",
+                      horizontal: "right"
+                    },
+                    transformOrigin: {
+                      vertical: "top",
+                      horizontal: "right"
+                    },
+                    PaperProps: {
+                      sx: {
+                        mt: 1,
+                        minWidth: 240,
+                        borderRadius: t.borders.radiusPx.lg,
+                        // 12px
+                        boxShadow: t.effects.shadow.floating
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ i(
+                        O,
+                        {
+                          sx: { py: 1.5 },
+                          onClick: () => te("trinity-edge"),
+                          children: [
+                            /* @__PURE__ */ i(l, { sx: { flex: 1 }, children: [
+                              /* @__PURE__ */ e(b, { variant: "subtitle2", fontWeight: 600, children: "TrinityEDGE" }),
+                              /* @__PURE__ */ e(b, { variant: "caption", color: "text.secondary", children: "Apps Access" })
+                            ] }),
+                            /* @__PURE__ */ e(Ce, { fontSize: "small", sx: { color: "text.secondary", ml: 2 } })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ e(pe, {}),
+                      y.map((x) => /* @__PURE__ */ i(
+                        O,
+                        {
+                          onClick: () => te(x.id),
+                          sx: { py: 1, justifyContent: "space-between" },
+                          children: [
+                            /* @__PURE__ */ e(b, { variant: "body2", children: x.name }),
+                            /* @__PURE__ */ e(Ce, { fontSize: "small", sx: { color: "text.secondary", ml: 2 } })
+                          ]
+                        },
+                        x.id
+                      ))
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ i(
+                  v,
+                  {
+                    onClick: ae,
+                    "aria-label": `User menu for ${g}`,
+                    "aria-haspopup": "menu",
+                    "aria-expanded": !!I,
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      borderRadius: t.borders.radiusPx.lg,
+                      // 12px
+                      padding: `${t.inline.tight}px ${t.inline.compact}px`,
+                      // 4px 8px
+                      "&:hover": {
+                        backgroundColor: t.effects.onDark.subtle
+                        // 12% white
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ e(
+                        Pe,
+                        {
+                          sx: {
+                            width: he.avatar.size.sm,
+                            height: he.avatar.size.sm,
+                            fontSize: t.typography.label.small.fontSize,
+                            // 12px
+                            fontWeight: t.typography.heading.h6.fontWeight,
+                            // 600
+                            backgroundColor: f.primary.light,
+                            color: "white"
+                          },
+                          children: u
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        De,
+                        {
+                          sx: {
+                            color: t.effects.onDark.secondary,
+                            // 70% white
+                            fontSize: t.iconSize.navigation,
+                            // 20px
+                            ml: 0.5
+                          }
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ i(
+                  me,
+                  {
+                    anchorEl: I,
+                    open: !!I,
+                    onClose: ne,
+                    anchorOrigin: {
+                      vertical: "bottom",
+                      horizontal: "right"
+                    },
+                    transformOrigin: {
+                      vertical: "top",
+                      horizontal: "right"
+                    },
+                    PaperProps: {
+                      sx: {
+                        mt: 1,
+                        minWidth: 240,
+                        borderRadius: t.borders.radiusPx.lg,
+                        // 12px
+                        boxShadow: t.effects.shadow.floating
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ i(l, { sx: { px: 2, py: 1.5, display: "flex", alignItems: "center", gap: 1.5 }, children: [
+                        /* @__PURE__ */ e(
+                          Pe,
+                          {
+                            sx: {
+                              width: he.avatar.size.md,
+                              height: he.avatar.size.md,
+                              fontSize: t.typography.body.small.fontSize,
+                              // 14px
+                              fontWeight: t.typography.heading.h6.fontWeight,
+                              // 600
+                              backgroundColor: f.primary.light,
+                              color: "white"
+                            },
+                            children: u
+                          }
+                        ),
+                        /* @__PURE__ */ i(l, { children: [
+                          /* @__PURE__ */ e(b, { variant: "subtitle2", fontWeight: 600, children: g }),
+                          /* @__PURE__ */ e(b, { variant: "caption", color: "text.secondary", children: c })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ e(pe, {}),
+                      /* @__PURE__ */ i(O, { onClick: () => G("help"), sx: { py: 1.5 }, children: [
+                        /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(Fe, { fontSize: "small" }) }),
+                        /* @__PURE__ */ e(ee, { primary: "Help" }),
+                        /* @__PURE__ */ e(Ce, { fontSize: "small", sx: { color: "text.secondary" } })
+                      ] }),
+                      /* @__PURE__ */ i(O, { onClick: () => G("notifications"), sx: { py: 1.5 }, children: [
+                        /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(je, { fontSize: "small" }) }),
+                        /* @__PURE__ */ e(ee, { primary: "Notification" })
+                      ] }),
+                      /* @__PURE__ */ i(O, { onClick: () => G("logout"), sx: { py: 1.5 }, children: [
+                        /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(en, { fontSize: "small" }) }),
+                        /* @__PURE__ */ e(ee, { primary: "Log out" })
+                      ] })
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          Xe,
+          {
+            anchor: "top",
+            open: V,
+            onClose: J,
+            sx: {
+              display: { xs: "block", md: "none" },
+              "& .MuiDrawer-paper": {
+                backgroundColor: f.primary.main,
+                pt: 1,
+                pb: 2
+              }
+            },
+            children: /* @__PURE__ */ i(l, { sx: { px: 2 }, children: [
+              /* @__PURE__ */ i(l, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 2 }, children: [
+                /* @__PURE__ */ e(
+                  v,
+                  {
+                    onClick: J,
+                    "aria-label": "Close search",
+                    sx: { color: "white" },
+                    children: /* @__PURE__ */ e(Ye, {})
+                  }
+                ),
+                /* @__PURE__ */ e(b, { variant: "subtitle1", sx: { color: "white", fontWeight: 500 }, children: "Search" })
+              ] }),
+              /* @__PURE__ */ i(rn, { focused: "true", sx: { maxWidth: "none", mx: 0 }, children: [
+                /* @__PURE__ */ e(an, { focused: "true", children: /* @__PURE__ */ e(ge, {}) }),
+                /* @__PURE__ */ e(
+                  ln,
+                  {
+                    placeholder: "Search...",
+                    inputProps: { "aria-label": "search" },
+                    value: M,
+                    onChange: P,
+                    onKeyPress: (x) => {
+                      x.key === "Enter" && fe();
+                    },
+                    autoFocus: !0,
+                    focused: "true"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  sn,
+                  {
+                    show: (M.length > 0).toString(),
+                    onClick: ce,
+                    size: "small",
+                    "aria-label": "Clear search",
+                    children: /* @__PURE__ */ e(Ee, { fontSize: "small" })
+                  }
+                )
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+const He = 200, Xn = 56, cn = $("div")(({ theme: n, focused: o }) => ({
+  position: "relative",
+  borderRadius: `${t.borders.radius.menu}px`,
+  // 12px
+  backgroundColor: o === "true" ? n.palette.common.white : t.effects.onDark.subtle,
+  // 12% white
+  "&:hover": {
+    backgroundColor: o === "true" ? n.palette.common.white : "rgba(255, 255, 255, 0.15)"
+    // @intentional-color: hover state
+  },
+  marginRight: n.spacing(2),
+  marginLeft: n.spacing(2),
+  width: "100%",
+  maxWidth: 400,
+  transition: n.transitions.create(["background-color"]),
+  [n.breakpoints.up("sm")]: {
+    marginLeft: n.spacing(3),
+    width: "auto",
+    minWidth: 300
+  }
+})), dn = $("div")(({ theme: n, focused: o }) => ({
+  padding: n.spacing(0, 2),
+  height: "100%",
+  position: "absolute",
+  pointerEvents: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: o === "true" ? f.primary.main : _(n.palette.common.white, 0.5)
+})), hn = $(qe)(({ theme: n, focused: o }) => ({
+  color: o === "true" ? f.primary.main : "inherit",
+  width: "100%",
+  "& .MuiInputBase-input": {
+    padding: n.spacing(1, 4, 1, 0),
+    paddingLeft: `calc(1em + ${n.spacing(4)})`,
+    transition: n.transitions.create("width"),
+    width: "100%",
+    fontSize: t.typography.body.small.fontSize,
+    // 14px
+    "&::placeholder": {
+      color: o === "true" ? f.neutral.gray500 : _(n.palette.common.white, 0.5),
+      opacity: 1
+    }
+  }
+})), pn = $(v)(({ show: n }) => ({
+  position: "absolute",
+  right: t.inline.tight,
+  // 4px
+  top: "50%",
+  transform: "translateY(-50%)",
+  padding: t.inline.tight,
+  // 4px
+  opacity: n === "true" ? 1 : 0,
+  pointerEvents: n === "true" ? "auto" : "none",
+  color: f.neutral.gray500,
+  "&:hover": {
+    backgroundColor: t.effects.overlay.hover
+    // 8%
+  }
+})), Yn = $(Je)(({ theme: n }) => ({
+  backgroundColor: t.effects.onDark.subtle,
+  // 12% white
+  color: n.palette.common.white,
+  borderRadius: `${t.borders.radius.menu}px`,
+  // 12px
+  padding: `${t.density.compact.cellPadding}px ${t.density.standard.cellPadding}px`,
+  // 6px 12px
+  textTransform: "none",
+  fontSize: t.typography.body.small.fontSize,
+  // 14px
+  fontWeight: t.typography.body.small.fontWeight,
+  // 400
+  minWidth: 180,
+  justifyContent: "space-between",
+  "&:hover": {
+    backgroundColor: "rgba(255, 255, 255, 0.15)"
+    // @intentional-color: hover state
+  }
+})), qn = () => /* @__PURE__ */ e(l, { sx: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ e("img", { src: nn, alt: "Trinity", height: 28 }) }), Jn = [
+  { id: "home", label: "Home", icon: /* @__PURE__ */ e(Mn, {}) },
+  { id: "menu2", label: "Menu 2", icon: /* @__PURE__ */ e(Ln, {}) },
+  { id: "menu3", label: "Menu 3", icon: /* @__PURE__ */ e(Rn, {}) },
+  { id: "menu4", label: "Menu 4", icon: /* @__PURE__ */ e(Bn, {}) },
+  { id: "menu5", label: "Menu 5", icon: /* @__PURE__ */ e(Hn, {}) },
+  { id: "insight-engine", label: "Insight Engine", icon: /* @__PURE__ */ e(bn, {}), isSpecial: !0 }
+];
+function Zn({
+  appName: n = "App Name",
+  clientName: o = "Long Client Name 1",
+  clients: s = [
+    { id: "1", name: "Long Client Name 1" },
+    { id: "2", name: "Long Client Name 2" },
+    { id: "3", name: "Long Client Name 3" },
+    { id: "4", name: "Client ABC" },
+    { id: "5", name: "Client XYZ" }
+  ],
+  onClientChange: a,
+  userInitials: u = "RD",
+  userName: g = "Rahul M Desai",
+  userEmail: c = "rdesai@trinitylifesciences.com",
+  onSearch: h,
+  onAppsClick: A,
+  onUserMenuClick: E,
+  apps: y = [
+    { id: "launch-accelerator", name: "Launch Accelerator" },
+    { id: "cloudcast", name: "CloudCast" },
+    { id: "terra", name: "Terra" },
+    { id: "market-intelligence", name: "Market Intelligence Dashboard" }
+  ],
+  navItems: k = Jn,
+  selectedNavItem: L = "home",
+  onNavItemClick: N,
+  children: B,
+  sidebarExpanded: q,
+  onSidebarExpandedChange: I
+}) {
+  const R = we(), C = Ae(R.breakpoints.down("md"));
+  Ae(R.breakpoints.down("sm"));
+  const [D, m] = H.useState(null), [T, M] = H.useState(null), [F, K] = H.useState(null), [S, V] = H.useState(o), [d, w] = H.useState(""), [oe, re] = H.useState(!1), [ae, ne] = H.useState(!0), [G, le] = H.useState(L), Q = q ?? ae, te = (r) => {
+    ne(r), I?.(r);
+  }, [P, se] = H.useState(!1), [ce, Se] = H.useState(!1), J = C || Q ? He : Xn, fe = () => {
+    C ? se(!P) : te(!Q);
+  }, x = () => {
+    se(!1);
+  }, Ue = () => {
+    Se(!0);
+  }, ve = () => {
+    Se(!1), w(""), re(!1);
+  }, Ke = () => {
+    d.trim() && (h?.(d), ve());
+  }, Me = (r) => {
+    le(r), N?.(r), C && x();
+  }, Ve = (r) => {
+    m(r.currentTarget);
+  }, Le = () => {
+    m(null);
+  }, ue = (r) => {
+    V(r.name), a?.(r.id), Le();
+  }, ke = (r) => {
+    M(r.currentTarget);
+  }, ie = () => {
+    M(null);
+  }, ze = (r) => {
+    E?.(r), ie();
+  }, Qe = (r) => {
+    K(r.currentTarget);
+  }, Re = () => {
+    K(null);
+  }, Be = (r) => {
+    A?.(r), Re();
+  }, Ie = (r) => {
+    w(r.target.value);
+  }, We = (r) => {
+    r.key === "Enter" && h?.(d);
+  }, p = () => {
+    w("");
+  };
+  return /* @__PURE__ */ i(l, { sx: { display: "flex", minHeight: "100vh" }, children: [
+    /* @__PURE__ */ i(
+      mn,
+      {
+        position: "fixed",
+        elevation: 0,
+        component: "header",
+        sx: {
+          backgroundColor: f.primary.main,
+          borderBottom: `1px solid ${t.effects.onDark.subtle}`,
+          // 12% white
+          borderRadius: 0,
+          zIndex: (r) => r.zIndex.drawer + 1
+        },
+        children: [
+          /* @__PURE__ */ i(un, { sx: { minHeight: 56, px: { xs: 1, sm: 2 } }, children: [
+            /* @__PURE__ */ e(
+              v,
+              {
+                onClick: fe,
+                "aria-label": Q ? "Collapse sidebar navigation" : "Expand sidebar navigation",
+                "aria-expanded": Q,
+                "aria-controls": "sidebar-navigation",
+                sx: {
+                  color: "white",
+                  mr: 1,
+                  "&:hover": {
+                    backgroundColor: t.effects.onDark.subtle
+                    // 12% white
+                  }
+                },
+                children: /* @__PURE__ */ e(Tn, {})
+              }
+            ),
+            /* @__PURE__ */ i(l, { sx: { display: "flex", alignItems: "center", gap: { xs: 1, sm: 2 }, minWidth: 0 }, children: [
+              /* @__PURE__ */ e(qn, {}),
+              /* @__PURE__ */ e(
+                pe,
+                {
+                  orientation: "vertical",
+                  flexItem: !0,
+                  sx: {
+                    backgroundColor: "rgba(255, 255, 255, 0.3)",
+                    // @intentional-color: decorative divider
+                    height: t.iconSize.prominent,
+                    // 24px
+                    alignSelf: "center",
+                    display: { xs: "none", sm: "block" }
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(
+                b,
+                {
+                  variant: "subtitle1",
+                  noWrap: !0,
+                  sx: {
+                    color: "white",
+                    fontWeight: t.typography.label.medium.fontWeight,
+                    // 500
+                    fontSize: t.typography.body.small.fontSize,
+                    // 14px
+                    display: { xs: "none", sm: "block" }
+                  },
+                  children: n
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e(l, { sx: { flexGrow: 1, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ i(
+              cn,
+              {
+                focused: oe.toString(),
+                sx: { display: { xs: "none", md: "flex" } },
+                children: [
+                  /* @__PURE__ */ e(dn, { focused: oe.toString(), children: /* @__PURE__ */ e(ge, {}) }),
+                  /* @__PURE__ */ e(
+                    hn,
+                    {
+                      placeholder: "Search",
+                      inputProps: { "aria-label": "search" },
+                      value: d,
+                      onChange: Ie,
+                      onKeyPress: We,
+                      onFocus: () => re(!0),
+                      onBlur: () => re(!1),
+                      focused: oe.toString()
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    pn,
+                    {
+                      show: (d.length > 0).toString(),
+                      onClick: p,
+                      size: "small",
+                      "aria-label": "Clear search",
+                      children: /* @__PURE__ */ e(Ee, { fontSize: "small" })
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ e(
+              v,
+              {
+                onClick: Ue,
+                "aria-label": "Open search",
+                sx: {
+                  display: { xs: "flex", md: "none" },
+                  color: t.effects.onDark.secondary,
+                  "&:hover": {
+                    backgroundColor: t.effects.onDark.subtle,
+                    color: f.neutral.white
+                  }
+                },
+                children: /* @__PURE__ */ e(ge, {})
+              }
+            ),
+            /* @__PURE__ */ i(l, { sx: { display: "flex", alignItems: "center", gap: { xs: 0.5, sm: 1.5 } }, children: [
+              /* @__PURE__ */ e(
+                Yn,
+                {
+                  onClick: Ve,
+                  endIcon: /* @__PURE__ */ e(De, {}),
+                  "aria-label": `Current client: ${S}. Click to switch clients`,
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": !!D,
+                  sx: {
+                    minWidth: { xs: 100, sm: 180 },
+                    maxWidth: { xs: 120, sm: "none" },
+                    display: { xs: "none", sm: "flex" },
+                    "& .MuiButton-endIcon": {
+                      ml: { xs: 0, sm: 1 }
+                    }
+                  },
+                  children: /* @__PURE__ */ e(b, { noWrap: !0, sx: { maxWidth: { xs: 80, sm: "none" } }, children: S })
+                }
+              ),
+              /* @__PURE__ */ i(
+                me,
+                {
+                  anchorEl: D,
+                  open: !!D,
+                  onClose: Le,
+                  anchorOrigin: { vertical: "bottom", horizontal: "right" },
+                  transformOrigin: { vertical: "top", horizontal: "right" },
+                  PaperProps: {
+                    sx: { mt: 1, minWidth: 220, borderRadius: t.borders.radiusPx.lg, boxShadow: t.effects.shadow.floating }
+                  },
+                  children: [
+                    /* @__PURE__ */ e(b, { variant: "subtitle2", sx: { px: 2, py: 1.5, fontWeight: t.typography.label.medium.fontWeight }, children: "Switch Clients" }),
+                    s.map((r) => /* @__PURE__ */ e(
+                      O,
+                      {
+                        onClick: () => ue(r),
+                        selected: r.name === S,
+                        sx: { py: 1 },
+                        children: r.name
+                      },
+                      r.id
+                    ))
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(
+                v,
+                {
+                  onClick: Qe,
+                  "aria-label": "Applications menu",
+                  "aria-haspopup": "menu",
+                  "aria-expanded": !!F,
+                  sx: {
+                    color: t.effects.onDark.secondary,
+                    // 70% white
+                    "&:hover": { backgroundColor: t.effects.onDark.subtle, color: f.neutral.white }
+                  },
+                  children: /* @__PURE__ */ e(Ze, {})
+                }
+              ),
+              /* @__PURE__ */ i(
+                me,
+                {
+                  anchorEl: F,
+                  open: !!F,
+                  onClose: Re,
+                  anchorOrigin: { vertical: "bottom", horizontal: "right" },
+                  transformOrigin: { vertical: "top", horizontal: "right" },
+                  PaperProps: {
+                    sx: { mt: 1, minWidth: 240, borderRadius: t.borders.radiusPx.lg, boxShadow: t.effects.shadow.floating }
+                  },
+                  children: [
+                    /* @__PURE__ */ i(O, { sx: { py: 1.5 }, onClick: () => Be("trinity-edge"), children: [
+                      /* @__PURE__ */ i(l, { sx: { flex: 1 }, children: [
+                        /* @__PURE__ */ e(b, { variant: "subtitle2", fontWeight: t.typography.label.medium.fontWeight, children: "TrinityEDGE" }),
+                        /* @__PURE__ */ e(b, { variant: "caption", color: "text.secondary", children: "Apps Access" })
+                      ] }),
+                      /* @__PURE__ */ e(Ce, { fontSize: "small", sx: { color: "text.secondary", ml: 2 } })
+                    ] }),
+                    /* @__PURE__ */ e(pe, {}),
+                    y.map((r) => /* @__PURE__ */ i(O, { onClick: () => Be(r.id), sx: { py: 1, justifyContent: "space-between" }, children: [
+                      /* @__PURE__ */ e(b, { variant: "body2", children: r.name }),
+                      /* @__PURE__ */ e(Ce, { fontSize: "small", sx: { color: "text.secondary", ml: 2 } })
+                    ] }, r.id))
+                  ]
+                }
+              ),
+              /* @__PURE__ */ i(
+                v,
+                {
+                  onClick: ke,
+                  "aria-label": `User menu for ${g}`,
+                  "aria-haspopup": "menu",
+                  "aria-expanded": !!T,
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    borderRadius: t.borders.radiusPx.lg,
+                    // 12px
+                    padding: `${t.inline.tight}px ${t.inline.compact}px`,
+                    // 4px 8px
+                    "&:hover": { backgroundColor: t.effects.onDark.subtle }
+                  },
+                  children: [
+                    /* @__PURE__ */ e(
+                      Pe,
+                      {
+                        sx: {
+                          width: he.avatar.size.sm,
+                          height: he.avatar.size.sm,
+                          fontSize: t.typography.label.small.fontSize,
+                          // 12px
+                          fontWeight: t.typography.heading.h6.fontWeight,
+                          // 600
+                          backgroundColor: f.primary.light,
+                          color: "white"
+                        },
+                        children: u
+                      }
+                    ),
+                    /* @__PURE__ */ e(De, { sx: { color: t.effects.onDark.secondary, fontSize: t.iconSize.navigation, ml: 0.5 } })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ i(
+                me,
+                {
+                  anchorEl: T,
+                  open: !!T,
+                  onClose: ie,
+                  anchorOrigin: { vertical: "bottom", horizontal: "right" },
+                  transformOrigin: { vertical: "top", horizontal: "right" },
+                  PaperProps: {
+                    sx: { mt: 1, minWidth: 240, borderRadius: t.borders.radiusPx.lg, boxShadow: t.effects.shadow.floating }
+                  },
+                  children: [
+                    /* @__PURE__ */ i(l, { sx: { px: 2, py: 1.5, display: "flex", alignItems: "center", gap: 1.5 }, children: [
+                      /* @__PURE__ */ e(
+                        Pe,
+                        {
+                          sx: {
+                            width: he.avatar.size.md,
+                            height: he.avatar.size.md,
+                            fontSize: t.typography.body.small.fontSize,
+                            // 14px
+                            fontWeight: t.typography.heading.h6.fontWeight,
+                            // 600
+                            backgroundColor: f.primary.light,
+                            color: "white"
+                          },
+                          children: u
+                        }
+                      ),
+                      /* @__PURE__ */ i(l, { children: [
+                        /* @__PURE__ */ e(b, { variant: "subtitle2", fontWeight: t.typography.heading.h6.fontWeight, children: g }),
+                        /* @__PURE__ */ e(b, { variant: "caption", color: "text.secondary", children: c })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ e(pe, {}),
+                    /* @__PURE__ */ i(O, { onClick: () => ze("help"), sx: { py: 1.5 }, children: [
+                      /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(Fe, { fontSize: "small" }) }),
+                      /* @__PURE__ */ e(ee, { primary: "Help" }),
+                      /* @__PURE__ */ e(Ce, { fontSize: "small", sx: { color: "text.secondary" } })
+                    ] }),
+                    /* @__PURE__ */ i(O, { onClick: () => ze("notifications"), sx: { py: 1.5 }, children: [
+                      /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(je, { fontSize: "small" }) }),
+                      /* @__PURE__ */ e(ee, { primary: "Notification" })
+                    ] }),
+                    /* @__PURE__ */ i(O, { onClick: () => ze("logout"), sx: { py: 1.5 }, children: [
+                      /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(en, { fontSize: "small" }) }),
+                      /* @__PURE__ */ e(ee, { primary: "Log out" })
+                    ] })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ e(
+            Xe,
+            {
+              anchor: "top",
+              open: ce,
+              onClose: ve,
+              sx: {
+                display: { xs: "block", md: "none" },
+                "& .MuiDrawer-paper": {
+                  backgroundColor: f.primary.main,
+                  pt: 1,
+                  pb: 2
+                }
+              },
+              children: /* @__PURE__ */ i(l, { sx: { px: 2 }, children: [
+                /* @__PURE__ */ i(l, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 2 }, children: [
+                  /* @__PURE__ */ e(
+                    v,
+                    {
+                      onClick: ve,
+                      "aria-label": "Close search",
+                      sx: { color: "white" },
+                      children: /* @__PURE__ */ e(Ye, {})
+                    }
+                  ),
+                  /* @__PURE__ */ e(b, { variant: "subtitle1", sx: { color: "white", fontWeight: 500 }, children: "Search" })
+                ] }),
+                /* @__PURE__ */ i(cn, { focused: "true", sx: { maxWidth: "none", mx: 0 }, children: [
+                  /* @__PURE__ */ e(dn, { focused: "true", children: /* @__PURE__ */ e(ge, {}) }),
+                  /* @__PURE__ */ e(
+                    hn,
+                    {
+                      placeholder: "Search...",
+                      inputProps: { "aria-label": "search" },
+                      value: d,
+                      onChange: Ie,
+                      onKeyPress: (r) => {
+                        r.key === "Enter" && Ke();
+                      },
+                      focused: "true"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    pn,
+                    {
+                      show: (d.length > 0).toString(),
+                      onClick: p,
+                      size: "small",
+                      "aria-label": "Clear search",
+                      children: /* @__PURE__ */ e(Ee, { fontSize: "small" })
+                    }
+                  )
+                ] })
+              ] })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ i(
+      Xe,
+      {
+        variant: C ? "temporary" : "permanent",
+        open: C ? P : !0,
+        onClose: x,
+        id: "sidebar-navigation",
+        ModalProps: {
+          keepMounted: !0
+          // Better mobile performance
+        },
+        sx: {
+          width: C ? He : J,
+          flexShrink: 0,
+          display: { xs: "block" },
+          "& .MuiDrawer-paper": {
+            width: C ? He : J,
+            boxSizing: "border-box",
+            borderRight: "1px solid",
+            borderColor: "divider",
+            backgroundColor: "background.paper",
+            transition: (r) => r.transitions.create("width", {
+              easing: r.transitions.easing.sharp,
+              duration: r.transitions.duration.enteringScreen
+            }),
+            overflowX: "hidden",
+            mt: C ? 0 : "56px"
+            // No top margin on mobile (overlay)
+          }
+        },
+        children: [
+          C && /* @__PURE__ */ i(
+            l,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                p: 2,
+                borderBottom: "1px solid",
+                borderColor: "divider"
+              },
+              children: [
+                /* @__PURE__ */ e(b, { variant: "subtitle1", fontWeight: 600, children: "Navigation" }),
+                /* @__PURE__ */ e(v, { onClick: x, "aria-label": "Close navigation", children: /* @__PURE__ */ e(Ye, {}) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            gn,
+            {
+              component: "nav",
+              "aria-label": "Main navigation",
+              sx: { pt: C ? 1 : 2 },
+              children: k.map((r) => {
+                const j = G === r.id, xe = r.isSpecial, be = C || Q;
+                return /* @__PURE__ */ e(fn, { disablePadding: !0, sx: { px: 1, mb: 0.5 }, children: /* @__PURE__ */ i(
+                  xn,
+                  {
+                    onClick: () => Me(r.id),
+                    "aria-current": j ? "page" : void 0,
+                    "aria-label": be ? void 0 : r.label,
+                    sx: {
+                      borderRadius: t.borders.radiusPx.md,
+                      // 8px
+                      minHeight: he.avatar.size.md,
+                      // 40px
+                      justifyContent: be ? "initial" : "center",
+                      px: be ? 1.5 : 1,
+                      // Special gradient background for Insight Engine when selected
+                      ...xe && j && {
+                        background: `linear-gradient(135deg, ${f.secondary.main} 0%, ${f.primary.light} 100%)`,
+                        color: "white",
+                        "&:hover": {
+                          background: `linear-gradient(135deg, ${f.secondary.main} 0%, ${f.primary.light} 100%)`
+                        },
+                        "& .MuiListItemIcon-root": {
+                          color: "white"
+                        }
+                      },
+                      // Normal selected state
+                      ...!xe && j && {
+                        backgroundColor: f.primary.main,
+                        color: "white",
+                        "&:hover": {
+                          backgroundColor: f.primary.main
+                        },
+                        "& .MuiListItemIcon-root": {
+                          color: "white"
+                        }
+                      },
+                      // Hover state for non-selected items
+                      ...!j && {
+                        "&:hover": {
+                          backgroundColor: t.effects.overlay.hover
+                          // 8%
+                        }
+                      },
+                      // Special item non-selected state (icon has gradient)
+                      ...xe && !j && {
+                        "& .MuiListItemIcon-root": {
+                          color: f.secondary.main
+                        }
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ e(
+                        Z,
+                        {
+                          sx: {
+                            minWidth: 0,
+                            mr: be ? 1.5 : 0,
+                            justifyContent: "center",
+                            color: j ? "inherit" : f.primary.light
+                          },
+                          children: r.icon
+                        }
+                      ),
+                      be && /* @__PURE__ */ e(
+                        ee,
+                        {
+                          primary: r.label,
+                          primaryTypographyProps: {
+                            fontSize: t.typography.body.small.fontSize,
+                            // 14px
+                            fontWeight: j ? t.typography.label.medium.fontWeight : t.typography.body.medium.fontWeight
+                          }
+                        }
+                      )
+                    ]
+                  }
+                ) }, r.id);
+              })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      l,
+      {
+        component: "main",
+        sx: {
+          flexGrow: 1,
+          mt: "56px",
+          // Height of AppBar
+          // No margin-left needed - the Drawer with flexShrink: 0 already reserves space
+          // Only add margin on mobile when drawer is temporary (overlay)
+          backgroundColor: "background.default",
+          height: "calc(100vh - 56px)",
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          "& > *": {
+            flex: 1,
+            minHeight: 0
+          }
+        },
+        children: B
+      }
+    )
+  ] });
+}
+const et = $("div")(({ theme: n, focused: o }) => ({
+  position: "relative",
+  borderRadius: 12,
+  backgroundColor: o === "true" ? n.palette.common.white : _(n.palette.common.white, 0.1),
+  "&:hover": {
+    backgroundColor: o === "true" ? n.palette.common.white : _(n.palette.common.white, 0.15)
+  },
+  marginRight: n.spacing(2),
+  marginLeft: n.spacing(2),
+  width: "100%",
+  maxWidth: 400,
+  transition: n.transitions.create(["background-color"]),
+  [n.breakpoints.up("sm")]: {
+    marginLeft: n.spacing(3),
+    width: "auto",
+    minWidth: 300
+  }
+})), nt = $("div")(({ theme: n, focused: o }) => ({
+  padding: n.spacing(0, 2),
+  height: "100%",
+  position: "absolute",
+  pointerEvents: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: o === "true" ? f.primary.main : _(n.palette.common.white, 0.5)
+})), tt = $(qe)(({ theme: n, focused: o }) => ({
+  color: o === "true" ? f.primary.main : "inherit",
+  width: "100%",
+  "& .MuiInputBase-input": {
+    padding: n.spacing(1, 4, 1, 0),
+    paddingLeft: `calc(1em + ${n.spacing(4)})`,
+    transition: n.transitions.create("width"),
+    width: "100%",
+    fontSize: 14,
+    "&::placeholder": {
+      color: o === "true" ? f.neutral.gray500 : _(n.palette.common.white, 0.5),
+      opacity: 1
+    }
+  }
+})), ot = $(v)(({ show: n }) => ({
+  position: "absolute",
+  right: 4,
+  top: "50%",
+  transform: "translateY(-50%)",
+  padding: 4,
+  opacity: n === "true" ? 1 : 0,
+  pointerEvents: n === "true" ? "auto" : "none",
+  color: f.neutral.gray500,
+  "&:hover": {
+    backgroundColor: _(f.neutral.gray500, 0.1)
+  }
+})), it = $(Je)(({ theme: n }) => ({
+  backgroundColor: _(n.palette.common.white, 0.1),
+  color: n.palette.common.white,
+  borderRadius: 12,
+  padding: "6px 12px",
+  textTransform: "none",
+  fontSize: 14,
+  fontWeight: 400,
+  minWidth: 180,
+  justifyContent: "space-between",
+  "&:hover": {
+    backgroundColor: _(n.palette.common.white, 0.15)
+  }
+})), Ne = $(v)(({ theme: n }) => ({
+  color: _(n.palette.common.white, 0.7),
+  padding: 8,
+  "&:hover": {
+    backgroundColor: _(n.palette.common.white, 0.1),
+    color: n.palette.common.white
+  }
+}));
+$(l)({
+  display: "flex",
+  alignItems: "center"
+});
+const Xt = ({
+  initialClient: n = "",
+  onClientChange: o
+}) => {
+  const [s, a] = z(null), [u, g] = z(n), c = W((E) => {
+    a(E.currentTarget);
+  }, []), h = W(() => {
+    a(null);
+  }, []), A = W((E) => {
+    g(E.name), o?.(E.id), a(null);
+  }, [o]);
+  return {
+    selectedClient: u,
+    anchorEl: s,
+    isOpen: !!s,
+    handleClick: c,
+    handleClose: h,
+    handleSelect: A
+  };
+}, Yt = ({
+  onUserMenuClick: n
+}) => {
+  const [o, s] = z(null), a = W((c) => {
+    s(c.currentTarget);
+  }, []), u = W(() => {
+    s(null);
+  }, []), g = W((c) => {
+    n?.(c), s(null);
+  }, [n]);
+  return {
+    anchorEl: o,
+    isOpen: !!o,
+    handleClick: a,
+    handleClose: u,
+    handleAction: g
+  };
+}, qt = ({
+  onAppsClick: n
+}) => {
+  const [o, s] = z(null), a = W((c) => {
+    s(c.currentTarget);
+  }, []), u = W(() => {
+    s(null);
+  }, []), g = W((c) => {
+    n?.(c), s(null);
+  }, [n]);
+  return {
+    anchorEl: o,
+    isOpen: !!o,
+    handleClick: a,
+    handleClose: u,
+    handleSelect: g
+  };
+}, Jt = ({
+  onSearch: n
+}) => {
+  const [o, s] = z(""), [a, u] = z(!1), g = W((y) => {
+    s(y.target.value);
+  }, []), c = W((y) => {
+    y.key === "Enter" && n?.(o);
+  }, [n, o]), h = W(() => {
+    s("");
+  }, []), A = W(() => {
+    u(!0);
+  }, []), E = W(() => {
+    u(!1);
+  }, []);
+  return {
+    value: o,
+    isFocused: a,
+    handleChange: g,
+    handleKeyPress: c,
+    handleClear: h,
+    handleFocus: A,
+    handleBlur: E
+  };
+}, Zt = ({
+  defaultExpanded: n = !0,
+  onExpandedChange: o
+} = {}) => {
+  const [s, a] = z(n), u = W(() => {
+    a((h) => {
+      const A = !h;
+      return o?.(A), A;
+    });
+  }, [o]), g = W(() => {
+    a(!0), o?.(!0);
+  }, [o]), c = W(() => {
+    a(!1), o?.(!1);
+  }, [o]);
+  return {
+    isExpanded: s,
+    toggle: u,
+    expand: g,
+    collapse: c
+  };
+}, eo = ({ height: n = 28 }) => /* @__PURE__ */ e(l, { sx: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ e("img", { src: nn, alt: "Trinity", height: n }) }), no = ({
+  value: n,
+  isFocused: o,
+  placeholder: s = "Search",
+  onChange: a,
+  onKeyPress: u,
+  onClear: g,
+  onFocus: c,
+  onBlur: h
+}) => /* @__PURE__ */ i(et, { focused: o.toString(), children: [
+  /* @__PURE__ */ e(nt, { focused: o.toString(), children: /* @__PURE__ */ e(ge, {}) }),
+  /* @__PURE__ */ e(
+    tt,
+    {
+      placeholder: s,
+      inputProps: { "aria-label": "search" },
+      value: n,
+      onChange: a,
+      onKeyPress: u,
+      onFocus: c,
+      onBlur: h,
+      focused: o.toString()
+    }
+  ),
+  /* @__PURE__ */ e(
+    ot,
+    {
+      show: (n.length > 0).toString(),
+      onClick: g,
+      size: "small",
+      "aria-label": "Clear search",
+      children: /* @__PURE__ */ e(Ee, { fontSize: "small" })
+    }
+  )
+] }), to = ({
+  selectedClient: n,
+  clients: o,
+  anchorEl: s,
+  isOpen: a,
+  onButtonClick: u,
+  onClose: g,
+  onSelect: c
+}) => /* @__PURE__ */ i(Te, { children: [
+  /* @__PURE__ */ e(
+    it,
+    {
+      onClick: u,
+      endIcon: /* @__PURE__ */ e(De, {}),
+      "aria-label": `Current client: ${n}. Click to switch clients`,
+      "aria-haspopup": "listbox",
+      "aria-expanded": a,
+      children: n
+    }
+  ),
+  /* @__PURE__ */ i(
+    me,
+    {
+      id: "client-menu",
+      anchorEl: s,
+      open: a,
+      onClose: g,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      MenuListProps: {
+        "aria-label": "Client selection",
+        role: "listbox"
+      },
+      PaperProps: {
+        sx: {
+          mt: 1,
+          minWidth: 220,
+          borderRadius: "12px",
+          boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)"
+        }
+      },
+      children: [
+        /* @__PURE__ */ e(
+          b,
+          {
+            variant: "subtitle2",
+            sx: { px: 2, py: 1.5, fontWeight: 600, color: "text.primary" },
+            children: "Switch Clients"
+          }
+        ),
+        o.map((h) => /* @__PURE__ */ e(
+          O,
+          {
+            onClick: () => c(h),
+            selected: h.name === n,
+            "aria-selected": h.name === n,
+            role: "option",
+            sx: { py: 1 },
+            children: h.name
+          },
+          h.id
+        ))
+      ]
+    }
+  )
+] }), oo = ({
+  apps: n,
+  anchorEl: o,
+  isOpen: s,
+  onButtonClick: a,
+  onClose: u,
+  onSelect: g
+}) => /* @__PURE__ */ i(Te, { children: [
+  /* @__PURE__ */ e(
+    Ne,
+    {
+      onClick: a,
+      "aria-label": "Applications menu",
+      "aria-haspopup": "menu",
+      "aria-expanded": s,
+      children: /* @__PURE__ */ e(Ze, {})
+    }
+  ),
+  /* @__PURE__ */ i(
+    me,
+    {
+      id: "apps-menu",
+      anchorEl: o,
+      open: s,
+      onClose: u,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      PaperProps: {
+        sx: {
+          mt: 1,
+          minWidth: 280,
+          borderRadius: "12px",
+          boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)"
+        }
+      },
+      children: [
+        /* @__PURE__ */ e(
+          b,
+          {
+            variant: "subtitle2",
+            sx: { px: 2, py: 1.5, fontWeight: 600, color: "text.primary" },
+            children: "Trinity Applications"
+          }
+        ),
+        n.map((c) => /* @__PURE__ */ i(
+          O,
+          {
+            onClick: () => g(c.id),
+            sx: { py: 1.5 },
+            children: [
+              /* @__PURE__ */ e(ee, { primary: c.name }),
+              c.url && /* @__PURE__ */ e(Z, { sx: { minWidth: "auto", ml: 1 }, children: /* @__PURE__ */ e(Ce, { fontSize: "small", sx: { color: "text.secondary" } }) })
+            ]
+          },
+          c.id
+        ))
+      ]
+    }
+  )
+] }), io = ({
+  userInitials: n,
+  userName: o,
+  userEmail: s,
+  anchorEl: a,
+  isOpen: u,
+  onButtonClick: g,
+  onClose: c,
+  onAction: h
+}) => /* @__PURE__ */ i(Te, { children: [
+  /* @__PURE__ */ e(
+    Ne,
+    {
+      onClick: g,
+      "aria-label": "User menu",
+      "aria-haspopup": "menu",
+      "aria-expanded": u,
+      children: /* @__PURE__ */ e(
+        Pe,
+        {
+          sx: {
+            width: 32,
+            height: 32,
+            fontSize: 13,
+            fontWeight: 600,
+            bgcolor: f.secondary.main,
+            color: "white"
+          },
+          children: n
+        }
+      )
+    }
+  ),
+  /* @__PURE__ */ i(
+    me,
+    {
+      id: "user-menu",
+      anchorEl: a,
+      open: u,
+      onClose: c,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      PaperProps: {
+        sx: {
+          mt: 1,
+          minWidth: 280,
+          borderRadius: "12px",
+          boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)"
+        }
+      },
+      children: [
+        /* @__PURE__ */ i(l, { sx: { px: 2, py: 1.5 }, children: [
+          /* @__PURE__ */ e(b, { variant: "subtitle2", sx: { fontWeight: 600 }, children: o }),
+          /* @__PURE__ */ e(b, { variant: "body2", color: "text.secondary", children: s })
+        ] }),
+        /* @__PURE__ */ e(pe, {}),
+        /* @__PURE__ */ i(O, { onClick: () => h("help"), sx: { py: 1.5 }, children: [
+          /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(Fe, { fontSize: "small" }) }),
+          /* @__PURE__ */ e(ee, { primary: "Help & Support" })
+        ] }),
+        /* @__PURE__ */ i(O, { onClick: () => h("notifications"), sx: { py: 1.5 }, children: [
+          /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(je, { fontSize: "small" }) }),
+          /* @__PURE__ */ e(ee, { primary: "Notifications" })
+        ] }),
+        /* @__PURE__ */ e(pe, {}),
+        /* @__PURE__ */ i(O, { onClick: () => h("logout"), sx: { py: 1.5 }, children: [
+          /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(en, { fontSize: "small" }) }),
+          /* @__PURE__ */ e(ee, { primary: "Sign out" })
+        ] })
+      ]
+    }
+  )
+] }), ro = ({
+  onHelpClick: n,
+  onNotificationsClick: o,
+  showHelp: s = !0,
+  showNotifications: a = !0
+}) => /* @__PURE__ */ i(Te, { children: [
+  s && /* @__PURE__ */ e(
+    Ne,
+    {
+      "aria-label": "Help",
+      onClick: n,
+      children: /* @__PURE__ */ e(Fe, {})
+    }
+  ),
+  a && /* @__PURE__ */ e(
+    Ne,
+    {
+      "aria-label": "Notifications",
+      onClick: o,
+      children: /* @__PURE__ */ e(je, {})
+    }
+  )
+] }), rt = [
+  {
+    label: "Today",
+    threads: [
+      { id: "1", title: "KOL Engagement Analysis", preview: "What are the top performing KOLs...", timestamp: /* @__PURE__ */ new Date(), messageCount: 8 },
+      { id: "2", title: "Q4 Performance Review", preview: "Show me the Q4 metrics...", timestamp: /* @__PURE__ */ new Date(), isStarred: !0, messageCount: 12 }
+    ]
+  },
+  {
+    label: "Yesterday",
+    threads: [
+      { id: "3", title: "Content Strategy Planning", preview: "Help me create a content calendar...", timestamp: new Date(Date.now() - 864e5), messageCount: 5 },
+      { id: "4", title: "Competitor Analysis", preview: "Compare our engagement with...", timestamp: new Date(Date.now() - 864e5), messageCount: 15 }
+    ]
+  },
+  {
+    label: "Previous 7 Days",
+    threads: [
+      { id: "5", title: "Regional Performance Deep Dive", preview: "Break down EMEA performance...", timestamp: new Date(Date.now() - 1728e5), messageCount: 22 },
+      { id: "6", title: "Dr. Chen Profile Research", preview: "Tell me about Dr. Sarah Chen...", timestamp: new Date(Date.now() - 2592e5), isStarred: !0, messageCount: 7 },
+      { id: "7", title: "Video Content Analysis", preview: "Which video formats perform best...", timestamp: new Date(Date.now() - 3456e5), messageCount: 4 }
+    ]
+  },
+  {
+    label: "Previous 30 Days",
+    threads: [
+      { id: "8", title: "Annual Planning Discussion", preview: "Help me prepare the annual...", timestamp: new Date(Date.now() - 864e6), messageCount: 30 },
+      { id: "9", title: "Social Media Insights", preview: "Analyze our LinkedIn performance...", timestamp: new Date(Date.now() - 1296e6), messageCount: 11 }
+    ]
+  }
+], at = ({
+  threadGroups: n = rt,
+  selectedThreadId: o,
+  onThreadSelect: s,
+  onNewThread: a,
+  onThreadDelete: u,
+  onThreadRename: g,
+  onThreadStar: c,
+  onClose: h,
+  open: A = !0,
+  width: E = 280
+}) => {
+  const y = we(), k = y.palette.mode === "dark", [L, N] = z(""), [B, q] = z(null), [I, R] = z(null), [C, D] = z(""), m = {
+    background: k ? _e(y.palette.background.paper, 0.95) : y.palette.background.paper,
+    border: y.palette.divider,
+    text: y.palette.text.primary,
+    textSecondary: y.palette.text.secondary,
+    hover: y.palette.action.hover,
+    selected: k ? _e(Y.colors.aiPrimary, 0.15) : _e(Y.colors.aiPrimary, 0.08),
+    selectedBorder: Y.colors.aiPrimary
+  }, T = n.map((S) => ({
+    ...S,
+    threads: S.threads.filter(
+      (V) => V.title.toLowerCase().includes(L.toLowerCase()) || V.preview?.toLowerCase().includes(L.toLowerCase())
+    )
+  })).filter((S) => S.threads.length > 0), M = (S) => {
+    R(S.id), D(S.title);
+  }, F = (S) => {
+    C.trim() && g?.(S, C.trim()), R(null), D("");
+  }, K = () => {
+    R(null), D("");
+  };
+  return A ? /* @__PURE__ */ i(
+    l,
+    {
+      sx: {
+        width: E,
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: m.background,
+        borderRight: `1px solid ${m.border}`,
+        flexShrink: 0
+      },
+      children: [
+        /* @__PURE__ */ i(
+          l,
+          {
+            sx: {
+              px: 2,
+              py: 1.5,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              borderBottom: `1px solid ${m.border}`
+            },
+            children: [
+              /* @__PURE__ */ e(b, { variant: "subtitle2", fontWeight: 600, color: m.text, children: "History" }),
+              /* @__PURE__ */ i(l, { sx: { display: "flex", gap: 0.5 }, children: [
+                /* @__PURE__ */ e(U, { title: "New thread", children: /* @__PURE__ */ e(v, { size: "small", onClick: a, children: /* @__PURE__ */ e(jn, { fontSize: "small" }) }) }),
+                /* @__PURE__ */ e(U, { title: "Close history", children: /* @__PURE__ */ e(v, { size: "small", onClick: h, children: /* @__PURE__ */ e(Un, { fontSize: "small" }) }) })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(l, { sx: { px: 2, py: 1.5 }, children: /* @__PURE__ */ e(
+          tn,
+          {
+            fullWidth: !0,
+            size: "small",
+            placeholder: "Search threads...",
+            value: L,
+            onChange: (S) => N(S.target.value),
+            InputProps: {
+              startAdornment: /* @__PURE__ */ e(yn, { position: "start", children: /* @__PURE__ */ e(ge, { fontSize: "small", sx: { color: m.textSecondary } }) })
+            },
+            sx: {
+              "& .MuiOutlinedInput-root": {
+                backgroundColor: y.palette.action.hover,
+                "& fieldset": {
+                  borderColor: "transparent"
+                },
+                "&:hover fieldset": {
+                  borderColor: y.palette.divider
+                },
+                "&.Mui-focused fieldset": {
+                  borderColor: Y.colors.aiPrimary
+                }
+              }
+            }
+          }
+        ) }),
+        /* @__PURE__ */ i(l, { sx: { flex: 1, overflow: "auto" }, children: [
+          T.map((S, V) => /* @__PURE__ */ i(l, { children: [
+            /* @__PURE__ */ e(
+              b,
+              {
+                variant: "caption",
+                sx: {
+                  px: 2,
+                  py: 1,
+                  display: "block",
+                  color: m.textSecondary,
+                  fontWeight: 500,
+                  fontSize: "0.7rem",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.5px"
+                },
+                children: S.label
+              }
+            ),
+            /* @__PURE__ */ e(gn, { dense: !0, disablePadding: !0, children: S.threads.map((d) => /* @__PURE__ */ e(
+              fn,
+              {
+                disablePadding: !0,
+                onMouseEnter: () => q(d.id),
+                onMouseLeave: () => q(null),
+                secondaryAction: B === d.id && I !== d.id ? /* @__PURE__ */ i(l, { sx: { display: "flex", gap: 0.5 }, children: [
+                  /* @__PURE__ */ e(U, { title: d.isStarred ? "Unstar" : "Star", children: /* @__PURE__ */ e(
+                    v,
+                    {
+                      size: "small",
+                      onClick: (w) => {
+                        w.stopPropagation(), c?.(d.id);
+                      },
+                      sx: { p: 0.5 },
+                      children: d.isStarred ? (
+                        // eslint-disable-next-line no-restricted-syntax -- @intentional-color: star indicator yellow
+                        /* @__PURE__ */ e(on, { fontSize: "small", sx: { color: "#F59E0B", fontSize: 16 } })
+                      ) : /* @__PURE__ */ e(Vn, { fontSize: "small", sx: { fontSize: 16 } })
+                    }
+                  ) }),
+                  /* @__PURE__ */ e(U, { title: "Rename", children: /* @__PURE__ */ e(
+                    v,
+                    {
+                      size: "small",
+                      onClick: (w) => {
+                        w.stopPropagation(), M(d);
+                      },
+                      sx: { p: 0.5 },
+                      children: /* @__PURE__ */ e(Nn, { fontSize: "small", sx: { fontSize: 16 } })
+                    }
+                  ) }),
+                  /* @__PURE__ */ e(U, { title: "Delete", children: /* @__PURE__ */ e(
+                    v,
+                    {
+                      size: "small",
+                      onClick: (w) => {
+                        w.stopPropagation(), u?.(d.id);
+                      },
+                      sx: { p: 0.5 },
+                      children: /* @__PURE__ */ e($n, { fontSize: "small", sx: { fontSize: 16 } })
+                    }
+                  ) })
+                ] }) : d.isStarred && B !== d.id ? (
+                  // eslint-disable-next-line no-restricted-syntax -- @intentional-color: star indicator yellow
+                  /* @__PURE__ */ e(on, { fontSize: "small", sx: { color: "#F59E0B", fontSize: 16, mr: 1 } })
+                ) : null,
+                children: /* @__PURE__ */ i(
+                  xn,
+                  {
+                    selected: o === d.id,
+                    onClick: () => s?.(d.id),
+                    sx: {
+                      py: 1,
+                      px: 2,
+                      borderRadius: 1,
+                      mx: 1,
+                      "&.Mui-selected": {
+                        backgroundColor: m.selected,
+                        borderLeft: `2px solid ${m.selectedBorder}`,
+                        "&:hover": {
+                          backgroundColor: m.selected
+                        }
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ e(Z, { sx: { minWidth: 32 }, children: /* @__PURE__ */ e(
+                        On,
+                        {
+                          fontSize: "small",
+                          sx: {
+                            color: o === d.id ? Y.colors.aiPrimary : m.textSecondary,
+                            fontSize: 18
+                          }
+                        }
+                      ) }),
+                      I === d.id ? /* @__PURE__ */ e(
+                        tn,
+                        {
+                          size: "small",
+                          value: C,
+                          onChange: (w) => D(w.target.value),
+                          onBlur: () => F(d.id),
+                          onKeyDown: (w) => {
+                            w.key === "Enter" && F(d.id), w.key === "Escape" && K();
+                          },
+                          autoFocus: !0,
+                          fullWidth: !0,
+                          sx: {
+                            "& .MuiInputBase-input": {
+                              py: 0.5,
+                              fontSize: "0.875rem"
+                            }
+                          },
+                          onClick: (w) => w.stopPropagation()
+                        }
+                      ) : /* @__PURE__ */ e(
+                        ee,
+                        {
+                          primary: d.title,
+                          secondary: d.preview,
+                          primaryTypographyProps: {
+                            variant: "body2",
+                            fontWeight: o === d.id ? 600 : 400,
+                            noWrap: !0,
+                            sx: {
+                              color: (o === d.id, m.text)
+                            }
+                          },
+                          secondaryTypographyProps: {
+                            variant: "caption",
+                            noWrap: !0,
+                            sx: {
+                              color: m.textSecondary,
+                              fontSize: "0.7rem"
+                            }
+                          }
+                        }
+                      )
+                    ]
+                  }
+                )
+              },
+              d.id
+            )) }),
+            V < T.length - 1 && /* @__PURE__ */ e(pe, { sx: { my: 1, mx: 2 } })
+          ] }, S.label)),
+          T.length === 0 && /* @__PURE__ */ i(
+            l,
+            {
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                py: 4,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ e(Kn, { sx: { fontSize: 40, color: m.textSecondary, mb: 1 } }),
+                /* @__PURE__ */ e(b, { variant: "body2", color: m.textSecondary, textAlign: "center", children: L ? "No threads match your search" : "No conversation history" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i(
+          l,
+          {
+            sx: {
+              px: 2,
+              py: 1.5,
+              borderTop: `1px solid ${m.border}`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ i(b, { variant: "caption", color: m.textSecondary, children: [
+                n.reduce((S, V) => S + V.threads.length, 0),
+                " threads"
+              ] }),
+              /* @__PURE__ */ e(U, { title: "More options", children: /* @__PURE__ */ e(v, { size: "small", children: /* @__PURE__ */ e(Fn, { fontSize: "small" }) }) })
+            ]
+          }
+        )
+      ]
+    }
+  ) : null;
+}, X = {
+  section: `${t.spacing.component.gapLg}px`,
+  // 24px - between major sections
+  content: `${t.spacing.component.gapMd}px`,
+  // 16px - within sections  
+  element: `${t.spacing.component.gapSm}px`,
+  // 8px  - between related elements
+  inset: `${t.spacing.component.paddingMd}px`,
+  // 16px - container padding
+  insetSm: `${t.spacing.component.paddingSm}px`
+  // 8px  - small padding
+}, lt = [
+  { id: "gpt-4o", label: "GPT-4o", description: "Most capable model" },
+  { id: "gpt-4o-mini", label: "GPT-4o Mini", description: "Fast and efficient" },
+  { id: "claude-3-5-sonnet", label: "Claude 3.5 Sonnet", description: "Balanced performance" },
+  { id: "claude-3-opus", label: "Claude 3 Opus", description: "Most powerful" },
+  { id: "gemini-pro", label: "Gemini Pro", description: "Multimodal capable" }
+], st = [
+  { id: "web", label: "Web Search", icon: "globe", enabled: !0 },
+  { id: "documents", label: "Documents", icon: "file-text", enabled: !0 },
+  { id: "database", label: "Database", icon: "database", enabled: !1 },
+  { id: "sharepoint", label: "SharePoint", icon: "cloud", enabled: !1 },
+  { id: "projects", label: "Projects", icon: "folder", enabled: !1 }
+], Ge = {
+  default: {
+    content: `Based on my analysis of the available data, here are the key insights:
+
+**Performance Overview**
+The engagement metrics show a strong upward trend, with a 23% increase compared to the previous quarter. This growth is primarily driven by content in the clinical research and treatment guidelines categories.
+
+**Key Findings**
+1. **Peak Engagement Windows**: Tuesday through Thursday between 9am-11am EST consistently show the highest engagement rates
+2. **Content Performance**: Educational content outperforms promotional material by 3.2x
+3. **KOL Impact**: Content shared by key opinion leaders receives 4.5x more engagement
+
+**Recommendations**
+• Prioritize content publication during peak engagement windows
+• Increase investment in educational content formats
+• Expand KOL partnership program based on current success metrics`,
+    sources: [
+      { id: "affiliations", name: "Affiliations", count: 1 },
+      { id: "contact", name: "Contact Details", count: 1 },
+      {
+        id: "publications",
+        name: "Publications",
+        count: 4,
+        items: [
+          {
+            id: "pub-a",
+            label: "Small solitary pulmonary nodules detected at population-based CT screening...",
+            details: {
+              Title: "Small solitary pulmonary nodules (<= 1 cm) detected at population-based CT screening for lung cancer: reliable high-resolution CT features of benign lesions.",
+              Journal: "International Journal of Cancer",
+              "Authorship Position": "Coauthor",
+              "Publication Date": "2024-12-12",
+              "Publication Type": "Journal Article",
+              Tables: "Publications, PublicationRelations",
+              "Last Updated On": "10/29/2025"
+            }
+          },
+          { id: "pub-b", label: "Screening for lung cancer with low-dose CT: analysis of screening data..." },
+          { id: "pub-c", label: "Clinical insights into small cell lung cancer treatment strategies..." },
+          { id: "pub-d", label: "US Lung Screen (USLS) nodule management protocol and outcomes..." }
+        ]
+      },
+      { id: "trials", name: "Clinical Trials", count: 10 },
+      { id: "sci-topics", name: "Scientific Leader Topics", count: 25 },
+      { id: "clin-topics", name: "Clinical Leader Topics", count: 19 },
+      { id: "dig-topics", name: "Digital Leader Topics", count: 31 },
+      { id: "msl", name: "MSL Interactions", count: 2 }
+    ],
+    relatedQuestions: [
+      "What are some discussion questions for this HCP?",
+      "What are some themes I could engage this HCP on?",
+      "What conferences has this HCP attended recently?",
+      "Please summarize this HCP's experience."
+    ]
+  },
+  "What can you help with?": {
+    content: `I'm Insight Engine, your AI-powered research assistant. Here's what I can help you with:
+
+**Research & Analysis**
+• Search across your data sources, documents, and the web
+• Analyze trends and patterns in your data
+• Generate insights from complex datasets
+
+**Content & Strategy**
+• Help draft and refine content
+• Provide competitive intelligence
+• Suggest optimization strategies
+
+**Data Exploration**
+• Query your databases naturally
+• Create visualizations and summaries
+• Connect insights across multiple sources
+
+Simply ask me a question, and I'll search relevant sources to provide a comprehensive answer with citations.`,
+    sources: [
+      { id: "docs", name: "Documentation", count: 2 },
+      { id: "help", name: "Help Articles", count: 3 }
+    ],
+    relatedQuestions: [
+      "Show me recent insights",
+      "Analyze my engagement data",
+      "What are the top performing KOLs?"
+    ]
+  },
+  "Show recent insights": {
+    content: `Here are the most significant insights from the past week:
+
+**📈 Engagement Surge**
+Your immunotherapy content series saw a 156% increase in engagement. The article "Advances in CAR-T Therapy" was shared 2,341 times.
+
+**👥 Rising KOL**
+Dr. Sarah Chen from Stanford Medicine has emerged as a key voice in precision oncology. Her engagement rate is 3x higher than average.
+
+**🌍 Regional Performance**
+EMEA region outperformed other regions by 45%, driven primarily by localized content strategy in Germany and UK markets.
+
+**📊 Content Insights**
+Video content is generating 2.8x more engagement than static posts. Consider increasing video production.`,
+    sources: [
+      { id: "analytics", name: "Analytics Dashboard", count: 5 },
+      { id: "kol-report", name: "KOL Tracking", count: 3 },
+      { id: "regional", name: "Regional Analysis", count: 4 }
+    ],
+    relatedQuestions: [
+      "Tell me more about Dr. Sarah Chen",
+      "Why is EMEA outperforming?",
+      "What video content works best?"
+    ]
+  }
+}, ct = ({
+  initialMessages: n = [],
+  messages: o,
+  onMessagesChange: s,
+  placeholder: a = "Ask anything...",
+  title: u = "Insight Engine",
+  subtitle: g,
+  onSendMessage: c,
+  isTyping: h = !1,
+  aiAvatar: A,
+  onClose: E,
+  isFullscreen: y = !1,
+  onFullscreenToggle: k,
+  showControls: L = !0,
+  demoMode: N = !0,
+  onNewThread: B,
+  themeMode: q,
+  boxedLayout: I = !0,
+  onBoxedLayoutToggle: R,
+  userInitials: C = "RD",
+  // History sidebar props
+  showHistory: D,
+  onHistoryToggle: m,
+  threadGroups: T,
+  selectedThreadId: M,
+  onThreadSelect: F,
+  onThreadDelete: K,
+  onThreadRename: S,
+  onThreadStar: V
+}) => {
+  const d = we(), w = o !== void 0, [oe, re] = z(n), ae = w ? o : oe, ne = (p) => {
+    if (w) {
+      const r = typeof p == "function" ? p(o) : p;
+      s?.(r);
+    } else
+      re(p);
+  }, [G, le] = z(""), [Q, te] = z(h), [P, se] = z(!1), [ce, Se] = z(!1), [J, fe] = z(!1), [x, Ue] = z("gpt-4o"), [ve, Ke] = z(["web", "documents"]), Me = Oe(null), [Ve, Le] = z(!1), ue = D ?? Ve, ke = m ?? (() => Le((p) => !p)), ie = {
+    background: d.palette.background.default,
+    surface: d.palette.background.paper,
+    inputBg: d.palette.action.hover,
+    text: d.palette.text.primary,
+    textSecondary: d.palette.text.secondary,
+    iconActive: d.palette.primary.main,
+    iconInactive: d.palette.text.disabled,
+    buttonHighlight: d.palette.primary.main
+  }, ze = () => {
+    Me.current?.scrollIntoView({ behavior: "smooth" });
+  };
+  $e(() => {
+    ze();
+  }, [ae, Q]), $e(() => {
+    te(h);
+  }, [h]);
+  const Qe = (p) => Ge[p] ? Ge[p] : Ge.default, Re = () => {
+    if (!G.trim()) return;
+    const p = {
+      id: Date.now().toString(),
+      role: "user",
+      content: G.trim(),
+      timestamp: /* @__PURE__ */ new Date()
+    };
+    ne((j) => [...j, p]);
+    const r = G.trim();
+    le(""), c?.(r, { proSearch: P }), N && (te(!0), setTimeout(() => {
+      const j = Qe(r), xe = {
+        id: (Date.now() + 1).toString(),
+        role: "assistant",
+        content: j.content,
+        timestamp: /* @__PURE__ */ new Date(),
+        sources: j.sources,
+        relatedQuestions: j.relatedQuestions
+      };
+      ne((be) => [...be, xe]), te(!1);
+    }, 2e3));
+  }, Be = (p) => {
+    le(p);
+  }, Ie = () => {
+    ne([]), B?.();
+  }, We = /* @__PURE__ */ e(Dn, { size: "xs", icon: "sparkles" });
+  return /* @__PURE__ */ i(
+    de,
+    {
+      direction: ue ? "row" : "column",
+      sx: {
+        height: "100%",
+        width: "100%",
+        minHeight: 0
+      },
+      children: [
+        ue && /* @__PURE__ */ e(
+          at,
+          {
+            open: ue,
+            threadGroups: T,
+            selectedThreadId: M,
+            onThreadSelect: F,
+            onNewThread: Ie,
+            onThreadDelete: K,
+            onThreadRename: S,
+            onThreadStar: V,
+            onClose: ke,
+            width: y ? 280 : 240
+          }
+        ),
+        /* @__PURE__ */ i(
+          de,
+          {
+            sx: {
+              flex: 1,
+              minWidth: 0,
+              height: "100%",
+              overflow: "hidden",
+              background: Y.gradient.subtle
+            },
+            children: [
+              /* @__PURE__ */ i(
+                de,
+                {
+                  direction: "row",
+                  alignItems: "center",
+                  spacing: X.element,
+                  sx: {
+                    px: X.inset,
+                    py: X.insetSm,
+                    borderBottom: 1,
+                    borderColor: "divider",
+                    bgcolor: "background.default",
+                    flexShrink: 0
+                  },
+                  children: [
+                    !ue && /* @__PURE__ */ e(U, { title: "Show history", children: /* @__PURE__ */ e(
+                      v,
+                      {
+                        size: "small",
+                        onClick: ke,
+                        sx: { color: ie.iconInactive },
+                        children: /* @__PURE__ */ e(ye, { name: "menu", size: "small" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ e(U, { title: "New thread", children: /* @__PURE__ */ e(
+                      v,
+                      {
+                        size: "small",
+                        onClick: Ie,
+                        sx: { color: ie.iconInactive },
+                        children: /* @__PURE__ */ e(ye, { name: "plus", size: "small" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ i(de, { direction: "row", alignItems: "center", spacing: 1, sx: { flex: 1 }, children: [
+                      A || We,
+                      /* @__PURE__ */ e(b, { variant: "subtitle2", fontWeight: 600, color: "text.primary", children: u }),
+                      P && /* @__PURE__ */ e(
+                        Cn,
+                        {
+                          label: "Pro",
+                          size: "small",
+                          sx: {
+                            height: 20,
+                            fontSize: 10,
+                            fontWeight: 600,
+                            background: Y.gradient.diagonal,
+                            // eslint-disable-next-line no-restricted-syntax -- @intentional-color: white on gradient
+                            color: "#FFFFFF"
+                          }
+                        }
+                      )
+                    ] }),
+                    L && /* @__PURE__ */ i(de, { direction: "row", spacing: 0.5, children: [
+                      /* @__PURE__ */ e(U, { title: ue ? "Hide history" : "Show history", children: /* @__PURE__ */ e(
+                        v,
+                        {
+                          size: "small",
+                          onClick: ke,
+                          sx: { color: ue ? ie.iconActive : ie.iconInactive },
+                          children: /* @__PURE__ */ e(ye, { name: "clock", size: "small" })
+                        }
+                      ) }),
+                      y && R && /* @__PURE__ */ e(U, { title: I ? "Full width" : "Boxed layout", children: /* @__PURE__ */ e(
+                        v,
+                        {
+                          size: "small",
+                          onClick: R,
+                          sx: { color: ie.iconInactive },
+                          children: /* @__PURE__ */ e(ye, { name: I ? "maximize-2" : "minimize-2", size: "small" })
+                        }
+                      ) }),
+                      k && /* @__PURE__ */ e(U, { title: y ? "Exit fullscreen" : "Fullscreen", children: /* @__PURE__ */ e(
+                        v,
+                        {
+                          size: "small",
+                          onClick: k,
+                          sx: { color: ie.iconInactive },
+                          children: /* @__PURE__ */ e(ye, { name: y ? "minimize" : "maximize", size: "small" })
+                        }
+                      ) }),
+                      E && /* @__PURE__ */ e(U, { title: "Close", children: /* @__PURE__ */ e(
+                        v,
+                        {
+                          size: "small",
+                          onClick: E,
+                          sx: { color: ie.iconInactive },
+                          children: /* @__PURE__ */ e(ye, { name: "x", size: "small" })
+                        }
+                      ) })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(
+                l,
+                {
+                  sx: {
+                    flex: 1,
+                    overflow: "auto",
+                    minHeight: 0,
+                    display: "flex",
+                    flexDirection: "column"
+                  },
+                  children: /* @__PURE__ */ i(
+                    de,
+                    {
+                      sx: {
+                        flex: 1,
+                        px: X.inset,
+                        // Add horizontal padding for whitespace
+                        ...y && I && { maxWidth: 900, mx: "auto", px: 3 }
+                      },
+                      children: [
+                        ae.length === 0 && /* @__PURE__ */ i(
+                          de,
+                          {
+                            alignItems: "center",
+                            justifyContent: "center",
+                            spacing: X.content,
+                            sx: { flex: 1, p: X.section, minHeight: 400 },
+                            children: [
+                              /* @__PURE__ */ e(
+                                l,
+                                {
+                                  sx: {
+                                    width: 56,
+                                    height: 56,
+                                    borderRadius: vn.lg,
+                                    background: Y.gradient.subtle,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center"
+                                  },
+                                  children: /* @__PURE__ */ e(ye, { name: "sparkles", size: "medium", color: Y.colors.aiPrimary })
+                                }
+                              ),
+                              /* @__PURE__ */ e(b, { variant: "h6", fontWeight: 600, color: "text.primary", children: "What do you want to know?" }),
+                              /* @__PURE__ */ e(b, { variant: "body2", color: "text.secondary", textAlign: "center", sx: { maxWidth: 300 }, children: "Ask anything and I'll search across your sources to find the answer" })
+                            ]
+                          }
+                        ),
+                        ae.map((p) => /* @__PURE__ */ i(
+                          kn,
+                          {
+                            role: p.role,
+                            content: p.content,
+                            aiAvatar: A || We,
+                            userInitials: C,
+                            showCopy: p.role === "assistant",
+                            showFeedback: p.role === "assistant",
+                            showShare: p.role === "assistant",
+                            showRegenerate: p.role === "assistant",
+                            children: [
+                              p.sources && p.sources.length > 0 && /* @__PURE__ */ e(l, { sx: { mt: X.content }, children: /* @__PURE__ */ e(zn, { sources: p.sources }) }),
+                              p.relatedQuestions && p.relatedQuestions.length > 0 && /* @__PURE__ */ e(l, { sx: { mt: X.content }, children: /* @__PURE__ */ e(
+                                In,
+                                {
+                                  questions: p.relatedQuestions,
+                                  onQuestionClick: Be
+                                }
+                              ) })
+                            ]
+                          },
+                          p.id
+                        )),
+                        Q && /* @__PURE__ */ i(
+                          de,
+                          {
+                            direction: "row",
+                            alignItems: "flex-start",
+                            spacing: X.content,
+                            sx: { p: X.inset, bgcolor: "background.default" },
+                            children: [
+                              A || We,
+                              /* @__PURE__ */ e(Wn, { text: "Searching..." })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ e("div", { ref: Me })
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ i(
+                de,
+                {
+                  sx: {
+                    px: X.inset,
+                    py: X.insetSm,
+                    bgcolor: "background.default",
+                    borderTop: 1,
+                    borderColor: "divider",
+                    flexShrink: 0,
+                    ...y && I && {
+                      alignItems: "center",
+                      "& > *": { maxWidth: 900, width: "100%" }
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ e(
+                      An,
+                      {
+                        value: G,
+                        onChange: le,
+                        onSubmit: (p) => {
+                          Re(), c?.(p, {});
+                        },
+                        placeholder: "Ask anything. Type @ for mentions and / for shortcuts.",
+                        models: lt,
+                        selectedModel: x,
+                        onModelChange: Ue,
+                        sources: st.map((p) => ({
+                          id: p.id,
+                          label: p.label,
+                          icon: p.icon,
+                          enabled: ve.includes(p.id)
+                        })),
+                        onSourceToggle: (p, r) => {
+                          Ke(
+                            (j) => r ? [...j, p] : j.filter((xe) => xe !== p)
+                          );
+                        },
+                        deepThinkingEnabled: P,
+                        onDeepThinkingToggle: (p) => se(p),
+                        webSearchEnabled: !0,
+                        onWebSearchToggle: () => {
+                        },
+                        onAttachmentClick: () => console.log("Attachment clicked"),
+                        onVoiceClick: () => fe(!J),
+                        isListening: J
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      Pn,
+                      {
+                        open: ce,
+                        isListening: J,
+                        onListeningToggle: () => fe(!J),
+                        onClose: () => Se(!1)
+                      }
+                    ),
+                    !ce && /* @__PURE__ */ e(En, { isListening: J, onStop: () => fe(!1) }),
+                    /* @__PURE__ */ e(b, { variant: "caption", color: "text.secondary", sx: { mt: X.element, textAlign: "center" }, children: "Insight Engine can make mistakes. Verify important information." })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, dt = ({
+  open: n,
+  children: o,
+  defaultWidth: s = 400,
+  minWidth: a = 320,
+  maxWidth: u = 800,
+  onClose: g,
+  side: c = "right",
+  header: h,
+  showCloseButton: A = !0,
+  sx: E,
+  contentSx: y
+}) => {
+  const [k, L] = z(s), [N, B] = z(!1), q = Oe(null), I = Oe(0), R = Oe(0), C = W((T) => {
+    T.preventDefault(), B(!0), I.current = T.clientX, R.current = k;
+  }, [k]), D = W((T) => {
+    if (!N) return;
+    const M = c === "right" ? I.current - T.clientX : T.clientX - I.current, F = Math.min(u, Math.max(a, R.current + M));
+    L(F);
+  }, [N, a, u, c]), m = W(() => {
+    B(!1);
+  }, []);
+  return $e(() => (N && (document.addEventListener("mousemove", D), document.addEventListener("mouseup", m), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none"), () => {
+    document.removeEventListener("mousemove", D), document.removeEventListener("mouseup", m), document.body.style.cursor = "", document.body.style.userSelect = "";
+  }), [N, D, m]), n ? /* @__PURE__ */ i(
+    l,
+    {
+      ref: q,
+      sx: {
+        position: "relative",
+        width: k,
+        minWidth: a,
+        maxWidth: u,
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "background.paper",
+        // Use MUI theme
+        borderLeft: c === "right" ? "1px solid" : "none",
+        borderRight: c === "left" ? "1px solid" : "none",
+        borderColor: "divider",
+        // Use MUI theme
+        transition: N ? "none" : "width 0.1s ease-out",
+        overflow: "hidden",
+        flexShrink: 0,
+        ...E
+      },
+      children: [
+        /* @__PURE__ */ e(
+          l,
+          {
+            onMouseDown: C,
+            sx: {
+              position: "absolute",
+              top: 0,
+              [c === "right" ? "left" : "right"]: 0,
+              width: 6,
+              height: "100%",
+              cursor: "col-resize",
+              zIndex: 10,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              "&:hover": {
+                "& .resize-indicator": {
+                  backgroundColor: "primary.light",
+                  // Use MUI theme
+                  opacity: 1
+                }
+              },
+              ...N && {
+                "& .resize-indicator": {
+                  backgroundColor: "primary.light",
+                  // Use MUI theme
+                  opacity: 1
+                }
+              }
+            },
+            children: /* @__PURE__ */ e(
+              l,
+              {
+                className: "resize-indicator",
+                sx: {
+                  width: 3,
+                  height: 40,
+                  borderRadius: 2,
+                  backgroundColor: "action.hover",
+                  // Use MUI theme
+                  opacity: 0.5,
+                  transition: `all ${t.motion.duration.fast}`
+                }
+              }
+            )
+          }
+        ),
+        h && /* @__PURE__ */ i(
+          l,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              p: 2,
+              borderBottom: "1px solid",
+              borderColor: "divider",
+              // Use MUI theme
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ e(l, { sx: { flex: 1 }, children: h }),
+              A && /* @__PURE__ */ e(U, { title: "Close panel", children: /* @__PURE__ */ e(
+                v,
+                {
+                  size: "small",
+                  onClick: g,
+                  sx: {
+                    color: "text.secondary",
+                    // Use MUI theme
+                    "&:hover": {
+                      backgroundColor: t.effects.overlay.hover
+                      // 8%
+                    }
+                  },
+                  children: /* @__PURE__ */ e("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ e("path", { d: "M18 6L6 18M6 6l12 12" }) })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          l,
+          {
+            sx: {
+              flex: 1,
+              overflow: "hidden",
+              minHeight: 0,
+              display: "flex",
+              flexDirection: "column",
+              ...y
+            },
+            children: o
+          }
+        )
+      ]
+    }
+  ) : null;
+}, ht = ({
+  open: n = !1,
+  onClick: o,
+  position: s = "bottom-right",
+  offset: a = { x: 24, y: 24 },
+  showBadge: u = !1,
+  badgeContent: g,
+  size: c = "large",
+  tooltip: h = "Ask AI",
+  disabled: A = !1,
+  zIndex: E = 1e3
+}) => {
+  we().palette.mode;
+  const k = {
+    position: "fixed",
+    zIndex: E
+  };
+  switch (s) {
+    case "bottom-right":
+      k.bottom = a.y, k.right = a.x;
+      break;
+    case "bottom-left":
+      k.bottom = a.y, k.left = a.x;
+      break;
+    case "top-right":
+      k.top = a.y, k.right = a.x;
+      break;
+    case "top-left":
+      k.top = a.y, k.left = a.x;
+      break;
+  }
+  const L = /* @__PURE__ */ i(
+    Sn,
+    {
+      color: "primary",
+      onClick: o,
+      disabled: A,
+      size: c,
+      sx: {
+        background: Y.gradient.diagonal,
+        boxShadow: Y.gradient.glow,
+        transition: "all 0.3s ease",
+        "&:hover": {
+          background: Y.gradient.diagonal,
+          boxShadow: Y.gradient.glow,
+          transform: "scale(1.05)"
+        },
+        "&:active": {
+          transform: "scale(0.95)"
+        },
+        "&.Mui-disabled": {
+          background: "action.disabledBackground",
+          // Use MUI theme
+          boxShadow: "none"
+        }
+      },
+      children: [
+        /* @__PURE__ */ e(bn, { sx: { color: "common.white" } }),
+        " "
+      ]
+    }
+  );
+  return /* @__PURE__ */ e(l, { sx: k, children: u ? /* @__PURE__ */ e(
+    wn,
+    {
+      badgeContent: g,
+      color: "error",
+      overlap: "circular",
+      sx: {
+        "& .MuiBadge-badge": {
+          backgroundColor: "secondary.main",
+          // Use MUI theme
+          color: "common.white"
+          // Use MUI theme
+        }
+      },
+      children: /* @__PURE__ */ e(U, { title: h, placement: "left", children: L })
+    }
+  ) : /* @__PURE__ */ e(U, { title: h, placement: "left", children: L }) });
+}, pt = "insight-engine", mt = t.spacing.layout.aiPanelWidth, ut = ({
+  isFullscreen: n,
+  headerHeight: o,
+  sidebarWidth: s,
+  panelZIndex: a,
+  navStyle: u
+}) => {
+  const g = {
+    position: "fixed",
+    top: o,
+    height: `calc(100vh - ${o}px)`,
+    zIndex: a
+  };
+  return n ? {
+    ...g,
+    left: u === "sidebar" ? s : 0,
+    right: 0,
+    bottom: 0
+  } : {
+    ...g,
+    right: 0
+  };
+}, gt = ({
+  aiPanelFullscreen: n,
+  contentSx: o
+}) => ({
+  flex: 1,
+  minHeight: 0,
+  bgcolor: "background.default",
+  overflow: "auto",
+  display: n ? "none" : "block",
+  ...o
+}), ft = ({
+  aiPanelOpen: n,
+  aiPanelFullscreen: o,
+  aiPanelWidth: s,
+  transition: a
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  minHeight: 0,
+  transition: a,
+  marginRight: n && !o ? `${s}px` : 0
+}), xt = ({
+  children: n,
+  navStyle: o = "sidebar",
+  aiTrigger: s,
+  companyName: a = "Trinity",
+  navItems: u = [],
+  selectedNavItem: g,
+  onSelectedNavItemChange: c,
+  user: h,
+  clientName: A,
+  clients: E,
+  onClientChange: y,
+  onNavigate: k,
+  fabProps: L,
+  panelProps: N,
+  aiPanelWidth: B = mt,
+  contentSx: q
+}) => {
+  const I = we();
+  Ae(I.breakpoints.down("md"));
+  const R = s ?? (o === "sidebar" ? "sidebar" : "fab"), [C, D] = z(!1), [m, T] = z(!1), [M, F] = z(!0), K = W(() => {
+    D((P) => !P);
+  }, []), S = W(() => {
+    D(!1), T(!1);
+  }, []), V = W(() => {
+    T((P) => !P);
+  }, []), d = W(
+    (P) => {
+      if (P === pt) {
+        K();
+        return;
+      }
+      c?.(P), k?.(P);
+    },
+    [K, c, k]
+  ), { layout: w } = t.spacing, oe = w.headerHeight, re = w.sidebarWidthExpanded, ae = w.sidebarWidthCollapsed, ne = () => {
+    if (R === "none" || !C && !m) return null;
+    const P = I.zIndex.drawer - 1, ce = ut({
+      isFullscreen: m,
+      headerHeight: oe,
+      sidebarWidth: M ? re : ae,
+      panelZIndex: P,
+      navStyle: o
+    });
+    return /* @__PURE__ */ e(
+      dt,
+      {
+        open: C,
+        defaultWidth: B,
+        minWidth: 320,
+        maxWidth: m ? void 0 : 800,
+        side: "right",
+        showCloseButton: !1,
+        sx: {
+          ...ce,
+          bgcolor: "background.paper",
+          // Remove shadow when fullscreen to eliminate gap appearance
+          boxShadow: C && !m ? t.effects.shadow.floating : "none",
+          // In fullscreen mode, take full width and disable resize
+          ...m && {
+            width: "auto",
+            minWidth: "auto",
+            maxWidth: "none"
+          }
+        },
+        contentSx: {
+          display: "flex",
+          flexDirection: "column",
+          height: "100%"
+        },
+        children: /* @__PURE__ */ e(
+          ct,
+          {
+            showControls: !0,
+            onClose: S,
+            isFullscreen: m,
+            onFullscreenToggle: V,
+            ...N
+          }
+        )
+      }
+    );
+  }, G = () => {
+    if (R !== "fab") return null;
+    const P = w.gutter, se = {
+      x: C ? B + P : P,
+      y: P
+    };
+    return /* @__PURE__ */ e(
+      ht,
+      {
+        onClick: K,
+        open: C,
+        position: "bottom-right",
+        offset: se,
+        zIndex: I.zIndex.drawer + 1,
+        ...L
+      }
+    );
+  }, le = I.transitions.create(["margin", "width"], {
+    easing: I.transitions.easing.sharp,
+    duration: I.transitions.duration.enteringScreen
+  }), Q = gt({
+    aiPanelFullscreen: m,
+    contentSx: q
+  }), te = ft({
+    aiPanelOpen: C,
+    aiPanelFullscreen: m,
+    aiPanelWidth: B,
+    transition: le
+  });
+  return o === "sidebar" ? /* @__PURE__ */ i(l, { sx: { display: "flex", minHeight: "100vh" }, children: [
+    /* @__PURE__ */ e(l, { sx: te, children: /* @__PURE__ */ e(
+      Zn,
+      {
+        appName: a,
+        clientName: A,
+        clients: E,
+        onClientChange: y,
+        navItems: u,
+        selectedNavItem: g,
+        onNavItemClick: d,
+        userName: h?.name,
+        userEmail: h?.email,
+        userInitials: h?.initials,
+        sidebarExpanded: M,
+        onSidebarExpandedChange: F,
+        children: /* @__PURE__ */ e(l, { sx: Q, children: n })
+      }
+    ) }),
+    ne(),
+    G()
+  ] }) : /* @__PURE__ */ i(l, { sx: { display: "flex", flexDirection: "column", minHeight: "100vh" }, children: [
+    /* @__PURE__ */ e(
+      Gn,
+      {
+        appName: a,
+        clientName: A,
+        clients: E,
+        onClientChange: y,
+        userName: h?.name,
+        userEmail: h?.email,
+        userInitials: h?.initials
+      }
+    ),
+    /* @__PURE__ */ e(
+      l,
+      {
+        component: "main",
+        sx: {
+          ...te,
+          ...Q,
+          pt: `${w.contentPadding}px`
+          // Account for fixed header
+        },
+        children: n
+      }
+    ),
+    ne(),
+    G()
+  ] });
+}, ao = (n) => ($e(() => {
+  process.env.NODE_ENV === "development" && console.warn(
+    '[Trinity Design System] AIFabLayout is deprecated and will be removed in v2.0.0. Use AppLayout with navStyle="topnav" and aiTrigger="fab" instead. See migration guide: https://trinity.design/migration'
+  );
+}, []), /* @__PURE__ */ e(xt, { aiTrigger: "fab", ...n }));
+export {
+  oo as A,
+  to as C,
+  ro as H,
+  ct as I,
+  dt as R,
+  no as S,
+  Gn as T,
+  io as U,
+  Zn as a,
+  eo as b,
+  Yt as c,
+  qt as d,
+  Jt as e,
+  Zt as f,
+  xt as g,
+  ao as h,
+  Xt as u
+};