jcicl 0.0.267 → 0.0.269

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,1134 +0,0 @@
1
- import { jsx as a, jsxs as T, Fragment as fe } from "react/jsx-runtime";
2
- import * as x from "react";
3
- import { useState as G } from "react";
4
- import { c as se } from "./createSvgIcon.js";
5
- import { n as v, i as q } from "./emotion-styled.browser.esm.js";
6
- import { c as R } from "./emotion-react.browser.esm.js";
7
- import Ie from "../AppHeader/AppHeader.js";
8
- import { Nav as F } from "../Nav/Nav.js";
9
- import Y from "../ScrollContainer/ScrollContainer.js";
10
- import { Button as K } from "../Button/Button.js";
11
- import i from "../theme.js";
12
- import { l as Ae } from "./jocologo.js";
13
- import { X as je } from "./Close.js";
14
- import { P as t, g as Ue, a as Fe, s as ce, r as Ve, c as Z, u as We, b as _, d as Qe } from "./DefaultPropsProvider.js";
15
- import { u as Xe } from "./index.js";
16
- import { a as Ge, u as ke } from "./useTheme.js";
17
- import { m as Ce } from "./memoTheme.js";
18
- import { g as Ye, o as Te, d as _e, M as Je } from "./TextField.js";
19
- import { P as Ke } from "./Paper.js";
20
- import { i as Ze } from "./integerPropType.js";
21
- import { e as qe, H as eo, g as oo, T as ro, r as to, a as me } from "./Portal.js";
22
- import { c as no } from "./chainPropTypes.js";
23
- import { c as io, u as ao } from "./TransitionGroupContext.js";
24
- function so(e, o, r, n, c) {
25
- const [l, u] = x.useState(() => c && r ? r(e).matches : n ? n(e).matches : o);
26
- return io(() => {
27
- if (!r)
28
- return;
29
- const f = r(e), p = () => {
30
- u(f.matches);
31
- };
32
- return p(), f.addEventListener("change", p), () => {
33
- f.removeEventListener("change", p);
34
- };
35
- }, [e, r]), l;
36
- }
37
- const co = {
38
- ...x
39
- }, Pe = co.useSyncExternalStore;
40
- function lo(e, o, r, n, c) {
41
- const l = x.useCallback(() => o, [o]), u = x.useMemo(() => {
42
- if (c && r)
43
- return () => r(e).matches;
44
- if (n !== null) {
45
- const {
46
- matches: h
47
- } = n(e);
48
- return () => h;
49
- }
50
- return l;
51
- }, [l, e, n, c, r]), [f, p] = x.useMemo(() => {
52
- if (r === null)
53
- return [l, () => () => {
54
- }];
55
- const h = r(e);
56
- return [() => h.matches, (P) => (h.addEventListener("change", P), () => {
57
- h.removeEventListener("change", P);
58
- })];
59
- }, [l, r, e]);
60
- return Pe(p, f, u);
61
- }
62
- function ge(e, o = {}) {
63
- const r = Ge(), n = typeof window < "u" && typeof window.matchMedia < "u", {
64
- defaultMatches: c = !1,
65
- matchMedia: l = n ? window.matchMedia : null,
66
- ssrMatchMedia: u = null,
67
- noSsr: f = !1
68
- } = Ye({
69
- name: "MuiUseMediaQuery",
70
- props: o,
71
- theme: r
72
- });
73
- process.env.NODE_ENV !== "production" && typeof e == "function" && r === null && console.error(["MUI: The `query` argument provided is invalid.", "You are providing a function without a theme in the context.", "One of the parent elements needs to use a ThemeProvider."].join(`
74
- `));
75
- let p = typeof e == "function" ? e(r) : e;
76
- p = p.replace(/^@media( ?)/m, "");
77
- const h = (Pe !== void 0 ? lo : so)(p, c, l, u, f);
78
- return process.env.NODE_ENV !== "production" && x.useDebugValue({
79
- query: p,
80
- match: h
81
- }), h;
82
- }
83
- function po(e, o, r) {
84
- const n = o.getBoundingClientRect(), c = r && r.getBoundingClientRect(), l = Te(o);
85
- let u;
86
- if (o.fakeTransform)
87
- u = o.fakeTransform;
88
- else {
89
- const b = l.getComputedStyle(o);
90
- u = b.getPropertyValue("-webkit-transform") || b.getPropertyValue("transform");
91
- }
92
- let f = 0, p = 0;
93
- if (u && u !== "none" && typeof u == "string") {
94
- const b = u.split("(")[1].split(")")[0].split(",");
95
- f = parseInt(b[4], 10), p = parseInt(b[5], 10);
96
- }
97
- return e === "left" ? c ? `translateX(${c.right + f - n.left}px)` : `translateX(${l.innerWidth + f - n.left}px)` : e === "right" ? c ? `translateX(-${n.right - c.left - f}px)` : `translateX(-${n.left + n.width - f}px)` : e === "up" ? c ? `translateY(${c.bottom + p - n.top}px)` : `translateY(${l.innerHeight + p - n.top}px)` : c ? `translateY(-${n.top - c.top + n.height - p}px)` : `translateY(-${n.top + n.height - p}px)`;
98
- }
99
- function $e(e) {
100
- return typeof e == "function" ? e() : e;
101
- }
102
- function J(e, o, r) {
103
- const n = $e(r), c = po(e, o, n);
104
- c && (o.style.webkitTransform = c, o.style.transform = c);
105
- }
106
- const Ee = /* @__PURE__ */ x.forwardRef(function(o, r) {
107
- const n = ke(), c = {
108
- enter: n.transitions.easing.easeOut,
109
- exit: n.transitions.easing.sharp
110
- }, l = {
111
- enter: n.transitions.duration.enteringScreen,
112
- exit: n.transitions.duration.leavingScreen
113
- }, {
114
- addEndListener: u,
115
- appear: f = !0,
116
- children: p,
117
- container: b,
118
- direction: h = "down",
119
- easing: P = c,
120
- in: $,
121
- onEnter: A,
122
- onEntered: z,
123
- onEntering: j,
124
- onExit: E,
125
- onExited: N,
126
- onExiting: M,
127
- style: O,
128
- timeout: H = l,
129
- // eslint-disable-next-line react/prop-types
130
- TransitionComponent: L = ro,
131
- ...B
132
- } = o, d = x.useRef(null), w = ao(oo(p), d, r), k = (s) => (g) => {
133
- s && (g === void 0 ? s(d.current) : s(d.current, g));
134
- }, y = k((s, g) => {
135
- J(h, s, b), to(s), A && A(s, g);
136
- }), m = k((s, g) => {
137
- const W = me({
138
- timeout: H,
139
- style: O,
140
- easing: P
141
- }, {
142
- mode: "enter"
143
- });
144
- s.style.webkitTransition = n.transitions.create("-webkit-transform", {
145
- ...W
146
- }), s.style.transition = n.transitions.create("transform", {
147
- ...W
148
- }), s.style.webkitTransform = "none", s.style.transform = "none", j && j(s, g);
149
- }), S = k(z), U = k(M), ee = k((s) => {
150
- const g = me({
151
- timeout: H,
152
- style: O,
153
- easing: P
154
- }, {
155
- mode: "exit"
156
- });
157
- s.style.webkitTransition = n.transitions.create("-webkit-transform", g), s.style.transition = n.transitions.create("transform", g), J(h, s, b), E && E(s);
158
- }), oe = k((s) => {
159
- s.style.webkitTransition = "", s.style.transition = "", N && N(s);
160
- }), re = (s) => {
161
- u && u(d.current, s);
162
- }, D = x.useCallback(() => {
163
- d.current && J(h, d.current, b);
164
- }, [h, b]);
165
- return x.useEffect(() => {
166
- if ($ || h === "down" || h === "right")
167
- return;
168
- const s = _e(() => {
169
- d.current && J(h, d.current, b);
170
- }), g = Te(d.current);
171
- return g.addEventListener("resize", s), () => {
172
- s.clear(), g.removeEventListener("resize", s);
173
- };
174
- }, [h, $, b]), x.useEffect(() => {
175
- $ || D();
176
- }, [$, D]), /* @__PURE__ */ a(L, {
177
- nodeRef: d,
178
- onEnter: y,
179
- onEntered: S,
180
- onEntering: m,
181
- onExit: ee,
182
- onExited: oe,
183
- onExiting: U,
184
- addEndListener: re,
185
- appear: f,
186
- in: $,
187
- timeout: H,
188
- ...B,
189
- children: (s, g) => /* @__PURE__ */ x.cloneElement(p, {
190
- ref: w,
191
- style: {
192
- visibility: s === "exited" && !$ ? "hidden" : void 0,
193
- ...O,
194
- ...p.props.style
195
- },
196
- ...g
197
- })
198
- });
199
- });
200
- process.env.NODE_ENV !== "production" && (Ee.propTypes = {
201
- // ┌────────────────────────────── Warning ──────────────────────────────┐
202
- // │ These PropTypes are generated from the TypeScript type definitions. │
203
- // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
204
- // └─────────────────────────────────────────────────────────────────────┘
205
- /**
206
- * Add a custom transition end trigger. Called with the transitioning DOM
207
- * node and a done callback. Allows for more fine grained transition end
208
- * logic. Note: Timeouts are still used as a fallback if provided.
209
- */
210
- addEndListener: t.func,
211
- /**
212
- * Perform the enter transition when it first mounts if `in` is also `true`.
213
- * Set this to `false` to disable this behavior.
214
- * @default true
215
- */
216
- appear: t.bool,
217
- /**
218
- * A single child content element.
219
- */
220
- children: qe.isRequired,
221
- /**
222
- * An HTML element, or a function that returns one.
223
- * It's used to set the container the Slide is transitioning from.
224
- */
225
- container: no(t.oneOfType([eo, t.func]), (e) => {
226
- if (e.open) {
227
- const o = $e(e.container);
228
- if (o && o.nodeType === 1) {
229
- const r = o.getBoundingClientRect();
230
- if (process.env.NODE_ENV !== "test" && r.top === 0 && r.left === 0 && r.right === 0 && r.bottom === 0)
231
- return new Error(["MUI: The `container` prop provided to the component is invalid.", "The anchor element should be part of the document layout.", "Make sure the element is present in the document or that it's not display none."].join(`
232
- `));
233
- } else if (!o || typeof o.getBoundingClientRect != "function" || o.contextElement != null && o.contextElement.nodeType !== 1)
234
- return new Error(["MUI: The `container` prop provided to the component is invalid.", "It should be an HTML element instance."].join(`
235
- `));
236
- }
237
- return null;
238
- }),
239
- /**
240
- * Direction the child node will enter from.
241
- * @default 'down'
242
- */
243
- direction: t.oneOf(["down", "left", "right", "up"]),
244
- /**
245
- * The transition timing function.
246
- * You may specify a single easing or a object containing enter and exit values.
247
- * @default {
248
- * enter: theme.transitions.easing.easeOut,
249
- * exit: theme.transitions.easing.sharp,
250
- * }
251
- */
252
- easing: t.oneOfType([t.shape({
253
- enter: t.string,
254
- exit: t.string
255
- }), t.string]),
256
- /**
257
- * If `true`, the component will transition in.
258
- */
259
- in: t.bool,
260
- /**
261
- * @ignore
262
- */
263
- onEnter: t.func,
264
- /**
265
- * @ignore
266
- */
267
- onEntered: t.func,
268
- /**
269
- * @ignore
270
- */
271
- onEntering: t.func,
272
- /**
273
- * @ignore
274
- */
275
- onExit: t.func,
276
- /**
277
- * @ignore
278
- */
279
- onExited: t.func,
280
- /**
281
- * @ignore
282
- */
283
- onExiting: t.func,
284
- /**
285
- * @ignore
286
- */
287
- style: t.object,
288
- /**
289
- * The duration for the transition, in milliseconds.
290
- * You may specify a single timeout for all transitions, or individually with an object.
291
- * @default {
292
- * enter: theme.transitions.duration.enteringScreen,
293
- * exit: theme.transitions.duration.leavingScreen,
294
- * }
295
- */
296
- timeout: t.oneOfType([t.number, t.shape({
297
- appear: t.number,
298
- enter: t.number,
299
- exit: t.number
300
- })])
301
- });
302
- function ho(e) {
303
- return Ue("MuiDrawer", e);
304
- }
305
- Fe("MuiDrawer", ["root", "docked", "paper", "paperAnchorLeft", "paperAnchorRight", "paperAnchorTop", "paperAnchorBottom", "paperAnchorDockedLeft", "paperAnchorDockedRight", "paperAnchorDockedTop", "paperAnchorDockedBottom", "modal"]);
306
- const Me = (e, o) => {
307
- const {
308
- ownerState: r
309
- } = e;
310
- return [o.root, (r.variant === "permanent" || r.variant === "persistent") && o.docked, o.modal];
311
- }, uo = (e) => {
312
- const {
313
- classes: o,
314
- anchor: r,
315
- variant: n
316
- } = e, c = {
317
- root: ["root"],
318
- docked: [(n === "permanent" || n === "persistent") && "docked"],
319
- modal: ["modal"],
320
- paper: ["paper", `paperAnchor${Z(r)}`, n !== "temporary" && `paperAnchorDocked${Z(r)}`]
321
- };
322
- return Qe(c, ho, o);
323
- }, fo = ce(Je, {
324
- name: "MuiDrawer",
325
- slot: "Root",
326
- overridesResolver: Me
327
- })(Ce(({
328
- theme: e
329
- }) => ({
330
- zIndex: (e.vars || e).zIndex.drawer
331
- }))), be = ce("div", {
332
- shouldForwardProp: Ve,
333
- name: "MuiDrawer",
334
- slot: "Docked",
335
- skipVariantsResolver: !1,
336
- overridesResolver: Me
337
- })({
338
- flex: "0 0 auto"
339
- }), mo = ce(Ke, {
340
- name: "MuiDrawer",
341
- slot: "Paper",
342
- overridesResolver: (e, o) => {
343
- const {
344
- ownerState: r
345
- } = e;
346
- return [o.paper, o[`paperAnchor${Z(r.anchor)}`], r.variant !== "temporary" && o[`paperAnchorDocked${Z(r.anchor)}`]];
347
- }
348
- })(Ce(({
349
- theme: e
350
- }) => ({
351
- overflowY: "auto",
352
- display: "flex",
353
- flexDirection: "column",
354
- height: "100%",
355
- flex: "1 0 auto",
356
- zIndex: (e.vars || e).zIndex.drawer,
357
- // Add iOS momentum scrolling for iOS < 13.0
358
- WebkitOverflowScrolling: "touch",
359
- // temporary style
360
- position: "fixed",
361
- top: 0,
362
- // We disable the focus ring for mouse, touch and keyboard users.
363
- // At some point, it would be better to keep it for keyboard users.
364
- // :focus-ring CSS pseudo-class will help.
365
- outline: 0,
366
- variants: [{
367
- props: {
368
- anchor: "left"
369
- },
370
- style: {
371
- left: 0
372
- }
373
- }, {
374
- props: {
375
- anchor: "top"
376
- },
377
- style: {
378
- top: 0,
379
- left: 0,
380
- right: 0,
381
- height: "auto",
382
- maxHeight: "100%"
383
- }
384
- }, {
385
- props: {
386
- anchor: "right"
387
- },
388
- style: {
389
- right: 0
390
- }
391
- }, {
392
- props: {
393
- anchor: "bottom"
394
- },
395
- style: {
396
- top: "auto",
397
- left: 0,
398
- bottom: 0,
399
- right: 0,
400
- height: "auto",
401
- maxHeight: "100%"
402
- }
403
- }, {
404
- props: ({
405
- ownerState: o
406
- }) => o.anchor === "left" && o.variant !== "temporary",
407
- style: {
408
- borderRight: `1px solid ${(e.vars || e).palette.divider}`
409
- }
410
- }, {
411
- props: ({
412
- ownerState: o
413
- }) => o.anchor === "top" && o.variant !== "temporary",
414
- style: {
415
- borderBottom: `1px solid ${(e.vars || e).palette.divider}`
416
- }
417
- }, {
418
- props: ({
419
- ownerState: o
420
- }) => o.anchor === "right" && o.variant !== "temporary",
421
- style: {
422
- borderLeft: `1px solid ${(e.vars || e).palette.divider}`
423
- }
424
- }, {
425
- props: ({
426
- ownerState: o
427
- }) => o.anchor === "bottom" && o.variant !== "temporary",
428
- style: {
429
- borderTop: `1px solid ${(e.vars || e).palette.divider}`
430
- }
431
- }]
432
- }))), He = {
433
- left: "right",
434
- right: "left",
435
- top: "down",
436
- bottom: "up"
437
- };
438
- function go(e) {
439
- return ["left", "right"].includes(e);
440
- }
441
- function bo({
442
- direction: e
443
- }, o) {
444
- return e === "rtl" && go(o) ? He[o] : o;
445
- }
446
- const V = /* @__PURE__ */ x.forwardRef(function(o, r) {
447
- const n = We({
448
- props: o,
449
- name: "MuiDrawer"
450
- }), c = ke(), l = Xe(), u = {
451
- enter: c.transitions.duration.enteringScreen,
452
- exit: c.transitions.duration.leavingScreen
453
- }, {
454
- anchor: f = "left",
455
- BackdropProps: p,
456
- children: b,
457
- className: h,
458
- elevation: P = 16,
459
- hideBackdrop: $ = !1,
460
- ModalProps: {
461
- BackdropProps: A,
462
- ...z
463
- } = {},
464
- onClose: j,
465
- open: E = !1,
466
- PaperProps: N = {},
467
- SlideProps: M,
468
- // eslint-disable-next-line react/prop-types
469
- TransitionComponent: O = Ee,
470
- transitionDuration: H = u,
471
- variant: L = "temporary",
472
- ...B
473
- } = n, d = x.useRef(!1);
474
- x.useEffect(() => {
475
- d.current = !0;
476
- }, []);
477
- const w = bo({
478
- direction: l ? "rtl" : "ltr"
479
- }, f), y = {
480
- ...n,
481
- anchor: f,
482
- elevation: P,
483
- open: E,
484
- variant: L,
485
- ...B
486
- }, m = uo(y), S = /* @__PURE__ */ a(mo, {
487
- elevation: L === "temporary" ? P : 0,
488
- square: !0,
489
- ...N,
490
- className: _(m.paper, N.className),
491
- ownerState: y,
492
- children: b
493
- });
494
- if (L === "permanent")
495
- return /* @__PURE__ */ a(be, {
496
- className: _(m.root, m.docked, h),
497
- ownerState: y,
498
- ref: r,
499
- ...B,
500
- children: S
501
- });
502
- const U = /* @__PURE__ */ a(O, {
503
- in: E,
504
- direction: He[w],
505
- timeout: H,
506
- appear: d.current,
507
- ...M,
508
- children: S
509
- });
510
- return L === "persistent" ? /* @__PURE__ */ a(be, {
511
- className: _(m.root, m.docked, h),
512
- ownerState: y,
513
- ref: r,
514
- ...B,
515
- children: U
516
- }) : /* @__PURE__ */ a(fo, {
517
- BackdropProps: {
518
- ...p,
519
- ...A,
520
- transitionDuration: H
521
- },
522
- className: _(m.root, m.modal, h),
523
- open: E,
524
- ownerState: y,
525
- onClose: j,
526
- hideBackdrop: $,
527
- ref: r,
528
- ...B,
529
- ...z,
530
- children: U
531
- });
532
- });
533
- process.env.NODE_ENV !== "production" && (V.propTypes = {
534
- // ┌────────────────────────────── Warning ──────────────────────────────┐
535
- // │ These PropTypes are generated from the TypeScript type definitions. │
536
- // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
537
- // └─────────────────────────────────────────────────────────────────────┘
538
- /**
539
- * Side from which the drawer will appear.
540
- * @default 'left'
541
- */
542
- anchor: t.oneOf(["bottom", "left", "right", "top"]),
543
- /**
544
- * @ignore
545
- */
546
- BackdropProps: t.object,
547
- /**
548
- * The content of the component.
549
- */
550
- children: t.node,
551
- /**
552
- * Override or extend the styles applied to the component.
553
- */
554
- classes: t.object,
555
- /**
556
- * @ignore
557
- */
558
- className: t.string,
559
- /**
560
- * The elevation of the drawer.
561
- * @default 16
562
- */
563
- elevation: Ze,
564
- /**
565
- * If `true`, the backdrop is not rendered.
566
- * @default false
567
- */
568
- hideBackdrop: t.bool,
569
- /**
570
- * Props applied to the [`Modal`](https://mui.com/material-ui/api/modal/) element.
571
- * @default {}
572
- */
573
- ModalProps: t.object,
574
- /**
575
- * Callback fired when the component requests to be closed.
576
- * The `reason` parameter can optionally be used to control the response to `onClose`.
577
- *
578
- * @param {object} event The event source of the callback.
579
- * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
580
- */
581
- onClose: t.func,
582
- /**
583
- * If `true`, the component is shown.
584
- * @default false
585
- */
586
- open: t.bool,
587
- /**
588
- * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
589
- * @default {}
590
- */
591
- PaperProps: t.object,
592
- /**
593
- * Props applied to the [`Slide`](https://mui.com/material-ui/api/slide/) element.
594
- */
595
- SlideProps: t.object,
596
- /**
597
- * The system prop that allows defining system overrides as well as additional CSS styles.
598
- */
599
- sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
600
- /**
601
- * The duration for the transition, in milliseconds.
602
- * You may specify a single timeout for all transitions, or individually with an object.
603
- * @default {
604
- * enter: theme.transitions.duration.enteringScreen,
605
- * exit: theme.transitions.duration.leavingScreen,
606
- * }
607
- */
608
- transitionDuration: t.oneOfType([t.number, t.shape({
609
- appear: t.number,
610
- enter: t.number,
611
- exit: t.number
612
- })]),
613
- /**
614
- * The variant to use.
615
- * @default 'temporary'
616
- */
617
- variant: t.oneOf(["permanent", "persistent", "temporary"])
618
- });
619
- const xe = se(/* @__PURE__ */ a("path", {
620
- d: "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
621
- }), "ArrowForward"), ve = se(/* @__PURE__ */ a("path", {
622
- d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12z"
623
- }), "Cancel"), xo = se(/* @__PURE__ */ a("path", {
624
- d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
625
- }), "MoreHoriz"), vo = v("div", {
626
- shouldForwardProp: (e) => q(e)
627
- })(({ backgroundColor: e }) => ({
628
- display: "flex",
629
- flexDirection: "column",
630
- width: "100vw",
631
- position: "relative",
632
- backgroundColor: e,
633
- height: "100vh",
634
- fontFamily: "Roboto, sans-serif",
635
- overflow: "hidden"
636
- })), wo = v("div")(
637
- ({ tabletPadding: e, mobile: o }) => ({
638
- display: "flex",
639
- flexDirection: o ? "column-reverse" : "row",
640
- justifyContent: "flex-start",
641
- alignItems: "flex-start",
642
- width: "100%",
643
- padding: o ? 0 : "0 2px 4px",
644
- paddingLeft: e ? "2px" : 0,
645
- boxSizing: "border-box",
646
- minHeight: `calc(100% - ${i.constants.appHeaderHeight}px)`
647
- })
648
- ), yo = v("div", {
649
- shouldForwardProp: (e) => q(e)
650
- })(({ withActionsPanel: e, tablet: o, borderColor: r, backgroundColor: n }) => ({
651
- display: "flex",
652
- flexDirection: "column",
653
- opacity: e ? 1 : 0,
654
- border: `1px solid ${r}`,
655
- borderRight: 0,
656
- borderRadius: "4px",
657
- borderTopRightRadius: 0,
658
- borderBottomRightRadius: 0,
659
- height: e ? "calc(100% + 2px)" : "100%",
660
- boxSizing: "border-box",
661
- padding: e ? o ? "2px" : "1rem" : 0,
662
- backgroundColor: n,
663
- width: e ? o ? "66px" : "400px" : 0,
664
- maxWidth: o ? "100%" : "25%",
665
- transition: "313ms all ease-in-out",
666
- ...!e && {
667
- border: "none"
668
- }
669
- })), ko = v(V)(
670
- ({ shadowColor: e, backgroundColor: o }) => ({
671
- ...R`
672
- top: ${i.constants.appHeaderHeight}px;
673
- font-family: 'Roboto';
674
-
675
- .MuiDrawer-paper {
676
- width: 360px;
677
- max-width: 100vw;
678
- box-sizing: border-box;
679
- top: ${i.constants.appHeaderHeight}px;
680
- height: calc(100vh - ${i.constants.appHeaderHeight}px);
681
- background-color: ${o};
682
- box-shadow: 0 3px 6px 3px ${e};
683
- padding: 13px;
684
- overflow: visible;
685
- }
686
-
687
- .MuiBackdrop-root {
688
- top: ${i.constants.appHeaderHeight}px;
689
- background-color: transparent;
690
- }
691
- `
692
- })
693
- ), we = v(K)(({ iconColor: e, highlight1: o, highlight2: r, rightDrawer: n = !1 }) => ({
694
- ...R`
695
- position: absolute;
696
- top: -0.5rem;
697
- ${!n && { right: "-0.5rem" }};
698
- ${n && { left: "-0.5rem" }};
699
- z-index: 1;
700
- border-radius: 50%;
701
-
702
- svg {
703
- background-color: ${e};
704
- fill: ${o};
705
- border-radius: 50%;
706
- }
707
-
708
- &:hover,
709
- :focus-visible {
710
- svg {
711
- filter: unset;
712
- background-color: ${r};
713
- fill: ${e};
714
- }
715
- }
716
- `
717
- })), Co = v("div", {
718
- shouldForwardProp: (e) => q(e)
719
- })(({ withActionsPanel: e, borderColor: o, backgroundColor: r, mobileScreen: n }) => ({
720
- display: "flex",
721
- overflow: "hidden",
722
- backgroundColor: r,
723
- borderRadius: "4px",
724
- borderBottomLeftRadius: e ? 0 : "4px",
725
- borderTopLeftRadius: e ? 0 : "4px",
726
- border: `1px solid ${o}`,
727
- width: "100%",
728
- height: "calc(100% + 2px)",
729
- boxSizing: "border-box",
730
- padding: "0 9px",
731
- h1: {
732
- margin: 0
733
- },
734
- ...n && {
735
- border: "none",
736
- borderRadius: 0,
737
- borderBottomLeftRadius: 0,
738
- borderTopLeftRadius: 0
739
- }
740
- })), To = v(V, {
741
- shouldForwardProp: (e) => !["backgroundColor", "shadowColor"].includes(e)
742
- })(({ backgroundColor: e, shadowColor: o }) => ({
743
- ...R`
744
- z-index: 1327;
745
-
746
- .MuiDrawer-paper {
747
- width: 360px;
748
- max-width: 100vw;
749
- height: 100vh;
750
- background-color: ${e};
751
- box-shadow: 0 0px 6px 3px ${o};
752
- }
753
-
754
- .MuiBackdrop-root {
755
- background-color: transparent;
756
- }
757
- `
758
- })), Po = v(V, {
759
- shouldForwardProp: (e) => e != "backgroundColor"
760
- })(({ backgroundColor: e }) => ({
761
- ...R`
762
- z-index: 1300;
763
-
764
- .MuiDrawer-paper {
765
- z-index: 1300;
766
- width: 100vw;
767
- top: ${i.constants.appHeaderHeight}px;
768
- height: calc(100vh - ${i.constants.appHeaderHeight}px - 72px);
769
- background-color: ${e};
770
- box-shadow: none;
771
- }
772
-
773
- .MuiBackdrop-root {
774
- z-index: 1300;
775
- top: ${i.constants.appHeaderHeight}px;
776
- height: calc(100vh - ${i.constants.appHeaderHeight}px);
777
- background-color: transparent;
778
- }
779
- `
780
- })), $o = v("div", {
781
- shouldForwardProp: (e) => q(e)
782
- })(({ backgroundColor: e, open: o }) => ({
783
- ...R`
784
- position: fixed;
785
- transition: height 201ms cubic-bezier(0, 0, 0.2, 1);
786
- z-index: 1300;
787
- bottom: 72px;
788
- width: 100vw;
789
- height: ${o ? `calc(100vh - ${i.constants.appHeaderHeight}px - 72px)` : 0};
790
- overflow: hidden;
791
- background-color: ${e};
792
- box-sizing: border-box;
793
- padding: ${o ? "16px" : 0};
794
- `
795
- })), Eo = v("h1")(({ color: e }) => ({
796
- ...R`
797
- margin: 0;
798
- font-size: 2.1rem;
799
- font-family: 'Roboto';
800
- color: ${e};
801
- `
802
- })), Mo = v(V)(({ backgroundQuaternary: e }) => ({
803
- ...R`
804
- top: ${i.constants.appHeaderHeight}px;
805
- font-family: 'Roboto';
806
- z-index: 1336;
807
-
808
- .MuiDrawer-paper {
809
- width: 100vw;
810
- box-sizing: border-box;
811
- top: ${i.constants.appHeaderHeight}px;
812
- height: calc(100vh - ${i.constants.appHeaderHeight}px);
813
- background-image: linear-gradient(to bottom right, ${i.colors.oldPaper}, ${e});
814
- padding: 0;
815
- }
816
-
817
- .MuiBackdrop-root {
818
- top: ${i.constants.appHeaderHeight}px;
819
- background-color: transparent;
820
- }
821
- `
822
- })), Ho = v("img")(({ width: e, height: o }) => ({
823
- ...R`
824
- width: ${e}px;
825
- height: ${o}px;
826
- `
827
- })), ye = v("div")(({ justifyStart: e }) => ({
828
- ...R`
829
- display: flex;
830
- flex-direction: row;
831
- align-items: flex-start;
832
- justify-content: ${e ? "start" : "space-between"};
833
- padding: 8px 16px 8px 24px;
834
- `
835
- })), Ro = v(V)(() => ({
836
- ...R`
837
- top: ${i.constants.appHeaderHeight}px;
838
- font-family: 'Roboto';
839
-
840
- .MuiDrawer-paper {
841
- width: 360px;
842
- max-width: 100vw;
843
- box-sizing: border-box;
844
- top: ${i.constants.appHeaderHeight}px;
845
- height: calc(100vh - ${i.constants.appHeaderHeight}px);
846
- background-color: ${i.colors.white};
847
- box-shadow: 0 3px 6px 3px ${i.colors.gray};
848
- padding: 0;
849
- overflow: visible;
850
- }
851
-
852
- .MuiBackdrop-root {
853
- top: ${i.constants.appHeaderHeight}px;
854
- background-color: transparent;
855
- }
856
- `
857
- })), er = ({
858
- navProps: e,
859
- appHeaderProps: o = {},
860
- userInfo: r,
861
- userSettingsEnabled: n = !0,
862
- userProfileMenuItems: c = [],
863
- actionsPanelContent: l,
864
- navWidth: u = i.constants.navDefaultWidth,
865
- breakpoints: f = { mobile: i.screenSizes.mobile, tablet: i.screenSizes.tablet },
866
- children: p,
867
- themeColors: b = {},
868
- logoProps: h = {},
869
- loggedIn: P,
870
- mobileActionsPanelOpen: $
871
- }) => {
872
- const [A, z] = G(!1), [j, E] = G(!1), [N, M] = G(!1), [O, H] = G(!1), { mobile: L = i.screenSizes.mobile, tablet: B = i.screenSizes.tablet } = f, d = ge(`(max-width: ${L})`), w = ge(`(max-width: ${B})`) && !d, k = !d && !w, {
873
- backgroundPrimary: y = i.colors.whiteGreen,
874
- backgroundSecondary: m = i.colors.whiteGreenA,
875
- backgroundTertiary: S = i.colors.sage,
876
- highlightPrimary: U = i.colors.sunlight,
877
- backgroundQuaternary: ee = i.colors.moss,
878
- highlightSecondary: oe = i.colors.dandelion,
879
- highlightTertiary: re = `${i.colors.dandelion}99`,
880
- iconPrimary: D = i.colors.darkGreen,
881
- shadowPrimary: s = i.colors.darkGreenO99,
882
- shadowSecondary: g = i.boxShadows.darkGreen,
883
- shadowTertiary: W = i.boxShadows.darkGreenThick,
884
- borderPrimary: X = i.colors.green,
885
- scrollColor: I = i.colors.darkGreenO99,
886
- iconColors: Re
887
- } = b, { logoSrc: le = Ae, logoWidth: pe = 36, logoHeight: de = 50 } = h, Se = {
888
- backgroundPrimary: y,
889
- backgroundSecondary: m,
890
- backgroundTertiary: S,
891
- highlightPrimary: U,
892
- highlightSecondary: oe,
893
- highlightTertiary: re,
894
- borderPrimary: X,
895
- iconPrimary: D,
896
- shadowPrimary: s,
897
- shadowSecondary: g,
898
- shadowTertiary: W,
899
- scrollColor: I
900
- }, De = { logoSrc: le, logoWidth: pe, logoHeight: de }, te = l != null, ze = { ...o, navWidth: u, loggedIn: P }, Q = { ...e, themeColors: Se }, Ne = {
901
- ...Q,
902
- navWidth: `${u}px`,
903
- isMobile: d
904
- }, he = [
905
- // { label: 'Log Out', icon: <LogoutIcon />, onClick: onLogout },
906
- ...c
907
- ].map((C) => ({
908
- ...C,
909
- onClick: () => {
910
- C.onClick && C.onClick(), M(!1);
911
- }
912
- })), { navItems: ne } = e, Oe = ne.map((C) => ({
913
- ...C,
914
- onClick: () => {
915
- C.onClick && C.onClick(), z(!1);
916
- }
917
- })), ie = {
918
- ...Q,
919
- navWidth: "100%",
920
- isTablet: !0,
921
- navItems: Oe
922
- };
923
- let ae = ne.map((C) => ({
924
- ...C,
925
- onClick: () => {
926
- C.onClick && C.onClick(), H(!1);
927
- }
928
- })), ue = [];
929
- ne.length > 4 && d && (ue = ae.splice(3), ae.push({
930
- label: "More",
931
- icon: /* @__PURE__ */ a(xo, {}),
932
- onClick: () => H(!0)
933
- }));
934
- const Le = {
935
- ...Q,
936
- navWidth: "100%",
937
- navItems: ae,
938
- isMobile: !0,
939
- activeRoute: O ? "More" : Q.activeRoute
940
- }, Be = {
941
- ...Q,
942
- navWidth: "100%",
943
- navItems: ue,
944
- isTablet: !0
945
- };
946
- return /* @__PURE__ */ T(vo, { backgroundColor: m, children: [
947
- /* @__PURE__ */ a(
948
- Ie,
949
- {
950
- ...ze,
951
- hamburgerMenu: w,
952
- onHamburgerMenuClick: () => z(!0),
953
- onUserMenuClick: () => M(!0),
954
- logoProps: De,
955
- iconColor: D,
956
- isMobile: d,
957
- themeProps: { shadowSecondary: g, shadowTertiary: W, iconPrimary: D, borderPrimary: X },
958
- iconColors: Re,
959
- userName: r == null ? void 0 : r.name,
960
- userSettingsEnabled: n
961
- }
962
- ),
963
- /* @__PURE__ */ T(wo, { tabletPadding: w, mobile: d, children: [
964
- k && /* @__PURE__ */ a(F, { ...Ne }),
965
- d && /* @__PURE__ */ T(fe, { children: [
966
- /* @__PURE__ */ a(F, { ...Le }),
967
- /* @__PURE__ */ a(
968
- Po,
969
- {
970
- open: O,
971
- onClose: () => H(!1),
972
- backgroundColor: m,
973
- anchor: "right",
974
- children: /* @__PURE__ */ a(F, { ...Be })
975
- }
976
- )
977
- ] }),
978
- w && /* @__PURE__ */ T(
979
- To,
980
- {
981
- open: A,
982
- onClose: () => z(!1),
983
- backgroundColor: m,
984
- shadowColor: s,
985
- children: [
986
- /* @__PURE__ */ T(ye, { children: [
987
- /* @__PURE__ */ a(Ho, { src: le, alt: "logo", width: pe, height: de }),
988
- /* @__PURE__ */ a(K, { variant: "icon", size: 36, onClick: () => z(!1), color: D, children: /* @__PURE__ */ a(je, {}) })
989
- ] }),
990
- /* @__PURE__ */ a(F, { ...ie })
991
- ]
992
- }
993
- ),
994
- w && /* @__PURE__ */ T(
995
- ko,
996
- {
997
- open: j && te,
998
- onClose: () => E(!1),
999
- shadowColor: s,
1000
- backgroundColor: S,
1001
- children: [
1002
- /* @__PURE__ */ a(
1003
- we,
1004
- {
1005
- variant: "icon",
1006
- size: 24,
1007
- onClick: () => E(!1),
1008
- iconColor: D,
1009
- highlight1: m,
1010
- highlight2: m,
1011
- children: /* @__PURE__ */ a(ve, {})
1012
- }
1013
- ),
1014
- /* @__PURE__ */ a(Y, { scrollColor: I, direction: "vertical", children: l && l })
1015
- ]
1016
- }
1017
- ),
1018
- (w || k) && /* @__PURE__ */ T(
1019
- Ro,
1020
- {
1021
- anchor: "right",
1022
- open: N,
1023
- onClose: () => M(!1),
1024
- children: [
1025
- /* @__PURE__ */ a(
1026
- we,
1027
- {
1028
- variant: "icon",
1029
- size: 24,
1030
- onClick: () => M(!1),
1031
- iconColor: i.colors.midnight,
1032
- highlight1: i.colors.white,
1033
- highlight2: m,
1034
- rightDrawer: !0,
1035
- children: /* @__PURE__ */ a(ve, {})
1036
- }
1037
- ),
1038
- /* @__PURE__ */ a(
1039
- F,
1040
- {
1041
- ...ie,
1042
- navItems: he,
1043
- themeColors: {
1044
- iconPrimary: i.colors.midnight,
1045
- highlightPrimary: y,
1046
- highlightTertiary: m,
1047
- shadowSecondary: g,
1048
- scrollColor: I
1049
- }
1050
- }
1051
- )
1052
- ]
1053
- }
1054
- ),
1055
- d && /* @__PURE__ */ T(fe, { children: [
1056
- /* @__PURE__ */ T(
1057
- Mo,
1058
- {
1059
- anchor: "right",
1060
- open: N,
1061
- onClose: () => M(!1),
1062
- backgroundQuaternary: ee,
1063
- children: [
1064
- /* @__PURE__ */ T(ye, { children: [
1065
- /* @__PURE__ */ a(Eo, { color: i.colors.midnight, children: "Settings" }),
1066
- /* @__PURE__ */ a(
1067
- K,
1068
- {
1069
- variant: "icon",
1070
- size: 36,
1071
- onClick: () => M(!1),
1072
- color: i.colors.midnight,
1073
- children: /* @__PURE__ */ a(xe, {})
1074
- }
1075
- )
1076
- ] }),
1077
- /* @__PURE__ */ a(
1078
- F,
1079
- {
1080
- ...ie,
1081
- navItems: he,
1082
- themeColors: {
1083
- iconPrimary: i.colors.midnight,
1084
- highlightPrimary: y,
1085
- highlightTertiary: m,
1086
- shadowSecondary: g,
1087
- scrollColor: I
1088
- }
1089
- }
1090
- )
1091
- ]
1092
- }
1093
- ),
1094
- /* @__PURE__ */ a($o, { backgroundColor: S, open: $, children: /* @__PURE__ */ a(Y, { scrollColor: I, direction: "vertical", children: l }) })
1095
- ] }),
1096
- !d && /* @__PURE__ */ T(
1097
- yo,
1098
- {
1099
- withActionsPanel: te,
1100
- tablet: w,
1101
- borderColor: X,
1102
- backgroundColor: S,
1103
- children: [
1104
- k && /* @__PURE__ */ a(Y, { scrollColor: I, direction: "vertical", children: l && l }),
1105
- w && /* @__PURE__ */ a(
1106
- K,
1107
- {
1108
- variant: "icon",
1109
- size: 36,
1110
- onClick: () => E(!0),
1111
- color: D,
1112
- children: /* @__PURE__ */ a(xe, {})
1113
- }
1114
- )
1115
- ]
1116
- }
1117
- ),
1118
- /* @__PURE__ */ a(
1119
- Co,
1120
- {
1121
- withActionsPanel: te,
1122
- borderColor: X,
1123
- backgroundColor: y,
1124
- mobileScreen: d,
1125
- children: /* @__PURE__ */ a(Y, { scrollColor: I, children: p })
1126
- }
1127
- )
1128
- ] })
1129
- ] });
1130
- };
1131
- export {
1132
- er as A,
1133
- ge as u
1134
- };