@trinityui/design-system 1.0.8 → 1.0.10
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.
- package/CHANGELOG.md +36 -0
- package/README.md +88 -238
- package/dist/Legend.js +17 -18
- package/dist/app-shell.js +9103 -0
- package/dist/charts.js +1 -1
- package/dist/data-table2.js +1 -1
- package/dist/data.js +1 -1
- package/dist/essentials.js +1 -1
- package/dist/index.js +104 -105
- package/dist/theme.js +2 -2
- package/dist/tokens.js +2 -2
- package/package.json +1 -1
- package/dist/ai.js +0 -4466
- package/dist/navigation.js +0 -4661
package/dist/navigation.js
DELETED
|
@@ -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
|
-
};
|