@trinityui/design-system 1.0.8 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4661 +0,0 @@
1
- import * as M from "react";
2
- import { useState as P, useRef as $e, useEffect as Oe, useCallback as Se } from "react";
3
- import { jsxs as i, jsx as o, Fragment as Te } from "react/jsx-runtime";
4
- import { useTheme as Ae, useMediaQuery as He, AppBar as bo, Toolbar as xo, Box as l, Divider as he, Typography as b, IconButton as S, Menu as me, MenuItem as T, Avatar as Pe, ListItemIcon as Y, ListItemText as q, Drawer as qe, InputBase as eo, Button as oo, List as fo, ListItem as yo, ListItemButton as Co, alpha as Xe, Tooltip as j, TextField as ro, InputAdornment as ko, Stack as ge, Chip as zo, Fab as Ao, Badge as Wo } from "@mui/material";
5
- import ye from "@mui/icons-material/Search";
6
- import Re from "@mui/icons-material/Clear";
7
- import to from "@mui/icons-material/Apps";
8
- import Me from "@mui/icons-material/KeyboardArrowDown";
9
- import Ne from "@mui/icons-material/HelpOutline";
10
- import je from "@mui/icons-material/NotificationsNone";
11
- import no from "@mui/icons-material/Logout";
12
- import Fe from "@mui/icons-material/OpenInNew";
13
- import { alpha as Q, styled as B } from "@mui/material/styles";
14
- import Je from "@mui/icons-material/Close";
15
- import Eo from "@mui/icons-material/Menu";
16
- import Io from "@mui/icons-material/HomeOutlined";
17
- import Do from "@mui/icons-material/TrendingUp";
18
- import Ho from "@mui/icons-material/TrackChanges";
19
- import Po from "@mui/icons-material/FolderOpen";
20
- import Ro from "@mui/icons-material/SupportAgent";
21
- import So from "@mui/icons-material/AutoAwesome";
22
- import { a as _, I as Ce, b as Mo, A as To, c as Bo, d as Lo, e as $o, f as Oo, g as Vo, h as No, i as jo } from "./ai.js";
23
- import Uo from "@mui/icons-material/ChatBubbleOutline";
24
- import Ko from "@mui/icons-material/DeleteOutline";
25
- import Qo from "@mui/icons-material/Edit";
26
- import Go from "@mui/icons-material/MoreHoriz";
27
- import _o from "@mui/icons-material/Add";
28
- import Zo from "@mui/icons-material/ChevronLeft";
29
- import Xo from "@mui/icons-material/Folder";
30
- import ao from "@mui/icons-material/Star";
31
- import Yo from "@mui/icons-material/StarBorder";
32
- const e = {
33
- // Color Primitives
34
- colors: {
35
- // Blues & Purples
36
- navy: {
37
- 50: "#E8E8F0",
38
- 100: "#C5C6D9",
39
- 200: "#9FA1C0",
40
- 300: "#7879A7",
41
- 400: "#5B5C94",
42
- 500: "#3E3F81",
43
- 600: "#383979",
44
- 700: "#30316E",
45
- 800: "#282964",
46
- 900: "#050742"
47
- // Primary Navy
48
- },
49
- purple: {
50
- 50: "#F3EAFA",
51
- 100: "#E1CBF2",
52
- 200: "#CDA8EA",
53
- 300: "#B985E1",
54
- 400: "#A96ADA",
55
- 500: "#9950D3",
56
- 600: "#8D49CE",
57
- 700: "#7841C9",
58
- // Primary Purple
59
- 800: "#6939B5",
60
- 900: "#4E2A97"
61
- },
62
- indigo: {
63
- 50: "#EDE7FD",
64
- 100: "#D2C3FA",
65
- 200: "#B49CF6",
66
- 300: "#9574F2",
67
- 400: "#7E57F0",
68
- 500: "#6739ED",
69
- 600: "#5F33EB",
70
- 700: "#542CE8",
71
- 800: "#4A24E5",
72
- 900: "#3816A0",
73
- // Deep Indigo
74
- electric: "#6B12ED"
75
- // Electric Indigo - vibrant accent
76
- },
77
- // Warm Colors
78
- coral: {
79
- 50: "#FFEFEE",
80
- 100: "#FFD7D4",
81
- 200: "#FFBCB7",
82
- 300: "#FFA19A",
83
- 400: "#FF8D85",
84
- 500: "#FF796F",
85
- 600: "#FF7167",
86
- 700: "#FF665C",
87
- 800: "#FF6150",
88
- // Primary Coral
89
- 900: "#FF5241"
90
- },
91
- // Cool Colors
92
- azure: {
93
- 50: "#E5F5FC",
94
- 100: "#BEE5F7",
95
- 200: "#93D4F2",
96
- 300: "#67C3ED",
97
- 400: "#47B6E9",
98
- 500: "#27AAE1",
99
- // Primary Azure
100
- 600: "#239DDD",
101
- 700: "#1D8DD8",
102
- 800: "#177ED3",
103
- 900: "#0E62CA"
104
- },
105
- // Neutrals
106
- gray: {
107
- 0: "#FFFFFF",
108
- 50: "#FAFAFA",
109
- 100: "#F4F4F5",
110
- 200: "#E5E7EB",
111
- 300: "#D4D4D8",
112
- 400: "#9CA3AF",
113
- 500: "#6B7280",
114
- 600: "#374151",
115
- 700: "#27272A",
116
- 800: "#18181B",
117
- 900: "#09090B"
118
- }
119
- },
120
- // Spacing Scale (in pixels, use for padding, margin, gaps)
121
- spacing: {
122
- 0: 0,
123
- 0.5: 2,
124
- // Half step for fine-grained control
125
- 1: 4,
126
- 1.5: 6,
127
- // Half step for fine-grained control
128
- 2: 8,
129
- 2.5: 10,
130
- // Half step for fine-grained control
131
- 3: 12,
132
- 4: 16,
133
- 5: 20,
134
- 6: 24,
135
- 7: 28,
136
- 8: 32,
137
- 9: 36,
138
- 10: 40,
139
- 12: 48,
140
- 14: 56,
141
- 16: 64,
142
- 20: 80,
143
- 24: 96,
144
- 32: 128
145
- },
146
- // Typography Scale
147
- fontSize: {
148
- xs: "0.75rem",
149
- // 12px
150
- sm: "0.875rem",
151
- // 14px
152
- base: "1rem",
153
- // 16px
154
- lg: "1.125rem",
155
- // 18px
156
- xl: "1.25rem",
157
- // 20px
158
- "2xl": "1.5rem",
159
- // 24px
160
- "3xl": "1.875rem",
161
- // 30px
162
- "4xl": "2.25rem",
163
- // 36px
164
- "5xl": "3rem",
165
- // 48px
166
- "6xl": "3.75rem"
167
- // 60px
168
- },
169
- fontWeight: {
170
- light: 300,
171
- regular: 400,
172
- medium: 500,
173
- semibold: 600,
174
- bold: 700,
175
- extrabold: 800
176
- },
177
- lineHeight: {
178
- none: 1,
179
- tight: 1.25,
180
- snug: 1.375,
181
- normal: 1.5,
182
- relaxed: 1.625,
183
- loose: 2
184
- },
185
- letterSpacing: {
186
- tighter: "-0.05em",
187
- tight: "-0.025em",
188
- normal: "0em",
189
- wide: "0.025em",
190
- wider: "0.05em",
191
- widest: "0.1em"
192
- },
193
- /**
194
- * Border Radius Scale
195
- *
196
- * Designed for consistent nesting using: Outer = Inner + Padding
197
- *
198
- * Common nesting patterns:
199
- * - Button (sm:6px) inside Card (md:8px) with 8px padding: 6 + 8 = 12 (use lg for container)
200
- * - Card (md:8px) inside Modal (lg:12px) with 16px padding: 8 + 16 = 24 (use 3xl for modal)
201
- * - Input (sm:6px) inside Panel (md:8px) with 8px padding: 6 + 8 = 12 (use lg for panel)
202
- *
203
- * Usage by element type:
204
- * - xs (4px): Small badges, icon containers, status dots with corners
205
- * - sm (6px): Buttons, inputs, chips, tags, small interactive elements
206
- * - md (8px): Cards, list items, small panels, menu items
207
- * - lg (12px): Large cards, dialogs, dropdown menus, panels
208
- * - xl (16px): Modals, popovers, large containers
209
- * - 2xl (20px): Very large modals with nested content
210
- * - 3xl (24px): Maximum nesting scenarios
211
- * - full (9999px): Pills, avatars, fully rounded elements
212
- */
213
- borderRadius: {
214
- none: 0,
215
- xs: 4,
216
- sm: 6,
217
- md: 8,
218
- lg: 12,
219
- xl: 16,
220
- "2xl": 20,
221
- "3xl": 24,
222
- full: 9999
223
- },
224
- // Border Width
225
- borderWidth: {
226
- 0: 0,
227
- 1: 1,
228
- 2: 2,
229
- 4: 4,
230
- 8: 8
231
- },
232
- // Shadows
233
- shadows: {
234
- none: "none",
235
- sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
236
- base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
237
- md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
238
- lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
239
- xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
240
- "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
241
- inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
242
- },
243
- // Z-Index Scale
244
- zIndex: {
245
- auto: "auto",
246
- 0: 0,
247
- 10: 10,
248
- 20: 20,
249
- 30: 30,
250
- 40: 40,
251
- 50: 50,
252
- dropdown: 1e3,
253
- sticky: 1020,
254
- fixed: 1030,
255
- modalBackdrop: 1040,
256
- modal: 1050,
257
- popover: 1060,
258
- tooltip: 1070
259
- },
260
- // Transitions
261
- duration: {
262
- fastest: "50ms",
263
- faster: "100ms",
264
- fast: "150ms",
265
- normal: "200ms",
266
- slow: "300ms",
267
- slower: "400ms",
268
- slowest: "500ms"
269
- },
270
- easing: {
271
- linear: "linear",
272
- in: "cubic-bezier(0.4, 0, 1, 1)",
273
- out: "cubic-bezier(0, 0, 0.2, 1)",
274
- inOut: "cubic-bezier(0.4, 0, 0.2, 1)",
275
- smooth: "cubic-bezier(0.45, 0, 0.55, 1)",
276
- // Smooth, natural feel
277
- bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)",
278
- // Slight overshoot
279
- elastic: "cubic-bezier(0.68, -0.55, 0.27, 1.55)"
280
- // Elastic spring
281
- },
282
- // Opacity
283
- opacity: {
284
- 0: 0,
285
- 5: 0.05,
286
- 10: 0.1,
287
- 20: 0.2,
288
- 25: 0.25,
289
- 30: 0.3,
290
- 40: 0.4,
291
- 50: 0.5,
292
- 60: 0.6,
293
- 70: 0.7,
294
- 75: 0.75,
295
- 80: 0.8,
296
- 90: 0.9,
297
- 95: 0.95,
298
- 100: 1
299
- },
300
- // Breakpoints
301
- breakpoints: {
302
- xs: 0,
303
- sm: 600,
304
- md: 900,
305
- lg: 1200,
306
- xl: 1536
307
- }
308
- }, n = {
309
- colors: {
310
- // Brand
311
- brand: {
312
- primary: e.colors.navy[900],
313
- secondary: e.colors.purple[700],
314
- tertiary: e.colors.indigo[900],
315
- accent: e.colors.coral[800]
316
- },
317
- // Text
318
- text: {
319
- primary: e.colors.gray[900],
320
- secondary: e.colors.gray[500],
321
- tertiary: e.colors.gray[400],
322
- disabled: e.colors.gray[300],
323
- inverse: e.colors.gray[0],
324
- brand: e.colors.navy[900],
325
- link: e.colors.azure[500],
326
- linkHover: e.colors.azure[700],
327
- error: "#DC2626",
328
- success: "#16A34A",
329
- warning: "#D97706"
330
- },
331
- // Backgrounds
332
- background: {
333
- primary: e.colors.gray[0],
334
- secondary: e.colors.gray[50],
335
- tertiary: e.colors.gray[100],
336
- inverse: e.colors.gray[800],
337
- brand: e.colors.navy[900],
338
- brandSubtle: e.colors.navy[50],
339
- accent: e.colors.coral[800],
340
- accentSubtle: e.colors.coral[50]
341
- },
342
- // Surface colors for elevated/sunken elements
343
- surface: {
344
- elevated: e.colors.gray[0],
345
- // Cards, modals, popovers
346
- sunken: e.colors.gray[100],
347
- // Inputs, code blocks, wells
348
- overlay: "rgba(0, 0, 0, 0.5)",
349
- // Modal/dialog backdrops
350
- // Status surface colors (subtle backgrounds)
351
- success: "#F0FDF4",
352
- // Success state backgrounds
353
- error: "#FEF2F2",
354
- // Error state backgrounds
355
- warning: "#FFFBEB",
356
- // Warning state backgrounds
357
- info: e.colors.azure[50]
358
- // Info state backgrounds
359
- },
360
- // Borders
361
- border: {
362
- default: e.colors.gray[200],
363
- subtle: e.colors.gray[100],
364
- strong: e.colors.gray[400],
365
- focus: e.colors.purple[700],
366
- error: "#DC2626",
367
- success: "#16A34A"
368
- },
369
- // Interactive States
370
- interactive: {
371
- default: e.colors.navy[900],
372
- hover: e.colors.coral[800],
373
- active: e.colors.indigo[900],
374
- disabled: e.colors.gray[300],
375
- focus: e.colors.purple[700]
376
- },
377
- // Focus ring styles (accessibility)
378
- focus: {
379
- ring: e.colors.navy[900],
380
- // Focus outline color
381
- ringOffset: e.colors.gray[0]
382
- // Gap color between element and ring
383
- },
384
- // Selection styles
385
- selection: {
386
- background: e.colors.azure[100],
387
- text: e.colors.gray[900]
388
- },
389
- // Status/Feedback - Used for alerts, toasts, form validation
390
- status: {
391
- error: {
392
- text: "#DC2626",
393
- background: "#FEF2F2",
394
- border: "#FECACA"
395
- },
396
- warning: {
397
- text: "#D97706",
398
- background: "#FFFBEB",
399
- border: "#FDE68A"
400
- },
401
- success: {
402
- text: "#16A34A",
403
- background: "#F0FDF4",
404
- border: "#BBF7D0"
405
- },
406
- info: {
407
- text: e.colors.azure[500],
408
- background: e.colors.azure[50],
409
- border: e.colors.azure[200]
410
- }
411
- },
412
- /**
413
- * Status Indicator Colors
414
- * Semantic colors for StatusIndicator components (dots, badges, chips)
415
- * These are intentionally distinct from status.* which are for alerts/toasts
416
- * @intentional-color - Status indicators require specific colors for visual distinction
417
- */
418
- indicator: {
419
- // High severity - Red/Critical
420
- error: { fg: "#FFFFFF", bg: e.colors.coral[800] },
421
- critical: { fg: "#FFFFFF", bg: "#DA1E28" },
422
- failed: { fg: "#FFFFFF", bg: e.colors.coral[800] },
423
- rejected: { fg: "#FFFFFF", bg: e.colors.coral[800] },
424
- // Medium severity - Orange/Yellow
425
- warning: { fg: "#000000", bg: "#F1C21B", outline: "#8E6A00" },
426
- caution: { fg: "#000000", bg: "#FF832B", outline: "#BA4E00" },
427
- pending: { fg: "#000000", bg: "#F1C21B", outline: "#8E6A00" },
428
- inProgress: { fg: "#FFFFFF", bg: e.colors.navy[900] },
429
- running: { fg: "#FFFFFF", bg: e.colors.navy[900] },
430
- // Low severity - Green/Success
431
- success: { fg: "#FFFFFF", bg: "#24A148" },
432
- complete: { fg: "#FFFFFF", bg: "#24A148" },
433
- approved: { fg: "#FFFFFF", bg: "#24A148" },
434
- active: { fg: "#FFFFFF", bg: "#24A148" },
435
- enabled: { fg: "#FFFFFF", bg: "#24A148" },
436
- // Informational - Blue
437
- info: { fg: "#FFFFFF", bg: "#0043CE" },
438
- new: { fg: "#FFFFFF", bg: "#0043CE" },
439
- updated: { fg: "#FFFFFF", bg: "#0043CE" },
440
- // Neutral - Gray
441
- neutral: { fg: "#FFFFFF", bg: "#6F6F6F" },
442
- draft: { fg: "#FFFFFF", bg: "#6F6F6F" },
443
- inactive: { fg: "#FFFFFF", bg: "#6F6F6F" },
444
- disabled: { fg: "#FFFFFF", bg: "#6F6F6F" },
445
- cancelled: { fg: "#FFFFFF", bg: "#6F6F6F" },
446
- unknown: { fg: "#FFFFFF", bg: "#6F6F6F" },
447
- // Special
448
- beta: { fg: "#FFFFFF", bg: "#8A3FFC" },
449
- experimental: { fg: "#FFFFFF", bg: "#8A3FFC" }
450
- },
451
- // Avatar color palette - Used for avatar backgrounds and badges
452
- avatar: {
453
- // Solid background colors (accessible with white text)
454
- backgrounds: [
455
- e.colors.indigo[600],
456
- // Deep indigo
457
- e.colors.purple[600],
458
- // Purple
459
- e.colors.coral[600],
460
- // Coral/red-orange
461
- e.colors.azure[600],
462
- // Azure/teal
463
- e.colors.navy[700],
464
- // Navy
465
- e.colors.indigo[500],
466
- // Medium indigo
467
- e.colors.purple[500],
468
- // Medium purple
469
- e.colors.coral[500]
470
- // Medium coral
471
- ],
472
- // Online/activity indicator
473
- online: "#44b700",
474
- offline: e.colors.gray[400],
475
- busy: e.colors.coral[600],
476
- away: "#FFA726"
477
- },
478
- // Gradient definitions - Reusable across components
479
- gradients: {
480
- // Brand gradients
481
- primary: `linear-gradient(135deg, ${e.colors.indigo[600]} 0%, ${e.colors.purple[600]} 100%)`,
482
- secondary: `linear-gradient(135deg, ${e.colors.coral[500]} 0%, ${e.colors.coral[700]} 100%)`,
483
- accent: `linear-gradient(135deg, ${e.colors.azure[400]} 0%, ${e.colors.azure[600]} 100%)`,
484
- // Avatar-specific gradients
485
- avatarPrimary: `linear-gradient(135deg, ${e.colors.indigo[500]} 0%, ${e.colors.purple[600]} 100%)`,
486
- avatarWarm: `linear-gradient(135deg, ${e.colors.coral[400]} 0%, ${e.colors.coral[600]} 100%)`,
487
- avatarCool: `linear-gradient(135deg, ${e.colors.azure[400]} 0%, ${e.colors.indigo[500]} 100%)`,
488
- // Dark overlay for text readability
489
- darkOverlay: "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%)"
490
- }
491
- },
492
- typography: {
493
- // Display styles
494
- display: {
495
- large: {
496
- fontSize: e.fontSize["5xl"],
497
- fontWeight: e.fontWeight.bold,
498
- lineHeight: e.lineHeight.tight,
499
- letterSpacing: e.letterSpacing.tight
500
- },
501
- medium: {
502
- fontSize: e.fontSize["4xl"],
503
- fontWeight: e.fontWeight.bold,
504
- lineHeight: e.lineHeight.tight,
505
- letterSpacing: e.letterSpacing.tight
506
- },
507
- small: {
508
- fontSize: e.fontSize["3xl"],
509
- fontWeight: e.fontWeight.semibold,
510
- lineHeight: e.lineHeight.snug,
511
- letterSpacing: e.letterSpacing.normal
512
- }
513
- },
514
- // Heading styles
515
- heading: {
516
- h1: {
517
- fontSize: e.fontSize["3xl"],
518
- fontWeight: e.fontWeight.bold,
519
- lineHeight: e.lineHeight.tight
520
- },
521
- h2: {
522
- fontSize: e.fontSize["2xl"],
523
- fontWeight: e.fontWeight.semibold,
524
- lineHeight: e.lineHeight.snug
525
- },
526
- h3: {
527
- fontSize: e.fontSize.xl,
528
- fontWeight: e.fontWeight.semibold,
529
- lineHeight: e.lineHeight.snug
530
- },
531
- h4: {
532
- fontSize: e.fontSize.lg,
533
- fontWeight: e.fontWeight.semibold,
534
- lineHeight: e.lineHeight.normal
535
- },
536
- h5: {
537
- fontSize: e.fontSize.base,
538
- fontWeight: e.fontWeight.semibold,
539
- lineHeight: e.lineHeight.normal
540
- },
541
- h6: {
542
- fontSize: e.fontSize.sm,
543
- fontWeight: e.fontWeight.semibold,
544
- lineHeight: e.lineHeight.normal
545
- }
546
- },
547
- // Body styles
548
- body: {
549
- large: {
550
- fontSize: e.fontSize.lg,
551
- fontWeight: e.fontWeight.regular,
552
- lineHeight: e.lineHeight.relaxed
553
- },
554
- medium: {
555
- fontSize: e.fontSize.base,
556
- fontWeight: e.fontWeight.regular,
557
- lineHeight: e.lineHeight.normal
558
- },
559
- small: {
560
- fontSize: e.fontSize.sm,
561
- fontWeight: e.fontWeight.regular,
562
- lineHeight: e.lineHeight.normal
563
- }
564
- },
565
- // Label styles
566
- label: {
567
- large: {
568
- fontSize: e.fontSize.base,
569
- fontWeight: e.fontWeight.medium,
570
- lineHeight: e.lineHeight.tight
571
- },
572
- medium: {
573
- fontSize: e.fontSize.sm,
574
- fontWeight: e.fontWeight.medium,
575
- lineHeight: e.lineHeight.tight
576
- },
577
- small: {
578
- fontSize: e.fontSize.xs,
579
- fontWeight: e.fontWeight.medium,
580
- lineHeight: e.lineHeight.tight
581
- }
582
- },
583
- // === Micro Typography (Phase A Addition) ===
584
- // For inline UI elements, badges, status indicators where xs is too large
585
- micro: {
586
- /** 10px - Absolute minimum for brief status text */
587
- xs: {
588
- fontSize: "0.625rem",
589
- // 10px - smallest readable
590
- fontWeight: e.fontWeight.medium,
591
- lineHeight: e.lineHeight.tight,
592
- letterSpacing: e.letterSpacing.wide
593
- // Improve readability at small sizes
594
- },
595
- /** 11px - Primary micro size for badges, counters */
596
- sm: {
597
- fontSize: "0.6875rem",
598
- // 11px
599
- fontWeight: e.fontWeight.medium,
600
- lineHeight: e.lineHeight.tight,
601
- letterSpacing: e.letterSpacing.normal
602
- }
603
- },
604
- // === Dense Typography (Phase D.1 Addition) ===
605
- // Intent-based tokens for compact UI elements
606
- dense: {
607
- /** Badge counts, status dots - 10px */
608
- badge: "0.625rem",
609
- /** Metadata, timestamps, dense tables - 12px */
610
- text: "0.75rem"
611
- },
612
- // === Data Typography (Phase A Addition) ===
613
- // For tabular data, code snippets, and numeric displays
614
- data: {
615
- /** Monospace styling for numeric values in tables */
616
- numeric: {
617
- fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace',
618
- fontWeight: e.fontWeight.regular,
619
- fontFeatureSettings: '"tnum" 1'
620
- // Tabular numbers for alignment
621
- },
622
- /** Code/technical content styling */
623
- code: {
624
- fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace',
625
- fontSize: e.fontSize.sm,
626
- fontWeight: e.fontWeight.regular,
627
- lineHeight: e.lineHeight.relaxed
628
- }
629
- }
630
- },
631
- spacing: {
632
- // Component-specific spacing
633
- component: {
634
- paddingXs: e.spacing[1],
635
- paddingSm: e.spacing[2],
636
- paddingMd: e.spacing[4],
637
- paddingLg: e.spacing[6],
638
- paddingXl: e.spacing[8],
639
- gapXs: e.spacing[1],
640
- gapSm: e.spacing[2],
641
- gapMd: e.spacing[4],
642
- gapLg: e.spacing[6]
643
- },
644
- // Layout spacing
645
- layout: {
646
- pagePadding: e.spacing[6],
647
- sectionGap: e.spacing[12],
648
- containerMaxWidth: 1280,
649
- headerHeight: 64,
650
- sidebarWidthExpanded: 200,
651
- sidebarWidthCollapsed: 56,
652
- aiPanelWidth: 420,
653
- gutter: e.spacing[6],
654
- // 24px
655
- contentPadding: 64
656
- }
657
- },
658
- borders: {
659
- /**
660
- * Semantic border radius assignments
661
- * Based on component size and nesting requirements:
662
- * - Outer radius = Inner radius + Padding
663
- */
664
- radius: {
665
- // === Component-specific tokens (backwards compatible) ===
666
- /** Buttons use full pill shape */
667
- button: e.borderRadius.full,
668
- /** Inputs use sm (6px) for 32-40px height elements */
669
- input: e.borderRadius.sm,
670
- /** Cards use md (8px) for subtle rounding */
671
- card: e.borderRadius.md,
672
- /** Modals use lg (12px) - allows nested cards with md */
673
- modal: e.borderRadius.lg,
674
- /** Large modals use xl (16px) for complex nested content */
675
- modalLarge: e.borderRadius.xl,
676
- /** Badges use sm (6px) for subtle pill */
677
- badge: e.borderRadius.sm,
678
- /** Avatars use full for circular shape */
679
- avatar: e.borderRadius.full,
680
- /** Chips/tags use sm (6px) */
681
- chip: e.borderRadius.sm,
682
- /** Menu items use sm (6px) */
683
- menuItem: e.borderRadius.sm,
684
- /** Dropdown/popover menus use lg (12px) - corrected to match actual usage */
685
- menu: e.borderRadius.lg,
686
- /** Tooltips use md (8px) */
687
- tooltip: e.borderRadius.md,
688
- /** Small icon containers use xs (4px) */
689
- iconContainer: e.borderRadius.xs,
690
- // === Intent-based shape vocabulary (Phase A Addition) ===
691
- /** Sharp edges - 0px */
692
- none: 0,
693
- /** Minimal softening - 4px */
694
- subtle: e.borderRadius.xs,
695
- /** Noticeable curves - 6px */
696
- soft: e.borderRadius.sm,
697
- /** Prominent curves - 8px */
698
- rounded: e.borderRadius.md,
699
- /** Maximum curvature - 9999px */
700
- pill: e.borderRadius.full,
701
- /** Perfect circle - 50% */
702
- circle: "50%",
703
- // === Additional component contexts (Phase A Addition) ===
704
- /** Skeleton loaders - 4px */
705
- skeleton: e.borderRadius.xs,
706
- /** Table cells - 0px for data density */
707
- tableCell: 0
708
- },
709
- /**
710
- * Pre-formatted px strings for MUI sx prop
711
- * Use these when MUI would interpret numbers as spacing multipliers
712
- */
713
- radiusPx: {
714
- none: "0px",
715
- xs: `${e.borderRadius.xs}px`,
716
- sm: `${e.borderRadius.sm}px`,
717
- md: `${e.borderRadius.md}px`,
718
- lg: `${e.borderRadius.lg}px`,
719
- xl: `${e.borderRadius.xl}px`,
720
- "2xl": `${e.borderRadius["2xl"]}px`,
721
- "3xl": `${e.borderRadius["3xl"]}px`,
722
- full: `${e.borderRadius.full}px`
723
- },
724
- width: {
725
- default: e.borderWidth[1],
726
- focus: e.borderWidth[2],
727
- thick: e.borderWidth[4]
728
- }
729
- },
730
- shadows: {
731
- card: e.shadows.md,
732
- dropdown: e.shadows.lg,
733
- modal: e.shadows["2xl"],
734
- button: e.shadows.sm,
735
- input: e.shadows.none,
736
- inputFocus: e.shadows.base
737
- },
738
- motion: {
739
- duration: {
740
- instant: e.duration.fastest,
741
- fast: e.duration.fast,
742
- normal: e.duration.normal,
743
- slow: e.duration.slow
744
- },
745
- easing: {
746
- default: e.easing.inOut,
747
- enter: e.easing.out,
748
- exit: e.easing.in
749
- }
750
- },
751
- // ============================================
752
- // SEMANTIC EFFECTS (Phase A Addition)
753
- // Intent-based opacity, shadow, and state effects
754
- // ============================================
755
- effects: {
756
- /**
757
- * Overlay effects for interaction states and backdrops
758
- */
759
- overlay: {
760
- /** Modal/drawer backdrop - 50% black */
761
- scrim: "rgba(0, 0, 0, 0.5)",
762
- /** Standard hover - 8% black */
763
- hover: "rgba(0, 0, 0, 0.08)",
764
- /** Subtle hover for dense UI - 4% black */
765
- hoverSubtle: "rgba(0, 0, 0, 0.04)",
766
- /** Pressed/active - 12% black */
767
- pressed: "rgba(0, 0, 0, 0.12)",
768
- /** Selected row/item - 8% black */
769
- selected: "rgba(0, 0, 0, 0.08)",
770
- /** Disabled overlay - 38% black */
771
- disabled: "rgba(0, 0, 0, 0.38)"
772
- },
773
- /**
774
- * White text/icon opacity for dark backgrounds
775
- * Based on Material Design text emphasis levels
776
- */
777
- onDark: {
778
- /** High emphasis - 87% white */
779
- primary: "rgba(255, 255, 255, 0.87)",
780
- /** Medium emphasis - 70% white */
781
- secondary: "rgba(255, 255, 255, 0.7)",
782
- /** Low emphasis - 50% white */
783
- tertiary: "rgba(255, 255, 255, 0.5)",
784
- /** Borders/dividers - 12% white */
785
- subtle: "rgba(255, 255, 255, 0.12)",
786
- /** Background overlays on dark surfaces - 10% white */
787
- tint: "rgba(255, 255, 255, 0.1)",
788
- /** Visible dividers on dark backgrounds - 24% white */
789
- divider: "rgba(255, 255, 255, 0.24)",
790
- /** High-visibility text/icons on dark - 80% white */
791
- emphasis: "rgba(255, 255, 255, 0.8)",
792
- /** Maximum contrast - avoids pure white - 95% white */
793
- contrast: "rgba(255, 255, 255, 0.95)"
794
- },
795
- /**
796
- * Shadow effects for elevation hierarchy
797
- * Replaces hardcoded rgba shadows
798
- */
799
- shadow: {
800
- /** Resting card elevation */
801
- surface: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
802
- /** Hovered/focused elevation */
803
- raised: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
804
- /** Dropdown/popover/nav menus */
805
- floating: "0 4px 20px rgba(0, 0, 0, 0.15)",
806
- /** Modal dialogs */
807
- dialog: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
808
- /** Pressed/inset appearance */
809
- inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)"
810
- },
811
- /**
812
- * Focus ring effects for accessibility
813
- */
814
- focus: {
815
- /** Standard focus ring - purple brand */
816
- ring: "0 0 0 3px rgba(120, 65, 201, 0.25)",
817
- /** Focus on dark backgrounds */
818
- ringOnDark: "0 0 0 3px rgba(255, 255, 255, 0.3)",
819
- /** Emphasized focus for primary actions */
820
- glow: "0 0 0 3px rgba(120, 65, 201, 0.4)"
821
- },
822
- /**
823
- * State indicator effects (subtle fills and emphasis borders)
824
- */
825
- state: {
826
- /** Error background - 5% red */
827
- errorSubtle: "rgba(218, 30, 40, 0.05)",
828
- /** Error border - 30% red */
829
- errorEmphasis: "rgba(218, 30, 40, 0.3)",
830
- /** Warning background - 10% yellow */
831
- warningSubtle: "rgba(241, 194, 27, 0.1)",
832
- /** Warning border - 40% yellow */
833
- warningEmphasis: "rgba(241, 194, 27, 0.4)",
834
- /** Success background - 5% green */
835
- successSubtle: "rgba(36, 161, 72, 0.05)",
836
- /** Success border - 30% green */
837
- successEmphasis: "rgba(36, 161, 72, 0.3)",
838
- /** Info background - 5% blue */
839
- infoSubtle: "rgba(0, 67, 206, 0.05)",
840
- /** Info border - 30% blue */
841
- infoEmphasis: "rgba(0, 67, 206, 0.3)"
842
- }
843
- },
844
- // ============================================
845
- // ICON SIZE SCALE (Phase A Addition)
846
- // Intent-based icon sizing
847
- // ============================================
848
- iconSize: {
849
- /** Within text flow - 14px */
850
- inline: 14,
851
- /** Standard controls (buttons, inputs) - 16px */
852
- control: 16,
853
- /** Navigation and toolbar - 20px */
854
- navigation: 20,
855
- /** Visual anchor (empty states) - 24px */
856
- prominent: 24,
857
- /** Hero sections - 28px */
858
- hero: 28,
859
- /** Maximum impact - 36px */
860
- display: 36
861
- },
862
- // ============================================
863
- // INTENT-BASED SPACING (Phase A Addition)
864
- // ============================================
865
- inline: {
866
- /** Minimum internal space - 4px */
867
- tight: e.spacing[1],
868
- /** Dense but readable - 8px */
869
- compact: e.spacing[2],
870
- /** Balanced density - 12px */
871
- snug: e.spacing[3],
872
- /** Standard breathing room - 16px */
873
- comfortable: e.spacing[4],
874
- /** Generous without excess - 20px */
875
- relaxed: e.spacing[5],
876
- /** Maximum breathing room - 24px */
877
- spacious: e.spacing[6]
878
- },
879
- stack: {
880
- /** Minimum vertical space - 4px */
881
- tight: e.spacing[1],
882
- /** Dense but readable - 8px */
883
- compact: e.spacing[2],
884
- /** Balanced density - 12px */
885
- snug: e.spacing[3],
886
- /** Standard vertical space - 16px */
887
- comfortable: e.spacing[4],
888
- /** Generous without excess - 20px */
889
- relaxed: e.spacing[5],
890
- /** Maximum vertical space - 24px */
891
- spacious: e.spacing[6],
892
- // Legacy aliases for backwards compatibility
893
- /** @deprecated Use tight instead */
894
- related: e.spacing[1],
895
- /** @deprecated Use compact instead */
896
- grouped: e.spacing[2],
897
- /** @deprecated Use comfortable instead */
898
- separated: e.spacing[4],
899
- /** @deprecated Use spacious instead */
900
- distinct: e.spacing[8]
901
- },
902
- density: {
903
- /** Maximum info density */
904
- compact: {
905
- rowHeight: 36,
906
- cellPadding: 6,
907
- gap: 4
908
- },
909
- /** Balanced readability/density */
910
- standard: {
911
- rowHeight: 48,
912
- cellPadding: 12,
913
- gap: 8
914
- },
915
- /** Prioritize readability */
916
- comfortable: {
917
- rowHeight: 64,
918
- cellPadding: 16,
919
- gap: 12
920
- }
921
- }
922
- }, h = {
923
- primary: {
924
- main: e.colors.navy[900],
925
- // #050742 - Deep Navy
926
- light: e.colors.purple[700],
927
- // #7841C9 - Light Violet/Purple
928
- dark: e.colors.indigo[900]
929
- // #3816A0 - Deep Indigo
930
- },
931
- secondary: {
932
- main: e.colors.coral[800],
933
- // #FF6150 - Coral
934
- light: e.colors.azure[500],
935
- // #27AAE1 - Azure
936
- dark: e.colors.indigo.electric
937
- // #6B12ED - Electric Indigo
938
- },
939
- neutral: {
940
- white: e.colors.gray[0],
941
- // #FFFFFF
942
- lightGray: e.colors.gray[50],
943
- // #FAFAFA - alias: gray50
944
- gray50: e.colors.gray[50],
945
- // #FAFAFA
946
- gray100: e.colors.gray[200],
947
- // #E5E7EB - NOTE: Misnamed, actually gray200
948
- gray200: e.colors.gray[200],
949
- // #E5E7EB
950
- gray300: e.colors.gray[300],
951
- // #D1D5DB
952
- gray400: e.colors.gray[400],
953
- // #9CA3AF
954
- gray500: e.colors.gray[500],
955
- // #6B7280
956
- gray600: e.colors.gray[600],
957
- // #374151
958
- gray700: e.colors.gray[700],
959
- // #27272A
960
- gray800: e.colors.gray[800],
961
- // #18181B
962
- gray900: e.colors.gray[900],
963
- // #0F0F12
964
- darkBg: e.colors.gray[800],
965
- // #18181B - alias
966
- darkPaper: e.colors.gray[700]
967
- // #27272A - alias
968
- }
969
- }, le = {
970
- button: {
971
- // Sizing
972
- height: {
973
- small: 32,
974
- medium: 40,
975
- large: 48
976
- },
977
- padding: {
978
- small: { x: 16, y: 8 },
979
- medium: { x: 20, y: 10 },
980
- large: { x: 24, y: 12 }
981
- },
982
- fontSize: {
983
- small: e.fontSize.sm,
984
- medium: e.fontSize.base,
985
- large: e.fontSize.lg
986
- },
987
- borderRadius: e.borderRadius.full,
988
- // Colors by variant
989
- primary: {
990
- background: n.colors.brand.primary,
991
- backgroundHover: n.colors.brand.accent,
992
- text: n.colors.text.inverse
993
- },
994
- secondary: {
995
- background: n.colors.brand.tertiary,
996
- backgroundHover: n.colors.brand.accent,
997
- text: n.colors.text.inverse
998
- },
999
- outlined: {
1000
- background: "transparent",
1001
- backgroundHover: n.colors.brand.accent,
1002
- border: n.colors.brand.primary,
1003
- text: n.colors.brand.primary,
1004
- textHover: n.colors.text.inverse
1005
- }
1006
- },
1007
- input: {
1008
- height: {
1009
- small: 36,
1010
- medium: 44,
1011
- large: 52
1012
- },
1013
- padding: {
1014
- small: { x: 12, y: 8 },
1015
- medium: { x: 14, y: 10 },
1016
- large: { x: 16, y: 12 }
1017
- },
1018
- fontSize: {
1019
- small: e.fontSize.sm,
1020
- medium: e.fontSize.base,
1021
- large: e.fontSize.lg
1022
- },
1023
- borderRadius: e.borderRadius.sm,
1024
- // 6px for 36-52px height inputs
1025
- borderColor: {
1026
- default: n.colors.border.default,
1027
- hover: n.colors.border.strong,
1028
- focus: n.colors.border.focus,
1029
- error: n.colors.border.error
1030
- },
1031
- background: {
1032
- default: n.colors.background.primary,
1033
- disabled: n.colors.background.tertiary
1034
- }
1035
- },
1036
- card: {
1037
- padding: {
1038
- small: e.spacing[4],
1039
- medium: e.spacing[6],
1040
- large: e.spacing[8]
1041
- },
1042
- borderRadius: e.borderRadius.lg,
1043
- // 12px for cards - inner elements use sm:6px or md:8px
1044
- shadow: n.shadows.card,
1045
- background: n.colors.background.primary,
1046
- border: n.colors.border.subtle
1047
- },
1048
- avatar: {
1049
- size: {
1050
- xs: 24,
1051
- sm: 32,
1052
- md: 40,
1053
- lg: 48,
1054
- xl: 64,
1055
- "2xl": 96
1056
- },
1057
- borderRadius: e.borderRadius.full,
1058
- fontSize: {
1059
- xs: e.fontSize.xs,
1060
- sm: e.fontSize.xs,
1061
- md: e.fontSize.sm,
1062
- lg: e.fontSize.base,
1063
- xl: e.fontSize.xl,
1064
- "2xl": e.fontSize["2xl"]
1065
- }
1066
- },
1067
- badge: {
1068
- padding: { x: 8, y: 2 },
1069
- borderRadius: e.borderRadius.full,
1070
- fontSize: e.fontSize.xs,
1071
- fontWeight: e.fontWeight.medium
1072
- },
1073
- chip: {
1074
- height: {
1075
- small: 24,
1076
- medium: 32
1077
- },
1078
- padding: {
1079
- small: { x: 8, y: 4 },
1080
- medium: { x: 12, y: 6 }
1081
- },
1082
- borderRadius: e.borderRadius.sm,
1083
- // 6px for 24-32px height chips
1084
- fontSize: {
1085
- small: e.fontSize.xs,
1086
- medium: e.fontSize.sm
1087
- }
1088
- },
1089
- tooltip: {
1090
- padding: { x: 12, y: 8 },
1091
- borderRadius: e.borderRadius.sm,
1092
- // 6px for small tooltip elements
1093
- fontSize: e.fontSize.sm,
1094
- background: n.colors.background.inverse,
1095
- text: n.colors.text.inverse
1096
- },
1097
- modal: {
1098
- padding: e.spacing[6],
1099
- borderRadius: e.borderRadius.xl,
1100
- // 16px - allows nested cards with lg:12px
1101
- shadow: n.shadows.modal,
1102
- backdropOpacity: e.opacity[50],
1103
- width: {
1104
- small: 400,
1105
- medium: 560,
1106
- large: 720,
1107
- fullWidth: "90vw"
1108
- }
1109
- },
1110
- switch: {
1111
- width: {
1112
- small: 36,
1113
- medium: 48
1114
- },
1115
- height: {
1116
- small: 20,
1117
- medium: 28
1118
- },
1119
- thumb: {
1120
- small: 16,
1121
- medium: 24
1122
- },
1123
- track: {
1124
- off: e.colors.gray[200],
1125
- on: n.colors.brand.primary
1126
- }
1127
- },
1128
- navigation: {
1129
- header: {
1130
- height: 64,
1131
- background: n.colors.brand.primary,
1132
- text: n.colors.text.inverse
1133
- },
1134
- sidebar: {
1135
- width: 240,
1136
- collapsedWidth: 64,
1137
- background: n.colors.brand.primary
1138
- },
1139
- item: {
1140
- height: 44,
1141
- padding: { x: 16, y: 12 },
1142
- borderRadius: e.borderRadius.md
1143
- // 8px for 44px height nav items
1144
- }
1145
- }
1146
- }, qo = {
1147
- /** Most important actions/content - demands immediate attention */
1148
- primary: {
1149
- prominence: 5,
1150
- usage: ["Primary CTAs", "Critical alerts", "Page titles", "Current navigation"],
1151
- minContrast: 7
1152
- // WCAG AAA for normal text
1153
- },
1154
- /** Important but not critical - strong visual presence */
1155
- secondary: {
1156
- prominence: 4,
1157
- usage: ["Secondary buttons", "Section headings", "Key information", "Active states"],
1158
- minContrast: 4.5
1159
- // WCAG AA for normal text
1160
- },
1161
- /** Supportive content - visible but not competing */
1162
- tertiary: {
1163
- prominence: 3,
1164
- usage: ["Body text", "Form labels", "Navigation items", "Card content"],
1165
- minContrast: 4.5
1166
- // WCAG AA
1167
- },
1168
- /** Background/supporting information */
1169
- muted: {
1170
- prominence: 2,
1171
- usage: ["Helper text", "Timestamps", "Metadata", "Placeholders"],
1172
- minContrast: 3
1173
- // Acceptable for large text
1174
- },
1175
- /** Non-interactive or unavailable */
1176
- disabled: {
1177
- prominence: 1,
1178
- usage: ["Disabled controls", "Inactive states", "Read-only fields"],
1179
- minContrast: 2.5
1180
- // Minimum perceivable
1181
- }
1182
- }, Fo = {
1183
- // Display - Hero content, marketing headlines
1184
- display: {
1185
- level: 1,
1186
- scale: {
1187
- large: { size: "3rem", weight: 700, lineHeight: 1.1, tracking: "-0.02em" },
1188
- medium: { size: "2.25rem", weight: 700, lineHeight: 1.15, tracking: "-0.01em" },
1189
- small: { size: "1.875rem", weight: 600, lineHeight: 1.2, tracking: "0" }
1190
- }
1191
- },
1192
- // Headings - Page and section structure
1193
- heading: {
1194
- level: 2,
1195
- scale: {
1196
- h1: { size: "1.875rem", weight: 700, lineHeight: 1.25 },
1197
- h2: { size: "1.5rem", weight: 600, lineHeight: 1.3 },
1198
- h3: { size: "1.25rem", weight: 600, lineHeight: 1.35 },
1199
- h4: { size: "1.125rem", weight: 600, lineHeight: 1.4 },
1200
- h5: { size: "1rem", weight: 600, lineHeight: 1.45 },
1201
- h6: { size: "0.875rem", weight: 600, lineHeight: 1.5 }
1202
- }
1203
- },
1204
- // Body - Main content
1205
- body: {
1206
- level: 3,
1207
- scale: {
1208
- large: { size: "1.125rem", weight: 400, lineHeight: 1.6 },
1209
- medium: { size: "1rem", weight: 400, lineHeight: 1.5 },
1210
- small: { size: "0.875rem", weight: 400, lineHeight: 1.5 }
1211
- }
1212
- },
1213
- // Labels - Form and UI labels
1214
- label: {
1215
- level: 4,
1216
- scale: {
1217
- large: { size: "1rem", weight: 500, lineHeight: 1.25 },
1218
- medium: { size: "0.875rem", weight: 500, lineHeight: 1.25 },
1219
- small: { size: "0.75rem", weight: 500, lineHeight: 1.25 }
1220
- }
1221
- },
1222
- // Caption - Supporting/metadata
1223
- caption: {
1224
- level: 5,
1225
- scale: {
1226
- default: { size: "0.75rem", weight: 400, lineHeight: 1.4 },
1227
- emphasis: { size: "0.75rem", weight: 500, lineHeight: 1.4 }
1228
- }
1229
- },
1230
- // Overline - Category/type indicators
1231
- overline: {
1232
- level: 6,
1233
- scale: {
1234
- default: { size: "0.625rem", weight: 600, lineHeight: 1.5, tracking: "0.1em", transform: "uppercase" }
1235
- }
1236
- }
1237
- }, wo = {
1238
- /** Ground level - page background, sunken areas */
1239
- ground: {
1240
- level: 0,
1241
- zIndex: 0,
1242
- shadow: "none",
1243
- description: "Page backgrounds, wells, sunken inputs"
1244
- },
1245
- /** Resting - default content surfaces */
1246
- resting: {
1247
- level: 1,
1248
- zIndex: 1,
1249
- shadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
1250
- description: "Cards, panels at rest"
1251
- },
1252
- /** Raised - interactive/hover states */
1253
- raised: {
1254
- level: 2,
1255
- zIndex: 10,
1256
- shadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
1257
- description: "Hovered cards, active buttons"
1258
- },
1259
- /** Floating - dropdowns, menus */
1260
- floating: {
1261
- level: 3,
1262
- zIndex: 1e3,
1263
- shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
1264
- description: "Dropdown menus, popovers"
1265
- },
1266
- /** Sticky - headers, navigation */
1267
- sticky: {
1268
- level: 4,
1269
- zIndex: 1020,
1270
- shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
1271
- description: "Sticky headers, fixed navigation"
1272
- },
1273
- /** Overlay - backdrop for modals */
1274
- overlay: {
1275
- level: 5,
1276
- zIndex: 1040,
1277
- shadow: "none",
1278
- description: "Modal/dialog backdrops"
1279
- },
1280
- /** Dialog - modals, alerts */
1281
- dialog: {
1282
- level: 6,
1283
- zIndex: 1050,
1284
- shadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
1285
- description: "Modal dialogs, alerts"
1286
- },
1287
- /** Popover - tooltips, notifications */
1288
- popover: {
1289
- level: 7,
1290
- zIndex: 1060,
1291
- shadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
1292
- description: "Popovers, floating panels"
1293
- },
1294
- /** Tooltip - highest priority overlays */
1295
- tooltip: {
1296
- level: 8,
1297
- zIndex: 1070,
1298
- shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
1299
- description: "Tooltips, critical notifications"
1300
- }
1301
- }, Jo = {
1302
- /** Scale ratio for size progression */
1303
- ratio: 1.25,
1304
- // Major third
1305
- /** Size scale multipliers */
1306
- sizes: {
1307
- "3xs": 0.512,
1308
- // ratio^-3
1309
- "2xs": 0.64,
1310
- // ratio^-2
1311
- xs: 0.8,
1312
- // ratio^-1
1313
- sm: 1,
1314
- // base
1315
- md: 1.25,
1316
- // ratio^1
1317
- lg: 1.563,
1318
- // ratio^2
1319
- xl: 1.953,
1320
- // ratio^3
1321
- "2xl": 2.441,
1322
- // ratio^4
1323
- "3xl": 3.052
1324
- // ratio^5
1325
- },
1326
- /** Icon sizes following the scale */
1327
- icons: {
1328
- xs: 12,
1329
- sm: 16,
1330
- md: 20,
1331
- lg: 24,
1332
- xl: 32,
1333
- "2xl": 40
1334
- },
1335
- /** Touch target minimums (accessibility) */
1336
- touchTargets: {
1337
- minimum: 44,
1338
- // WCAG 2.5.5 minimum
1339
- comfortable: 48,
1340
- spacious: 56
1341
- }
1342
- }, et = {
1343
- /** High contrast - primary actions, critical info */
1344
- high: {
1345
- foreground: e.colors.navy[900],
1346
- background: e.colors.gray[0],
1347
- ratio: 12.5
1348
- // Well above AAA
1349
- },
1350
- /** Medium contrast - body content */
1351
- medium: {
1352
- foreground: e.colors.gray[700],
1353
- background: e.colors.gray[0],
1354
- ratio: 7.5
1355
- // Above AAA
1356
- },
1357
- /** Low contrast - secondary/muted content */
1358
- low: {
1359
- foreground: e.colors.gray[500],
1360
- background: e.colors.gray[0],
1361
- ratio: 4.5
1362
- // AA compliant
1363
- },
1364
- /** Subtle - disabled/decorative */
1365
- subtle: {
1366
- foreground: e.colors.gray[400],
1367
- background: e.colors.gray[0],
1368
- ratio: 3
1369
- // Minimum perceivable
1370
- }
1371
- }, ot = {
1372
- /** Default resting state */
1373
- default: {
1374
- opacity: 1,
1375
- transform: "none",
1376
- transition: "all 150ms ease-out"
1377
- },
1378
- /** Mouse hovering over element */
1379
- hover: {
1380
- opacity: 1,
1381
- transform: "translateY(-1px)",
1382
- transition: "all 150ms ease-out"
1383
- },
1384
- /** Element being pressed */
1385
- active: {
1386
- opacity: 0.9,
1387
- transform: "translateY(0) scale(0.98)",
1388
- transition: "all 50ms ease-out"
1389
- },
1390
- /** Keyboard focused */
1391
- focus: {
1392
- outline: `2px solid ${e.colors.navy[900]}`,
1393
- outlineOffset: "2px",
1394
- transition: "outline-offset 100ms ease-out"
1395
- },
1396
- /** Element is disabled */
1397
- disabled: {
1398
- opacity: 0.5,
1399
- cursor: "not-allowed",
1400
- pointerEvents: "none"
1401
- }
1402
- }, vo = {
1403
- /** Micro spacing - between related elements */
1404
- micro: {
1405
- 1: 4,
1406
- // Tightest
1407
- 2: 8
1408
- // Very tight
1409
- },
1410
- /** Component spacing - within components */
1411
- component: {
1412
- 3: 12,
1413
- // Compact
1414
- 4: 16,
1415
- // Default
1416
- 5: 20
1417
- // Comfortable
1418
- },
1419
- /** Section spacing - between sections */
1420
- section: {
1421
- 6: 24,
1422
- // Tight sections
1423
- 8: 32,
1424
- // Default sections
1425
- 10: 40
1426
- // Spacious sections
1427
- },
1428
- /** Layout spacing - page-level */
1429
- layout: {
1430
- 12: 48,
1431
- // Section gaps
1432
- 16: 64,
1433
- // Major sections
1434
- 24: 96,
1435
- // Page sections
1436
- 32: 128
1437
- // Hero/major breaks
1438
- }
1439
- };
1440
- function sn(t) {
1441
- const r = wo[t];
1442
- return {
1443
- zIndex: r.zIndex,
1444
- boxShadow: r.shadow
1445
- };
1446
- }
1447
- function cn(t, r) {
1448
- const c = Fo[t].scale[r];
1449
- return c || null;
1450
- }
1451
- function dn(t, r = "light") {
1452
- return (r === "light" ? {
1453
- primary: e.colors.navy[900],
1454
- secondary: e.colors.gray[700],
1455
- tertiary: e.colors.gray[600],
1456
- muted: e.colors.gray[500],
1457
- disabled: e.colors.gray[400]
1458
- } : {
1459
- primary: e.colors.gray[50],
1460
- secondary: e.colors.gray[200],
1461
- tertiary: e.colors.gray[300],
1462
- muted: e.colors.gray[400],
1463
- disabled: e.colors.gray[500]
1464
- })[t];
1465
- }
1466
- function pn(t, r) {
1467
- return vo[t][r] ?? null;
1468
- }
1469
- const tt = {
1470
- colors: {
1471
- text: {
1472
- // Improved contrast ratios for dark mode (WCAG AA+ compliant)
1473
- primary: "#F9FAFB",
1474
- // Gray 50 - 15.8:1 contrast on gray[800]
1475
- secondary: "#D1D5DB",
1476
- // Gray 300 - 10.2:1 contrast
1477
- tertiary: "#9CA3AF",
1478
- // Gray 400 - 6.1:1 contrast
1479
- disabled: "#6B7280"
1480
- // Gray 500 - 3.9:1 contrast (meets large text AA)
1481
- },
1482
- background: {
1483
- // Refined dark backgrounds with better elevation differentiation
1484
- primary: "#121214",
1485
- // Darker base for better contrast
1486
- secondary: "#1C1C1F",
1487
- // Slightly elevated
1488
- tertiary: "#262629"
1489
- // More elevated surfaces
1490
- },
1491
- border: {
1492
- // Improved border visibility in dark mode
1493
- default: "#3F3F46",
1494
- // Gray 600 - visible but subtle
1495
- subtle: "#27272A",
1496
- // Gray 700 - very subtle dividers
1497
- strong: "#52525B"
1498
- // Gray 500 - emphasis borders
1499
- },
1500
- // Interactive state overrides for dark mode
1501
- interactive: {
1502
- default: e.colors.purple[400],
1503
- hover: e.colors.coral[400],
1504
- // Lighter coral for dark mode
1505
- active: e.colors.indigo[400],
1506
- disabled: e.colors.gray[600],
1507
- focus: e.colors.purple[400]
1508
- },
1509
- // Status color overrides for dark mode (improved contrast)
1510
- status: {
1511
- error: {
1512
- text: "#FCA5A5",
1513
- // Red 300 - good contrast
1514
- background: "#1F1315",
1515
- // Very dark red - elevated feel
1516
- border: "#991B1B"
1517
- // Red 800 - visible border
1518
- },
1519
- warning: {
1520
- text: "#FDE68A",
1521
- // Amber 200 - excellent contrast
1522
- background: "#1A1607",
1523
- // Very dark amber
1524
- border: "#92400E"
1525
- // Amber 800
1526
- },
1527
- success: {
1528
- text: "#86EFAC",
1529
- // Green 300
1530
- background: "#0A1A10",
1531
- // Very dark green
1532
- border: "#166534"
1533
- // Green 800
1534
- },
1535
- info: {
1536
- text: "#7DD3FC",
1537
- // Sky 300
1538
- background: "#0C1929",
1539
- // Very dark blue
1540
- border: "#075985"
1541
- // Sky 800
1542
- }
1543
- }
1544
- }
1545
- }, gn = {
1546
- none: "none",
1547
- sm: "0 1px 2px 0 rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)",
1548
- base: "0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)",
1549
- md: "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)",
1550
- lg: "0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.05)",
1551
- xl: "0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.07)",
1552
- "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1)",
1553
- // Glow shadows for dark mode (subtle light source effect)
1554
- glow: {
1555
- primary: `0 0 20px ${e.colors.purple[500]}40`,
1556
- accent: `0 0 20px ${e.colors.coral[500]}40`,
1557
- info: `0 0 20px ${e.colors.azure[500]}40`
1558
- }
1559
- }, nt = {
1560
- // Default Trinity brand
1561
- trinity: {
1562
- name: "Trinity",
1563
- primary: {
1564
- main: e.colors.navy[900],
1565
- light: e.colors.purple[700],
1566
- dark: e.colors.indigo[900],
1567
- contrast: "#FFFFFF"
1568
- },
1569
- secondary: {
1570
- main: e.colors.coral[800],
1571
- light: e.colors.coral[500],
1572
- dark: e.colors.coral[900],
1573
- contrast: "#FFFFFF"
1574
- },
1575
- accent: e.colors.azure[500]
1576
- },
1577
- // Professional/Corporate variant
1578
- corporate: {
1579
- name: "Corporate",
1580
- primary: {
1581
- main: "#1E3A5F",
1582
- // Deep blue
1583
- light: "#2E5A8F",
1584
- dark: "#0F1D30",
1585
- contrast: "#FFFFFF"
1586
- },
1587
- secondary: {
1588
- main: "#0891B2",
1589
- // Cyan
1590
- light: "#22D3EE",
1591
- dark: "#0E7490",
1592
- contrast: "#FFFFFF"
1593
- },
1594
- accent: "#F59E0B"
1595
- // Amber
1596
- },
1597
- // Modern/Tech variant
1598
- tech: {
1599
- name: "Tech",
1600
- primary: {
1601
- main: "#6366F1",
1602
- // Indigo
1603
- light: "#818CF8",
1604
- dark: "#4338CA",
1605
- contrast: "#FFFFFF"
1606
- },
1607
- secondary: {
1608
- main: "#EC4899",
1609
- // Pink
1610
- light: "#F472B6",
1611
- dark: "#DB2777",
1612
- contrast: "#FFFFFF"
1613
- },
1614
- accent: "#10B981"
1615
- // Emerald
1616
- },
1617
- // Nature/Organic variant
1618
- nature: {
1619
- name: "Nature",
1620
- primary: {
1621
- main: "#059669",
1622
- // Emerald
1623
- light: "#34D399",
1624
- dark: "#047857",
1625
- contrast: "#FFFFFF"
1626
- },
1627
- secondary: {
1628
- main: "#D97706",
1629
- // Amber
1630
- light: "#FBBF24",
1631
- dark: "#B45309",
1632
- contrast: "#FFFFFF"
1633
- },
1634
- accent: "#0EA5E9"
1635
- // Sky
1636
- },
1637
- // Dark/Sleek variant
1638
- midnight: {
1639
- name: "Midnight",
1640
- primary: {
1641
- main: "#1F2937",
1642
- // Gray 800
1643
- light: "#4B5563",
1644
- dark: "#111827",
1645
- contrast: "#FFFFFF"
1646
- },
1647
- secondary: {
1648
- main: "#8B5CF6",
1649
- // Violet
1650
- light: "#A78BFA",
1651
- dark: "#7C3AED",
1652
- contrast: "#FFFFFF"
1653
- },
1654
- accent: "#F43F5E"
1655
- // Rose
1656
- }
1657
- };
1658
- function hn(t) {
1659
- const r = nt[t];
1660
- return r ? {
1661
- ...n,
1662
- colors: {
1663
- ...n.colors,
1664
- brand: {
1665
- primary: r.primary.main,
1666
- secondary: r.secondary.main,
1667
- tertiary: r.primary.dark,
1668
- accent: r.accent
1669
- },
1670
- interactive: {
1671
- ...n.colors.interactive,
1672
- default: r.primary.main,
1673
- hover: r.secondary.main,
1674
- active: r.primary.dark,
1675
- focus: r.primary.light
1676
- }
1677
- }
1678
- } : n;
1679
- }
1680
- const it = {
1681
- /** Attention/importance levels */
1682
- attention: qo,
1683
- /** Typography scale and weights */
1684
- typography: Fo,
1685
- /** Z-axis elevation system */
1686
- elevation: wo,
1687
- /** Size scaling system */
1688
- scale: Jo,
1689
- /** Contrast levels */
1690
- contrast: et,
1691
- /** Interactive states */
1692
- interactive: ot,
1693
- /** Spacing rhythm */
1694
- spacing: vo
1695
- }, mn = {
1696
- base: e,
1697
- semantic: n,
1698
- component: le,
1699
- darkMode: tt,
1700
- hierarchy: it
1701
- }, io = ({
1702
- height: t = 28,
1703
- className: r
1704
- }) => {
1705
- const c = t * 4.018867924528302;
1706
- return /* @__PURE__ */ i(
1707
- "svg",
1708
- {
1709
- xmlns: "http://www.w3.org/2000/svg",
1710
- width: c,
1711
- height: t,
1712
- viewBox: "0 0 213 53",
1713
- fill: "none",
1714
- className: r,
1715
- "aria-label": "Trinity",
1716
- role: "img",
1717
- children: [
1718
- /* @__PURE__ */ i("g", { clipPath: "url(#trinity-logo-clip)", children: [
1719
- /* @__PURE__ */ o(
1720
- "path",
1721
- {
1722
- d: "M212.525 18.8744C212.304 19.023 212.157 19.1716 211.936 19.3944C208.844 23.8516 205.826 28.3087 202.735 32.7659C202.44 33.2116 202.367 33.6573 202.367 34.1773C202.367 37.0744 202.367 40.0459 202.367 43.0173H199.496V42.0516C199.496 39.4516 199.496 36.8516 199.496 34.2516C199.496 33.6573 199.349 33.1373 198.981 32.6173C196.036 28.2344 193.018 23.8516 190 19.4687C189.853 19.2459 189.706 18.9487 189.411 18.5773C190.515 18.5773 191.472 18.503 192.503 18.5773C192.724 18.5773 193.018 18.8744 193.165 19.1716C195.521 22.663 197.95 26.2287 200.306 29.7201L200.968 30.6859L204.575 25.3373C205.974 23.2573 207.372 21.1773 208.771 19.0973C208.992 18.7259 209.433 18.4287 209.949 18.503C210.832 18.503 211.642 18.4287 212.525 18.4287V18.8744Z",
1723
- fill: "white"
1724
- }
1725
- ),
1726
- /* @__PURE__ */ o(
1727
- "path",
1728
- {
1729
- d: "M134.645 38.0401V18.6515H137.295V43.0172C136.706 43.0915 136.117 43.0915 135.528 43.0172C135.16 42.9429 134.865 42.7201 134.645 42.4229C129.86 36.3315 125.075 30.2401 120.364 24.1486C120.143 23.9258 119.996 23.6286 119.628 23.2572V43.0172H116.904V18.5772C117.714 18.5029 118.45 18.5029 119.26 18.5772C119.481 18.5772 119.775 18.9486 119.996 19.1715C124.707 25.1143 129.345 31.0572 134.056 37.0743L134.645 38.0401Z",
1730
- fill: "white"
1731
- }
1732
- ),
1733
- /* @__PURE__ */ o(
1734
- "path",
1735
- {
1736
- d: "M84.0006 33.1371L91.4353 43.0171C90.2575 43.0171 89.3006 43.0914 88.27 43.0171C87.9756 43.0171 87.6811 42.6457 87.5339 42.4228C85.4728 39.6742 83.4853 36.9999 81.4978 34.2514C81.2034 33.8057 80.7617 33.5828 80.2464 33.6571C78.2589 33.7314 76.2714 33.6571 74.1367 33.6571V43.0171H71.4131V18.7257C71.4867 18.6514 71.4867 18.6514 71.5603 18.6514C75.3881 18.6514 79.1423 18.6514 82.97 18.7257C83.8534 18.7999 84.8103 18.9485 85.62 19.2457C88.8589 20.2857 90.552 22.7371 90.552 26.0057C90.552 29.2742 88.7853 31.5771 85.62 32.6914C85.1048 32.8399 84.5895 32.9142 84.0006 33.1371ZM74.0631 31.2057C77.302 31.0571 80.4673 31.0571 83.6325 30.7599C85.3992 30.6114 86.945 29.3485 87.3867 27.5657C88.3436 24.5199 86.6506 21.8457 83.2645 21.3999C81.0561 21.2514 78.8478 21.1771 76.6395 21.1771C75.7561 21.1771 74.8728 21.1771 73.9895 21.1771L74.0631 31.2057Z",
1737
- fill: "white"
1738
- }
1739
- ),
1740
- /* @__PURE__ */ o(
1741
- "path",
1742
- {
1743
- d: "M2.43945 24.0742C3.47001 23.7771 4.50035 24.2228 5.01562 25.1143C5.23639 25.5599 5.38343 26.0797 5.45703 26.5996V49.7021C5.45703 51.3364 4.50053 52.3769 3.02832 52.377C1.5561 52.377 0.599609 51.3364 0.599609 49.7021V26.5254C0.525999 25.4111 1.33531 24.3714 2.43945 24.0742ZM11.7881 8.40039C12.745 7.50903 14.2905 7.58314 15.1738 8.54883C15.4682 8.84595 15.6155 9.2175 15.7627 9.58887C15.8363 9.96021 15.9102 10.3318 15.9102 10.7031V41.7539C15.9102 43.5368 15.1001 44.5771 13.6279 44.6514C12.0821 44.7257 11.0518 43.611 11.0518 41.8281V28.8281L10.9775 26.1543V10.6289C10.9039 9.81176 11.1992 8.99468 11.7881 8.40039ZM23.2715 0.525391C24.302 0.22826 25.3324 0.674007 25.8477 1.56543C26.0684 2.01105 26.2154 2.53089 26.2891 3.05078V26.1543C26.2889 27.7883 25.3324 28.8281 23.8604 28.8281C22.3883 28.8281 21.4318 27.7883 21.4316 26.1543V2.97656C21.3581 1.86233 22.1674 0.822521 23.2715 0.525391Z",
1744
- fill: "url(#trinity-logo-gradient)"
1745
- }
1746
- ),
1747
- /* @__PURE__ */ o(
1748
- "path",
1749
- {
1750
- d: "M50.4341 21.2513H42.3369V18.7256H61.3286V21.2513H53.2314V43.017H50.3605V21.2513H50.4341Z",
1751
- fill: "white"
1752
- }
1753
- ),
1754
- /* @__PURE__ */ o(
1755
- "path",
1756
- {
1757
- d: "M181.24 18.6514V21.1771H173.217V42.9428H170.419V21.2514H162.322V18.7257H181.24V18.6514Z",
1758
- fill: "white"
1759
- }
1760
- ),
1761
- /* @__PURE__ */ o("path", { d: "M152.679 42.9428H150.029V18.6514H152.679V42.9428Z", fill: "white" }),
1762
- /* @__PURE__ */ o("path", { d: "M104.17 42.9427H101.446V18.7256H104.17V42.9427Z", fill: "white" })
1763
- ] }),
1764
- /* @__PURE__ */ i("defs", { children: [
1765
- /* @__PURE__ */ i(
1766
- "linearGradient",
1767
- {
1768
- id: "trinity-logo-gradient",
1769
- x1: "0.594727",
1770
- y1: "52.3768",
1771
- x2: "26.2904",
1772
- y2: "0.434374",
1773
- gradientUnits: "userSpaceOnUse",
1774
- children: [
1775
- /* @__PURE__ */ o("stop", { stopColor: "#FF6150" }),
1776
- /* @__PURE__ */ o("stop", { offset: "1", stopColor: "#6B12ED" })
1777
- ]
1778
- }
1779
- ),
1780
- /* @__PURE__ */ o("clipPath", { id: "trinity-logo-clip", children: /* @__PURE__ */ o("rect", { width: "212", height: "52", fill: "white", transform: "translate(0.525391 0.451172)" }) })
1781
- ] })
1782
- ]
1783
- }
1784
- );
1785
- }, lo = B("div")(({ theme: t, focused: r }) => ({
1786
- position: "relative",
1787
- borderRadius: `${n.borders.radius.menu}px`,
1788
- // 12px
1789
- backgroundColor: r === "true" ? t.palette.common.white : n.effects.onDark.subtle,
1790
- // 12% white
1791
- "&:hover": {
1792
- backgroundColor: r === "true" ? t.palette.common.white : "rgba(255, 255, 255, 0.15)"
1793
- // @intentional-color: hover state slightly stronger
1794
- },
1795
- marginRight: t.spacing(2),
1796
- marginLeft: t.spacing(2),
1797
- width: "100%",
1798
- maxWidth: 400,
1799
- transition: t.transitions.create(["background-color"]),
1800
- [t.breakpoints.up("sm")]: {
1801
- marginLeft: t.spacing(3),
1802
- width: "auto",
1803
- minWidth: 300
1804
- }
1805
- })), so = B("div")(({ theme: t, focused: r }) => ({
1806
- padding: t.spacing(0, 2),
1807
- height: "100%",
1808
- position: "absolute",
1809
- pointerEvents: "none",
1810
- display: "flex",
1811
- alignItems: "center",
1812
- justifyContent: "center",
1813
- color: r === "true" ? h.primary.main : Q(t.palette.common.white, 0.5)
1814
- })), co = B(eo)(({ theme: t, focused: r }) => ({
1815
- color: r === "true" ? h.primary.main : "inherit",
1816
- width: "100%",
1817
- "& .MuiInputBase-input": {
1818
- padding: t.spacing(1, 4, 1, 0),
1819
- paddingLeft: `calc(1em + ${t.spacing(4)})`,
1820
- transition: t.transitions.create("width"),
1821
- width: "100%",
1822
- fontSize: n.typography.body.small.fontSize,
1823
- // 14px
1824
- "&::placeholder": {
1825
- color: r === "true" ? h.neutral.gray500 : Q(t.palette.common.white, 0.5),
1826
- opacity: 1
1827
- }
1828
- }
1829
- })), po = B(S)(({ show: t }) => ({
1830
- position: "absolute",
1831
- right: n.inline.tight,
1832
- // 4px
1833
- top: "50%",
1834
- transform: "translateY(-50%)",
1835
- padding: n.inline.tight,
1836
- // 4px
1837
- opacity: t === "true" ? 1 : 0,
1838
- pointerEvents: t === "true" ? "auto" : "none",
1839
- color: h.neutral.gray500,
1840
- "&:hover": {
1841
- backgroundColor: "action.hover"
1842
- // Theme-aware hover
1843
- }
1844
- })), rt = B(oo)(({ theme: t }) => ({
1845
- backgroundColor: n.effects.onDark.subtle,
1846
- // 12% white
1847
- color: t.palette.common.white,
1848
- borderRadius: `${n.borders.radius.menu}px`,
1849
- // 12px
1850
- padding: `${n.inline.tight}px ${n.inline.compact}px`,
1851
- // 6px 12px
1852
- textTransform: "none",
1853
- fontSize: n.typography.body.small.fontSize,
1854
- // 14px
1855
- fontWeight: n.typography.body.small.fontWeight,
1856
- // 400
1857
- minWidth: 180,
1858
- justifyContent: "space-between",
1859
- "&:hover": {
1860
- backgroundColor: "rgba(255, 255, 255, 0.15)"
1861
- // @intentional-color: hover state
1862
- }
1863
- })), at = () => /* @__PURE__ */ o(l, { sx: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ o(io, { height: 28 }) });
1864
- function lt({
1865
- appName: t = "App Name",
1866
- clientName: r = "Long Client Name 1",
1867
- clients: m = [
1868
- { id: "1", name: "Long Client Name 1" },
1869
- { id: "2", name: "Long Client Name 2" },
1870
- { id: "3", name: "Long Client Name 3" },
1871
- { id: "4", name: "Client ABC" },
1872
- { id: "5", name: "Client XYZ" }
1873
- ],
1874
- onClientChange: c,
1875
- userInitials: y = "RD",
1876
- userName: v = "Rahul M Desai",
1877
- userEmail: x = "rdesai@trinitylifesciences.com",
1878
- onSearch: g,
1879
- onAppsClick: L,
1880
- onUserMenuClick: N,
1881
- apps: C = [
1882
- { id: "launch-accelerator", name: "Launch Accelerator", url: "#" },
1883
- { id: "cloudcast", name: "CloudCast", url: "#" },
1884
- { id: "terra", name: "Terra", url: "#" },
1885
- { id: "market-intelligence", name: "Market Intelligence Dashboard", url: "#" }
1886
- ],
1887
- hideAppNameOnMobile: F = !0,
1888
- logo: I,
1889
- logoInvert: $ = !1
1890
- }) {
1891
- const O = Ae();
1892
- He(O.breakpoints.down("md"));
1893
- const J = He(O.breakpoints.down("sm")), [z, D] = M.useState(null), [W, E] = M.useState(null), [s, A] = M.useState(null), [V, U] = M.useState(r), [H, f] = M.useState(""), [R, p] = M.useState(!1), [k, K] = M.useState(!1), se = (u) => {
1894
- D(u.currentTarget);
1895
- }, Z = () => {
1896
- D(null);
1897
- }, X = (u) => {
1898
- U(u.name), c?.(u.id), Z();
1899
- }, ee = (u) => {
1900
- E(u.currentTarget);
1901
- }, ne = () => {
1902
- E(null);
1903
- }, oe = (u) => {
1904
- N?.(u), ne();
1905
- }, ie = (u) => {
1906
- A(u.currentTarget);
1907
- }, w = () => {
1908
- A(null);
1909
- }, ce = (u) => {
1910
- L?.(u), w();
1911
- }, re = (u) => {
1912
- f(u.target.value);
1913
- }, we = (u) => {
1914
- u.key === "Enter" && g?.(H);
1915
- }, ae = () => {
1916
- f("");
1917
- }, ue = () => {
1918
- K(!0);
1919
- }, be = () => {
1920
- K(!1), f(""), p(!1);
1921
- }, We = () => {
1922
- H.trim() && (g?.(H), be());
1923
- };
1924
- return /* @__PURE__ */ i(
1925
- bo,
1926
- {
1927
- position: "fixed",
1928
- elevation: 0,
1929
- component: "header",
1930
- sx: {
1931
- backgroundColor: h.primary.main,
1932
- borderBottom: `1px solid ${Q(h.neutral.white, 0.1)}`,
1933
- borderRadius: 0
1934
- },
1935
- children: [
1936
- /* @__PURE__ */ i(
1937
- xo,
1938
- {
1939
- component: "nav",
1940
- "aria-label": "Main navigation",
1941
- sx: { minHeight: 56, px: { xs: 2, sm: 3 } },
1942
- children: [
1943
- /* @__PURE__ */ i(l, { sx: { display: "flex", alignItems: "center", gap: { xs: 1, sm: 2 }, minWidth: 0 }, children: [
1944
- I ? /* @__PURE__ */ o(l, { sx: {
1945
- display: "flex",
1946
- alignItems: "center",
1947
- ...$ && { filter: "brightness(0) invert(1)" }
1948
- }, children: I }) : /* @__PURE__ */ o(at, {}),
1949
- !(J && F) && /* @__PURE__ */ i(Te, { children: [
1950
- /* @__PURE__ */ o(
1951
- he,
1952
- {
1953
- orientation: "vertical",
1954
- flexItem: !0,
1955
- sx: {
1956
- backgroundColor: "rgba(255, 255, 255, 0.3)",
1957
- // @intentional-color: decorative divider
1958
- height: n.iconSize.prominent,
1959
- // 24px
1960
- alignSelf: "center",
1961
- display: { xs: "none", sm: "block" }
1962
- }
1963
- }
1964
- ),
1965
- /* @__PURE__ */ o(
1966
- b,
1967
- {
1968
- variant: "subtitle1",
1969
- noWrap: !0,
1970
- sx: {
1971
- color: "white",
1972
- fontWeight: n.typography.label.large.fontWeight,
1973
- // 500
1974
- fontSize: n.typography.body.small.fontSize,
1975
- // 14px
1976
- display: { xs: "none", sm: "block" }
1977
- },
1978
- children: t
1979
- }
1980
- )
1981
- ] })
1982
- ] }),
1983
- /* @__PURE__ */ o(l, { sx: { flexGrow: 1, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ i(
1984
- lo,
1985
- {
1986
- focused: R.toString(),
1987
- sx: { display: { xs: "none", md: "flex" } },
1988
- children: [
1989
- /* @__PURE__ */ o(so, { focused: R.toString(), children: /* @__PURE__ */ o(ye, {}) }),
1990
- /* @__PURE__ */ o(
1991
- co,
1992
- {
1993
- placeholder: "Search",
1994
- inputProps: { "aria-label": "search" },
1995
- value: H,
1996
- onChange: re,
1997
- onKeyPress: we,
1998
- onFocus: () => p(!0),
1999
- onBlur: () => p(!1),
2000
- focused: R.toString()
2001
- }
2002
- ),
2003
- /* @__PURE__ */ o(
2004
- po,
2005
- {
2006
- show: (H.length > 0).toString(),
2007
- onClick: ae,
2008
- size: "small",
2009
- "aria-label": "Clear search",
2010
- children: /* @__PURE__ */ o(Re, { fontSize: "small" })
2011
- }
2012
- )
2013
- ]
2014
- }
2015
- ) }),
2016
- /* @__PURE__ */ o(
2017
- S,
2018
- {
2019
- onClick: ue,
2020
- "aria-label": "Open search",
2021
- sx: {
2022
- display: { xs: "flex", md: "none" },
2023
- color: n.effects.onDark.secondary,
2024
- "&:hover": {
2025
- backgroundColor: n.effects.onDark.subtle,
2026
- color: h.neutral.white
2027
- }
2028
- },
2029
- children: /* @__PURE__ */ o(ye, {})
2030
- }
2031
- ),
2032
- /* @__PURE__ */ i(l, { sx: { display: "flex", alignItems: "center", gap: { xs: 0.5, sm: 1.5 } }, children: [
2033
- /* @__PURE__ */ o(
2034
- rt,
2035
- {
2036
- onClick: se,
2037
- endIcon: /* @__PURE__ */ o(Me, {}),
2038
- "aria-label": `Current client: ${V}. Click to switch clients`,
2039
- "aria-haspopup": "listbox",
2040
- "aria-expanded": !!z,
2041
- sx: {
2042
- minWidth: { xs: 100, sm: 180 },
2043
- maxWidth: { xs: 120, sm: "none" },
2044
- "& .MuiButton-endIcon": {
2045
- ml: { xs: 0, sm: 1 }
2046
- }
2047
- },
2048
- children: /* @__PURE__ */ o(b, { noWrap: !0, sx: { maxWidth: { xs: 80, sm: "none" } }, children: V })
2049
- }
2050
- ),
2051
- /* @__PURE__ */ i(
2052
- me,
2053
- {
2054
- id: "client-menu",
2055
- anchorEl: z,
2056
- open: !!z,
2057
- onClose: Z,
2058
- anchorOrigin: {
2059
- vertical: "bottom",
2060
- horizontal: "right"
2061
- },
2062
- transformOrigin: {
2063
- vertical: "top",
2064
- horizontal: "right"
2065
- },
2066
- MenuListProps: {
2067
- "aria-label": "Client selection",
2068
- role: "listbox"
2069
- },
2070
- PaperProps: {
2071
- sx: {
2072
- mt: 1,
2073
- minWidth: 220,
2074
- borderRadius: n.borders.radiusPx.lg,
2075
- // 12px
2076
- boxShadow: n.effects.shadow.floating
2077
- }
2078
- },
2079
- children: [
2080
- /* @__PURE__ */ o(
2081
- b,
2082
- {
2083
- variant: "subtitle2",
2084
- sx: { px: 2, py: 1.5, fontWeight: 600, color: "text.primary" },
2085
- id: "client-menu-header",
2086
- children: "Switch Clients"
2087
- }
2088
- ),
2089
- Array.isArray(m) && m.map((u) => /* @__PURE__ */ o(
2090
- T,
2091
- {
2092
- onClick: () => X(u),
2093
- selected: u.name === V,
2094
- "aria-selected": u.name === V,
2095
- role: "option",
2096
- sx: { py: 1 },
2097
- children: u.name
2098
- },
2099
- u.id
2100
- ))
2101
- ]
2102
- }
2103
- ),
2104
- /* @__PURE__ */ o(
2105
- S,
2106
- {
2107
- onClick: ie,
2108
- "aria-label": "Applications menu",
2109
- "aria-haspopup": "menu",
2110
- "aria-expanded": !!s,
2111
- sx: {
2112
- color: n.effects.onDark.secondary,
2113
- // 70% white
2114
- "&:hover": {
2115
- backgroundColor: n.effects.onDark.subtle,
2116
- // 12% white
2117
- color: h.neutral.white
2118
- }
2119
- },
2120
- children: /* @__PURE__ */ o(to, {})
2121
- }
2122
- ),
2123
- /* @__PURE__ */ i(
2124
- me,
2125
- {
2126
- anchorEl: s,
2127
- open: !!s,
2128
- onClose: w,
2129
- anchorOrigin: {
2130
- vertical: "bottom",
2131
- horizontal: "right"
2132
- },
2133
- transformOrigin: {
2134
- vertical: "top",
2135
- horizontal: "right"
2136
- },
2137
- PaperProps: {
2138
- sx: {
2139
- mt: 1,
2140
- minWidth: 240,
2141
- borderRadius: n.borders.radiusPx.lg,
2142
- // 12px
2143
- boxShadow: n.effects.shadow.floating
2144
- }
2145
- },
2146
- children: [
2147
- /* @__PURE__ */ i(
2148
- T,
2149
- {
2150
- sx: { py: 1.5 },
2151
- onClick: () => ce("trinity-edge"),
2152
- children: [
2153
- /* @__PURE__ */ i(l, { sx: { flex: 1 }, children: [
2154
- /* @__PURE__ */ o(b, { variant: "subtitle2", fontWeight: 600, children: "TrinityEDGE" }),
2155
- /* @__PURE__ */ o(b, { variant: "caption", color: "text.secondary", children: "Apps Access" })
2156
- ] }),
2157
- /* @__PURE__ */ o(Fe, { fontSize: "small", sx: { color: "text.secondary", ml: 2 } })
2158
- ]
2159
- }
2160
- ),
2161
- /* @__PURE__ */ o(he, {}),
2162
- Array.isArray(C) && C.map((u) => /* @__PURE__ */ i(
2163
- T,
2164
- {
2165
- onClick: () => ce(u.id),
2166
- sx: { py: 1, justifyContent: "space-between" },
2167
- children: [
2168
- /* @__PURE__ */ o(b, { variant: "body2", children: u.name }),
2169
- /* @__PURE__ */ o(Fe, { fontSize: "small", sx: { color: "text.secondary", ml: 2 } })
2170
- ]
2171
- },
2172
- u.id
2173
- ))
2174
- ]
2175
- }
2176
- ),
2177
- /* @__PURE__ */ i(
2178
- S,
2179
- {
2180
- onClick: ee,
2181
- "aria-label": `User menu for ${v}`,
2182
- "aria-haspopup": "menu",
2183
- "aria-expanded": !!W,
2184
- sx: {
2185
- display: "flex",
2186
- alignItems: "center",
2187
- borderRadius: n.borders.radiusPx.lg,
2188
- // 12px
2189
- padding: `${n.inline.tight}px ${n.inline.compact}px`,
2190
- // 4px 8px
2191
- "&:hover": {
2192
- backgroundColor: n.effects.onDark.subtle
2193
- // 12% white
2194
- }
2195
- },
2196
- children: [
2197
- /* @__PURE__ */ o(
2198
- Pe,
2199
- {
2200
- sx: {
2201
- width: le.avatar.size.sm,
2202
- height: le.avatar.size.sm,
2203
- fontSize: n.typography.label.small.fontSize,
2204
- // 12px
2205
- fontWeight: n.typography.heading.h6.fontWeight,
2206
- // 600
2207
- backgroundColor: h.primary.light,
2208
- color: "white"
2209
- },
2210
- children: y
2211
- }
2212
- ),
2213
- /* @__PURE__ */ o(
2214
- Me,
2215
- {
2216
- sx: {
2217
- color: n.effects.onDark.secondary,
2218
- // 70% white
2219
- fontSize: n.iconSize.navigation,
2220
- // 20px
2221
- ml: 0.5
2222
- }
2223
- }
2224
- )
2225
- ]
2226
- }
2227
- ),
2228
- /* @__PURE__ */ i(
2229
- me,
2230
- {
2231
- anchorEl: W,
2232
- open: !!W,
2233
- onClose: ne,
2234
- anchorOrigin: {
2235
- vertical: "bottom",
2236
- horizontal: "right"
2237
- },
2238
- transformOrigin: {
2239
- vertical: "top",
2240
- horizontal: "right"
2241
- },
2242
- PaperProps: {
2243
- sx: {
2244
- mt: 1,
2245
- minWidth: 240,
2246
- borderRadius: n.borders.radiusPx.lg,
2247
- // 12px
2248
- boxShadow: n.effects.shadow.floating
2249
- }
2250
- },
2251
- children: [
2252
- /* @__PURE__ */ i(l, { sx: { px: 2, py: 1.5, display: "flex", alignItems: "center", gap: 1.5 }, children: [
2253
- /* @__PURE__ */ o(
2254
- Pe,
2255
- {
2256
- sx: {
2257
- width: le.avatar.size.md,
2258
- height: le.avatar.size.md,
2259
- fontSize: n.typography.body.small.fontSize,
2260
- // 14px
2261
- fontWeight: n.typography.heading.h6.fontWeight,
2262
- // 600
2263
- backgroundColor: h.primary.light,
2264
- color: "white"
2265
- },
2266
- children: y
2267
- }
2268
- ),
2269
- /* @__PURE__ */ i(l, { children: [
2270
- /* @__PURE__ */ o(b, { variant: "subtitle2", fontWeight: 600, children: v }),
2271
- /* @__PURE__ */ o(b, { variant: "caption", color: "text.secondary", children: x })
2272
- ] })
2273
- ] }),
2274
- /* @__PURE__ */ o(he, {}),
2275
- /* @__PURE__ */ i(T, { onClick: () => oe("help"), sx: { py: 1.5 }, children: [
2276
- /* @__PURE__ */ o(Y, { children: /* @__PURE__ */ o(Ne, { fontSize: "small" }) }),
2277
- /* @__PURE__ */ o(q, { primary: "Help" }),
2278
- /* @__PURE__ */ o(Fe, { fontSize: "small", sx: { color: "text.secondary" } })
2279
- ] }),
2280
- /* @__PURE__ */ i(T, { onClick: () => oe("notifications"), sx: { py: 1.5 }, children: [
2281
- /* @__PURE__ */ o(Y, { children: /* @__PURE__ */ o(je, { fontSize: "small" }) }),
2282
- /* @__PURE__ */ o(q, { primary: "Notification" })
2283
- ] }),
2284
- /* @__PURE__ */ i(T, { onClick: () => oe("logout"), sx: { py: 1.5 }, children: [
2285
- /* @__PURE__ */ o(Y, { children: /* @__PURE__ */ o(no, { fontSize: "small" }) }),
2286
- /* @__PURE__ */ o(q, { primary: "Log out" })
2287
- ] })
2288
- ]
2289
- }
2290
- )
2291
- ] })
2292
- ]
2293
- }
2294
- ),
2295
- /* @__PURE__ */ o(
2296
- qe,
2297
- {
2298
- anchor: "top",
2299
- open: k,
2300
- onClose: be,
2301
- sx: {
2302
- display: { xs: "block", md: "none" },
2303
- "& .MuiDrawer-paper": {
2304
- backgroundColor: h.primary.main,
2305
- pt: 1,
2306
- pb: 2
2307
- }
2308
- },
2309
- children: /* @__PURE__ */ i(l, { sx: { px: 2 }, children: [
2310
- /* @__PURE__ */ i(l, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 2 }, children: [
2311
- /* @__PURE__ */ o(
2312
- S,
2313
- {
2314
- onClick: be,
2315
- "aria-label": "Close search",
2316
- sx: { color: "white" },
2317
- children: /* @__PURE__ */ o(Je, {})
2318
- }
2319
- ),
2320
- /* @__PURE__ */ o(b, { variant: "subtitle1", sx: { color: "white", fontWeight: 500 }, children: "Search" })
2321
- ] }),
2322
- /* @__PURE__ */ i(lo, { focused: "true", sx: { maxWidth: "none", mx: 0 }, children: [
2323
- /* @__PURE__ */ o(so, { focused: "true", children: /* @__PURE__ */ o(ye, {}) }),
2324
- /* @__PURE__ */ o(
2325
- co,
2326
- {
2327
- placeholder: "Search...",
2328
- inputProps: { "aria-label": "search" },
2329
- value: H,
2330
- onChange: re,
2331
- onKeyPress: (u) => {
2332
- u.key === "Enter" && We();
2333
- },
2334
- autoFocus: !0,
2335
- focused: "true"
2336
- }
2337
- ),
2338
- /* @__PURE__ */ o(
2339
- po,
2340
- {
2341
- show: (H.length > 0).toString(),
2342
- onClick: ae,
2343
- size: "small",
2344
- "aria-label": "Clear search",
2345
- children: /* @__PURE__ */ o(Re, { fontSize: "small" })
2346
- }
2347
- )
2348
- ] })
2349
- ] })
2350
- }
2351
- )
2352
- ]
2353
- }
2354
- );
2355
- }
2356
- const Le = 200, st = 56, go = B("div")(({ theme: t, focused: r }) => ({
2357
- position: "relative",
2358
- borderRadius: `${n.borders.radius.menu}px`,
2359
- // 12px
2360
- backgroundColor: r === "true" ? t.palette.common.white : n.effects.onDark.subtle,
2361
- // 12% white
2362
- "&:hover": {
2363
- backgroundColor: r === "true" ? t.palette.common.white : "rgba(255, 255, 255, 0.15)"
2364
- // @intentional-color: hover state
2365
- },
2366
- marginRight: t.spacing(2),
2367
- marginLeft: t.spacing(2),
2368
- width: "100%",
2369
- maxWidth: 400,
2370
- transition: t.transitions.create(["background-color"]),
2371
- [t.breakpoints.up("sm")]: {
2372
- marginLeft: t.spacing(3),
2373
- width: "auto",
2374
- minWidth: 300
2375
- }
2376
- })), ho = B("div")(({ theme: t, focused: r }) => ({
2377
- padding: t.spacing(0, 2),
2378
- height: "100%",
2379
- position: "absolute",
2380
- pointerEvents: "none",
2381
- display: "flex",
2382
- alignItems: "center",
2383
- justifyContent: "center",
2384
- color: r === "true" ? h.primary.main : Q(t.palette.common.white, 0.5)
2385
- })), mo = B(eo)(({ theme: t, focused: r }) => ({
2386
- color: r === "true" ? h.primary.main : "inherit",
2387
- width: "100%",
2388
- "& .MuiInputBase-input": {
2389
- padding: t.spacing(1, 4, 1, 0),
2390
- paddingLeft: `calc(1em + ${t.spacing(4)})`,
2391
- transition: t.transitions.create("width"),
2392
- width: "100%",
2393
- fontSize: n.typography.body.small.fontSize,
2394
- // 14px
2395
- "&::placeholder": {
2396
- color: r === "true" ? h.neutral.gray500 : Q(t.palette.common.white, 0.5),
2397
- opacity: 1
2398
- }
2399
- }
2400
- })), uo = B(S)(({ show: t }) => ({
2401
- position: "absolute",
2402
- right: n.inline.tight,
2403
- // 4px
2404
- top: "50%",
2405
- transform: "translateY(-50%)",
2406
- padding: n.inline.tight,
2407
- // 4px
2408
- opacity: t === "true" ? 1 : 0,
2409
- pointerEvents: t === "true" ? "auto" : "none",
2410
- color: h.neutral.gray500,
2411
- "&:hover": {
2412
- backgroundColor: "action.hover"
2413
- // Theme-aware hover
2414
- }
2415
- })), ct = B(oo)(({ theme: t }) => ({
2416
- backgroundColor: n.effects.onDark.subtle,
2417
- // 12% white
2418
- color: t.palette.common.white,
2419
- borderRadius: `${n.borders.radius.menu}px`,
2420
- // 12px
2421
- padding: `${n.density.compact.cellPadding}px ${n.density.standard.cellPadding}px`,
2422
- // 6px 12px
2423
- textTransform: "none",
2424
- fontSize: n.typography.body.small.fontSize,
2425
- // 14px
2426
- fontWeight: n.typography.body.small.fontWeight,
2427
- // 400
2428
- minWidth: 180,
2429
- justifyContent: "space-between",
2430
- "&:hover": {
2431
- backgroundColor: "rgba(255, 255, 255, 0.15)"
2432
- // @intentional-color: hover state
2433
- }
2434
- })), dt = () => /* @__PURE__ */ o(l, { sx: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ o(io, { height: 28 }) }), pt = [
2435
- { id: "home", label: "Home", icon: /* @__PURE__ */ o(Io, {}) },
2436
- { id: "menu2", label: "Menu 2", icon: /* @__PURE__ */ o(Do, {}) },
2437
- { id: "menu3", label: "Menu 3", icon: /* @__PURE__ */ o(Ho, {}) },
2438
- { id: "menu4", label: "Menu 4", icon: /* @__PURE__ */ o(Po, {}) },
2439
- { id: "menu5", label: "Menu 5", icon: /* @__PURE__ */ o(Ro, {}) },
2440
- { id: "insight-engine", label: "Insight Engine", icon: /* @__PURE__ */ o(So, {}), isSpecial: !0 }
2441
- ];
2442
- function gt({
2443
- appName: t = "App Name",
2444
- clientName: r = "Long Client Name 1",
2445
- clients: m = [
2446
- { id: "1", name: "Long Client Name 1" },
2447
- { id: "2", name: "Long Client Name 2" },
2448
- { id: "3", name: "Long Client Name 3" },
2449
- { id: "4", name: "Client ABC" },
2450
- { id: "5", name: "Client XYZ" }
2451
- ],
2452
- onClientChange: c,
2453
- userInitials: y = "RD",
2454
- userName: v = "Rahul M Desai",
2455
- userEmail: x = "rdesai@trinitylifesciences.com",
2456
- onSearch: g,
2457
- onAppsClick: L,
2458
- onUserMenuClick: N,
2459
- apps: C = [
2460
- { id: "launch-accelerator", name: "Launch Accelerator" },
2461
- { id: "cloudcast", name: "CloudCast" },
2462
- { id: "terra", name: "Terra" },
2463
- { id: "market-intelligence", name: "Market Intelligence Dashboard" }
2464
- ],
2465
- navItems: F = pt,
2466
- selectedNavItem: I = "home",
2467
- onNavItemClick: $,
2468
- children: O,
2469
- sidebarExpanded: J,
2470
- onSidebarExpandedChange: z,
2471
- logo: D,
2472
- logoInvert: W = !1
2473
- }) {
2474
- const E = Ae(), s = He(E.breakpoints.down("md"));
2475
- He(E.breakpoints.down("sm"));
2476
- const [A, V] = M.useState(null), [U, H] = M.useState(null), [f, R] = M.useState(null), [p, k] = M.useState(r), [K, se] = M.useState(""), [Z, X] = M.useState(!1), [ee, ne] = M.useState(!0), [oe, ie] = M.useState(I), w = J ?? ee, ce = (a) => {
2477
- ne(a), z?.(a);
2478
- }, [re, we] = M.useState(!1), [ae, ue] = M.useState(!1), be = s || w ? Le : st, We = () => {
2479
- s ? we(!re) : ce(!w);
2480
- }, u = () => {
2481
- we(!1);
2482
- }, Ue = () => {
2483
- ue(!0);
2484
- }, ve = () => {
2485
- ue(!1), se(""), X(!1);
2486
- }, Ke = () => {
2487
- K.trim() && (g?.(K), ve());
2488
- }, Qe = (a) => {
2489
- ie(a), $?.(a), s && u();
2490
- }, xe = (a) => {
2491
- V(a.currentTarget);
2492
- }, ke = () => {
2493
- V(null);
2494
- }, de = (a) => {
2495
- k(a.name), c?.(a.id), ke();
2496
- }, Ge = (a) => {
2497
- H(a.currentTarget);
2498
- }, Be = () => {
2499
- H(null);
2500
- }, Ee = (a) => {
2501
- N?.(a), Be();
2502
- }, _e = (a) => {
2503
- R(a.currentTarget);
2504
- }, Ie = () => {
2505
- R(null);
2506
- }, ze = (a) => {
2507
- L?.(a), Ie();
2508
- }, d = (a) => {
2509
- se(a.target.value);
2510
- }, fe = (a) => {
2511
- a.key === "Enter" && g?.(K);
2512
- }, te = () => {
2513
- se("");
2514
- };
2515
- return /* @__PURE__ */ i(l, { sx: { display: "flex", minHeight: "100vh" }, children: [
2516
- /* @__PURE__ */ i(
2517
- bo,
2518
- {
2519
- position: "fixed",
2520
- elevation: 0,
2521
- component: "header",
2522
- sx: {
2523
- backgroundColor: h.primary.main,
2524
- borderBottom: `1px solid ${n.effects.onDark.subtle}`,
2525
- // 12% white
2526
- borderRadius: 0,
2527
- zIndex: (a) => a.zIndex.drawer + 1
2528
- },
2529
- children: [
2530
- /* @__PURE__ */ i(xo, { sx: { minHeight: 56, px: { xs: 1, sm: 2 } }, children: [
2531
- /* @__PURE__ */ o(
2532
- S,
2533
- {
2534
- onClick: We,
2535
- "aria-label": w ? "Collapse sidebar navigation" : "Expand sidebar navigation",
2536
- "aria-expanded": w,
2537
- "aria-controls": "sidebar-navigation",
2538
- sx: {
2539
- color: "white",
2540
- mr: 1,
2541
- "&:hover": {
2542
- backgroundColor: n.effects.onDark.subtle
2543
- // 12% white
2544
- }
2545
- },
2546
- children: /* @__PURE__ */ o(Eo, {})
2547
- }
2548
- ),
2549
- /* @__PURE__ */ i(l, { sx: { display: "flex", alignItems: "center", gap: { xs: 1, sm: 2 }, minWidth: 0 }, children: [
2550
- D ? /* @__PURE__ */ o(l, { sx: {
2551
- display: "flex",
2552
- alignItems: "center",
2553
- ...W && { filter: "brightness(0) invert(1)" }
2554
- }, children: D }) : /* @__PURE__ */ o(dt, {}),
2555
- /* @__PURE__ */ o(
2556
- he,
2557
- {
2558
- orientation: "vertical",
2559
- flexItem: !0,
2560
- sx: {
2561
- backgroundColor: "rgba(255, 255, 255, 0.3)",
2562
- // @intentional-color: decorative divider
2563
- height: n.iconSize.prominent,
2564
- // 24px
2565
- alignSelf: "center",
2566
- display: { xs: "none", sm: "block" }
2567
- }
2568
- }
2569
- ),
2570
- /* @__PURE__ */ o(
2571
- b,
2572
- {
2573
- variant: "subtitle1",
2574
- noWrap: !0,
2575
- sx: {
2576
- color: "white",
2577
- fontWeight: n.typography.label.medium.fontWeight,
2578
- // 500
2579
- fontSize: n.typography.body.small.fontSize,
2580
- // 14px
2581
- display: { xs: "none", sm: "block" }
2582
- },
2583
- children: t
2584
- }
2585
- )
2586
- ] }),
2587
- /* @__PURE__ */ o(l, { sx: { flexGrow: 1, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ i(
2588
- go,
2589
- {
2590
- focused: Z.toString(),
2591
- sx: { display: { xs: "none", md: "flex" } },
2592
- children: [
2593
- /* @__PURE__ */ o(ho, { focused: Z.toString(), children: /* @__PURE__ */ o(ye, {}) }),
2594
- /* @__PURE__ */ o(
2595
- mo,
2596
- {
2597
- placeholder: "Search",
2598
- inputProps: { "aria-label": "search" },
2599
- value: K,
2600
- onChange: d,
2601
- onKeyPress: fe,
2602
- onFocus: () => X(!0),
2603
- onBlur: () => X(!1),
2604
- focused: Z.toString()
2605
- }
2606
- ),
2607
- /* @__PURE__ */ o(
2608
- uo,
2609
- {
2610
- show: (K.length > 0).toString(),
2611
- onClick: te,
2612
- size: "small",
2613
- "aria-label": "Clear search",
2614
- children: /* @__PURE__ */ o(Re, { fontSize: "small" })
2615
- }
2616
- )
2617
- ]
2618
- }
2619
- ) }),
2620
- /* @__PURE__ */ o(
2621
- S,
2622
- {
2623
- onClick: Ue,
2624
- "aria-label": "Open search",
2625
- sx: {
2626
- display: { xs: "flex", md: "none" },
2627
- color: n.effects.onDark.secondary,
2628
- "&:hover": {
2629
- backgroundColor: n.effects.onDark.subtle,
2630
- color: h.neutral.white
2631
- }
2632
- },
2633
- children: /* @__PURE__ */ o(ye, {})
2634
- }
2635
- ),
2636
- /* @__PURE__ */ i(l, { sx: { display: "flex", alignItems: "center", gap: { xs: 0.5, sm: 1.5 } }, children: [
2637
- /* @__PURE__ */ o(
2638
- ct,
2639
- {
2640
- onClick: xe,
2641
- endIcon: /* @__PURE__ */ o(Me, {}),
2642
- "aria-label": `Current client: ${p}. Click to switch clients`,
2643
- "aria-haspopup": "listbox",
2644
- "aria-expanded": !!A,
2645
- sx: {
2646
- minWidth: { xs: 100, sm: 180 },
2647
- maxWidth: { xs: 120, sm: "none" },
2648
- display: { xs: "none", sm: "flex" },
2649
- "& .MuiButton-endIcon": {
2650
- ml: { xs: 0, sm: 1 }
2651
- }
2652
- },
2653
- children: /* @__PURE__ */ o(b, { noWrap: !0, sx: { maxWidth: { xs: 80, sm: "none" } }, children: p })
2654
- }
2655
- ),
2656
- /* @__PURE__ */ i(
2657
- me,
2658
- {
2659
- anchorEl: A,
2660
- open: !!A,
2661
- onClose: ke,
2662
- anchorOrigin: { vertical: "bottom", horizontal: "right" },
2663
- transformOrigin: { vertical: "top", horizontal: "right" },
2664
- PaperProps: {
2665
- sx: { mt: 1, minWidth: 220, borderRadius: n.borders.radiusPx.lg, boxShadow: n.effects.shadow.floating }
2666
- },
2667
- children: [
2668
- /* @__PURE__ */ o(b, { variant: "subtitle2", sx: { px: 2, py: 1.5, fontWeight: n.typography.label.medium.fontWeight }, children: "Switch Clients" }),
2669
- Array.isArray(m) && m.map((a) => /* @__PURE__ */ o(
2670
- T,
2671
- {
2672
- onClick: () => de(a),
2673
- selected: a.name === p,
2674
- sx: { py: 1 },
2675
- children: a.name
2676
- },
2677
- a.id
2678
- ))
2679
- ]
2680
- }
2681
- ),
2682
- /* @__PURE__ */ o(
2683
- S,
2684
- {
2685
- onClick: _e,
2686
- "aria-label": "Applications menu",
2687
- "aria-haspopup": "menu",
2688
- "aria-expanded": !!f,
2689
- sx: {
2690
- color: n.effects.onDark.secondary,
2691
- // 70% white
2692
- "&:hover": { backgroundColor: n.effects.onDark.subtle, color: h.neutral.white }
2693
- },
2694
- children: /* @__PURE__ */ o(to, {})
2695
- }
2696
- ),
2697
- /* @__PURE__ */ i(
2698
- me,
2699
- {
2700
- anchorEl: f,
2701
- open: !!f,
2702
- onClose: Ie,
2703
- anchorOrigin: { vertical: "bottom", horizontal: "right" },
2704
- transformOrigin: { vertical: "top", horizontal: "right" },
2705
- PaperProps: {
2706
- sx: { mt: 1, minWidth: 240, borderRadius: n.borders.radiusPx.lg, boxShadow: n.effects.shadow.floating }
2707
- },
2708
- children: [
2709
- /* @__PURE__ */ i(T, { sx: { py: 1.5 }, onClick: () => ze("trinity-edge"), children: [
2710
- /* @__PURE__ */ i(l, { sx: { flex: 1 }, children: [
2711
- /* @__PURE__ */ o(b, { variant: "subtitle2", fontWeight: n.typography.label.medium.fontWeight, children: "TrinityEDGE" }),
2712
- /* @__PURE__ */ o(b, { variant: "caption", color: "text.secondary", children: "Apps Access" })
2713
- ] }),
2714
- /* @__PURE__ */ o(Fe, { fontSize: "small", sx: { color: "text.secondary", ml: 2 } })
2715
- ] }),
2716
- /* @__PURE__ */ o(he, {}),
2717
- Array.isArray(C) && C.map((a) => /* @__PURE__ */ i(T, { onClick: () => ze(a.id), sx: { py: 1, justifyContent: "space-between" }, children: [
2718
- /* @__PURE__ */ o(b, { variant: "body2", children: a.name }),
2719
- /* @__PURE__ */ o(Fe, { fontSize: "small", sx: { color: "text.secondary", ml: 2 } })
2720
- ] }, a.id))
2721
- ]
2722
- }
2723
- ),
2724
- /* @__PURE__ */ i(
2725
- S,
2726
- {
2727
- onClick: Ge,
2728
- "aria-label": `User menu for ${v}`,
2729
- "aria-haspopup": "menu",
2730
- "aria-expanded": !!U,
2731
- sx: {
2732
- display: "flex",
2733
- alignItems: "center",
2734
- borderRadius: n.borders.radiusPx.lg,
2735
- // 12px
2736
- padding: `${n.inline.tight}px ${n.inline.compact}px`,
2737
- // 4px 8px
2738
- "&:hover": { backgroundColor: n.effects.onDark.subtle }
2739
- },
2740
- children: [
2741
- /* @__PURE__ */ o(
2742
- Pe,
2743
- {
2744
- sx: {
2745
- width: le.avatar.size.sm,
2746
- height: le.avatar.size.sm,
2747
- fontSize: n.typography.label.small.fontSize,
2748
- // 12px
2749
- fontWeight: n.typography.heading.h6.fontWeight,
2750
- // 600
2751
- backgroundColor: h.primary.light,
2752
- color: "white"
2753
- },
2754
- children: y
2755
- }
2756
- ),
2757
- /* @__PURE__ */ o(Me, { sx: { color: n.effects.onDark.secondary, fontSize: n.iconSize.navigation, ml: 0.5 } })
2758
- ]
2759
- }
2760
- ),
2761
- /* @__PURE__ */ i(
2762
- me,
2763
- {
2764
- anchorEl: U,
2765
- open: !!U,
2766
- onClose: Be,
2767
- anchorOrigin: { vertical: "bottom", horizontal: "right" },
2768
- transformOrigin: { vertical: "top", horizontal: "right" },
2769
- PaperProps: {
2770
- sx: { mt: 1, minWidth: 240, borderRadius: n.borders.radiusPx.lg, boxShadow: n.effects.shadow.floating }
2771
- },
2772
- children: [
2773
- /* @__PURE__ */ i(l, { sx: { px: 2, py: 1.5, display: "flex", alignItems: "center", gap: 1.5 }, children: [
2774
- /* @__PURE__ */ o(
2775
- Pe,
2776
- {
2777
- sx: {
2778
- width: le.avatar.size.md,
2779
- height: le.avatar.size.md,
2780
- fontSize: n.typography.body.small.fontSize,
2781
- // 14px
2782
- fontWeight: n.typography.heading.h6.fontWeight,
2783
- // 600
2784
- backgroundColor: h.primary.light,
2785
- color: "white"
2786
- },
2787
- children: y
2788
- }
2789
- ),
2790
- /* @__PURE__ */ i(l, { children: [
2791
- /* @__PURE__ */ o(b, { variant: "subtitle2", fontWeight: n.typography.heading.h6.fontWeight, children: v }),
2792
- /* @__PURE__ */ o(b, { variant: "caption", color: "text.secondary", children: x })
2793
- ] })
2794
- ] }),
2795
- /* @__PURE__ */ o(he, {}),
2796
- /* @__PURE__ */ i(T, { onClick: () => Ee("help"), sx: { py: 1.5 }, children: [
2797
- /* @__PURE__ */ o(Y, { children: /* @__PURE__ */ o(Ne, { fontSize: "small" }) }),
2798
- /* @__PURE__ */ o(q, { primary: "Help" }),
2799
- /* @__PURE__ */ o(Fe, { fontSize: "small", sx: { color: "text.secondary" } })
2800
- ] }),
2801
- /* @__PURE__ */ i(T, { onClick: () => Ee("notifications"), sx: { py: 1.5 }, children: [
2802
- /* @__PURE__ */ o(Y, { children: /* @__PURE__ */ o(je, { fontSize: "small" }) }),
2803
- /* @__PURE__ */ o(q, { primary: "Notification" })
2804
- ] }),
2805
- /* @__PURE__ */ i(T, { onClick: () => Ee("logout"), sx: { py: 1.5 }, children: [
2806
- /* @__PURE__ */ o(Y, { children: /* @__PURE__ */ o(no, { fontSize: "small" }) }),
2807
- /* @__PURE__ */ o(q, { primary: "Log out" })
2808
- ] })
2809
- ]
2810
- }
2811
- )
2812
- ] })
2813
- ] }),
2814
- /* @__PURE__ */ o(
2815
- qe,
2816
- {
2817
- anchor: "top",
2818
- open: ae,
2819
- onClose: ve,
2820
- sx: {
2821
- display: { xs: "block", md: "none" },
2822
- "& .MuiDrawer-paper": {
2823
- backgroundColor: h.primary.main,
2824
- pt: 1,
2825
- pb: 2
2826
- }
2827
- },
2828
- children: /* @__PURE__ */ i(l, { sx: { px: 2 }, children: [
2829
- /* @__PURE__ */ i(l, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 2 }, children: [
2830
- /* @__PURE__ */ o(
2831
- S,
2832
- {
2833
- onClick: ve,
2834
- "aria-label": "Close search",
2835
- sx: { color: "white" },
2836
- children: /* @__PURE__ */ o(Je, {})
2837
- }
2838
- ),
2839
- /* @__PURE__ */ o(b, { variant: "subtitle1", sx: { color: "white", fontWeight: 500 }, children: "Search" })
2840
- ] }),
2841
- /* @__PURE__ */ i(go, { focused: "true", sx: { maxWidth: "none", mx: 0 }, children: [
2842
- /* @__PURE__ */ o(ho, { focused: "true", children: /* @__PURE__ */ o(ye, {}) }),
2843
- /* @__PURE__ */ o(
2844
- mo,
2845
- {
2846
- placeholder: "Search...",
2847
- inputProps: { "aria-label": "search" },
2848
- value: K,
2849
- onChange: d,
2850
- onKeyPress: (a) => {
2851
- a.key === "Enter" && Ke();
2852
- },
2853
- focused: "true"
2854
- }
2855
- ),
2856
- /* @__PURE__ */ o(
2857
- uo,
2858
- {
2859
- show: (K.length > 0).toString(),
2860
- onClick: te,
2861
- size: "small",
2862
- "aria-label": "Clear search",
2863
- children: /* @__PURE__ */ o(Re, { fontSize: "small" })
2864
- }
2865
- )
2866
- ] })
2867
- ] })
2868
- }
2869
- )
2870
- ]
2871
- }
2872
- ),
2873
- /* @__PURE__ */ i(
2874
- qe,
2875
- {
2876
- variant: s ? "temporary" : "permanent",
2877
- open: s ? re : !0,
2878
- onClose: u,
2879
- id: "sidebar-navigation",
2880
- ModalProps: {
2881
- keepMounted: !0
2882
- // Better mobile performance
2883
- },
2884
- sx: {
2885
- width: s ? Le : be,
2886
- flexShrink: 0,
2887
- display: { xs: "block" },
2888
- "& .MuiDrawer-paper": {
2889
- width: s ? Le : be,
2890
- boxSizing: "border-box",
2891
- borderRight: "1px solid",
2892
- borderColor: "divider",
2893
- backgroundColor: "background.paper",
2894
- transition: (a) => a.transitions.create("width", {
2895
- easing: a.transitions.easing.sharp,
2896
- duration: a.transitions.duration.enteringScreen
2897
- }),
2898
- overflowX: "hidden",
2899
- mt: s ? 0 : "56px"
2900
- // No top margin on mobile (overlay)
2901
- }
2902
- },
2903
- children: [
2904
- s && /* @__PURE__ */ i(
2905
- l,
2906
- {
2907
- sx: {
2908
- display: "flex",
2909
- alignItems: "center",
2910
- justifyContent: "space-between",
2911
- p: 2,
2912
- borderBottom: "1px solid",
2913
- borderColor: "divider"
2914
- },
2915
- children: [
2916
- /* @__PURE__ */ o(b, { variant: "subtitle1", fontWeight: 600, children: "Navigation" }),
2917
- /* @__PURE__ */ o(S, { onClick: u, "aria-label": "Close navigation", children: /* @__PURE__ */ o(Je, {}) })
2918
- ]
2919
- }
2920
- ),
2921
- /* @__PURE__ */ o(
2922
- fo,
2923
- {
2924
- component: "nav",
2925
- "aria-label": "Main navigation",
2926
- sx: { pt: s ? 1 : 2 },
2927
- children: F.map((a) => {
2928
- const pe = oe === a.id, Ze = a.isSpecial, De = s || w;
2929
- return /* @__PURE__ */ o(yo, { disablePadding: !0, sx: { px: 1, mb: 0.5 }, children: /* @__PURE__ */ i(
2930
- Co,
2931
- {
2932
- onClick: () => Qe(a.id),
2933
- "aria-current": pe ? "page" : void 0,
2934
- "aria-label": De ? void 0 : a.label,
2935
- sx: {
2936
- borderRadius: n.borders.radiusPx.md,
2937
- // 8px
2938
- minHeight: le.avatar.size.md,
2939
- // 40px
2940
- justifyContent: De ? "initial" : "center",
2941
- px: De ? 1.5 : 1,
2942
- // Special gradient background for Insight Engine when selected
2943
- ...Ze && pe && {
2944
- background: `linear-gradient(135deg, ${h.secondary.main} 0%, ${h.primary.light} 100%)`,
2945
- color: "white",
2946
- "&:hover": {
2947
- background: `linear-gradient(135deg, ${h.secondary.main} 0%, ${h.primary.light} 100%)`
2948
- },
2949
- "& .MuiListItemIcon-root": {
2950
- color: "white"
2951
- }
2952
- },
2953
- // Normal selected state
2954
- ...!Ze && pe && {
2955
- backgroundColor: h.primary.main,
2956
- color: "white",
2957
- "&:hover": {
2958
- backgroundColor: h.primary.main
2959
- },
2960
- "& .MuiListItemIcon-root": {
2961
- color: "white"
2962
- }
2963
- },
2964
- // Hover state for non-selected items
2965
- ...!pe && {
2966
- "&:hover": {
2967
- backgroundColor: "action.hover"
2968
- // Theme-aware hover
2969
- }
2970
- },
2971
- // Special item non-selected state (icon has gradient)
2972
- ...Ze && !pe && {
2973
- "& .MuiListItemIcon-root": {
2974
- color: h.secondary.main
2975
- }
2976
- }
2977
- },
2978
- children: [
2979
- /* @__PURE__ */ o(
2980
- Y,
2981
- {
2982
- sx: {
2983
- minWidth: 0,
2984
- mr: De ? 1.5 : 0,
2985
- justifyContent: "center",
2986
- color: pe ? "inherit" : h.primary.light
2987
- },
2988
- children: a.icon
2989
- }
2990
- ),
2991
- De && /* @__PURE__ */ o(
2992
- q,
2993
- {
2994
- primary: a.label,
2995
- primaryTypographyProps: {
2996
- fontSize: n.typography.body.small.fontSize,
2997
- // 14px
2998
- fontWeight: pe ? n.typography.label.medium.fontWeight : n.typography.body.medium.fontWeight
2999
- }
3000
- }
3001
- )
3002
- ]
3003
- }
3004
- ) }, a.id);
3005
- })
3006
- }
3007
- )
3008
- ]
3009
- }
3010
- ),
3011
- /* @__PURE__ */ o(
3012
- l,
3013
- {
3014
- component: "main",
3015
- sx: {
3016
- flexGrow: 1,
3017
- mt: "56px",
3018
- // Height of AppBar
3019
- // No margin-left needed - the Drawer with flexShrink: 0 already reserves space
3020
- // Only add margin on mobile when drawer is temporary (overlay)
3021
- backgroundColor: "background.default",
3022
- height: "calc(100vh - 56px)",
3023
- overflow: "hidden",
3024
- display: "flex",
3025
- flexDirection: "column",
3026
- "& > *": {
3027
- flex: 1,
3028
- minHeight: 0
3029
- }
3030
- },
3031
- children: O
3032
- }
3033
- )
3034
- ] });
3035
- }
3036
- const ht = B("div")(({ theme: t, focused: r }) => ({
3037
- position: "relative",
3038
- borderRadius: 12,
3039
- backgroundColor: r === "true" ? t.palette.common.white : Q(t.palette.common.white, 0.1),
3040
- "&:hover": {
3041
- backgroundColor: r === "true" ? t.palette.common.white : Q(t.palette.common.white, 0.15)
3042
- },
3043
- marginRight: t.spacing(2),
3044
- marginLeft: t.spacing(2),
3045
- width: "100%",
3046
- maxWidth: 400,
3047
- transition: t.transitions.create(["background-color"]),
3048
- [t.breakpoints.up("sm")]: {
3049
- marginLeft: t.spacing(3),
3050
- width: "auto",
3051
- minWidth: 300
3052
- }
3053
- })), mt = B("div")(({ theme: t, focused: r }) => ({
3054
- padding: t.spacing(0, 2),
3055
- height: "100%",
3056
- position: "absolute",
3057
- pointerEvents: "none",
3058
- display: "flex",
3059
- alignItems: "center",
3060
- justifyContent: "center",
3061
- color: r === "true" ? h.primary.main : Q(t.palette.common.white, 0.5)
3062
- })), ut = B(eo)(({ theme: t, focused: r }) => ({
3063
- color: r === "true" ? h.primary.main : "inherit",
3064
- width: "100%",
3065
- "& .MuiInputBase-input": {
3066
- padding: t.spacing(1, 4, 1, 0),
3067
- paddingLeft: `calc(1em + ${t.spacing(4)})`,
3068
- transition: t.transitions.create("width"),
3069
- width: "100%",
3070
- fontSize: 14,
3071
- "&::placeholder": {
3072
- color: r === "true" ? h.neutral.gray500 : Q(t.palette.common.white, 0.5),
3073
- opacity: 1
3074
- }
3075
- }
3076
- })), bt = B(S)(({ show: t }) => ({
3077
- position: "absolute",
3078
- right: 4,
3079
- top: "50%",
3080
- transform: "translateY(-50%)",
3081
- padding: 4,
3082
- opacity: t === "true" ? 1 : 0,
3083
- pointerEvents: t === "true" ? "auto" : "none",
3084
- color: h.neutral.gray500,
3085
- "&:hover": {
3086
- backgroundColor: Q(h.neutral.gray500, 0.1)
3087
- }
3088
- })), xt = B(oo)(({ theme: t }) => ({
3089
- backgroundColor: Q(t.palette.common.white, 0.1),
3090
- color: t.palette.common.white,
3091
- borderRadius: 12,
3092
- padding: "6px 12px",
3093
- textTransform: "none",
3094
- fontSize: 14,
3095
- fontWeight: 400,
3096
- minWidth: 180,
3097
- justifyContent: "space-between",
3098
- "&:hover": {
3099
- backgroundColor: Q(t.palette.common.white, 0.15)
3100
- }
3101
- })), Ve = B(S)(({ theme: t }) => ({
3102
- color: Q(t.palette.common.white, 0.7),
3103
- padding: 8,
3104
- "&:hover": {
3105
- backgroundColor: Q(t.palette.common.white, 0.1),
3106
- color: t.palette.common.white
3107
- }
3108
- }));
3109
- B(l)({
3110
- display: "flex",
3111
- alignItems: "center"
3112
- });
3113
- const un = ({ height: t = 28 }) => /* @__PURE__ */ o(l, { sx: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ o(io, { height: t }) }), bn = ({
3114
- value: t,
3115
- isFocused: r,
3116
- placeholder: m = "Search",
3117
- onChange: c,
3118
- onKeyPress: y,
3119
- onClear: v,
3120
- onFocus: x,
3121
- onBlur: g
3122
- }) => /* @__PURE__ */ i(ht, { focused: r.toString(), children: [
3123
- /* @__PURE__ */ o(mt, { focused: r.toString(), children: /* @__PURE__ */ o(ye, {}) }),
3124
- /* @__PURE__ */ o(
3125
- ut,
3126
- {
3127
- placeholder: m,
3128
- inputProps: { "aria-label": "search" },
3129
- value: t,
3130
- onChange: c,
3131
- onKeyPress: y,
3132
- onFocus: x,
3133
- onBlur: g,
3134
- focused: r.toString()
3135
- }
3136
- ),
3137
- /* @__PURE__ */ o(
3138
- bt,
3139
- {
3140
- show: (t.length > 0).toString(),
3141
- onClick: v,
3142
- size: "small",
3143
- "aria-label": "Clear search",
3144
- children: /* @__PURE__ */ o(Re, { fontSize: "small" })
3145
- }
3146
- )
3147
- ] }), xn = ({
3148
- selectedClient: t,
3149
- clients: r,
3150
- anchorEl: m,
3151
- isOpen: c,
3152
- onButtonClick: y,
3153
- onClose: v,
3154
- onSelect: x
3155
- }) => /* @__PURE__ */ i(Te, { children: [
3156
- /* @__PURE__ */ o(
3157
- xt,
3158
- {
3159
- onClick: y,
3160
- endIcon: /* @__PURE__ */ o(Me, {}),
3161
- "aria-label": `Current client: ${t}. Click to switch clients`,
3162
- "aria-haspopup": "listbox",
3163
- "aria-expanded": c,
3164
- children: t
3165
- }
3166
- ),
3167
- /* @__PURE__ */ i(
3168
- me,
3169
- {
3170
- id: "client-menu",
3171
- anchorEl: m,
3172
- open: c,
3173
- onClose: v,
3174
- anchorOrigin: {
3175
- vertical: "bottom",
3176
- horizontal: "right"
3177
- },
3178
- transformOrigin: {
3179
- vertical: "top",
3180
- horizontal: "right"
3181
- },
3182
- MenuListProps: {
3183
- "aria-label": "Client selection",
3184
- role: "listbox"
3185
- },
3186
- PaperProps: {
3187
- sx: {
3188
- mt: 1,
3189
- minWidth: 220,
3190
- borderRadius: "12px",
3191
- boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)"
3192
- }
3193
- },
3194
- children: [
3195
- /* @__PURE__ */ o(
3196
- b,
3197
- {
3198
- variant: "subtitle2",
3199
- sx: { px: 2, py: 1.5, fontWeight: 600, color: "text.primary" },
3200
- children: "Switch Clients"
3201
- }
3202
- ),
3203
- r.map((g) => /* @__PURE__ */ o(
3204
- T,
3205
- {
3206
- onClick: () => x(g),
3207
- selected: g.name === t,
3208
- "aria-selected": g.name === t,
3209
- role: "option",
3210
- sx: { py: 1 },
3211
- children: g.name
3212
- },
3213
- g.id
3214
- ))
3215
- ]
3216
- }
3217
- )
3218
- ] }), fn = ({
3219
- apps: t,
3220
- anchorEl: r,
3221
- isOpen: m,
3222
- onButtonClick: c,
3223
- onClose: y,
3224
- onSelect: v
3225
- }) => /* @__PURE__ */ i(Te, { children: [
3226
- /* @__PURE__ */ o(
3227
- Ve,
3228
- {
3229
- onClick: c,
3230
- "aria-label": "Applications menu",
3231
- "aria-haspopup": "menu",
3232
- "aria-expanded": m,
3233
- children: /* @__PURE__ */ o(to, {})
3234
- }
3235
- ),
3236
- /* @__PURE__ */ i(
3237
- me,
3238
- {
3239
- id: "apps-menu",
3240
- anchorEl: r,
3241
- open: m,
3242
- onClose: y,
3243
- anchorOrigin: {
3244
- vertical: "bottom",
3245
- horizontal: "right"
3246
- },
3247
- transformOrigin: {
3248
- vertical: "top",
3249
- horizontal: "right"
3250
- },
3251
- PaperProps: {
3252
- sx: {
3253
- mt: 1,
3254
- minWidth: 280,
3255
- borderRadius: "12px",
3256
- boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)"
3257
- }
3258
- },
3259
- children: [
3260
- /* @__PURE__ */ o(
3261
- b,
3262
- {
3263
- variant: "subtitle2",
3264
- sx: { px: 2, py: 1.5, fontWeight: 600, color: "text.primary" },
3265
- children: "Trinity Applications"
3266
- }
3267
- ),
3268
- t.map((x) => /* @__PURE__ */ i(
3269
- T,
3270
- {
3271
- onClick: () => v(x.id),
3272
- sx: { py: 1.5 },
3273
- children: [
3274
- /* @__PURE__ */ o(q, { primary: x.name }),
3275
- x.url && /* @__PURE__ */ o(Y, { sx: { minWidth: "auto", ml: 1 }, children: /* @__PURE__ */ o(Fe, { fontSize: "small", sx: { color: "text.secondary" } }) })
3276
- ]
3277
- },
3278
- x.id
3279
- ))
3280
- ]
3281
- }
3282
- )
3283
- ] }), yn = ({
3284
- userInitials: t,
3285
- userName: r,
3286
- userEmail: m,
3287
- anchorEl: c,
3288
- isOpen: y,
3289
- onButtonClick: v,
3290
- onClose: x,
3291
- onAction: g
3292
- }) => /* @__PURE__ */ i(Te, { children: [
3293
- /* @__PURE__ */ o(
3294
- Ve,
3295
- {
3296
- onClick: v,
3297
- "aria-label": "User menu",
3298
- "aria-haspopup": "menu",
3299
- "aria-expanded": y,
3300
- children: /* @__PURE__ */ o(
3301
- Pe,
3302
- {
3303
- sx: {
3304
- width: 32,
3305
- height: 32,
3306
- fontSize: 13,
3307
- fontWeight: 600,
3308
- bgcolor: h.secondary.main,
3309
- color: "white"
3310
- },
3311
- children: t
3312
- }
3313
- )
3314
- }
3315
- ),
3316
- /* @__PURE__ */ i(
3317
- me,
3318
- {
3319
- id: "user-menu",
3320
- anchorEl: c,
3321
- open: y,
3322
- onClose: x,
3323
- anchorOrigin: {
3324
- vertical: "bottom",
3325
- horizontal: "right"
3326
- },
3327
- transformOrigin: {
3328
- vertical: "top",
3329
- horizontal: "right"
3330
- },
3331
- PaperProps: {
3332
- sx: {
3333
- mt: 1,
3334
- minWidth: 280,
3335
- borderRadius: "12px",
3336
- boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)"
3337
- }
3338
- },
3339
- children: [
3340
- /* @__PURE__ */ i(l, { sx: { px: 2, py: 1.5 }, children: [
3341
- /* @__PURE__ */ o(b, { variant: "subtitle2", sx: { fontWeight: 600 }, children: r }),
3342
- /* @__PURE__ */ o(b, { variant: "body2", color: "text.secondary", children: m })
3343
- ] }),
3344
- /* @__PURE__ */ o(he, {}),
3345
- /* @__PURE__ */ i(T, { onClick: () => g("help"), sx: { py: 1.5 }, children: [
3346
- /* @__PURE__ */ o(Y, { children: /* @__PURE__ */ o(Ne, { fontSize: "small" }) }),
3347
- /* @__PURE__ */ o(q, { primary: "Help & Support" })
3348
- ] }),
3349
- /* @__PURE__ */ i(T, { onClick: () => g("notifications"), sx: { py: 1.5 }, children: [
3350
- /* @__PURE__ */ o(Y, { children: /* @__PURE__ */ o(je, { fontSize: "small" }) }),
3351
- /* @__PURE__ */ o(q, { primary: "Notifications" })
3352
- ] }),
3353
- /* @__PURE__ */ o(he, {}),
3354
- /* @__PURE__ */ i(T, { onClick: () => g("logout"), sx: { py: 1.5 }, children: [
3355
- /* @__PURE__ */ o(Y, { children: /* @__PURE__ */ o(no, { fontSize: "small" }) }),
3356
- /* @__PURE__ */ o(q, { primary: "Sign out" })
3357
- ] })
3358
- ]
3359
- }
3360
- )
3361
- ] }), Cn = ({
3362
- onHelpClick: t,
3363
- onNotificationsClick: r,
3364
- showHelp: m = !0,
3365
- showNotifications: c = !0
3366
- }) => /* @__PURE__ */ i(Te, { children: [
3367
- m && /* @__PURE__ */ o(
3368
- Ve,
3369
- {
3370
- "aria-label": "Help",
3371
- onClick: t,
3372
- children: /* @__PURE__ */ o(Ne, {})
3373
- }
3374
- ),
3375
- c && /* @__PURE__ */ o(
3376
- Ve,
3377
- {
3378
- "aria-label": "Notifications",
3379
- onClick: r,
3380
- children: /* @__PURE__ */ o(je, {})
3381
- }
3382
- )
3383
- ] }), ft = [
3384
- {
3385
- label: "Today",
3386
- threads: [
3387
- { id: "1", title: "KOL Engagement Analysis", preview: "What are the top performing KOLs...", timestamp: /* @__PURE__ */ new Date(), messageCount: 8 },
3388
- { id: "2", title: "Q4 Performance Review", preview: "Show me the Q4 metrics...", timestamp: /* @__PURE__ */ new Date(), isStarred: !0, messageCount: 12 }
3389
- ]
3390
- },
3391
- {
3392
- label: "Yesterday",
3393
- threads: [
3394
- { id: "3", title: "Content Strategy Planning", preview: "Help me create a content calendar...", timestamp: new Date(Date.now() - 864e5), messageCount: 5 },
3395
- { id: "4", title: "Competitor Analysis", preview: "Compare our engagement with...", timestamp: new Date(Date.now() - 864e5), messageCount: 15 }
3396
- ]
3397
- },
3398
- {
3399
- label: "Previous 7 Days",
3400
- threads: [
3401
- { id: "5", title: "Regional Performance Deep Dive", preview: "Break down EMEA performance...", timestamp: new Date(Date.now() - 1728e5), messageCount: 22 },
3402
- { id: "6", title: "Dr. Chen Profile Research", preview: "Tell me about Dr. Sarah Chen...", timestamp: new Date(Date.now() - 2592e5), isStarred: !0, messageCount: 7 },
3403
- { id: "7", title: "Video Content Analysis", preview: "Which video formats perform best...", timestamp: new Date(Date.now() - 3456e5), messageCount: 4 }
3404
- ]
3405
- },
3406
- {
3407
- label: "Previous 30 Days",
3408
- threads: [
3409
- { id: "8", title: "Annual Planning Discussion", preview: "Help me prepare the annual...", timestamp: new Date(Date.now() - 864e6), messageCount: 30 },
3410
- { id: "9", title: "Social Media Insights", preview: "Analyze our LinkedIn performance...", timestamp: new Date(Date.now() - 1296e6), messageCount: 11 }
3411
- ]
3412
- }
3413
- ], yt = ({
3414
- threadGroups: t = ft,
3415
- selectedThreadId: r,
3416
- onThreadSelect: m,
3417
- onNewThread: c,
3418
- onThreadDelete: y,
3419
- onThreadRename: v,
3420
- onThreadStar: x,
3421
- onClose: g,
3422
- open: L = !0,
3423
- width: N = 280
3424
- }) => {
3425
- const C = Ae(), F = C.palette.mode === "dark", [I, $] = P(""), [O, J] = P(null), [z, D] = P(null), [W, E] = P(""), s = {
3426
- background: F ? Xe(C.palette.background.paper, 0.95) : C.palette.background.paper,
3427
- border: C.palette.divider,
3428
- text: C.palette.text.primary,
3429
- textSecondary: C.palette.text.secondary,
3430
- hover: C.palette.action.hover,
3431
- selected: F ? Xe(_.colors.aiPrimary, 0.15) : Xe(_.colors.aiPrimary, 0.08),
3432
- selectedBorder: _.colors.aiPrimary
3433
- }, A = t.map((f) => ({
3434
- ...f,
3435
- threads: f.threads.filter(
3436
- (R) => R.title.toLowerCase().includes(I.toLowerCase()) || R.preview?.toLowerCase().includes(I.toLowerCase())
3437
- )
3438
- })).filter((f) => f.threads.length > 0), V = (f) => {
3439
- D(f.id), E(f.title);
3440
- }, U = (f) => {
3441
- W.trim() && v?.(f, W.trim()), D(null), E("");
3442
- }, H = () => {
3443
- D(null), E("");
3444
- };
3445
- return L ? /* @__PURE__ */ i(
3446
- l,
3447
- {
3448
- sx: {
3449
- width: N,
3450
- height: "100%",
3451
- display: "flex",
3452
- flexDirection: "column",
3453
- backgroundColor: s.background,
3454
- borderRight: `1px solid ${s.border}`,
3455
- flexShrink: 0
3456
- },
3457
- children: [
3458
- /* @__PURE__ */ i(
3459
- l,
3460
- {
3461
- sx: {
3462
- px: 2,
3463
- py: 1.5,
3464
- display: "flex",
3465
- alignItems: "center",
3466
- justifyContent: "space-between",
3467
- borderBottom: `1px solid ${s.border}`
3468
- },
3469
- children: [
3470
- /* @__PURE__ */ o(b, { variant: "subtitle2", fontWeight: 600, color: s.text, children: "History" }),
3471
- /* @__PURE__ */ i(l, { sx: { display: "flex", gap: 0.5 }, children: [
3472
- /* @__PURE__ */ o(j, { title: "New thread", children: /* @__PURE__ */ o(S, { size: "small", onClick: c, children: /* @__PURE__ */ o(_o, { fontSize: "small" }) }) }),
3473
- /* @__PURE__ */ o(j, { title: "Close history", children: /* @__PURE__ */ o(S, { size: "small", onClick: g, children: /* @__PURE__ */ o(Zo, { fontSize: "small" }) }) })
3474
- ] })
3475
- ]
3476
- }
3477
- ),
3478
- /* @__PURE__ */ o(l, { sx: { px: 2, py: 1.5 }, children: /* @__PURE__ */ o(
3479
- ro,
3480
- {
3481
- fullWidth: !0,
3482
- size: "small",
3483
- placeholder: "Search threads...",
3484
- value: I,
3485
- onChange: (f) => $(f.target.value),
3486
- InputProps: {
3487
- startAdornment: /* @__PURE__ */ o(ko, { position: "start", children: /* @__PURE__ */ o(ye, { fontSize: "small", sx: { color: s.textSecondary } }) })
3488
- },
3489
- sx: {
3490
- "& .MuiOutlinedInput-root": {
3491
- backgroundColor: C.palette.action.hover,
3492
- "& fieldset": {
3493
- borderColor: "transparent"
3494
- },
3495
- "&:hover fieldset": {
3496
- borderColor: C.palette.divider
3497
- },
3498
- "&.Mui-focused fieldset": {
3499
- borderColor: _.colors.aiPrimary
3500
- }
3501
- }
3502
- }
3503
- }
3504
- ) }),
3505
- /* @__PURE__ */ i(l, { sx: { flex: 1, overflow: "auto" }, children: [
3506
- A.map((f, R) => /* @__PURE__ */ i(l, { children: [
3507
- /* @__PURE__ */ o(
3508
- b,
3509
- {
3510
- variant: "caption",
3511
- sx: {
3512
- px: 2,
3513
- py: 1,
3514
- display: "block",
3515
- color: s.textSecondary,
3516
- fontWeight: 500,
3517
- fontSize: "0.7rem",
3518
- textTransform: "uppercase",
3519
- letterSpacing: "0.5px"
3520
- },
3521
- children: f.label
3522
- }
3523
- ),
3524
- /* @__PURE__ */ o(fo, { dense: !0, disablePadding: !0, children: f.threads.map((p) => /* @__PURE__ */ o(
3525
- yo,
3526
- {
3527
- disablePadding: !0,
3528
- onMouseEnter: () => J(p.id),
3529
- onMouseLeave: () => J(null),
3530
- secondaryAction: O === p.id && z !== p.id ? /* @__PURE__ */ i(l, { sx: { display: "flex", gap: 0.5 }, children: [
3531
- /* @__PURE__ */ o(j, { title: p.isStarred ? "Unstar" : "Star", children: /* @__PURE__ */ o(
3532
- S,
3533
- {
3534
- size: "small",
3535
- onClick: (k) => {
3536
- k.stopPropagation(), x?.(p.id);
3537
- },
3538
- sx: { p: 0.5 },
3539
- children: p.isStarred ? (
3540
- // eslint-disable-next-line no-restricted-syntax -- @intentional-color: star indicator yellow
3541
- /* @__PURE__ */ o(ao, { fontSize: "small", sx: { color: "#F59E0B", fontSize: 16 } })
3542
- ) : /* @__PURE__ */ o(Yo, { fontSize: "small", sx: { fontSize: 16 } })
3543
- }
3544
- ) }),
3545
- /* @__PURE__ */ o(j, { title: "Rename", children: /* @__PURE__ */ o(
3546
- S,
3547
- {
3548
- size: "small",
3549
- onClick: (k) => {
3550
- k.stopPropagation(), V(p);
3551
- },
3552
- sx: { p: 0.5 },
3553
- children: /* @__PURE__ */ o(Qo, { fontSize: "small", sx: { fontSize: 16 } })
3554
- }
3555
- ) }),
3556
- /* @__PURE__ */ o(j, { title: "Delete", children: /* @__PURE__ */ o(
3557
- S,
3558
- {
3559
- size: "small",
3560
- onClick: (k) => {
3561
- k.stopPropagation(), y?.(p.id);
3562
- },
3563
- sx: { p: 0.5 },
3564
- children: /* @__PURE__ */ o(Ko, { fontSize: "small", sx: { fontSize: 16 } })
3565
- }
3566
- ) })
3567
- ] }) : p.isStarred && O !== p.id ? (
3568
- // eslint-disable-next-line no-restricted-syntax -- @intentional-color: star indicator yellow
3569
- /* @__PURE__ */ o(ao, { fontSize: "small", sx: { color: "#F59E0B", fontSize: 16, mr: 1 } })
3570
- ) : null,
3571
- children: /* @__PURE__ */ i(
3572
- Co,
3573
- {
3574
- selected: r === p.id,
3575
- onClick: () => m?.(p.id),
3576
- sx: {
3577
- py: 1,
3578
- px: 2,
3579
- borderRadius: 1,
3580
- mx: 1,
3581
- "&.Mui-selected": {
3582
- backgroundColor: s.selected,
3583
- borderLeft: `2px solid ${s.selectedBorder}`,
3584
- "&:hover": {
3585
- backgroundColor: s.selected
3586
- }
3587
- }
3588
- },
3589
- children: [
3590
- /* @__PURE__ */ o(Y, { sx: { minWidth: 32 }, children: /* @__PURE__ */ o(
3591
- Uo,
3592
- {
3593
- fontSize: "small",
3594
- sx: {
3595
- color: r === p.id ? _.colors.aiPrimary : s.textSecondary,
3596
- fontSize: 18
3597
- }
3598
- }
3599
- ) }),
3600
- z === p.id ? /* @__PURE__ */ o(
3601
- ro,
3602
- {
3603
- size: "small",
3604
- value: W,
3605
- onChange: (k) => E(k.target.value),
3606
- onBlur: () => U(p.id),
3607
- onKeyDown: (k) => {
3608
- k.key === "Enter" && U(p.id), k.key === "Escape" && H();
3609
- },
3610
- autoFocus: !0,
3611
- fullWidth: !0,
3612
- sx: {
3613
- "& .MuiInputBase-input": {
3614
- py: 0.5,
3615
- fontSize: "0.875rem"
3616
- }
3617
- },
3618
- onClick: (k) => k.stopPropagation()
3619
- }
3620
- ) : /* @__PURE__ */ o(
3621
- q,
3622
- {
3623
- primary: p.title,
3624
- secondary: p.preview,
3625
- primaryTypographyProps: {
3626
- variant: "body2",
3627
- fontWeight: r === p.id ? 600 : 400,
3628
- noWrap: !0,
3629
- sx: {
3630
- color: (r === p.id, s.text)
3631
- }
3632
- },
3633
- secondaryTypographyProps: {
3634
- variant: "caption",
3635
- noWrap: !0,
3636
- sx: {
3637
- color: s.textSecondary,
3638
- fontSize: "0.7rem"
3639
- }
3640
- }
3641
- }
3642
- )
3643
- ]
3644
- }
3645
- )
3646
- },
3647
- p.id
3648
- )) }),
3649
- R < A.length - 1 && /* @__PURE__ */ o(he, { sx: { my: 1, mx: 2 } })
3650
- ] }, f.label)),
3651
- A.length === 0 && /* @__PURE__ */ i(
3652
- l,
3653
- {
3654
- sx: {
3655
- display: "flex",
3656
- flexDirection: "column",
3657
- alignItems: "center",
3658
- justifyContent: "center",
3659
- py: 4,
3660
- px: 2
3661
- },
3662
- children: [
3663
- /* @__PURE__ */ o(Xo, { sx: { fontSize: 40, color: s.textSecondary, mb: 1 } }),
3664
- /* @__PURE__ */ o(b, { variant: "body2", color: s.textSecondary, textAlign: "center", children: I ? "No threads match your search" : "No conversation history" })
3665
- ]
3666
- }
3667
- )
3668
- ] }),
3669
- /* @__PURE__ */ i(
3670
- l,
3671
- {
3672
- sx: {
3673
- px: 2,
3674
- py: 1.5,
3675
- borderTop: `1px solid ${s.border}`,
3676
- display: "flex",
3677
- alignItems: "center",
3678
- justifyContent: "space-between"
3679
- },
3680
- children: [
3681
- /* @__PURE__ */ i(b, { variant: "caption", color: s.textSecondary, children: [
3682
- t.reduce((f, R) => f + R.threads.length, 0),
3683
- " threads"
3684
- ] }),
3685
- /* @__PURE__ */ o(j, { title: "More options", children: /* @__PURE__ */ o(S, { size: "small", children: /* @__PURE__ */ o(Go, { fontSize: "small" }) }) })
3686
- ]
3687
- }
3688
- )
3689
- ]
3690
- }
3691
- ) : null;
3692
- }, G = {
3693
- section: `${n.spacing.component.gapLg}px`,
3694
- // 24px - between major sections
3695
- content: `${n.spacing.component.gapMd}px`,
3696
- // 16px - within sections
3697
- element: `${n.spacing.component.gapSm}px`,
3698
- // 8px - between related elements
3699
- inset: `${n.spacing.component.paddingMd}px`,
3700
- // 16px - container padding
3701
- insetSm: `${n.spacing.component.paddingSm}px`
3702
- // 8px - small padding
3703
- }, Ct = [
3704
- { id: "gpt-4o", label: "GPT-4o", description: "Most capable model" },
3705
- { id: "gpt-4o-mini", label: "GPT-4o Mini", description: "Fast and efficient" },
3706
- { id: "claude-3-5-sonnet", label: "Claude 3.5 Sonnet", description: "Balanced performance" },
3707
- { id: "claude-3-opus", label: "Claude 3 Opus", description: "Most powerful" },
3708
- { id: "gemini-pro", label: "Gemini Pro", description: "Multimodal capable" }
3709
- ], St = [
3710
- { id: "web", label: "Web Search", icon: "globe", enabled: !0 },
3711
- { id: "documents", label: "Documents", icon: "file-text", enabled: !0 },
3712
- { id: "database", label: "Database", icon: "database", enabled: !1 },
3713
- { id: "sharepoint", label: "SharePoint", icon: "cloud", enabled: !1 },
3714
- { id: "projects", label: "Projects", icon: "folder", enabled: !1 }
3715
- ], Ye = {
3716
- default: {
3717
- content: `Based on my analysis of the available data, here are the key insights:
3718
-
3719
- **Performance Overview**
3720
- 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.
3721
-
3722
- **Key Findings**
3723
- 1. **Peak Engagement Windows**: Tuesday through Thursday between 9am-11am EST consistently show the highest engagement rates
3724
- 2. **Content Performance**: Educational content outperforms promotional material by 3.2x
3725
- 3. **KOL Impact**: Content shared by key opinion leaders receives 4.5x more engagement
3726
-
3727
- **Recommendations**
3728
- • Prioritize content publication during peak engagement windows
3729
- • Increase investment in educational content formats
3730
- • Expand KOL partnership program based on current success metrics`,
3731
- sources: [
3732
- { id: "affiliations", name: "Affiliations", count: 1 },
3733
- { id: "contact", name: "Contact Details", count: 1 },
3734
- {
3735
- id: "publications",
3736
- name: "Publications",
3737
- count: 4,
3738
- items: [
3739
- {
3740
- id: "pub-a",
3741
- label: "Small solitary pulmonary nodules detected at population-based CT screening...",
3742
- details: {
3743
- Title: "Small solitary pulmonary nodules (<= 1 cm) detected at population-based CT screening for lung cancer: reliable high-resolution CT features of benign lesions.",
3744
- Journal: "International Journal of Cancer",
3745
- "Authorship Position": "Coauthor",
3746
- "Publication Date": "2024-12-12",
3747
- "Publication Type": "Journal Article",
3748
- Tables: "Publications, PublicationRelations",
3749
- "Last Updated On": "10/29/2025"
3750
- }
3751
- },
3752
- { id: "pub-b", label: "Screening for lung cancer with low-dose CT: analysis of screening data..." },
3753
- { id: "pub-c", label: "Clinical insights into small cell lung cancer treatment strategies..." },
3754
- { id: "pub-d", label: "US Lung Screen (USLS) nodule management protocol and outcomes..." }
3755
- ]
3756
- },
3757
- { id: "trials", name: "Clinical Trials", count: 10 },
3758
- { id: "sci-topics", name: "Scientific Leader Topics", count: 25 },
3759
- { id: "clin-topics", name: "Clinical Leader Topics", count: 19 },
3760
- { id: "dig-topics", name: "Digital Leader Topics", count: 31 },
3761
- { id: "msl", name: "MSL Interactions", count: 2 }
3762
- ],
3763
- relatedQuestions: [
3764
- "What are some discussion questions for this HCP?",
3765
- "What are some themes I could engage this HCP on?",
3766
- "What conferences has this HCP attended recently?",
3767
- "Please summarize this HCP's experience."
3768
- ]
3769
- },
3770
- "What can you help with?": {
3771
- content: `I'm Insight Engine, your AI-powered research assistant. Here's what I can help you with:
3772
-
3773
- **Research & Analysis**
3774
- • Search across your data sources, documents, and the web
3775
- • Analyze trends and patterns in your data
3776
- • Generate insights from complex datasets
3777
-
3778
- **Content & Strategy**
3779
- • Help draft and refine content
3780
- • Provide competitive intelligence
3781
- • Suggest optimization strategies
3782
-
3783
- **Data Exploration**
3784
- • Query your databases naturally
3785
- • Create visualizations and summaries
3786
- • Connect insights across multiple sources
3787
-
3788
- Simply ask me a question, and I'll search relevant sources to provide a comprehensive answer with citations.`,
3789
- sources: [
3790
- { id: "docs", name: "Documentation", count: 2 },
3791
- { id: "help", name: "Help Articles", count: 3 }
3792
- ],
3793
- relatedQuestions: [
3794
- "Show me recent insights",
3795
- "Analyze my engagement data",
3796
- "What are the top performing KOLs?"
3797
- ]
3798
- },
3799
- "Show recent insights": {
3800
- content: `Here are the most significant insights from the past week:
3801
-
3802
- **📈 Engagement Surge**
3803
- Your immunotherapy content series saw a 156% increase in engagement. The article "Advances in CAR-T Therapy" was shared 2,341 times.
3804
-
3805
- **👥 Rising KOL**
3806
- Dr. Sarah Chen from Stanford Medicine has emerged as a key voice in precision oncology. Her engagement rate is 3x higher than average.
3807
-
3808
- **🌍 Regional Performance**
3809
- EMEA region outperformed other regions by 45%, driven primarily by localized content strategy in Germany and UK markets.
3810
-
3811
- **📊 Content Insights**
3812
- Video content is generating 2.8x more engagement than static posts. Consider increasing video production.`,
3813
- sources: [
3814
- { id: "analytics", name: "Analytics Dashboard", count: 5 },
3815
- { id: "kol-report", name: "KOL Tracking", count: 3 },
3816
- { id: "regional", name: "Regional Analysis", count: 4 }
3817
- ],
3818
- relatedQuestions: [
3819
- "Tell me more about Dr. Sarah Chen",
3820
- "Why is EMEA outperforming?",
3821
- "What video content works best?"
3822
- ]
3823
- }
3824
- }, Ft = ({
3825
- initialMessages: t = [],
3826
- messages: r,
3827
- onMessagesChange: m,
3828
- placeholder: c = "Ask anything...",
3829
- title: y = "Insight Engine",
3830
- subtitle: v,
3831
- onSendMessage: x,
3832
- isTyping: g = !1,
3833
- aiAvatar: L,
3834
- onClose: N,
3835
- isFullscreen: C = !1,
3836
- onFullscreenToggle: F,
3837
- showControls: I = !0,
3838
- demoMode: $ = !0,
3839
- onNewThread: O,
3840
- themeMode: J,
3841
- boxedLayout: z = !0,
3842
- onBoxedLayoutToggle: D,
3843
- userInitials: W = "RD",
3844
- // History sidebar props
3845
- showHistory: E,
3846
- onHistoryToggle: s,
3847
- threadGroups: A,
3848
- selectedThreadId: V,
3849
- onThreadSelect: U,
3850
- onThreadDelete: H,
3851
- onThreadRename: f,
3852
- onThreadStar: R
3853
- }) => {
3854
- const p = Ae(), k = r !== void 0, [K, se] = P(t), Z = k ? r : K, X = (d) => {
3855
- if (k) {
3856
- const fe = typeof d == "function" ? d(r) : d;
3857
- m?.(fe);
3858
- } else
3859
- se(d);
3860
- }, [ee, ne] = P(""), [oe, ie] = P(g), [w, ce] = P(!1), [re, we] = P(!1), [ae, ue] = P(!1), [be, We] = P("gpt-4o"), [u, Ue] = P(["web", "documents"]), ve = $e(null), [Ke, Qe] = P(!1), xe = E ?? Ke, ke = s ?? (() => Qe((d) => !d)), de = {
3861
- background: p.palette.background.default,
3862
- surface: p.palette.background.paper,
3863
- inputBg: p.palette.action.hover,
3864
- text: p.palette.text.primary,
3865
- textSecondary: p.palette.text.secondary,
3866
- iconActive: p.palette.primary.main,
3867
- iconInactive: p.palette.text.disabled,
3868
- buttonHighlight: p.palette.primary.main
3869
- }, Ge = () => {
3870
- ve.current?.scrollIntoView({ behavior: "smooth" });
3871
- };
3872
- Oe(() => {
3873
- Ge();
3874
- }, [Z, oe]), Oe(() => {
3875
- ie(g);
3876
- }, [g]);
3877
- const Be = (d) => Ye[d] ? Ye[d] : Ye.default, Ee = () => {
3878
- if (!ee.trim()) return;
3879
- const d = {
3880
- id: Date.now().toString(),
3881
- role: "user",
3882
- content: ee.trim(),
3883
- timestamp: /* @__PURE__ */ new Date()
3884
- };
3885
- X((te) => [...te, d]);
3886
- const fe = ee.trim();
3887
- ne(""), x?.(fe, { proSearch: w }), $ && (ie(!0), setTimeout(() => {
3888
- const te = Be(fe), a = {
3889
- id: (Date.now() + 1).toString(),
3890
- role: "assistant",
3891
- content: te.content,
3892
- timestamp: /* @__PURE__ */ new Date(),
3893
- sources: te.sources,
3894
- relatedQuestions: te.relatedQuestions
3895
- };
3896
- X((pe) => [...pe, a]), ie(!1);
3897
- }, 2e3));
3898
- }, _e = (d) => {
3899
- ne(d);
3900
- }, Ie = () => {
3901
- X([]), O?.();
3902
- }, ze = /* @__PURE__ */ o(jo, { size: "xs", icon: "sparkles" });
3903
- return /* @__PURE__ */ i(
3904
- ge,
3905
- {
3906
- direction: xe ? "row" : "column",
3907
- sx: {
3908
- height: "100%",
3909
- width: "100%",
3910
- minHeight: 0
3911
- },
3912
- children: [
3913
- xe && /* @__PURE__ */ o(
3914
- yt,
3915
- {
3916
- open: xe,
3917
- threadGroups: A,
3918
- selectedThreadId: V,
3919
- onThreadSelect: U,
3920
- onNewThread: Ie,
3921
- onThreadDelete: H,
3922
- onThreadRename: f,
3923
- onThreadStar: R,
3924
- onClose: ke,
3925
- width: C ? 280 : 240
3926
- }
3927
- ),
3928
- /* @__PURE__ */ i(
3929
- ge,
3930
- {
3931
- sx: {
3932
- flex: 1,
3933
- minWidth: 0,
3934
- height: "100%",
3935
- overflow: "hidden",
3936
- background: _.gradient.subtle
3937
- },
3938
- children: [
3939
- /* @__PURE__ */ i(
3940
- ge,
3941
- {
3942
- direction: "row",
3943
- alignItems: "center",
3944
- spacing: G.element,
3945
- sx: {
3946
- px: G.inset,
3947
- py: G.insetSm,
3948
- borderBottom: 1,
3949
- borderColor: "divider",
3950
- bgcolor: "background.default",
3951
- flexShrink: 0
3952
- },
3953
- children: [
3954
- !xe && /* @__PURE__ */ o(j, { title: "Show history", children: /* @__PURE__ */ o(
3955
- S,
3956
- {
3957
- size: "small",
3958
- onClick: ke,
3959
- sx: { color: de.iconInactive },
3960
- children: /* @__PURE__ */ o(Ce, { name: "menu", size: "small" })
3961
- }
3962
- ) }),
3963
- /* @__PURE__ */ o(j, { title: "New thread", children: /* @__PURE__ */ o(
3964
- S,
3965
- {
3966
- size: "small",
3967
- onClick: Ie,
3968
- sx: { color: de.iconInactive },
3969
- children: /* @__PURE__ */ o(Ce, { name: "plus", size: "small" })
3970
- }
3971
- ) }),
3972
- /* @__PURE__ */ i(ge, { direction: "row", alignItems: "center", spacing: 1, sx: { flex: 1 }, children: [
3973
- L || ze,
3974
- /* @__PURE__ */ o(b, { variant: "subtitle2", fontWeight: 600, color: "text.primary", children: y }),
3975
- w && /* @__PURE__ */ o(
3976
- zo,
3977
- {
3978
- label: "Pro",
3979
- size: "small",
3980
- sx: {
3981
- height: 20,
3982
- fontSize: 10,
3983
- fontWeight: 600,
3984
- background: _.gradient.diagonal,
3985
- // eslint-disable-next-line no-restricted-syntax -- @intentional-color: white on gradient
3986
- color: "#FFFFFF"
3987
- }
3988
- }
3989
- )
3990
- ] }),
3991
- I && /* @__PURE__ */ i(ge, { direction: "row", spacing: 0.5, children: [
3992
- /* @__PURE__ */ o(j, { title: xe ? "Hide history" : "Show history", children: /* @__PURE__ */ o(
3993
- S,
3994
- {
3995
- size: "small",
3996
- onClick: ke,
3997
- sx: { color: xe ? de.iconActive : de.iconInactive },
3998
- children: /* @__PURE__ */ o(Ce, { name: "clock", size: "small" })
3999
- }
4000
- ) }),
4001
- C && D && /* @__PURE__ */ o(j, { title: z ? "Full width" : "Boxed layout", children: /* @__PURE__ */ o(
4002
- S,
4003
- {
4004
- size: "small",
4005
- onClick: D,
4006
- sx: { color: de.iconInactive },
4007
- children: /* @__PURE__ */ o(Ce, { name: z ? "maximize-2" : "minimize-2", size: "small" })
4008
- }
4009
- ) }),
4010
- F && /* @__PURE__ */ o(j, { title: C ? "Exit fullscreen" : "Fullscreen", children: /* @__PURE__ */ o(
4011
- S,
4012
- {
4013
- size: "small",
4014
- onClick: F,
4015
- sx: { color: de.iconInactive },
4016
- children: /* @__PURE__ */ o(Ce, { name: C ? "minimize" : "maximize", size: "small" })
4017
- }
4018
- ) }),
4019
- N && /* @__PURE__ */ o(j, { title: "Close", children: /* @__PURE__ */ o(
4020
- S,
4021
- {
4022
- size: "small",
4023
- onClick: N,
4024
- sx: { color: de.iconInactive },
4025
- children: /* @__PURE__ */ o(Ce, { name: "x", size: "small" })
4026
- }
4027
- ) })
4028
- ] })
4029
- ]
4030
- }
4031
- ),
4032
- /* @__PURE__ */ o(
4033
- l,
4034
- {
4035
- sx: {
4036
- flex: 1,
4037
- overflow: "auto",
4038
- minHeight: 0,
4039
- display: "flex",
4040
- flexDirection: "column"
4041
- },
4042
- children: /* @__PURE__ */ i(
4043
- ge,
4044
- {
4045
- sx: {
4046
- flex: 1,
4047
- px: G.inset,
4048
- // Add horizontal padding for whitespace
4049
- ...C && z && { maxWidth: 900, mx: "auto", px: 3 }
4050
- },
4051
- children: [
4052
- Z.length === 0 && /* @__PURE__ */ i(
4053
- ge,
4054
- {
4055
- alignItems: "center",
4056
- justifyContent: "center",
4057
- spacing: G.content,
4058
- sx: { flex: 1, p: G.section, minHeight: 400 },
4059
- children: [
4060
- /* @__PURE__ */ o(
4061
- l,
4062
- {
4063
- sx: {
4064
- width: 56,
4065
- height: 56,
4066
- borderRadius: Mo.lg,
4067
- background: _.gradient.subtle,
4068
- display: "flex",
4069
- alignItems: "center",
4070
- justifyContent: "center"
4071
- },
4072
- children: /* @__PURE__ */ o(Ce, { name: "sparkles", size: "medium", color: _.colors.aiPrimary })
4073
- }
4074
- ),
4075
- /* @__PURE__ */ o(b, { variant: "h6", fontWeight: 600, color: "text.primary", children: "What do you want to know?" }),
4076
- /* @__PURE__ */ o(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" })
4077
- ]
4078
- }
4079
- ),
4080
- Z.map((d) => /* @__PURE__ */ i(
4081
- To,
4082
- {
4083
- role: d.role,
4084
- content: d.content,
4085
- aiAvatar: L || ze,
4086
- userInitials: W,
4087
- showCopy: d.role === "assistant",
4088
- showFeedback: d.role === "assistant",
4089
- showShare: d.role === "assistant",
4090
- showRegenerate: d.role === "assistant",
4091
- children: [
4092
- d.sources && d.sources.length > 0 && /* @__PURE__ */ o(l, { sx: { mt: G.content }, children: /* @__PURE__ */ o(Bo, { sources: d.sources }) }),
4093
- d.relatedQuestions && d.relatedQuestions.length > 0 && /* @__PURE__ */ o(l, { sx: { mt: G.content }, children: /* @__PURE__ */ o(
4094
- Lo,
4095
- {
4096
- questions: d.relatedQuestions,
4097
- onQuestionClick: _e
4098
- }
4099
- ) })
4100
- ]
4101
- },
4102
- d.id
4103
- )),
4104
- oe && /* @__PURE__ */ i(
4105
- ge,
4106
- {
4107
- direction: "row",
4108
- alignItems: "flex-start",
4109
- spacing: G.content,
4110
- sx: { p: G.inset, bgcolor: "background.default" },
4111
- children: [
4112
- L || ze,
4113
- /* @__PURE__ */ o($o, { text: "Searching..." })
4114
- ]
4115
- }
4116
- ),
4117
- /* @__PURE__ */ o("div", { ref: ve })
4118
- ]
4119
- }
4120
- )
4121
- }
4122
- ),
4123
- /* @__PURE__ */ i(
4124
- ge,
4125
- {
4126
- sx: {
4127
- px: G.inset,
4128
- py: G.insetSm,
4129
- bgcolor: "background.default",
4130
- borderTop: 1,
4131
- borderColor: "divider",
4132
- flexShrink: 0,
4133
- ...C && z && {
4134
- alignItems: "center",
4135
- "& > *": { maxWidth: 900, width: "100%" }
4136
- }
4137
- },
4138
- children: [
4139
- /* @__PURE__ */ o(
4140
- Oo,
4141
- {
4142
- value: ee,
4143
- onChange: ne,
4144
- onSubmit: (d) => {
4145
- Ee(), x?.(d, {});
4146
- },
4147
- placeholder: "Ask anything. Type @ for mentions and / for shortcuts.",
4148
- models: Ct,
4149
- selectedModel: be,
4150
- onModelChange: We,
4151
- sources: St.map((d) => ({
4152
- id: d.id,
4153
- label: d.label,
4154
- icon: d.icon,
4155
- enabled: u.includes(d.id)
4156
- })),
4157
- onSourceToggle: (d, fe) => {
4158
- Ue(
4159
- (te) => fe ? [...te, d] : te.filter((a) => a !== d)
4160
- );
4161
- },
4162
- deepThinkingEnabled: w,
4163
- onDeepThinkingToggle: (d) => ce(d),
4164
- webSearchEnabled: !0,
4165
- onWebSearchToggle: () => {
4166
- },
4167
- onAttachmentClick: () => console.log("Attachment clicked"),
4168
- onVoiceClick: () => ue(!ae),
4169
- isListening: ae
4170
- }
4171
- ),
4172
- /* @__PURE__ */ o(
4173
- Vo,
4174
- {
4175
- open: re,
4176
- isListening: ae,
4177
- onListeningToggle: () => ue(!ae),
4178
- onClose: () => we(!1)
4179
- }
4180
- ),
4181
- !re && /* @__PURE__ */ o(No, { isListening: ae, onStop: () => ue(!1) }),
4182
- /* @__PURE__ */ o(b, { variant: "caption", color: "text.secondary", sx: { mt: G.element, textAlign: "center" }, children: "Insight Engine can make mistakes. Verify important information." })
4183
- ]
4184
- }
4185
- )
4186
- ]
4187
- }
4188
- )
4189
- ]
4190
- }
4191
- );
4192
- }, wt = ({
4193
- open: t,
4194
- children: r,
4195
- defaultWidth: m = 400,
4196
- minWidth: c = 320,
4197
- maxWidth: y = 800,
4198
- onClose: v,
4199
- side: x = "right",
4200
- header: g,
4201
- showCloseButton: L = !0,
4202
- sx: N,
4203
- contentSx: C
4204
- }) => {
4205
- const [F, I] = P(m), [$, O] = P(!1), J = $e(null), z = $e(0), D = $e(0), W = Se((A) => {
4206
- A.preventDefault(), O(!0), z.current = A.clientX, D.current = F;
4207
- }, [F]), E = Se((A) => {
4208
- if (!$) return;
4209
- const V = x === "right" ? z.current - A.clientX : A.clientX - z.current, U = Math.min(y, Math.max(c, D.current + V));
4210
- I(U);
4211
- }, [$, c, y, x]), s = Se(() => {
4212
- O(!1);
4213
- }, []);
4214
- return Oe(() => ($ && (document.addEventListener("mousemove", E), document.addEventListener("mouseup", s), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none"), () => {
4215
- document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", s), document.body.style.cursor = "", document.body.style.userSelect = "";
4216
- }), [$, E, s]), t ? /* @__PURE__ */ i(
4217
- l,
4218
- {
4219
- ref: J,
4220
- sx: {
4221
- position: "relative",
4222
- width: F,
4223
- minWidth: c,
4224
- maxWidth: y,
4225
- height: "100%",
4226
- display: "flex",
4227
- flexDirection: "column",
4228
- backgroundColor: "background.paper",
4229
- // Use MUI theme
4230
- borderLeft: x === "right" ? "1px solid" : "none",
4231
- borderRight: x === "left" ? "1px solid" : "none",
4232
- borderColor: "divider",
4233
- // Use MUI theme
4234
- transition: $ ? "none" : "width 0.1s ease-out",
4235
- overflow: "hidden",
4236
- flexShrink: 0,
4237
- ...N
4238
- },
4239
- children: [
4240
- /* @__PURE__ */ o(
4241
- l,
4242
- {
4243
- onMouseDown: W,
4244
- sx: {
4245
- position: "absolute",
4246
- top: 0,
4247
- [x === "right" ? "left" : "right"]: 0,
4248
- width: 6,
4249
- height: "100%",
4250
- cursor: "col-resize",
4251
- zIndex: 10,
4252
- display: "flex",
4253
- alignItems: "center",
4254
- justifyContent: "center",
4255
- "&:hover": {
4256
- "& .resize-indicator": {
4257
- backgroundColor: "primary.light",
4258
- // Use MUI theme
4259
- opacity: 1
4260
- }
4261
- },
4262
- ...$ && {
4263
- "& .resize-indicator": {
4264
- backgroundColor: "primary.light",
4265
- // Use MUI theme
4266
- opacity: 1
4267
- }
4268
- }
4269
- },
4270
- children: /* @__PURE__ */ o(
4271
- l,
4272
- {
4273
- className: "resize-indicator",
4274
- sx: {
4275
- width: 3,
4276
- height: 40,
4277
- borderRadius: 2,
4278
- backgroundColor: "action.hover",
4279
- // Use MUI theme
4280
- opacity: 0.5,
4281
- transition: `all ${n.motion.duration.fast}`
4282
- }
4283
- }
4284
- )
4285
- }
4286
- ),
4287
- g && /* @__PURE__ */ i(
4288
- l,
4289
- {
4290
- sx: {
4291
- display: "flex",
4292
- alignItems: "center",
4293
- justifyContent: "space-between",
4294
- p: 2,
4295
- borderBottom: "1px solid",
4296
- borderColor: "divider",
4297
- // Use MUI theme
4298
- flexShrink: 0
4299
- },
4300
- children: [
4301
- /* @__PURE__ */ o(l, { sx: { flex: 1 }, children: g }),
4302
- L && /* @__PURE__ */ o(j, { title: "Close panel", children: /* @__PURE__ */ o(
4303
- S,
4304
- {
4305
- size: "small",
4306
- onClick: v,
4307
- sx: {
4308
- color: "text.secondary",
4309
- // Use MUI theme
4310
- "&:hover": {
4311
- backgroundColor: "action.hover"
4312
- // Theme-aware hover
4313
- }
4314
- },
4315
- children: /* @__PURE__ */ o("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ o("path", { d: "M18 6L6 18M6 6l12 12" }) })
4316
- }
4317
- ) })
4318
- ]
4319
- }
4320
- ),
4321
- /* @__PURE__ */ o(
4322
- l,
4323
- {
4324
- sx: {
4325
- flex: 1,
4326
- overflow: "hidden",
4327
- minHeight: 0,
4328
- display: "flex",
4329
- flexDirection: "column",
4330
- ...C
4331
- },
4332
- children: r
4333
- }
4334
- )
4335
- ]
4336
- }
4337
- ) : null;
4338
- }, vt = ({
4339
- open: t = !1,
4340
- onClick: r,
4341
- position: m = "bottom-right",
4342
- offset: c = { x: 24, y: 24 },
4343
- showBadge: y = !1,
4344
- badgeContent: v,
4345
- size: x = "large",
4346
- tooltip: g = "Ask AI",
4347
- disabled: L = !1,
4348
- zIndex: N = 1e3
4349
- }) => {
4350
- Ae().palette.mode;
4351
- const F = {
4352
- position: "fixed",
4353
- zIndex: N
4354
- };
4355
- switch (m) {
4356
- case "bottom-right":
4357
- F.bottom = c.y, F.right = c.x;
4358
- break;
4359
- case "bottom-left":
4360
- F.bottom = c.y, F.left = c.x;
4361
- break;
4362
- case "top-right":
4363
- F.top = c.y, F.right = c.x;
4364
- break;
4365
- case "top-left":
4366
- F.top = c.y, F.left = c.x;
4367
- break;
4368
- }
4369
- const I = /* @__PURE__ */ i(
4370
- Ao,
4371
- {
4372
- color: "primary",
4373
- onClick: r,
4374
- disabled: L,
4375
- size: x,
4376
- sx: {
4377
- background: _.gradient.diagonal,
4378
- boxShadow: _.gradient.glow,
4379
- transition: "all 0.3s ease",
4380
- "&:hover": {
4381
- background: _.gradient.diagonal,
4382
- boxShadow: _.gradient.glow,
4383
- transform: "scale(1.05)"
4384
- },
4385
- "&:active": {
4386
- transform: "scale(0.95)"
4387
- },
4388
- "&.Mui-disabled": {
4389
- background: "action.disabledBackground",
4390
- // Use MUI theme
4391
- boxShadow: "none"
4392
- }
4393
- },
4394
- children: [
4395
- /* @__PURE__ */ o(So, { sx: { color: "common.white" } }),
4396
- " "
4397
- ]
4398
- }
4399
- );
4400
- return /* @__PURE__ */ o(l, { sx: F, children: y ? /* @__PURE__ */ o(
4401
- Wo,
4402
- {
4403
- badgeContent: v,
4404
- color: "error",
4405
- overlap: "circular",
4406
- sx: {
4407
- "& .MuiBadge-badge": {
4408
- backgroundColor: "secondary.main",
4409
- // Use MUI theme
4410
- color: "common.white"
4411
- // Use MUI theme
4412
- }
4413
- },
4414
- children: /* @__PURE__ */ o(j, { title: g, placement: "left", children: I })
4415
- }
4416
- ) : /* @__PURE__ */ o(j, { title: g, placement: "left", children: I }) });
4417
- }, kt = "insight-engine", zt = n.spacing.layout.aiPanelWidth, At = ({
4418
- isFullscreen: t,
4419
- headerHeight: r,
4420
- sidebarWidth: m,
4421
- panelZIndex: c,
4422
- navStyle: y
4423
- }) => {
4424
- const v = {
4425
- position: "fixed",
4426
- top: r,
4427
- height: `calc(100vh - ${r}px)`,
4428
- zIndex: c
4429
- };
4430
- return t ? {
4431
- ...v,
4432
- left: y === "sidebar" ? m : 0,
4433
- right: 0,
4434
- bottom: 0
4435
- } : {
4436
- ...v,
4437
- right: 0
4438
- };
4439
- }, Wt = ({
4440
- aiPanelFullscreen: t,
4441
- contentSx: r
4442
- }) => ({
4443
- flex: 1,
4444
- minHeight: 0,
4445
- bgcolor: "background.default",
4446
- overflow: "auto",
4447
- display: t ? "none" : "block",
4448
- ...r
4449
- }), Et = ({
4450
- aiPanelOpen: t,
4451
- aiPanelFullscreen: r,
4452
- aiPanelWidth: m,
4453
- transition: c
4454
- }) => ({
4455
- display: "flex",
4456
- flexDirection: "column",
4457
- flex: 1,
4458
- minHeight: 0,
4459
- transition: c,
4460
- marginRight: t && !r ? `${m}px` : 0
4461
- }), It = ({
4462
- children: t,
4463
- navStyle: r = "sidebar",
4464
- aiTrigger: m,
4465
- companyName: c = "Trinity",
4466
- navItems: y = [],
4467
- selectedNavItem: v,
4468
- onSelectedNavItemChange: x,
4469
- user: g,
4470
- clientName: L,
4471
- clients: N,
4472
- onClientChange: C,
4473
- onNavigate: F,
4474
- fabProps: I,
4475
- panelProps: $,
4476
- aiPanelWidth: O = zt,
4477
- contentSx: J
4478
- }) => {
4479
- const z = Ae();
4480
- He(z.breakpoints.down("md"));
4481
- const D = m ?? (r === "sidebar" ? "sidebar" : "fab"), [W, E] = P(!1), [s, A] = P(!1), [V, U] = P(!0), H = Se(() => {
4482
- E((w) => !w);
4483
- }, []), f = Se(() => {
4484
- E(!1), A(!1);
4485
- }, []), R = Se(() => {
4486
- A((w) => !w);
4487
- }, []), p = Se(
4488
- (w) => {
4489
- if (w === kt) {
4490
- H();
4491
- return;
4492
- }
4493
- x?.(w), F?.(w);
4494
- },
4495
- [H, x, F]
4496
- ), { layout: k } = n.spacing, K = k.headerHeight, se = k.sidebarWidthExpanded, Z = k.sidebarWidthCollapsed, X = () => {
4497
- if (D === "none" || !W && !s) return null;
4498
- const w = z.zIndex.drawer - 1, re = At({
4499
- isFullscreen: s,
4500
- headerHeight: K,
4501
- sidebarWidth: V ? se : Z,
4502
- panelZIndex: w,
4503
- navStyle: r
4504
- });
4505
- return /* @__PURE__ */ o(
4506
- wt,
4507
- {
4508
- open: W,
4509
- defaultWidth: O,
4510
- minWidth: 320,
4511
- maxWidth: s ? void 0 : 800,
4512
- side: "right",
4513
- showCloseButton: !1,
4514
- sx: {
4515
- ...re,
4516
- bgcolor: "background.paper",
4517
- // Remove shadow when fullscreen to eliminate gap appearance
4518
- boxShadow: W && !s ? n.effects.shadow.floating : "none",
4519
- // In fullscreen mode, take full width and disable resize
4520
- ...s && {
4521
- width: "auto",
4522
- minWidth: "auto",
4523
- maxWidth: "none"
4524
- }
4525
- },
4526
- contentSx: {
4527
- display: "flex",
4528
- flexDirection: "column",
4529
- height: "100%"
4530
- },
4531
- children: /* @__PURE__ */ o(
4532
- Ft,
4533
- {
4534
- showControls: !0,
4535
- onClose: f,
4536
- isFullscreen: s,
4537
- onFullscreenToggle: R,
4538
- ...$
4539
- }
4540
- )
4541
- }
4542
- );
4543
- }, ee = () => {
4544
- if (D !== "fab") return null;
4545
- const w = k.gutter, ce = {
4546
- x: W ? O + w : w,
4547
- y: w
4548
- };
4549
- return /* @__PURE__ */ o(
4550
- vt,
4551
- {
4552
- onClick: H,
4553
- open: W,
4554
- position: "bottom-right",
4555
- offset: ce,
4556
- zIndex: z.zIndex.drawer + 1,
4557
- ...I
4558
- }
4559
- );
4560
- }, ne = z.transitions.create(["margin", "width"], {
4561
- easing: z.transitions.easing.sharp,
4562
- duration: z.transitions.duration.enteringScreen
4563
- }), oe = Wt({
4564
- aiPanelFullscreen: s,
4565
- contentSx: J
4566
- }), ie = Et({
4567
- aiPanelOpen: W,
4568
- aiPanelFullscreen: s,
4569
- aiPanelWidth: O,
4570
- transition: ne
4571
- });
4572
- return r === "sidebar" ? /* @__PURE__ */ i(l, { sx: { display: "flex", minHeight: "100vh" }, children: [
4573
- /* @__PURE__ */ o(l, { sx: ie, children: /* @__PURE__ */ o(
4574
- gt,
4575
- {
4576
- appName: c,
4577
- clientName: L,
4578
- clients: N,
4579
- onClientChange: C,
4580
- navItems: y,
4581
- selectedNavItem: v,
4582
- onNavItemClick: p,
4583
- userName: g?.name,
4584
- userEmail: g?.email,
4585
- userInitials: g?.initials,
4586
- sidebarExpanded: V,
4587
- onSidebarExpandedChange: U,
4588
- children: /* @__PURE__ */ o(l, { sx: oe, children: t })
4589
- }
4590
- ) }),
4591
- X(),
4592
- ee()
4593
- ] }) : /* @__PURE__ */ i(l, { sx: { display: "flex", flexDirection: "column", minHeight: "100vh" }, children: [
4594
- /* @__PURE__ */ o(
4595
- lt,
4596
- {
4597
- appName: c,
4598
- clientName: L,
4599
- clients: N,
4600
- onClientChange: C,
4601
- userName: g?.name,
4602
- userEmail: g?.email,
4603
- userInitials: g?.initials
4604
- }
4605
- ),
4606
- /* @__PURE__ */ o(
4607
- l,
4608
- {
4609
- component: "main",
4610
- sx: {
4611
- ...ie,
4612
- ...oe,
4613
- pt: `${k.contentPadding}px`
4614
- // Account for fixed header
4615
- },
4616
- children: t
4617
- }
4618
- ),
4619
- X(),
4620
- ee()
4621
- ] });
4622
- }, Sn = (t) => (Oe(() => {
4623
- process.env.NODE_ENV === "development" && console.warn(
4624
- '[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'
4625
- );
4626
- }, []), /* @__PURE__ */ o(It, { aiTrigger: "fab", ...t }));
4627
- export {
4628
- fn as A,
4629
- xn as C,
4630
- Cn as H,
4631
- Ft as I,
4632
- wt as R,
4633
- bn as S,
4634
- lt as T,
4635
- yn as U,
4636
- e as a,
4637
- h as b,
4638
- Fo as c,
4639
- tt as d,
4640
- le as e,
4641
- wo as f,
4642
- qo as g,
4643
- it as h,
4644
- Jo as i,
4645
- et as j,
4646
- ot as k,
4647
- vo as l,
4648
- sn as m,
4649
- cn as n,
4650
- dn as o,
4651
- pn as p,
4652
- gt as q,
4653
- un as r,
4654
- n as s,
4655
- mn as t,
4656
- It as u,
4657
- Sn as v,
4658
- gn as w,
4659
- nt as x,
4660
- hn as y
4661
- };