@trinityui/design-system 2.2.1 → 2.2.4

package/dist/app-shell.js

@@ -6,7 +6,7 @@ import Le from "@mui/icons-material/Search";
 import sr from "@mui/icons-material/Clear";
 import Or from "@mui/icons-material/Apps";
 import cr from "@mui/icons-material/KeyboardArrowDown";
-import Sr from "@mui/icons-material/HelpOutline";
+import Sr from "@mui/icons-material/HelpOutlined";
 import zr from "@mui/icons-material/NotificationsNone";
 import Fr from "@mui/icons-material/Logout";
 import $e from "@mui/icons-material/OpenInNew";
@@ -137,8 +137,8 @@ import Qt from "@mui/icons-material/Timeline";
 import Zt from "@mui/icons-material/ThumbUpOutlined";
 import qt from "@mui/icons-material/ThumbDownOutlined";
 import { ThumbsDown as Yt, ThumbsUp as Xt, Star as Wr, Paperclip as eo, Zap as ro, Cpu as Jt, Mic as ei, Activity as ri, Award as oi, Shield as ni, Layers as ti, Box as ii, Package as ai, Gift as li, Moon as si, Sun as ci, Power as di, Battery as pi, WifiOff as hi, Wifi as mi, DownloadCloud as ui, UploadCloud as gi, Cloud as fi, ExternalLink as xi, Terminal as bi, Code as yi, VolumeX as vi, Volume2 as Ci, SkipBack as wi, SkipForward as ki, Square as Si, Pause as zi, Play as Fi, Sidebar as Ii, Minimize as Ai, Maximize as Ri, Columns as Wi, List as Di, Grid as oo, EyeOff as Ei, Eye as Pi, Globe as Hi, MapPin as $i, Clock as Mi, Calendar as Ti, Tag as Bi, Flag as Li, Bookmark as Oi, Heart as no, Database as Vi, TrendingDown as ji, TrendingUp as to, PieChart as Ui, BarChart2 as Ni, Key as Gi, Unlock as _i, Lock as Ki, LogIn as Qi, LogOut as Zi, Settings as qi, UserMinus as Yi, UserPlus as Xi, Users as Ji, User as ea, Link as ra, FileText as oa, Music as na, Video as ta, Image as ia, FolderPlus as aa, Folder as la, File as sa, BellOff as ca, Bell as da, Send as pa, MessageSquare as ha, Phone as ma, Mail as ua, CheckCircle as io, HelpCircle as ga, Info as fa, AlertTriangle as xa, AlertCircle as ba, Check as ya, ZoomOut as va, ZoomIn as Ca, Search as wa, ArrowUp as ao, Filter as ka, Printer as Sa, Share2 as za, Upload as Fa, Download as Ia, RefreshCw as Aa, RotateCw as Ra, RotateCcw as Wa, Scissors as Da, Clipboard as Ea, Copy as Pa, Save as Ha, Trash2 as $a, Edit2 as Ma, Minus as Ta, Plus as Ba, MoreHorizontal as La, MoreVertical as Oa, ChevronDown as Va, ChevronUp as ja, ChevronRight as Ua, ChevronLeft as Na, ArrowDown as Ga, ArrowRight as _a, ArrowLeft as Ka, X as Qa, Menu as Za, Home as qa } from "react-feather";
-import Ya from "@mui/icons-material/ChatBubbleOutline";
-import Xa from "@mui/icons-material/DeleteOutline";
+import Ya from "@mui/icons-material/ChatBubbleOutlined";
+import Xa from "@mui/icons-material/DeleteOutlined";
 const r = {
   // Color Primitives
   colors: {
@@ -2249,7 +2249,7 @@ const il = {
                       yr,
                       {
                         placeholder: "Search",
-                        inputProps: { "aria-label": "search" },
+                        slotProps: { input: { "aria-label": "search" } },
                         value: pe,
                         onChange: De,
                         onKeyPress: _e,
@@ -2322,11 +2322,10 @@ const il = {
                         vertical: "top",
                         horizontal: "right"
                       },
-                      MenuListProps: {
+                      slotProps: { list: {
                         "aria-label": "Client selection",
                         role: "listbox"
-                      },
-                      PaperProps: {
+                      }, paper: {
                         sx: {
                           mt: 1,
                           minWidth: 220,
@@ -2334,7 +2333,7 @@ const il = {
                           // 12px
                           boxShadow: h.effects.shadow.floating
                         }
-                      },
+                      } },
                       children: [
                         /* @__PURE__ */ e(
                           u,
@@ -2395,7 +2394,7 @@ const il = {
                         vertical: "top",
                         horizontal: "right"
                       },
-                      PaperProps: {
+                      slotProps: { paper: {
                         sx: {
                           mt: 1,
                           minWidth: 240,
@@ -2403,7 +2402,7 @@ const il = {
                           // 12px
                           boxShadow: h.effects.shadow.floating
                         }
-                      },
+                      } },
                       children: [
                         /* @__PURE__ */ a(
                           ce,
@@ -2412,7 +2411,7 @@ const il = {
                             onClick: () => Se("trinity-edge"),
                             children: [
                               /* @__PURE__ */ a(l, { sx: { flex: 1 }, children: [
-                                /* @__PURE__ */ e(u, { variant: "subtitle2", fontWeight: 600, children: "TrinityEDGE" }),
+                                /* @__PURE__ */ e(u, { variant: "subtitle2", sx: { fontWeight: 600 }, children: "TrinityEDGE" }),
                                 /* @__PURE__ */ e(u, { variant: "caption", color: "text.secondary", children: "Apps Access" })
                               ] }),
                               /* @__PURE__ */ e($e, { fontSize: "small", sx: { color: "text.secondary", ml: 2 } })
@@ -2516,7 +2515,7 @@ const il = {
                       vertical: "top",
                       horizontal: "right"
                     },
-                    PaperProps: {
+                    slotProps: { paper: {
                       sx: {
                         mt: 1,
                         minWidth: 240,
@@ -2524,7 +2523,7 @@ const il = {
                         // 12px
                         boxShadow: h.effects.shadow.floating
                       }
-                    },
+                    } },
                     children: [
                       /* @__PURE__ */ a(l, { sx: { px: 2, py: 1.5, display: "flex", alignItems: "center", gap: 1.5 }, children: [
                         /* @__PURE__ */ e(
@@ -2544,7 +2543,7 @@ const il = {
                           }
                         ),
                         /* @__PURE__ */ a(l, { children: [
-                          /* @__PURE__ */ e(u, { variant: "subtitle2", fontWeight: 600, children: p }),
+                          /* @__PURE__ */ e(u, { variant: "subtitle2", sx: { fontWeight: 600 }, children: p }),
                           /* @__PURE__ */ e(u, { variant: "caption", color: "text.secondary", children: g })
                         ] })
                       ] }),
@@ -2612,7 +2611,7 @@ const il = {
                   yr,
                   {
                     placeholder: "Search...",
-                    inputProps: { "aria-label": "search" },
+                    slotProps: { input: { "aria-label": "search" } },
                     value: pe,
                     onChange: De,
                     onKeyPress: (M) => {
@@ -2814,7 +2813,7 @@ const il = {
                     yr,
                     {
                       placeholder: "Search",
-                      inputProps: { "aria-label": "search" },
+                      slotProps: { input: { "aria-label": "search" } },
                       value: me,
                       onChange: Qr,
                       onKeyPress: Mo,
@@ -2880,9 +2879,9 @@ const il = {
                   onClose: Pe,
                   anchorOrigin: { vertical: "bottom", horizontal: "right" },
                   transformOrigin: { vertical: "top", horizontal: "right" },
-                  PaperProps: {
+                  slotProps: { paper: {
                     sx: { mt: 1, minWidth: 220, borderRadius: h.borders.radiusPx.lg, boxShadow: h.effects.shadow.floating }
-                  },
+                  } },
                   children: [
                     /* @__PURE__ */ e(u, { variant: "subtitle2", sx: { px: 2, py: 1.5, fontWeight: h.typography.label.medium.fontWeight }, children: "Switch Clients" }),
                     Array.isArray(s) && s.map((R) => /* @__PURE__ */ e(
@@ -2921,13 +2920,13 @@ const il = {
                   onClose: _r,
                   anchorOrigin: { vertical: "bottom", horizontal: "right" },
                   transformOrigin: { vertical: "top", horizontal: "right" },
-                  PaperProps: {
+                  slotProps: { paper: {
                     sx: { mt: 1, minWidth: 240, borderRadius: h.borders.radiusPx.lg, boxShadow: h.effects.shadow.floating }
-                  },
+                  } },
                   children: [
                     /* @__PURE__ */ a(ce, { sx: { py: 1.5 }, onClick: () => Kr("trinity-edge"), children: [
                       /* @__PURE__ */ a(l, { sx: { flex: 1 }, children: [
-                        /* @__PURE__ */ e(u, { variant: "subtitle2", fontWeight: h.typography.label.medium.fontWeight, children: "TrinityEDGE" }),
+                        /* @__PURE__ */ e(u, { variant: "subtitle2", sx: { fontWeight: h.typography.label.medium.fontWeight }, children: "TrinityEDGE" }),
                         /* @__PURE__ */ e(u, { variant: "caption", color: "text.secondary", children: "Apps Access" })
                       ] }),
                       /* @__PURE__ */ e($e, { fontSize: "small", sx: { color: "text.secondary", ml: 2 } })
@@ -3000,9 +2999,9 @@ const il = {
                   onClose: Gr,
                   anchorOrigin: { vertical: "bottom", horizontal: "right" },
                   transformOrigin: { vertical: "top", horizontal: "right" },
-                  PaperProps: {
+                  slotProps: { paper: {
                     sx: { mt: 1, minWidth: 240, borderRadius: h.borders.radiusPx.lg, boxShadow: h.effects.shadow.floating }
-                  },
+                  } },
                   children: [
                     /* @__PURE__ */ a(l, { sx: { px: 2, py: 1.5, display: "flex", alignItems: "center", gap: 1.5 }, children: [
                       /* @__PURE__ */ e(
@@ -3022,7 +3021,7 @@ const il = {
                         }
                       ),
                       /* @__PURE__ */ a(l, { children: [
-                        /* @__PURE__ */ e(u, { variant: "subtitle2", fontWeight: h.typography.heading.h6.fontWeight, children: p }),
+                        /* @__PURE__ */ e(u, { variant: "subtitle2", sx: { fontWeight: h.typography.heading.h6.fontWeight }, children: p }),
                         /* @__PURE__ */ e(u, { variant: "caption", color: "text.secondary", children: g })
                       ] })
                     ] }),
@@ -3088,7 +3087,7 @@ const il = {
                     yr,
                     {
                       placeholder: "Search...",
-                      inputProps: { "aria-label": "search" },
+                      slotProps: { input: { "aria-label": "search" } },
                       value: me,
                       onChange: Qr,
                       onKeyPress: (R) => {
@@ -3157,7 +3156,7 @@ const il = {
                 borderColor: "divider"
               },
               children: [
-                /* @__PURE__ */ e(u, { variant: "subtitle1", fontWeight: 600, children: "Navigation" }),
+                /* @__PURE__ */ e(u, { variant: "subtitle1", sx: { fontWeight: 600 }, children: "Navigation" }),
                 /* @__PURE__ */ e(A, { onClick: Qe, "aria-label": "Close navigation", children: /* @__PURE__ */ e(fr, {}) })
               ]
             }
@@ -3236,11 +3235,12 @@ const il = {
                         he,
                         {
                           primary: R.label,
-                          primaryTypographyProps: {
-                            fontSize: h.typography.body.small.fontSize,
-                            // 14px
-                            fontWeight: Me ? h.typography.label.medium.fontWeight : h.typography.body.medium.fontWeight
-                          }
+                          slotProps: { primary: {
+                            sx: {
+                              fontSize: h.typography.body.small.fontSize,
+                              fontWeight: Me ? h.typography.label.medium.fontWeight : h.typography.body.medium.fontWeight
+                            }
+                          } }
                         }
                       )
                     ]
@@ -3364,7 +3364,7 @@ const cp = $.forwardRef(
       ul,
       {
         placeholder: n,
-        inputProps: { "aria-label": "search" },
+        slotProps: { input: { "aria-label": "search" } },
         value: t,
         onChange: s,
         onKeyPress: c,
@@ -3413,18 +3413,17 @@ const cp = $.forwardRef(
           vertical: "top",
           horizontal: "right"
         },
-        MenuListProps: {
+        slotProps: { list: {
           "aria-label": "Client selection",
           role: "listbox"
-        },
-        PaperProps: {
+        }, paper: {
           sx: {
             mt: 1,
             minWidth: 220,
             borderRadius: h.borders.radiusPx.lg,
             boxShadow: h.shadows.dropdown
           }
-        },
+        } },
         children: [
           /* @__PURE__ */ e(
             u,
@@ -3478,14 +3477,14 @@ const cp = $.forwardRef(
           vertical: "top",
           horizontal: "right"
         },
-        PaperProps: {
+        slotProps: { paper: {
           sx: {
             mt: 1,
             minWidth: 280,
             borderRadius: h.borders.radiusPx.lg,
             boxShadow: h.shadows.dropdown
           }
-        },
+        } },
         children: [
           /* @__PURE__ */ e(
             u,
@@ -3552,14 +3551,14 @@ const cp = $.forwardRef(
           vertical: "top",
           horizontal: "right"
         },
-        PaperProps: {
+        slotProps: { paper: {
           sx: {
             mt: 1,
             minWidth: 280,
             borderRadius: h.borders.radiusPx.lg,
             boxShadow: h.shadows.dropdown
           }
-        },
+        } },
         children: [
           /* @__PURE__ */ a(l, { sx: { px: 2, py: 1.5 }, children: [
             /* @__PURE__ */ e(u, { variant: "subtitle2", sx: { fontWeight: 600 }, children: i }),
@@ -4220,33 +4219,33 @@ const Eo = Bo(void 0), Sl = () => {
   function({ title: t = "AI-generated content", description: i, modelName: n, confidence: s, lastUpdated: c, details: d, actions: p, sx: g }, m) {
     return /* @__PURE__ */ e(l, { ref: m, sx: { p: 2, ...g }, children: /* @__PURE__ */ a(P, { spacing: 2, children: [
       /* @__PURE__ */ a(l, { children: [
-        /* @__PURE__ */ a(P, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 0.5 }, children: [
+        /* @__PURE__ */ a(P, { direction: "row", spacing: 1, sx: { mb: 0.5, alignItems: "center" }, children: [
           /* @__PURE__ */ e(Cl, { size: "2xs", clickable: !1, showPopover: !1 }),
-          /* @__PURE__ */ e(u, { variant: "subtitle2", fontWeight: 600, children: t })
+          /* @__PURE__ */ e(u, { variant: "subtitle2", sx: { fontWeight: 600 }, children: t })
         ] }),
         i && /* @__PURE__ */ e(u, { variant: "body2", color: "text.secondary", children: i })
       ] }),
       (n || s !== void 0 || c || d) && /* @__PURE__ */ a(l, { children: [
         /* @__PURE__ */ e(we, { sx: { my: 1 } }),
         /* @__PURE__ */ a(P, { spacing: 1, children: [
-          n && /* @__PURE__ */ a(P, { direction: "row", justifyContent: "space-between", children: [
+          n && /* @__PURE__ */ a(P, { direction: "row", sx: { justifyContent: "space-between" }, children: [
             /* @__PURE__ */ e(u, { variant: "caption", color: "text.secondary", children: "Model" }),
-            /* @__PURE__ */ e(u, { variant: "caption", fontWeight: 500, children: n })
+            /* @__PURE__ */ e(u, { variant: "caption", sx: { fontWeight: 500 }, children: n })
           ] }),
-          s !== void 0 && /* @__PURE__ */ a(P, { direction: "row", justifyContent: "space-between", children: [
+          s !== void 0 && /* @__PURE__ */ a(P, { direction: "row", sx: { justifyContent: "space-between" }, children: [
             /* @__PURE__ */ e(u, { variant: "caption", color: "text.secondary", children: "Confidence" }),
-            /* @__PURE__ */ a(u, { variant: "caption", fontWeight: 500, children: [
+            /* @__PURE__ */ a(u, { variant: "caption", sx: { fontWeight: 500 }, children: [
               s,
               "%"
             ] })
           ] }),
-          c && /* @__PURE__ */ a(P, { direction: "row", justifyContent: "space-between", children: [
+          c && /* @__PURE__ */ a(P, { direction: "row", sx: { justifyContent: "space-between" }, children: [
             /* @__PURE__ */ e(u, { variant: "caption", color: "text.secondary", children: "Last updated" }),
-            /* @__PURE__ */ e(u, { variant: "caption", fontWeight: 500, children: c })
+            /* @__PURE__ */ e(u, { variant: "caption", sx: { fontWeight: 500 }, children: c })
           ] }),
-          d?.map((y, b) => /* @__PURE__ */ a(P, { direction: "row", justifyContent: "space-between", children: [
+          d?.map((y, b) => /* @__PURE__ */ a(P, { direction: "row", sx: { justifyContent: "space-between" }, children: [
             /* @__PURE__ */ e(u, { variant: "caption", color: "text.secondary", children: y.label }),
-            /* @__PURE__ */ e(u, { variant: "caption", fontWeight: 500, children: y.value })
+            /* @__PURE__ */ e(u, { variant: "caption", sx: { fontWeight: 500 }, children: y.value })
           ] }, b))
         ] })
       ] }),
@@ -4315,9 +4314,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
         {
           direction: "row",
           spacing: so,
-          justifyContent: "flex-end",
-          alignItems: "flex-start",
-          sx: { py: x.sm, ...W },
+          sx: { py: x.sm, ...W, justifyContent: "flex-end", alignItems: "flex-start" },
           children: [
             /* @__PURE__ */ e(
               Ge,
@@ -4330,7 +4327,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
                   backgroundColor: "action.hover",
                   maxWidth: "75%"
                 },
-                children: /* @__PURE__ */ e(u, { variant: "body2", color: "text.primary", fontWeight: 500, children: t })
+                children: /* @__PURE__ */ e(u, { variant: "body2", color: "text.primary", sx: { fontWeight: 500 }, children: t })
               }
             ),
             c || _
@@ -4339,7 +4336,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
       );
     const re = g || m || y || b;
     return /* @__PURE__ */ a(l, { ref: H, sx: { py: x.sm, ...W }, children: [
-      /* @__PURE__ */ a(P, { direction: "row", spacing: so, alignItems: "flex-start", children: [
+      /* @__PURE__ */ a(P, { direction: "row", spacing: so, sx: { alignItems: "flex-start" }, children: [
         /* @__PURE__ */ e(l, { sx: { flexShrink: 0 }, children: E }),
         /* @__PURE__ */ e(l, { sx: { flex: 1, minWidth: 0 }, children: s ? /* @__PURE__ */ e(Po, { text: "Searching..." }) : /* @__PURE__ */ e(
           u,
@@ -4536,12 +4533,12 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
               onChange: k,
               onKeyDown: W,
               disabled: c || g,
-              InputProps: {
+              slotProps: { input: {
                 disableUnderline: !0,
                 sx: {
                   fontSize: "0.9375rem"
                 }
-              }
+              } }
             }
           ),
           d && /* @__PURE__ */ e(
@@ -4600,7 +4597,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
   }
 ), Po = $.forwardRef(
   function({ text: t = "AI is thinking", sx: i }, n) {
-    return er("AITypingIndicator", "v3.0", "AIMessage streaming state + AIShimmer"), /* @__PURE__ */ a(P, { ref: n, direction: "row", alignItems: "center", spacing: 1, sx: i, children: [
+    return er("AITypingIndicator", "v3.0", "AIMessage streaming state + AIShimmer"), /* @__PURE__ */ a(P, { ref: n, direction: "row", spacing: 1, sx: { ...i, alignItems: "center" }, children: [
       /* @__PURE__ */ e(
         l,
         {
@@ -4638,7 +4635,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
   }
 ), bp = $.forwardRef(
   function({ options: t, onSelect: i, sx: n }, s) {
-    return er("AIQuickReply", "v3.0", "`AISuggestedAction` / `AIActionsGroup`"), /* @__PURE__ */ e(P, { ref: s, direction: "row", spacing: 1, flexWrap: "wrap", useFlexGap: !0, sx: n, children: t.map((c, d) => /* @__PURE__ */ e(
+    return er("AIQuickReply", "v3.0", "`AISuggestedAction` / `AIActionsGroup`"), /* @__PURE__ */ e(P, { ref: s, direction: "row", spacing: 1, useFlexGap: !0, sx: { ...n, flexWrap: "wrap" }, children: t.map((c, d) => /* @__PURE__ */ e(
       Ve,
       {
         label: c,
@@ -4743,17 +4740,17 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
             disabled: c,
             autoFocus: y,
             variant: "standard",
-            InputProps: {
+            slotProps: { input: {
               disableUnderline: !0,
               sx: {
                 fontSize: "0.875rem",
                 lineHeight: 1.5
               }
-            },
+            } },
             sx: { flex: 1 }
           }
         ),
-        /* @__PURE__ */ a(P, { direction: "row", spacing: 0.5, alignItems: "center", children: [
+        /* @__PURE__ */ a(P, { direction: "row", spacing: 0.5, sx: { alignItems: "center" }, children: [
           d && D && !k && /* @__PURE__ */ e(J, { title: "Clear", children: /* @__PURE__ */ e(
             A,
             {
@@ -4967,8 +4964,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
           inputRef: (j) => {
             w.current = j, j && D(j);
           },
-          inputProps: { "aria-label": B },
-          InputProps: H
+          slotProps: { input: { "aria-label": B, ...H?.input } }
         }
       ),
       /* @__PURE__ */ e(Vo, { open: U, anchorEl: q, placement: "bottom-start", sx: { zIndex: O.zIndex.modal + 1 }, children: /* @__PURE__ */ e(
@@ -5007,12 +5003,12 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
                   /* @__PURE__ */ e(
                     he,
                     {
-                      primary: /* @__PURE__ */ a(u, { variant: "body2", fontWeight: 600, children: [
+                      primary: /* @__PURE__ */ a(u, { variant: "body2", sx: { fontWeight: 600 }, children: [
                         E?.trigger.trigger,
                         j.display
                       ] }),
                       secondary: j.secondary,
-                      secondaryTypographyProps: { variant: "caption" }
+                      slotProps: { secondary: { variant: "caption" } }
                     }
                   )
                 ]
@@ -5126,14 +5122,16 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
                   variant: "standard",
                   onKeyDown: j,
                   inputPropsOverride: {
-                    disableUnderline: !0,
-                    sx: {
-                      fontSize: "0.875rem",
-                      lineHeight: 1.6,
-                      color: "text.primary",
-                      "& input::placeholder, & textarea::placeholder": {
-                        color: "text.secondary",
-                        opacity: 1
+                    input: {
+                      disableUnderline: !0,
+                      sx: {
+                        fontSize: "0.875rem",
+                        lineHeight: 1.6,
+                        color: "text.primary",
+                        "& input::placeholder, & textarea::placeholder": {
+                          color: "text.secondary",
+                          opacity: 1
+                        }
                       }
                     }
                   },
@@ -5152,7 +5150,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
                   placeholder: s,
                   disabled: m,
                   variant: "standard",
-                  InputProps: {
+                  slotProps: { input: {
                     disableUnderline: !0,
                     sx: {
                       fontSize: "0.875rem",
@@ -5163,21 +5161,21 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
                         opacity: 1
                       }
                     }
-                  }
+                  } }
                 }
               ) }),
               /* @__PURE__ */ a(
                 P,
                 {
                   direction: "row",
-                  alignItems: "center",
                   sx: {
                     px: x.sm,
                     pb: x.sm,
-                    gap: x.xs
+                    gap: x.xs,
+                    alignItems: "center"
                   },
                   children: [
-                    /* @__PURE__ */ a(P, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+                    /* @__PURE__ */ a(P, { direction: "row", spacing: 0.5, sx: { alignItems: "center" }, children: [
                       y.length > 0 && /* @__PURE__ */ a(ye, { children: [
                         /* @__PURE__ */ e(
                           Ve,
@@ -5223,19 +5221,16 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
                             anchorEl: D,
                             open: Z,
                             onClose: ae,
-                            MenuListProps: {
+                            slotProps: { list: {
                               "aria-label": "AI model selection",
                               role: "listbox"
-                            },
-                            slotProps: {
-                              paper: {
-                                sx: {
-                                  minWidth: 180,
-                                  borderRadius: z.md,
-                                  mt: 0.5
-                                }
+                            }, paper: {
+                              sx: {
+                                minWidth: 180,
+                                borderRadius: z.md,
+                                mt: 0.5
                               }
-                            },
+                            } },
                             children: y.map((L) => /* @__PURE__ */ a(
                               ce,
                               {
@@ -5251,8 +5246,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
                                     {
                                       primary: L.label,
                                       secondary: L.description,
-                                      primaryTypographyProps: { variant: "body2", fontWeight: 500 },
-                                      secondaryTypographyProps: { variant: "caption" }
+                                      slotProps: { primary: { variant: "body2", sx: { fontWeight: 500 } }, secondary: { variant: "caption" } }
                                     }
                                   )
                                 ]
@@ -5308,27 +5302,24 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
                             anchorEl: oe,
                             open: ie,
                             onClose: ze,
-                            MenuListProps: {
+                            slotProps: { list: {
                               "aria-label": "Data source toggles"
-                            },
-                            slotProps: {
-                              paper: {
-                                sx: {
-                                  minWidth: 220,
-                                  borderRadius: z.md,
-                                  mt: 0.5
-                                }
+                            }, paper: {
+                              sx: {
+                                minWidth: 220,
+                                borderRadius: z.md,
+                                mt: 0.5
                               }
-                            },
+                            } },
                             children: S.map((L) => /* @__PURE__ */ a(
                               ce,
                               {
                                 onClick: () => Ie(L.id, L.enabled ?? !1),
                                 sx: { py: 1, justifyContent: "space-between" },
                                 children: [
-                                  /* @__PURE__ */ a(P, { direction: "row", alignItems: "center", spacing: 1, children: [
+                                  /* @__PURE__ */ a(P, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
                                     L.icon && /* @__PURE__ */ e(v, { name: L.icon, size: "small" }),
-                                    /* @__PURE__ */ e(u, { variant: "body2", fontWeight: 500, children: L.label })
+                                    /* @__PURE__ */ e(u, { variant: "body2", sx: { fontWeight: 500 }, children: L.label })
                                   ] }),
                                   /* @__PURE__ */ e(
                                     Uo,
@@ -5339,7 +5330,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
                                         Se.stopPropagation(), Ie(L.id, L.enabled ?? !1);
                                       },
                                       onClick: (Se) => Se.stopPropagation(),
-                                      inputProps: { "aria-label": `Toggle ${L.label}` }
+                                      slotProps: { input: { "aria-label": `Toggle ${L.label}` } }
                                     }
                                   )
                                 ]
@@ -5371,7 +5362,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
                       ) })
                     ] }),
                     /* @__PURE__ */ e(l, { sx: { flex: 1 } }),
-                    /* @__PURE__ */ a(P, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+                    /* @__PURE__ */ a(P, { direction: "row", spacing: 0.5, sx: { alignItems: "center" }, children: [
                       B && /* @__PURE__ */ e(J, { title: k ? "Disable web search" : "Enable web search", children: /* @__PURE__ */ e(
                         A,
                         {
@@ -5536,7 +5527,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
         } : {},
         ...g
       },
-      children: /* @__PURE__ */ a(P, { direction: "row", spacing: 1.5, alignItems: "flex-start", children: [
+      children: /* @__PURE__ */ a(P, { direction: "row", spacing: 1.5, sx: { alignItems: "flex-start" }, children: [
         /* @__PURE__ */ e(
           Oe,
           {
@@ -5553,7 +5544,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
           }
         ),
         /* @__PURE__ */ a(l, { sx: { minWidth: 0, flex: 1 }, children: [
-          /* @__PURE__ */ a(P, { direction: "row", alignItems: "center", spacing: 1, children: [
+          /* @__PURE__ */ a(P, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
             d && /* @__PURE__ */ e(
               l,
               {
@@ -5631,15 +5622,15 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
         P,
         {
           direction: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
           onClick: n ? () => y(!m) : void 0,
           sx: {
             cursor: n ? "pointer" : "default",
-            mb: m ? 1.5 : 0
+            mb: m ? 1.5 : 0,
+            alignItems: "center",
+            justifyContent: "space-between"
           },
           children: [
-            /* @__PURE__ */ a(P, { direction: "row", alignItems: "center", spacing: 1, children: [
+            /* @__PURE__ */ a(P, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
               /* @__PURE__ */ e(u, { variant: "subtitle2", sx: { fontWeight: 600 }, children: i }),
               /* @__PURE__ */ e(
                 Ve,
@@ -5730,7 +5721,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
                 }
               },
               children: [
-                /* @__PURE__ */ a(u, { variant: "body2", fontWeight: 600, color: "text.primary", children: [
+                /* @__PURE__ */ a(u, { variant: "body2", color: "text.primary", sx: { fontWeight: 600 }, children: [
                   i,
                   " (",
                   B,
@@ -5895,7 +5886,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
                         backgroundColor: m.palette.background.paper,
                         borderRight: `1px solid ${m.palette.divider}`
                       },
-                      children: /* @__PURE__ */ e(u, { variant: "caption", fontWeight: 600, color: "text.primary", children: b })
+                      children: /* @__PURE__ */ e(u, { variant: "caption", color: "text.primary", sx: { fontWeight: 600 }, children: b })
                     }
                   ),
                   /* @__PURE__ */ e(l, { sx: { flex: 1, p: x.md }, children: /* @__PURE__ */ e(u, { variant: "caption", color: "text.primary", children: C }) })
@@ -5969,9 +5960,9 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
                   u,
                   {
                     variant: "body2",
-                    fontWeight: 600,
                     color: "text.primary",
                     component: "span",
+                    sx: { fontWeight: 600 },
                     children: n
                   }
                 ),
@@ -6021,8 +6012,8 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
                         u,
                         {
                           variant: "body2",
-                          fontWeight: 600,
                           color: "text.secondary",
+                          sx: { fontWeight: 600 },
                           children: p
                         }
                       ),
@@ -6095,11 +6086,11 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
                                 he,
                                 {
                                   primary: W,
-                                  primaryTypographyProps: {
+                                  slotProps: { primary: {
                                     variant: "body2",
                                     color: "text.primary",
                                     sx: { textAlign: "left" }
-                                  }
+                                  } }
                                 }
                               )
                             ]
@@ -6357,7 +6348,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
           ...S,
           ...p
         },
-        children: /* @__PURE__ */ a(P, { direction: "row", alignItems: "center", spacing: x.md, children: [
+        children: /* @__PURE__ */ a(P, { direction: "row", spacing: x.md, sx: { alignItems: "center" }, children: [
           /* @__PURE__ */ e(
             l,
             {
@@ -6535,8 +6526,8 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
               borderBottom: d ? `1px solid ${f.colors.aiBorder}` : "none",
               backgroundColor: p ? f.colors.aiHover : "transparent"
             },
-            children: /* @__PURE__ */ a(P, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [
-              /* @__PURE__ */ a(P, { direction: "row", alignItems: "center", spacing: 1.5, children: [
+            children: /* @__PURE__ */ a(P, { direction: "row", sx: { alignItems: "center", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ a(P, { direction: "row", spacing: 1.5, sx: { alignItems: "center" }, children: [
                 s && /* @__PURE__ */ e(Je, { size: "small" }),
                 /* @__PURE__ */ a(l, { children: [
                   t && /* @__PURE__ */ e(u, { variant: "subtitle2", sx: { fontWeight: 600 }, children: t }),
@@ -6577,7 +6568,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
             }
           },
           children: [
-            /* @__PURE__ */ a(P, { direction: "row", alignItems: "center", spacing: 1.5, children: [
+            /* @__PURE__ */ a(P, { direction: "row", spacing: 1.5, sx: { alignItems: "center" }, children: [
               n && /* @__PURE__ */ e(v, { name: n, size: "small", color: f.colors.aiPrimary }),
               /* @__PURE__ */ a(l, { children: [
                 /* @__PURE__ */ e(u, { variant: "body2", sx: { fontWeight: 500 }, children: t }),
@@ -6634,7 +6625,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
           } : {},
           ...p
         },
-        children: /* @__PURE__ */ a(P, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+        children: /* @__PURE__ */ a(P, { direction: "row", spacing: 2, sx: { alignItems: "flex-start" }, children: [
           n || /* @__PURE__ */ e(Je, { size: "medium" }),
           /* @__PURE__ */ a(l, { sx: { flex: 1, minWidth: 0 }, children: [
             /* @__PURE__ */ e(u, { variant: "subtitle2", sx: { fontWeight: 600 }, children: t }),
@@ -6655,7 +6646,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
             ),
             s.length > 0 && /* @__PURE__ */ a(ye, { children: [
               /* @__PURE__ */ e(we, { sx: { my: 1.5 } }),
-              /* @__PURE__ */ e(P, { direction: "row", spacing: 0.5, flexWrap: "wrap", useFlexGap: !0, children: s.map((m, y) => /* @__PURE__ */ e(
+              /* @__PURE__ */ e(P, { direction: "row", spacing: 0.5, useFlexGap: !0, sx: { flexWrap: "wrap" }, children: s.map((m, y) => /* @__PURE__ */ e(
                 Ve,
                 {
                   label: m,
@@ -6771,7 +6762,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
         ...g
       },
       children: /* @__PURE__ */ a(P, { spacing: 1, children: [
-        /* @__PURE__ */ a(P, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ a(P, { direction: "row", sx: { alignItems: "center", justifyContent: "space-between" }, children: [
           /* @__PURE__ */ e(
             u,
             {
@@ -6818,7 +6809,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
             children: i
           }
         ),
-        s !== void 0 && /* @__PURE__ */ a(P, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+        s !== void 0 && /* @__PURE__ */ a(P, { direction: "row", spacing: 0.5, sx: { alignItems: "center" }, children: [
           /* @__PURE__ */ e(
             v,
             {
@@ -6863,7 +6854,7 @@ const $r = 32, so = x.md, Er = $r + 12, Fl = $.forwardRef(
       medium: { container: 44, icon: "medium" },
       large: { container: 56, icon: "medium" }
     }[i];
-    return /* @__PURE__ */ a(P, { ref: p, direction: "row", alignItems: "center", spacing: 1, sx: d, children: [
+    return /* @__PURE__ */ a(P, { ref: p, direction: "row", spacing: 1, sx: { ...d, alignItems: "center" }, children: [
       /* @__PURE__ */ e(
         l,
         {
@@ -7375,9 +7366,7 @@ const Gl = $.forwardRef(
             P,
             {
               direction: "row",
-              alignItems: "center",
-              justifyContent: "space-between",
-              sx: { pt: x.xs },
+              sx: { pt: x.xs, alignItems: "center", justifyContent: "space-between" },
               children: [
                 n && /* @__PURE__ */ e(u, { variant: "caption", color: "text.secondary", children: n }),
                 W && /* @__PURE__ */ a(P, { direction: "row", spacing: 0.5, sx: { ml: "auto" }, role: "toolbar", "aria-label": "AI response actions", children: [
@@ -7496,15 +7485,14 @@ const Gl = $.forwardRef(
             gap: x.sm
           },
           children: [
-            /* @__PURE__ */ a(P, { direction: "row", alignItems: "center", spacing: 1, sx: { flex: 1 }, children: [
+            /* @__PURE__ */ a(P, { direction: "row", spacing: 1, sx: { flex: 1, alignItems: "center" }, children: [
               c && /* @__PURE__ */ e(Je, { size: "xs" }),
               /* @__PURE__ */ e(
                 u,
                 {
                   variant: "subtitle1",
                   component: "h2",
-                  fontWeight: 600,
-                  sx: { color: "text.primary" },
+                  sx: { color: "text.primary", fontWeight: 600 },
                   children: t
                 }
               )
@@ -7660,20 +7648,19 @@ const Gl = $.forwardRef(
                         {
                           primary: I.title,
                           secondary: y ? void 0 : I.timestamp,
-                          primaryTypographyProps: {
+                          slotProps: { primary: {
                             variant: "body2",
-                            fontWeight: _ ? 600 : 400,
                             color: "text.primary",
                             noWrap: !0,
                             sx: {
                               overflow: "hidden",
-                              textOverflow: "ellipsis"
+                              textOverflow: "ellipsis",
+                              fontWeight: _ ? 600 : 400
                             }
-                          },
-                          secondaryTypographyProps: {
+                          }, secondary: {
                             variant: "caption",
                             color: "text.secondary"
-                          },
+                          } },
                           sx: {
                             // In compact mode, limit width to make room for timestamp
                             ...y && {
@@ -7871,9 +7858,8 @@ const Gl = $.forwardRef(
           {
             direction: "row",
             spacing: 1.5,
-            flexWrap: "wrap",
             useFlexGap: !0,
-            sx: { ml: `calc(32px + ${x.md}px)`, mt: x.lg, gap: x.sm },
+            sx: { ml: `calc(32px + ${x.md}px)`, mt: x.lg, gap: x.sm, flexWrap: "wrap" },
             children: s.map((p, g) => /* @__PURE__ */ e(
               Nr,
               {
@@ -7940,7 +7926,7 @@ const Gl = $.forwardRef(
         backgroundColor: "background.default"
       },
       children: [
-        /* @__PURE__ */ e(l, { sx: { p: x.sm, borderBottom: 1, borderColor: "divider" }, children: /* @__PURE__ */ e(u, { variant: "caption", color: "text.secondary", fontWeight: 600, children: "HISTORY" }) }),
+        /* @__PURE__ */ e(l, { sx: { p: x.sm, borderBottom: 1, borderColor: "divider" }, children: /* @__PURE__ */ e(u, { variant: "caption", color: "text.secondary", sx: { fontWeight: 600 }, children: "HISTORY" }) }),
         /* @__PURE__ */ e(l, { sx: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ e(
           po,
           {
@@ -7978,7 +7964,7 @@ const Gl = $.forwardRef(
           }
         },
         children: [
-          /* @__PURE__ */ a(u, { variant: "caption", color: "text.secondary", fontWeight: 600, children: [
+          /* @__PURE__ */ a(u, { variant: "caption", color: "text.secondary", sx: { fontWeight: 600 }, children: [
             "HISTORY (",
             d.length,
             ")"
@@ -9361,7 +9347,7 @@ const es = {
                 borderBottom: `1px solid ${I.border}`
               },
               children: [
-                /* @__PURE__ */ e(u, { variant: "subtitle2", fontWeight: 600, color: I.text, children: "History" }),
+                /* @__PURE__ */ e(u, { variant: "subtitle2", color: I.text, sx: { fontWeight: 600 }, children: "History" }),
                 /* @__PURE__ */ a(l, { sx: { display: "flex", gap: 0.5 }, children: [
                   /* @__PURE__ */ e(J, { title: "New thread", children: /* @__PURE__ */ e(A, { size: "small", onClick: s, children: /* @__PURE__ */ e(Co, { fontSize: "small" }) }) }),
                   /* @__PURE__ */ e(J, { title: "Close history", children: /* @__PURE__ */ e(A, { size: "small", onClick: g, children: /* @__PURE__ */ e(yo, { fontSize: "small" }) }) })
@@ -9377,9 +9363,9 @@ const es = {
               placeholder: "Search threads...",
               value: F,
               onChange: (V) => k(V.target.value),
-              InputProps: {
+              slotProps: { input: {
                 startAdornment: /* @__PURE__ */ e(_o, { position: "start", children: /* @__PURE__ */ e(Le, { fontSize: "small", sx: { color: I.textSecondary } }) })
-              },
+              } },
               sx: {
                 "& .MuiOutlinedInput-root": {
                   backgroundColor: C.palette.action.hover,
@@ -9516,22 +9502,21 @@ const es = {
                           {
                             primary: D.title,
                             secondary: D.preview,
-                            primaryTypographyProps: {
+                            slotProps: { primary: {
                               variant: "body2",
-                              fontWeight: i === D.id ? 600 : 400,
                               noWrap: !0,
                               sx: {
-                                color: (i === D.id, I.text)
+                                color: (i === D.id, I.text),
+                                fontWeight: i === D.id ? 600 : 400
                               }
-                            },
-                            secondaryTypographyProps: {
+                            }, secondary: {
                               variant: "caption",
                               noWrap: !0,
                               sx: {
                                 color: I.textSecondary,
                                 fontSize: "0.7rem"
                               }
-                            }
+                            } }
                           }
                         )
                       ]
@@ -9555,7 +9540,7 @@ const es = {
                 },
                 children: [
                   /* @__PURE__ */ e(ko, { sx: { fontSize: 40, color: I.textSecondary, mb: 1 } }),
-                  /* @__PURE__ */ e(u, { variant: "body2", color: I.textSecondary, textAlign: "center", children: F ? "No threads match your search" : "No conversation history" })
+                  /* @__PURE__ */ e(u, { variant: "body2", color: I.textSecondary, sx: { textAlign: "center" }, children: F ? "No threads match your search" : "No conversation history" })
                 ]
               }
             )
@@ -9836,7 +9821,6 @@ Video content is generating 2.8x more engagement than static posts. Consider inc
                 P,
                 {
                   direction: "row",
-                  alignItems: "center",
                   spacing: Re.element,
                   sx: {
                     px: Re.inset,
@@ -9844,7 +9828,8 @@ Video content is generating 2.8x more engagement than static posts. Consider inc
                     borderBottom: 1,
                     borderColor: "divider",
                     bgcolor: "background.default",
-                    flexShrink: 0
+                    flexShrink: 0,
+                    alignItems: "center"
                   },
                   children: [
                     !De && /* @__PURE__ */ e(J, { title: "Show history", children: /* @__PURE__ */ e(
@@ -9865,9 +9850,9 @@ Video content is generating 2.8x more engagement than static posts. Consider inc
                         children: /* @__PURE__ */ e(v, { name: "plus", size: "small" })
                       }
                     ) }),
-                    /* @__PURE__ */ a(P, { direction: "row", alignItems: "center", spacing: 1, sx: { flex: 1 }, children: [
+                    /* @__PURE__ */ a(P, { direction: "row", spacing: 1, sx: { flex: 1, alignItems: "center" }, children: [
                       m || or,
-                      /* @__PURE__ */ e(u, { variant: "subtitle2", fontWeight: 600, color: "text.primary", children: c }),
+                      /* @__PURE__ */ e(u, { variant: "subtitle2", color: "text.primary", sx: { fontWeight: 600 }, children: c }),
                       xe && /* @__PURE__ */ e(
                         Ve,
                         {
@@ -9947,10 +9932,8 @@ Video content is generating 2.8x more engagement than static posts. Consider inc
                         Q.length === 0 && /* @__PURE__ */ a(
                           P,
                           {
-                            alignItems: "center",
-                            justifyContent: "center",
                             spacing: Re.content,
-                            sx: { flex: 1, p: Re.section, minHeight: 400 },
+                            sx: { flex: 1, p: Re.section, minHeight: 400, alignItems: "center", justifyContent: "center" },
                             children: [
                               /* @__PURE__ */ e(
                                 l,
@@ -9967,8 +9950,8 @@ Video content is generating 2.8x more engagement than static posts. Consider inc
                                   children: /* @__PURE__ */ e(v, { name: "sparkles", size: "medium", color: f.colors.aiPrimary })
                                 }
                               ),
-                              /* @__PURE__ */ e(u, { variant: "h6", fontWeight: 600, color: "text.primary", children: "What do you want to know?" }),
-                              /* @__PURE__ */ e(u, { variant: "body2", color: "text.secondary", textAlign: "center", sx: { maxWidth: 300 }, children: "Ask anything and I'll search across your sources to find the answer" })
+                              /* @__PURE__ */ e(u, { variant: "h6", color: "text.primary", sx: { fontWeight: 600 }, children: "What do you want to know?" }),
+                              /* @__PURE__ */ e(u, { variant: "body2", color: "text.secondary", sx: { maxWidth: 300, textAlign: "center" }, children: "Ask anything and I'll search across your sources to find the answer" })
                             ]
                           }
                         ),
@@ -10000,9 +9983,8 @@ Video content is generating 2.8x more engagement than static posts. Consider inc
                           P,
                           {
                             direction: "row",
-                            alignItems: "flex-start",
                             spacing: Re.content,
-                            sx: { p: Re.inset, bgcolor: "background.default" },
+                            sx: { p: Re.inset, bgcolor: "background.default", alignItems: "flex-start" },
                             children: [
                               m || or,
                               /* @__PURE__ */ e(Po, { text: "Searching..." })