@photon-ai/pho-ui 4.4.0 → 4.5.0

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.
@@ -0,0 +1,1797 @@
1
+ "use client";
2
+ import { t as p } from "./cn-ChIgwEl3.js";
3
+ import { n as $e } from "./link-provider-DXzDQ08N.js";
4
+ import { FADE_ENTRANCE as ma, FADE_SWAP as fa, SPRING_ENTRANCE as ha, TRAVEL_LINEAR as ga, fadeThroughBlur as ne } from "../motion.js";
5
+ import { a as Z, o as we } from "./button-CgUS0j3D.js";
6
+ import { t as ba } from "./error-VvHnteyf.js";
7
+ import { n as va, t as ya } from "./IconArrowsMinimize-BfPUGuCB.js";
8
+ import { t as se } from "./IconChevronLeft-CSWMKQ4C.js";
9
+ import { t as xa } from "./IconChevronRight-CzoJnYNI.js";
10
+ import { t as Ie } from "./IconSearch-BKAHkLyX.js";
11
+ import { i as Ne, n as wa, o as Na, r as Aa } from "./data-table-Mog6m3d9.js";
12
+ import { t as _a } from "./IconX-pZ9vrtSr.js";
13
+ import { t as Ca } from "./toast-DUvjSZF7.js";
14
+ import { t as he } from "./input-group-fc9_jD4d.js";
15
+ import { t as Ea } from "./animated-height-I44sUq0n.js";
16
+ import { n as Ae, t as J } from "./scroll-area-DSwD9th7.js";
17
+ import { i as ka } from "./checkbox-CLPmblNA.js";
18
+ import { t as Sa } from "./form-AiHbbw4m.js";
19
+ import { i as Q } from "./menu-BQeprfxB.js";
20
+ import { t as Ta } from "./ghost-search-AmVXd0zE.js";
21
+ import { t as j } from "./tooltip-BTF7GChl.js";
22
+ import { Children as ee, Fragment as Ra, createContext as G, isValidElement as qe, useCallback as _e, useContext as S, useEffect as O, useId as Pa, useLayoutEffect as z, useMemo as $, useRef as k, useState as N, useSyncExternalStore as ue } from "react";
23
+ import { Fragment as de, jsx as a, jsxs as y } from "react/jsx-runtime";
24
+ import { AnimatePresence as q, motion as A, useIsPresent as Ia, useReducedMotion as M } from "motion/react";
25
+ import { Dialog as re } from "@base-ui/react/dialog";
26
+ import { createPortal as Oe } from "react-dom";
27
+ var Ce = "rounded-base border border-pho-secondary bg-pho-primary", le = "divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0", je = `${Ce} ${le} gap-0`, Be = "flex min-w-0 flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5", Oa = "flex min-h-[4.25rem] min-w-0 flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6", Ba = "flex flex-col gap-3 px-5 py-4", La = "-mx-5 -mb-4 flex items-center rounded-b-[calc(0.75rem-1px)] bg-pho-secondary py-1 pr-3 pl-5", Ma = "-mx-2 -mt-1.5 flex items-center rounded-sm bg-pho-secondary px-2 py-0.5", P = ha, D = ma, K = 12, Ke = G(null), Da = 768;
28
+ function Ha(e, t = "default") {
29
+ return Math.round(t === "wide" ? Math.min(Math.max(e * (2 / 3), 448), 768) : Math.min(Math.max(e * 0.4, 320), 448));
30
+ }
31
+ var Xe = G(null), Qe = G(null);
32
+ function Fa(e) {
33
+ const [t, n] = N(null), [r, l] = N(!1), [s, u] = N(!1), [d, i] = N(!1), [c, f] = N(() => ({
34
+ width: typeof window > "u" ? 0 : window.innerWidth,
35
+ height: null
36
+ }));
37
+ return z(() => {
38
+ const o = e.current;
39
+ if (!r || o == null) return;
40
+ const m = Se(o), h = () => {
41
+ const b = o.offsetWidth, x = m?.clientHeight ?? null;
42
+ f((v) => v.width === b && v.height === x ? v : {
43
+ width: b,
44
+ height: x
45
+ });
46
+ };
47
+ if (h(), typeof ResizeObserver > "u") return;
48
+ const g = new ResizeObserver(h);
49
+ return g.observe(o), m != null && g.observe(m), () => g.disconnect();
50
+ }, [e, r]), {
51
+ host: $(() => ({
52
+ slot: t,
53
+ paneNarrow: c.width < Da,
54
+ paneWidth: c.width,
55
+ paneHeight: c.height,
56
+ setOpen: u,
57
+ setAsPage: i,
58
+ setPresent: l
59
+ }), [t, c]),
60
+ setSlot: n,
61
+ open: s,
62
+ asPage: d
63
+ };
64
+ }
65
+ function za(e) {
66
+ return e == null ? window.scrollY : e.scrollTop;
67
+ }
68
+ function Le(e, t) {
69
+ e == null ? window.scrollTo({ top: t }) : e.scrollTop = t;
70
+ }
71
+ function Ga({ condense: e = !0, width: t, prerendered: n = !1, className: r, children: l, ref: s, ...u }) {
72
+ const d = S(ae)?.adopt ?? !1, i = S(Qe), c = e === "pinned", [f, o] = N(!1), m = k(0), h = _e((V) => {
73
+ m.current += V ? 1 : -1, o(m.current > 0);
74
+ }, []), g = t === "wide" || t == null && f, [b] = N(Na), x = k(null), v = $(() => ({
75
+ ref: x,
76
+ prerendered: n
77
+ }), [n]), [_, w] = N(null), [C, R] = N(null);
78
+ O(() => {
79
+ if (i != null)
80
+ return i.setBack(C), () => i.setBack(null);
81
+ }, [i, C]);
82
+ const { host: I, setSlot: B, open: L, asPage: W } = Fa(x), H = L && W, te = $(() => ({
83
+ setTitle: w,
84
+ setTail: R,
85
+ pinned: c
86
+ }), [c]), me = $(() => ({
87
+ tail: i == null ? C : null,
88
+ silent: H || i != null
89
+ }), [
90
+ C,
91
+ i,
92
+ H
93
+ ]), T = k(!1), E = k(0);
94
+ z(() => {
95
+ const V = x.current;
96
+ if (H === T.current || V == null) return;
97
+ T.current = H;
98
+ const fe = Se(V);
99
+ H ? (E.current = za(fe), Le(fe, 0)) : Le(fe, E.current);
100
+ }, [H]);
101
+ const X = e && !c ? /* @__PURE__ */ a(Ye, {
102
+ title: _,
103
+ tail: i == null ? C : null,
104
+ silent: H || i != null
105
+ }) : null, F = /* @__PURE__ */ a("div", {
106
+ "data-basic-page-column": "",
107
+ className: p("mx-auto flex w-full min-w-0 flex-1 flex-col px-5 pt-12 pb-12 *:min-w-0", i == null && (g ? "max-w-[84rem] md:px-8" : "max-w-[44.5rem]"), c ? p("[&_[data-basic-page-back]]:hidden", d && "pt-0") : d || i != null ? "[&_[data-basic-page-back]]:hidden" : "has-[[data-basic-page-back]]:pt-16"),
108
+ children: e ? /* @__PURE__ */ a(ke.Provider, {
109
+ value: te,
110
+ children: /* @__PURE__ */ a(Ze.Provider, {
111
+ value: me,
112
+ children: l
113
+ })
114
+ }) : l
115
+ });
116
+ return /* @__PURE__ */ a("div", {
117
+ "data-basic-page-root": "",
118
+ "data-basic-page-width": g ? "wide" : void 0,
119
+ "data-basic-page-prerendered": n ? "" : void 0,
120
+ "data-basic-page-pinned": c ? "" : void 0,
121
+ className: p("relative flex min-h-full w-full min-w-0 flex-row", r),
122
+ ...u,
123
+ ref: (V) => {
124
+ x.current = V, typeof s == "function" ? s(V) : s != null && (s.current = V);
125
+ },
126
+ children: /* @__PURE__ */ a(Ke.Provider, {
127
+ value: v,
128
+ children: /* @__PURE__ */ a(Xe.Provider, {
129
+ value: I,
130
+ children: /* @__PURE__ */ a(Aa.Provider, {
131
+ value: h,
132
+ children: /* @__PURE__ */ y(Ne.Provider, {
133
+ value: b,
134
+ children: [/* @__PURE__ */ y("div", {
135
+ "data-basic-page-main": "",
136
+ className: p("flex min-w-0 flex-1 flex-col", H && "hidden"),
137
+ children: [X, F]
138
+ }), /* @__PURE__ */ a("div", {
139
+ ref: B,
140
+ className: "contents"
141
+ })]
142
+ })
143
+ })
144
+ })
145
+ })
146
+ });
147
+ }
148
+ var ge = /* @__PURE__ */ new Set();
149
+ function Ye({ title: e, tail: t, silent: n = !1, pinned: r = !1, className: l }) {
150
+ const s = M(), [u, d] = N(() => r || !n && ge.size > 0), i = S(ae), c = Pa();
151
+ z(() => {
152
+ if (!(!u || n))
153
+ return ge.add(c), () => {
154
+ ge.delete(c);
155
+ };
156
+ }, [
157
+ c,
158
+ u,
159
+ n
160
+ ]), O(() => {
161
+ if (i != null) {
162
+ if (n) {
163
+ i.store.clear(c);
164
+ return;
165
+ }
166
+ i.store.set(c, {
167
+ condensed: u,
168
+ title: e?.label ?? null,
169
+ back: t
170
+ });
171
+ }
172
+ }, [
173
+ i,
174
+ c,
175
+ u,
176
+ e,
177
+ t,
178
+ n
179
+ ]), O(() => {
180
+ if (i != null)
181
+ return () => i.store.clear(c);
182
+ }, [i, c]);
183
+ const f = e?.el ?? null;
184
+ O(() => {
185
+ if (r) return;
186
+ if (f == null || typeof IntersectionObserver > "u") {
187
+ if (typeof requestAnimationFrame > "u") return;
188
+ const g = requestAnimationFrame(() => d(!1));
189
+ return () => cancelAnimationFrame(g);
190
+ }
191
+ const h = new IntersectionObserver(([g]) => d(g != null && !g.isIntersecting), { root: Se(f) });
192
+ return h.observe(f), () => h.disconnect();
193
+ }, [f, r]);
194
+ const o = s ? 0 : -Za, m = s ? "blur(0px)" : `blur(${Ae}px)`;
195
+ return /* @__PURE__ */ a("div", {
196
+ "data-basic-page-condense": "",
197
+ className: p("sticky top-0 z-20 h-0 overflow-visible", l),
198
+ children: /* @__PURE__ */ a(q, {
199
+ initial: !1,
200
+ children: u && !(i?.adopt ?? !1) && /* @__PURE__ */ y(A.div, {
201
+ initial: { opacity: 0 },
202
+ animate: { opacity: 1 },
203
+ exit: { opacity: 0 },
204
+ transition: oe,
205
+ className: "border-pho-secondary bg-pho-page/85 relative grid h-12 grid-cols-[1fr_minmax(0,auto)_1fr] items-center border-b px-3 backdrop-blur",
206
+ children: [/* @__PURE__ */ a("div", {
207
+ className: "flex min-w-0 items-center justify-start",
208
+ children: t != null && /* @__PURE__ */ a(we, {
209
+ variant: "ghost",
210
+ size: "sm",
211
+ href: t.href,
212
+ onClick: t.onClick,
213
+ prefix: /* @__PURE__ */ a("span", {
214
+ className: "inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0",
215
+ children: /* @__PURE__ */ a(se, {})
216
+ }),
217
+ className: "min-w-max",
218
+ children: t.label
219
+ })
220
+ }), /* @__PURE__ */ a(A.span, {
221
+ initial: {
222
+ opacity: 0,
223
+ y: o,
224
+ filter: m
225
+ },
226
+ animate: {
227
+ opacity: 1,
228
+ y: 0,
229
+ filter: "blur(0px)"
230
+ },
231
+ exit: {
232
+ opacity: 0,
233
+ y: o,
234
+ filter: m
235
+ },
236
+ transition: {
237
+ ...oe,
238
+ y: Ja
239
+ },
240
+ className: "text-pho-primary block max-w-full min-w-0 truncate text-center text-base font-medium",
241
+ children: e?.label
242
+ })]
243
+ })
244
+ })
245
+ });
246
+ }
247
+ function Wa(e) {
248
+ return e.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
249
+ }
250
+ function Va(e) {
251
+ if (!(typeof e != "string" && typeof e != "number"))
252
+ return Wa(String(e)) || void 0;
253
+ }
254
+ function Ee(e, t) {
255
+ if (e !== "")
256
+ return e ?? Va(t);
257
+ }
258
+ var $a = (e) => `basic-page-morph-${e}`, qa = { layout: P }, Me = 10, De = {
259
+ delay: 0.2,
260
+ duration: 0.12,
261
+ ease: "easeOut"
262
+ }, ja = {
263
+ duration: 0.18,
264
+ ease: "easeOut"
265
+ }, Ka = -8, Xa = {
266
+ duration: 0.16,
267
+ ease: "easeOut"
268
+ }, Qa = {
269
+ delay: 0.14,
270
+ duration: 0.16,
271
+ ease: "easeOut"
272
+ }, Ue = {
273
+ duration: 0.12,
274
+ ease: "easeOut"
275
+ }, Y = [];
276
+ function Ya(e) {
277
+ const t = k({ labels: e });
278
+ t.current.labels = e, z(() => {
279
+ const n = t.current;
280
+ return Y.push(n), () => {
281
+ Y.splice(Y.indexOf(n), 1);
282
+ };
283
+ }, []);
284
+ }
285
+ function Je() {
286
+ const [e] = N(() => {
287
+ const t = Y[Y.length - 1];
288
+ return t ? { labels: [...t.labels] } : null;
289
+ });
290
+ return e;
291
+ }
292
+ var ke = G(null), Ze = G({
293
+ tail: null,
294
+ silent: !1
295
+ }), ye = {
296
+ condensed: !1,
297
+ title: null,
298
+ back: null
299
+ }, ae = G(null), pe = () => () => {
300
+ }, He = () => ye;
301
+ function Ua({ adopt: e = !0, children: t }) {
302
+ const [n] = N(() => {
303
+ let l = ye, s = null;
304
+ const u = /* @__PURE__ */ new Set(), d = () => {
305
+ for (const i of u) i();
306
+ };
307
+ return {
308
+ get: () => l,
309
+ set(i, c) {
310
+ s = i, l = c, d();
311
+ },
312
+ clear(i) {
313
+ s === i && (s = null, l = ye, d());
314
+ },
315
+ subscribe(i) {
316
+ return u.add(i), () => u.delete(i);
317
+ }
318
+ };
319
+ }), r = $(() => ({
320
+ store: n,
321
+ adopt: e
322
+ }), [n, e]);
323
+ return /* @__PURE__ */ a(ae.Provider, {
324
+ value: r,
325
+ children: t
326
+ });
327
+ }
328
+ function Rn() {
329
+ const e = S(ae);
330
+ return ue(e?.store.subscribe ?? pe, e?.store.get ?? He, e?.store.get ?? He);
331
+ }
332
+ var oe = fa, Ja = ga, Za = -8;
333
+ function Se(e) {
334
+ if (typeof getComputedStyle != "function") return null;
335
+ for (let t = e.parentElement; t != null && t !== document.body; t = t.parentElement) {
336
+ const { overflowY: n } = getComputedStyle(t);
337
+ if (n === "auto" || n === "scroll") return t;
338
+ }
339
+ return null;
340
+ }
341
+ var be = /* @__PURE__ */ new Map(), et = 96;
342
+ function at(e) {
343
+ const t = e.closest("[data-basic-page-root]"), n = t?.querySelector("[data-basic-page-column]");
344
+ return !t || !n ? 0 : n.getBoundingClientRect().left - t.getBoundingClientRect().left;
345
+ }
346
+ function ea(e) {
347
+ const [t] = N(() => {
348
+ if (e == null) return !1;
349
+ const r = be.get(e);
350
+ return r != null && r.visible && r.el.isConnected && at(r.el) <= et;
351
+ }), n = k(null);
352
+ return O(() => {
353
+ if (e == null || typeof IntersectionObserver > "u") return;
354
+ const r = n.current;
355
+ if (!r) return;
356
+ const l = new IntersectionObserver(([s]) => {
357
+ s && be.set(e, {
358
+ visible: s.isIntersecting,
359
+ el: r
360
+ });
361
+ });
362
+ return l.observe(r), () => {
363
+ l.disconnect(), be.delete(e);
364
+ };
365
+ }, [e]), {
366
+ fly: t,
367
+ ref: n
368
+ };
369
+ }
370
+ var tt = {
371
+ fade: {
372
+ initial: { opacity: 0 },
373
+ animate: { opacity: 1 },
374
+ transition: { opacity: D }
375
+ },
376
+ rise: {
377
+ initial: {
378
+ opacity: 0,
379
+ y: K
380
+ },
381
+ animate: {
382
+ opacity: 1,
383
+ y: 0
384
+ },
385
+ transition: {
386
+ y: P,
387
+ opacity: D
388
+ }
389
+ },
390
+ slide: {
391
+ initial: { x: "-100%" },
392
+ animate: { x: 0 },
393
+ transition: { x: Qa }
394
+ }
395
+ };
396
+ function aa({ morphId: e, fromClassName: t, fly: n, morphRef: r, arrival: l, className: s, children: u }) {
397
+ const [d, i] = N(!1), c = !n && l != null ? tt[l] : null;
398
+ return /* @__PURE__ */ y(A.span, {
399
+ ref: r,
400
+ layoutId: $a(e),
401
+ initial: c?.initial,
402
+ animate: c?.animate,
403
+ transition: n ? qa : {
404
+ layout: { duration: 0 },
405
+ ...c?.transition
406
+ },
407
+ onLayoutAnimationStart: () => {
408
+ n && i(!0);
409
+ },
410
+ onLayoutAnimationComplete: () => i(!1),
411
+ className: p("relative inline-block", s),
412
+ children: [u, d && /* @__PURE__ */ a(A.span, {
413
+ "aria-hidden": !0,
414
+ initial: { opacity: 1 },
415
+ animate: { opacity: 0 },
416
+ transition: ja,
417
+ onAnimationComplete: () => i(!1),
418
+ className: p("absolute inset-0", t),
419
+ children: u
420
+ })]
421
+ });
422
+ }
423
+ var Fe = "max-w-full min-w-0 truncate align-top", ze = "flex shrink-0 items-center";
424
+ function nt({ id: e, morphId: t, enter: n, trailing: r, className: l, children: s, ...u }) {
425
+ const d = Ee(e, s), i = M(), c = Re(n === !0), f = ea(t), o = Je(), m = !i && (t != null || c === !0), h = c || o != null ? "rise" : void 0, g = S(ke), b = g?.pinned ?? !1, x = S(ae)?.adopt ?? !1, v = S(Ze), _ = k(null);
426
+ z(() => {
427
+ if (!(g == null || b))
428
+ return g.setTitle({
429
+ label: s,
430
+ el: _.current
431
+ }), () => g.setTitle(null);
432
+ }, [
433
+ g,
434
+ b,
435
+ s
436
+ ]);
437
+ const [w, C] = N(f.fly && o != null);
438
+ z(() => {
439
+ Y.length > 0 && C(!1);
440
+ }, []);
441
+ const R = r != null && r !== !1, I = !i && (t != null ? f.fly || h != null : c === !0), B = t != null && !i ? /* @__PURE__ */ a(aa, {
442
+ morphId: t,
443
+ fromClassName: "text-pho-secondary",
444
+ fly: f.fly,
445
+ morphRef: f.ref,
446
+ arrival: h,
447
+ className: Fe,
448
+ children: s
449
+ }) : c && !i ? /* @__PURE__ */ a(A.span, {
450
+ initial: {
451
+ opacity: 0,
452
+ y: K
453
+ },
454
+ animate: {
455
+ opacity: 1,
456
+ y: 0
457
+ },
458
+ transition: {
459
+ y: P,
460
+ opacity: D
461
+ },
462
+ className: p("inline-block", Fe),
463
+ children: s
464
+ }) : R ? /* @__PURE__ */ a("span", {
465
+ className: "min-w-0 truncate",
466
+ children: s
467
+ }) : s;
468
+ return /* @__PURE__ */ y(de, { children: [b && g != null && /* @__PURE__ */ a(Ye, {
469
+ title: {
470
+ label: s,
471
+ el: _.current
472
+ },
473
+ tail: v.tail,
474
+ silent: v.silent,
475
+ pinned: !0,
476
+ className: x ? void 0 : "-mt-12"
477
+ }), /* @__PURE__ */ y("h1", {
478
+ id: d,
479
+ "data-basic-page-title": "",
480
+ className: p("text-display-base text-pho-primary max-w-full min-w-0 scroll-mt-12 px-5 font-medium", m ? "whitespace-nowrap" : "truncate", b && "sr-only", l),
481
+ ...u,
482
+ ref: (L) => {
483
+ _.current = L;
484
+ const W = u.ref;
485
+ typeof W == "function" ? W(L) : W != null && (W.current = L);
486
+ },
487
+ children: [R ? /* @__PURE__ */ y("span", {
488
+ className: "flex max-w-full min-w-0 items-center gap-2",
489
+ children: [B, I ? /* @__PURE__ */ a(A.span, {
490
+ "data-basic-page-title-trailing": "",
491
+ initial: {
492
+ opacity: 0,
493
+ y: K
494
+ },
495
+ animate: {
496
+ opacity: 1,
497
+ y: 0
498
+ },
499
+ transition: {
500
+ y: P,
501
+ opacity: D
502
+ },
503
+ className: ze,
504
+ children: r
505
+ }) : /* @__PURE__ */ a("span", {
506
+ "data-basic-page-title-trailing": "",
507
+ className: ze,
508
+ children: r
509
+ })]
510
+ }) : B, w && /* @__PURE__ */ a(A.span, {
511
+ "aria-hidden": !0,
512
+ initial: { opacity: 1 },
513
+ animate: { opacity: 0 },
514
+ transition: Ue,
515
+ onAnimationComplete: () => C(!1),
516
+ className: p("text-pho-secondary pointer-events-none absolute inline-flex items-center", Gt),
517
+ children: /* @__PURE__ */ a(se, {})
518
+ })]
519
+ })] });
520
+ }
521
+ var ta = G(!1);
522
+ function rt() {
523
+ const e = S(ta), t = M(), [n] = N(() => e && !t);
524
+ return n;
525
+ }
526
+ var it = {
527
+ height: 0,
528
+ opacity: 0,
529
+ paddingTop: 0,
530
+ paddingBottom: 0,
531
+ borderTopWidth: 0
532
+ }, st = {
533
+ y: P,
534
+ opacity: D,
535
+ height: P,
536
+ paddingTop: P,
537
+ paddingBottom: P,
538
+ borderTopWidth: P
539
+ };
540
+ function Te() {
541
+ const e = rt(), t = Ia(), n = M();
542
+ return {
543
+ initial: e ? {
544
+ opacity: 0,
545
+ y: K
546
+ } : !1,
547
+ animate: {
548
+ opacity: 1,
549
+ y: 0
550
+ },
551
+ exit: it,
552
+ transition: n ? { duration: 0 } : st,
553
+ leaving: !t
554
+ };
555
+ }
556
+ var lt = typeof process < "u" && process.env.NODE_ENV !== "production";
557
+ function na(e, t, n, r) {
558
+ O(() => {
559
+ if (!lt || e.current == null || typeof getComputedStyle != "function") return;
560
+ const l = (u) => {
561
+ const d = getComputedStyle(u).rowGap;
562
+ return d === "" || d === "normal" ? null : parseFloat(d);
563
+ }, s = l(e.current);
564
+ s != null && s !== n && console.warn(`[BasicPage.${t}] spaced at ${s}px instead of ${n}px. Spacing is the system's: Stack gap-10 between blocks, a block gap-3, Fields gap-5. Remove the class and move the wrapper instead.`, e.current);
565
+ for (const u of Array.from(e.current.children)) {
566
+ const d = r(u);
567
+ if (d == null || getComputedStyle(u).display === "contents") continue;
568
+ const i = l(u);
569
+ i != null && i !== d && console.warn(`[BasicPage.${t}] a child is spaced at ${i}px instead of ${d}px. Spacing is the system's: Stack gap-10 between blocks, a block gap-3, Fields gap-5. Remove the class and move the wrapper instead.`, u);
570
+ }
571
+ });
572
+ }
573
+ function ot(e) {
574
+ return Array.from(e.querySelectorAll("[data-basic-page-stack], [data-basic-page-title], [data-basic-page-header]")).some((t) => t.closest('[aria-busy="true"]') != null);
575
+ }
576
+ var ct = () => !1, ut = () => !0;
577
+ function dt() {
578
+ return ue(pe, ct, ut);
579
+ }
580
+ function Re(e, t = !1) {
581
+ const n = S(Ke), r = dt(), [l] = N(() => {
582
+ if (r || !e || n?.prerendered) return !1;
583
+ if (t) return !0;
584
+ if (document.querySelector("[data-basic-page-prerendered]") != null) return !1;
585
+ const s = n ? n.ref.current : document;
586
+ return s == null || !ot(s);
587
+ });
588
+ return l;
589
+ }
590
+ function ie({ enter: e, className: t, children: n, ref: r, ...l }) {
591
+ const s = M(), u = k(null);
592
+ na(u, "Stack", 40, (m) => m.hasAttribute("data-basic-page-fields") ? 20 : m.hasAttribute("data-basic-page-card") || m.hasAttribute("data-basic-page-onboard") || m.hasAttribute("data-basic-page-header") || m.hasAttribute("data-basic-page-columns") || m.hasAttribute("data-data-table") ? null : 12);
593
+ const d = Re(e ?? !0, e === !0), i = l["aria-busy"], c = i === !0 || i === "true", f = k(c), o = f.current && !c;
594
+ return O(() => {
595
+ f.current = c;
596
+ }), /* @__PURE__ */ a(A.div, {
597
+ ref: (m) => {
598
+ u.current = m, typeof r == "function" ? r(m) : r != null && (r.current = m);
599
+ },
600
+ "data-basic-page-stack": "",
601
+ initial: s || !d ? !1 : {
602
+ opacity: 0,
603
+ y: K
604
+ },
605
+ animate: {
606
+ opacity: 1,
607
+ y: 0
608
+ },
609
+ transition: {
610
+ y: P,
611
+ opacity: D
612
+ },
613
+ className: p("mt-7 flex min-w-0 flex-col gap-10", "[&:has(>*:first-child:not([data-basic-page-callout])>[data-basic-page-header]:first-child)]:mt-6 [&:has(>*:first-child:not([data-basic-page-callout])>h2:first-child)]:mt-6 [&:has(>[data-basic-page-header]:first-child)]:mt-6 [&:has(>h2:first-child)]:mt-6", "[[data-basic-page-pinned]_[data-basic-page-column]_&]:mt-3", "*:min-w-0 [&>*:not([data-basic-page-fields]):not([data-basic-page-card]):not([data-basic-page-callout]):not([data-basic-page-onboard]):not([data-basic-page-header]):not([data-basic-page-columns]):not([data-data-table])]:flex [&>*:not([data-basic-page-fields]):not([data-basic-page-card]):not([data-basic-page-callout]):not([data-basic-page-onboard]):not([data-basic-page-header]):not([data-basic-page-columns]):not([data-data-table])]:flex-col [&>*:not([data-basic-page-fields]):not([data-basic-page-card]):not([data-basic-page-callout]):not([data-basic-page-onboard]):not([data-basic-page-header]):not([data-basic-page-columns]):not([data-data-table])]:gap-3", t),
614
+ ...l,
615
+ children: /* @__PURE__ */ a(ta.Provider, {
616
+ value: o,
617
+ children: n
618
+ })
619
+ });
620
+ }
621
+ var Ge = "@container grid min-w-0 grid-cols-[minmax(0,1fr)_auto_auto] mb-3 gap-y-0 [&>:not([data-basic-page-search]):not([data-basic-page-header-action])]:col-start-1 [&>:nth-child(1_of_:not([data-basic-page-search]):not([data-basic-page-header-action])):nth-last-child(1_of_:not([data-basic-page-search]):not([data-basic-page-header-action]))]:row-span-2 [&>:nth-child(1_of_:not([data-basic-page-search]):not([data-basic-page-header-action])):nth-last-child(1_of_:not([data-basic-page-search]):not([data-basic-page-header-action]))]:self-center [&>:nth-child(1_of_:not([data-basic-page-search]):not([data-basic-page-header-action])):not(:nth-last-child(1_of_:not([data-basic-page-search]):not([data-basic-page-header-action])))]:self-end [&>:not([data-basic-page-search]):not([data-basic-page-header-action]):not(:nth-child(1_of_:not([data-basic-page-search]):not([data-basic-page-header-action])))]:self-start [[data-basic-page-callout]_&]:mb-0 [[data-basic-page-stack]>*>&]:mb-0";
622
+ function pt({ enter: e, className: t, ...n }) {
623
+ const r = M();
624
+ return Re(e === !0) && !r ? /* @__PURE__ */ a(A.div, {
625
+ initial: {
626
+ opacity: 0,
627
+ y: K
628
+ },
629
+ animate: {
630
+ opacity: 1,
631
+ y: 0
632
+ },
633
+ transition: {
634
+ y: P,
635
+ opacity: D
636
+ },
637
+ className: p(Ge, t),
638
+ ...n,
639
+ "data-basic-page-header": ""
640
+ }) : /* @__PURE__ */ a("div", {
641
+ className: p(Ge, t),
642
+ ...n,
643
+ "data-basic-page-header": ""
644
+ });
645
+ }
646
+ function mt({ className: e, ...t }) {
647
+ return /* @__PURE__ */ a("div", {
648
+ "data-basic-page-header-action": "",
649
+ className: p("flex items-center gap-2", "[[data-basic-page-header]>&]:col-start-3 [[data-basic-page-header]>&]:row-span-2 [[data-basic-page-header]>&]:row-start-1 [[data-basic-page-header]>&]:mr-5 [[data-basic-page-header]>&]:ml-4 [[data-basic-page-header]>&]:self-start [[data-basic-page-header]>&]:justify-self-end", "[[data-basic-page-callout]_[data-basic-page-header]>&]:mr-0", e),
650
+ ...t
651
+ });
652
+ }
653
+ function ft({ id: e, className: t, children: n, ...r }) {
654
+ const l = Ee(e, n);
655
+ return /* @__PURE__ */ a("h2", {
656
+ id: l,
657
+ className: p("text-display-xs text-pho-primary max-w-full min-w-0 scroll-mt-12 truncate px-5 font-medium", "mb-3 [[data-basic-page-callout]_&]:mb-0 [[data-basic-page-header]>&]:mb-0 [[data-basic-page-stack]>*>&]:mb-0", t),
658
+ ...r,
659
+ children: n
660
+ });
661
+ }
662
+ function ra({ className: e, ...t }) {
663
+ return /* @__PURE__ */ a("p", {
664
+ className: p("text-display-xs text-pho-description px-5 font-normal", e),
665
+ ...t
666
+ });
667
+ }
668
+ function ht({ one: e, other: t, ...n }) {
669
+ const r = S(Ne), l = ue(r?.subscribe ?? pe, () => r?.get().api ?? null, () => null);
670
+ if (l == null) return null;
671
+ const s = l.query.trim() !== "" ? `${l.matched} of ${l.total}.` : `${l.total} ${l.total === 1 ? e : t}.`;
672
+ return /* @__PURE__ */ a(ra, {
673
+ ...n,
674
+ children: s
675
+ });
676
+ }
677
+ function gt({ className: e, ...t }) {
678
+ return /* @__PURE__ */ a("p", {
679
+ className: p("text-pho-description px-5 text-xs font-normal", "mt-3 [[data-basic-page-callout]_&]:mt-0 [[data-basic-page-stack]>*>&]:mt-0", e),
680
+ ...t
681
+ });
682
+ }
683
+ function bt({ animateHeight: e, className: t, children: n, ...r }) {
684
+ const l = /* @__PURE__ */ a(q, { children: ee.toArray(n) });
685
+ return e ? /* @__PURE__ */ a("div", {
686
+ className: p(Ce, "min-h-0 gap-0", t),
687
+ ...r,
688
+ "data-basic-page-card": "",
689
+ children: /* @__PURE__ */ a(Ea, {
690
+ transition: P,
691
+ className: le,
692
+ children: l
693
+ })
694
+ }) : /* @__PURE__ */ a("div", {
695
+ className: p(je, t),
696
+ ...r,
697
+ "data-basic-page-card": "",
698
+ children: l
699
+ });
700
+ }
701
+ function vt({ className: e, ...t }) {
702
+ const { leaving: n, ...r } = Te();
703
+ return /* @__PURE__ */ a(A.div, {
704
+ ...r,
705
+ className: p(Ba, n && "overflow-hidden", e),
706
+ ...t
707
+ });
708
+ }
709
+ function yt({ divided: e = !1, className: t, ...n }) {
710
+ return /* @__PURE__ */ a("div", {
711
+ className: p(e ? Ma : La, t),
712
+ ...n
713
+ });
714
+ }
715
+ function xt({ className: e, icon: t, children: n, ...r }) {
716
+ if (t == null || t === !1 || t === !0) return /* @__PURE__ */ a("div", {
717
+ className: p(Be, e),
718
+ ...r,
719
+ "data-basic-page-callout": "",
720
+ children: n
721
+ });
722
+ const [l, ...s] = ee.toArray(n);
723
+ return /* @__PURE__ */ y("div", {
724
+ className: p(Be, e),
725
+ ...r,
726
+ "data-basic-page-callout": "",
727
+ children: [/* @__PURE__ */ y("div", {
728
+ className: "relative",
729
+ children: [/* @__PURE__ */ a("div", {
730
+ className: "min-w-0 pr-16",
731
+ children: l
732
+ }), /* @__PURE__ */ a("div", {
733
+ "aria-hidden": !0,
734
+ className: "text-pho-primary pointer-events-none absolute top-0 right-0 size-14 opacity-[0.275] [&>svg]:size-full",
735
+ children: t
736
+ })]
737
+ }), s]
738
+ });
739
+ }
740
+ function wt({ id: e, className: t, children: n, ...r }) {
741
+ const l = Ee(e, n);
742
+ return /* @__PURE__ */ a("h2", {
743
+ id: l,
744
+ className: p("text-display-xs text-pho-primary max-w-full min-w-0 scroll-mt-12 truncate font-medium", t),
745
+ ...r,
746
+ children: n
747
+ });
748
+ }
749
+ function Nt({ className: e, ...t }) {
750
+ return /* @__PURE__ */ a("p", {
751
+ className: p("text-display-xs text-pho-description font-normal", e),
752
+ ...t
753
+ });
754
+ }
755
+ var ia = G(null), sa = G(!1);
756
+ function At({ className: e, children: t, ...n }) {
757
+ let r = !1;
758
+ const l = ee.toArray(t).map((s, u) => {
759
+ if (!qe(s)) return s;
760
+ let d;
761
+ return s.props.done ? d = "done" : r ? d = "upcoming" : (r = !0, d = s.props.working ? "working" : s.props.pending ? "pending" : "current"), /* @__PURE__ */ a(ia.Provider, {
762
+ value: {
763
+ number: u + 1,
764
+ state: d
765
+ },
766
+ children: s
767
+ }, s.key ?? u);
768
+ });
769
+ return /* @__PURE__ */ a("ol", {
770
+ className: p(je, "m-0 list-none p-0", e),
771
+ ...n,
772
+ "data-basic-page-onboard": "",
773
+ children: l
774
+ });
775
+ }
776
+ var _t = "relative grid size-5 shrink-0 place-items-center rounded-full border text-xs font-medium tabular-nums transition-[background-color,border-color,color] duration-200 ease-out *:[grid-area:1/1]", Ct = {
777
+ done: "border-pho-ink text-pho-primary",
778
+ current: "bg-pho-brand-solid text-pho-on-brand border-transparent",
779
+ working: "border-transparent text-pho-primary",
780
+ pending: "border-pho-ink text-pho-primary border-dashed",
781
+ upcoming: "border-pho-primary text-pho-description"
782
+ }, Et = "pointer-events-none absolute -inset-px rounded-full border border-pho-ink opacity-30", kt = "pointer-events-none absolute -inset-px rounded-full border border-pho-ink border-r-transparent border-b-transparent border-l-transparent animate-pho-spinner", St = {
783
+ done: "Done.",
784
+ working: "In progress.",
785
+ pending: "Waiting."
786
+ };
787
+ function Tt({ icon: e, aside: t, title: n, description: r, done: l, working: s, pending: u, className: d, children: i, ...c }) {
788
+ const f = S(ia), o = f?.state ?? (l ? "done" : s ? "working" : u ? "pending" : "current"), m = M(), h = o === "current" || o === "working" || o === "pending", g = o === "upcoming", b = St[o], x = i != null && i !== !1, v = e != null && e !== !1, _ = t != null && t !== !1;
789
+ return /* @__PURE__ */ a("li", {
790
+ "data-basic-page-step": o,
791
+ "aria-current": h ? "step" : void 0,
792
+ className: p("relative m-0 grid min-w-0 grid-cols-[auto_minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)] items-center gap-x-3 px-5 py-4", "transition-[background-color] duration-200 ease-out first:rounded-t-[calc(0.75rem-1px)] last:rounded-b-[calc(0.75rem-1px)] motion-reduce:transition-none", h && "bg-pho-page", d),
793
+ ...c,
794
+ children: /* @__PURE__ */ y(sa.Provider, {
795
+ value: !0,
796
+ children: [
797
+ /* @__PURE__ */ y("span", {
798
+ "aria-hidden": !0,
799
+ className: p(_t, Ct[o], "col-start-1 row-start-1"),
800
+ children: [/* @__PURE__ */ a(q, {
801
+ initial: !1,
802
+ children: o === "done" ? /* @__PURE__ */ a(A.span, {
803
+ ...ne(m),
804
+ className: "flex",
805
+ children: /* @__PURE__ */ a(ka, { className: "size-3" })
806
+ }, "check") : /* @__PURE__ */ a(A.span, {
807
+ ...ne(m),
808
+ children: f?.number ?? 1
809
+ }, "number")
810
+ }), o === "working" ? /* @__PURE__ */ y(de, { children: [/* @__PURE__ */ a("span", { className: Et }), /* @__PURE__ */ a("span", { className: kt })] }) : null]
811
+ }),
812
+ /* @__PURE__ */ y("div", {
813
+ "data-basic-page-step-title": "",
814
+ className: p("text-display-xs col-start-2 row-start-1 min-w-0 font-medium transition-colors duration-200 ease-out", g ? "text-pho-description" : "text-pho-primary"),
815
+ children: [b ? /* @__PURE__ */ y("span", {
816
+ className: "sr-only",
817
+ children: [b, " "]
818
+ }) : null, n]
819
+ }),
820
+ /* @__PURE__ */ a(Pe, {
821
+ show: h,
822
+ gap: "none",
823
+ clip: !1,
824
+ className: "col-start-2 row-start-2 flex min-w-0 flex-col self-stretch",
825
+ children: /* @__PURE__ */ y("div", {
826
+ "data-basic-page-step-body": "",
827
+ className: "flex min-w-0 flex-1 flex-col",
828
+ children: [r ? /* @__PURE__ */ a("div", {
829
+ className: "text-display-xs text-pho-description font-normal",
830
+ children: r
831
+ }) : null, x ? /* @__PURE__ */ a("div", {
832
+ className: "mt-auto flex flex-wrap items-center gap-2 pt-3",
833
+ children: i
834
+ }) : null]
835
+ })
836
+ }),
837
+ o === "done" && x ? /* @__PURE__ */ a("div", {
838
+ className: "col-start-3 row-start-1 flex min-w-0 items-center gap-2",
839
+ children: i
840
+ }) : _ ? /* @__PURE__ */ a(q, {
841
+ initial: !1,
842
+ children: h ? /* @__PURE__ */ a(A.div, {
843
+ ...ne(m),
844
+ className: "col-start-3 row-span-2 row-start-1 self-start",
845
+ children: t
846
+ }, "aside") : null
847
+ }) : v ? /* @__PURE__ */ a(q, {
848
+ initial: !1,
849
+ children: h ? /* @__PURE__ */ a(A.div, {
850
+ "aria-hidden": !0,
851
+ ...ne(m),
852
+ className: "pointer-events-none col-start-3 row-span-2 row-start-1 size-14 self-start",
853
+ children: /* @__PURE__ */ a("div", {
854
+ className: "text-pho-primary size-full opacity-[0.275] [&>svg]:size-full",
855
+ children: e
856
+ })
857
+ }, "icon") : null
858
+ }) : null
859
+ ]
860
+ })
861
+ });
862
+ }
863
+ function Rt({ label: e, description: t, htmlFor: n, stacked: r = !1, className: l, children: s, ...u }) {
864
+ const { leaving: d, ...i } = Te();
865
+ return /* @__PURE__ */ y(A.div, {
866
+ ...i,
867
+ className: p(Oa, r && "sm:flex-col sm:items-stretch sm:justify-start sm:gap-3", d && "overflow-hidden", l),
868
+ ...u,
869
+ children: [/* @__PURE__ */ y("div", {
870
+ className: "min-w-0",
871
+ children: [n ? /* @__PURE__ */ a("label", {
872
+ htmlFor: n,
873
+ className: "text-pho-primary block text-base font-normal",
874
+ children: e
875
+ }) : /* @__PURE__ */ a("div", {
876
+ className: "text-pho-primary text-base font-normal",
877
+ children: e
878
+ }), t ? /* @__PURE__ */ a("p", {
879
+ className: "text-pho-description text-xs",
880
+ children: t
881
+ }) : null]
882
+ }), /* @__PURE__ */ a("div", {
883
+ className: p("flex w-full min-w-0 items-center gap-2 sm:w-auto", r && "sm:w-full"),
884
+ children: s
885
+ })]
886
+ });
887
+ }
888
+ function Pt({ className: e, ...t }) {
889
+ const n = S(sa);
890
+ return /* @__PURE__ */ a("p", {
891
+ className: p("text-pho-description max-w-full min-w-0 truncate", n ? "text-display-xs font-normal" : "text-base", e),
892
+ ...t
893
+ });
894
+ }
895
+ function It({ error: e, show: t, className: n, children: r, ...l }) {
896
+ const s = M(), u = S(U), d = e ?? u?.error ?? void 0;
897
+ return /* @__PURE__ */ a(q, {
898
+ initial: !1,
899
+ children: (t ?? !0) && (d != null || r != null) ? /* @__PURE__ */ a(A.div, {
900
+ "data-basic-page-alert": "",
901
+ className: "overflow-hidden",
902
+ initial: {
903
+ height: 0,
904
+ opacity: 0
905
+ },
906
+ animate: {
907
+ height: "auto",
908
+ opacity: 1
909
+ },
910
+ exit: {
911
+ height: 0,
912
+ opacity: 0
913
+ },
914
+ transition: s ? { duration: 0 } : {
915
+ height: P,
916
+ opacity: D
917
+ },
918
+ children: /* @__PURE__ */ a(ba, {
919
+ error: d,
920
+ className: p("px-5 pb-3", n),
921
+ ...l,
922
+ children: r
923
+ })
924
+ }) : null
925
+ });
926
+ }
927
+ function Pn() {
928
+ return S(U)?.requestSave ?? null;
929
+ }
930
+ var In = 800, ve = Ca.createToastManager(), U = G(null);
931
+ function Ot({ action: e, errors: t, autoSave: n = !1, className: r, children: l, onChange: s, onBlur: u, ...d }) {
932
+ const [i, c] = N(!1), [f, o] = N(!1), [m, h] = N(null), [g, b] = N(t ?? {}), [x, v] = N(null), _ = k(null), w = k(null), C = k(null), R = k(!1), I = k(!1), B = k(null), L = k(async () => {
933
+ });
934
+ O(() => () => {
935
+ w.current != null && clearTimeout(w.current);
936
+ }, []);
937
+ const W = async () => {
938
+ const T = _.current;
939
+ if (T == null || e == null) return;
940
+ if (R.current) {
941
+ I.current = !0;
942
+ return;
943
+ }
944
+ if (!T.checkValidity()) return;
945
+ const E = Object.fromEntries(new FormData(T).entries()), X = C.current;
946
+ R.current = !0, v({
947
+ field: X,
948
+ phase: "saving"
949
+ }), h(null);
950
+ try {
951
+ const F = (await e(E))?.errors;
952
+ if (F != null && Object.keys(F).length > 0) {
953
+ b(F), v(null);
954
+ return;
955
+ }
956
+ b({}), o(!1), v({
957
+ field: X,
958
+ phase: "saved"
959
+ }), B.current != null && (ve.close(B.current), B.current = null);
960
+ } catch (F) {
961
+ v(null), h(F), B.current != null && ve.close(B.current), B.current = ve.add({
962
+ type: "error",
963
+ title: "Couldn't save",
964
+ description: F instanceof Error && F.message !== "" ? F.message : "The change is still here — try again.",
965
+ timeout: 0,
966
+ actionProps: {
967
+ children: "Retry",
968
+ onClick: () => {
969
+ L.current();
970
+ }
971
+ }
972
+ });
973
+ } finally {
974
+ R.current = !1, I.current && (I.current = !1, L.current());
975
+ }
976
+ };
977
+ L.current = W;
978
+ const H = () => {
979
+ w.current != null && clearTimeout(w.current), w.current = setTimeout(() => {
980
+ w.current = null, L.current();
981
+ }, 800);
982
+ }, te = $(() => n ? (T) => {
983
+ T != null && (C.current = T), o(!0), H();
984
+ } : null, [n]), me = $(() => ({
985
+ pending: i,
986
+ dirty: f,
987
+ error: m,
988
+ auto: x,
989
+ requestSave: te
990
+ }), [
991
+ i,
992
+ f,
993
+ m,
994
+ x,
995
+ te
996
+ ]);
997
+ return /* @__PURE__ */ a(U.Provider, {
998
+ value: me,
999
+ children: /* @__PURE__ */ a(Sa, {
1000
+ errors: g,
1001
+ onFormSubmit: async (T) => {
1002
+ if (e != null) {
1003
+ c(!0), h(null);
1004
+ try {
1005
+ const E = (await e(T))?.errors;
1006
+ if (E != null && Object.keys(E).length > 0) {
1007
+ b(E);
1008
+ return;
1009
+ }
1010
+ b({}), o(!1);
1011
+ } catch (E) {
1012
+ h(E);
1013
+ } finally {
1014
+ c(!1);
1015
+ }
1016
+ }
1017
+ },
1018
+ onChange: (T) => {
1019
+ o(!0), h(null);
1020
+ const E = T.target.name;
1021
+ E && E in g && b((X) => {
1022
+ const { [E]: F, ...V } = X;
1023
+ return V;
1024
+ }), n && (E && (C.current = E), H()), s?.(T);
1025
+ },
1026
+ onBlur: (T) => {
1027
+ n && f && w.current != null && (clearTimeout(w.current), w.current = null, L.current()), u?.(T);
1028
+ },
1029
+ className: p("contents [[data-basic-page-stack]>&]:flex [[data-basic-page-stack]>&]:min-w-0 [[data-basic-page-stack]>&]:flex-col", r),
1030
+ ...d,
1031
+ ref: (T) => {
1032
+ _.current = T;
1033
+ const E = d.ref;
1034
+ typeof E == "function" ? E(T) : E != null && (E.current = T);
1035
+ },
1036
+ children: /* @__PURE__ */ a("fieldset", {
1037
+ disabled: i,
1038
+ "aria-busy": i || void 0,
1039
+ className: "contents",
1040
+ children: l
1041
+ })
1042
+ })
1043
+ });
1044
+ }
1045
+ function Bt({ name: e, className: t, ...n }) {
1046
+ const r = S(U), l = M(), s = r?.auto ?? null, u = s != null && (e == null || s.field === e), [d, i] = N(!1), c = u ? s.phase : null;
1047
+ O(() => {
1048
+ if (c !== "saved") return;
1049
+ i(!0);
1050
+ const m = setTimeout(() => i(!1), 1800);
1051
+ return () => clearTimeout(m);
1052
+ }, [c, s]);
1053
+ const f = c === "saving" ? "Saving…" : c === "saved" && d ? "Saved" : null, o = l ? "blur(0px)" : `blur(${Ae}px)`;
1054
+ return /* @__PURE__ */ a("span", {
1055
+ className: "grid justify-items-end",
1056
+ children: /* @__PURE__ */ a(q, {
1057
+ initial: !1,
1058
+ children: f != null && /* @__PURE__ */ a(A.output, {
1059
+ initial: {
1060
+ opacity: 0,
1061
+ filter: o
1062
+ },
1063
+ animate: {
1064
+ opacity: 1,
1065
+ filter: "blur(0px)"
1066
+ },
1067
+ exit: {
1068
+ opacity: 0,
1069
+ filter: o
1070
+ },
1071
+ transition: oe,
1072
+ className: p("text-pho-description pl-8 [grid-area:1/1]", t),
1073
+ style: { background: "linear-gradient(to left, var(--background-color-pho-primary) calc(100% - 2rem), transparent)" },
1074
+ ...n,
1075
+ children: f
1076
+ }, f)
1077
+ })
1078
+ });
1079
+ }
1080
+ var Lt = "flex min-w-0 flex-col gap-5 p-5 [&>[data-basic-page-alert]]:-mx-5 [&>[data-basic-page-alert]]:-mt-2 [&>[data-basic-page-alert]]:-mb-5 [&>[data-basic-page-footer]]:pr-0 [&>[data-basic-page-reveal]]:flex [&>[data-basic-page-reveal]]:flex-col [&>[data-basic-page-reveal]]:gap-5";
1081
+ function Mt({ className: e, ...t }) {
1082
+ const n = k(null);
1083
+ return na(n, "Fields", 20, () => null), /* @__PURE__ */ a("div", {
1084
+ className: p(Ce, Lt, e),
1085
+ ...t,
1086
+ ref: (r) => {
1087
+ n.current = r;
1088
+ const l = t.ref;
1089
+ typeof l == "function" ? l(r) : l != null && (l.current = r);
1090
+ },
1091
+ "data-basic-page-fields": ""
1092
+ });
1093
+ }
1094
+ function Dt({ className: e, ...t }) {
1095
+ return /* @__PURE__ */ a("div", {
1096
+ className: p("flex min-w-0 flex-col gap-5 *:min-w-0 sm:flex-row sm:gap-3 sm:*:flex-1", e),
1097
+ ...t
1098
+ });
1099
+ }
1100
+ function Ht({ children: e = "Save changes", ...t }) {
1101
+ const n = S(U);
1102
+ return /* @__PURE__ */ a(Z, {
1103
+ type: "submit",
1104
+ variant: "effect",
1105
+ size: "sm",
1106
+ loading: n?.pending,
1107
+ ...t,
1108
+ children: e
1109
+ });
1110
+ }
1111
+ function Ft({ show: e, className: t, ...n }) {
1112
+ const r = S(U), l = e === "dirty" ? r?.dirty ?? !1 : e, s = /* @__PURE__ */ a("div", {
1113
+ "data-basic-page-footer": "",
1114
+ className: p("flex items-center justify-end gap-3 pr-[calc(1.25rem+2.5px)]", t),
1115
+ ...n
1116
+ });
1117
+ return l === void 0 ? s : /* @__PURE__ */ a(Pe, {
1118
+ show: l,
1119
+ gap: "block",
1120
+ clip: !1,
1121
+ children: s
1122
+ });
1123
+ }
1124
+ var zt = {
1125
+ stack: "-2.5rem",
1126
+ block: "-0.75rem",
1127
+ fields: "-1.25rem",
1128
+ none: "0px"
1129
+ };
1130
+ function Pe({ show: e, clip: t = !0, gap: n = "stack", dividers: r, className: l, ...s }) {
1131
+ const u = M(), d = zt[r ? "none" : n], i = k(null), c = k(e !== !0);
1132
+ O(() => {
1133
+ c.current = !0;
1134
+ }, []);
1135
+ const f = () => {
1136
+ t && i.current && (i.current.style.overflow = "hidden");
1137
+ }, o = () => {
1138
+ i.current && (i.current.style.overflow = "");
1139
+ };
1140
+ return e === void 0 ? /* @__PURE__ */ a(A.div, {
1141
+ initial: u ? !1 : {
1142
+ opacity: 0,
1143
+ y: K
1144
+ },
1145
+ animate: {
1146
+ opacity: 1,
1147
+ y: 0
1148
+ },
1149
+ transition: {
1150
+ y: P,
1151
+ opacity: D
1152
+ },
1153
+ className: p(r && le, l),
1154
+ ...s
1155
+ }) : /* @__PURE__ */ a(q, {
1156
+ initial: !1,
1157
+ children: e ? /* @__PURE__ */ a(A.div, {
1158
+ "data-basic-page-reveal": "",
1159
+ ref: (m) => {
1160
+ i.current = m, t && m && c.current && (m.style.overflow = "hidden");
1161
+ },
1162
+ onAnimationStart: f,
1163
+ onAnimationComplete: o,
1164
+ initial: {
1165
+ height: 0,
1166
+ opacity: 0,
1167
+ marginTop: d
1168
+ },
1169
+ animate: {
1170
+ height: "auto",
1171
+ opacity: 1,
1172
+ marginTop: 0
1173
+ },
1174
+ exit: {
1175
+ height: 0,
1176
+ opacity: 0,
1177
+ marginTop: d
1178
+ },
1179
+ transition: u ? { duration: 0 } : {
1180
+ height: P,
1181
+ marginTop: P,
1182
+ opacity: D
1183
+ },
1184
+ className: p(r && le, l),
1185
+ ...s
1186
+ }) : null
1187
+ });
1188
+ }
1189
+ var Gt = "top-4 left-5 h-8 text-base [&>svg]:size-[1.125em] [&>svg]:shrink-0", Wt = "(min-width: 40rem)";
1190
+ function Vt() {
1191
+ return typeof window < "u" && typeof window.matchMedia == "function" && !window.matchMedia(Wt).matches;
1192
+ }
1193
+ var la = G(null);
1194
+ function oa({ className: e, children: t, ...n }) {
1195
+ const r = ee.toArray(t).filter(qe), l = r.map((_) => _.props.children ?? null), s = Je();
1196
+ Ya(l);
1197
+ const [u] = N(Vt), d = M(), i = r.length, c = $e(), f = !u && i >= $t, o = S(ke), m = i > 0 ? r[i - 1]?.props : null, h = m?.children ?? "Back", g = m?.href, b = m?.onClick;
1198
+ z(() => {
1199
+ if (!(o == null || g == null))
1200
+ return o.setTail({
1201
+ label: h,
1202
+ href: g,
1203
+ onClick: b
1204
+ }), () => o.setTail(null);
1205
+ }, [
1206
+ o,
1207
+ h,
1208
+ g,
1209
+ b
1210
+ ]);
1211
+ const [x, v] = N(!d && !u && s != null && s.labels.length > i);
1212
+ return /* @__PURE__ */ a("nav", {
1213
+ "aria-label": "Breadcrumb",
1214
+ "data-basic-page-back": "",
1215
+ className: p("absolute top-4 left-3 flex min-w-max items-center", e),
1216
+ ...n,
1217
+ children: /* @__PURE__ */ y("ol", {
1218
+ className: "m-0 flex list-none items-center p-0",
1219
+ children: [r.map((_, w) => f && w > 0 && w < i - 2 ? null : /* @__PURE__ */ y(Ra, { children: [f && w === i - 2 && /* @__PURE__ */ y("li", {
1220
+ className: "m-0 flex items-center max-sm:hidden",
1221
+ children: [/* @__PURE__ */ a("span", {
1222
+ "aria-hidden": !0,
1223
+ className: xe,
1224
+ children: ce
1225
+ }), /* @__PURE__ */ y(Q.Root, { children: [/* @__PURE__ */ a(Q.Trigger, { render: /* @__PURE__ */ a(Z, {
1226
+ variant: "ghost",
1227
+ size: "sm",
1228
+ "aria-label": "Hidden pages",
1229
+ className: "px-2",
1230
+ children: qt
1231
+ }) }), /* @__PURE__ */ a(Q.Portal, { children: /* @__PURE__ */ a(Q.Positioner, {
1232
+ align: "start",
1233
+ sideOffset: 4,
1234
+ children: /* @__PURE__ */ a(Q.Popup, { children: r.slice(1, i - 2).map((C, R) => {
1235
+ const I = C.props;
1236
+ return /* @__PURE__ */ a(Q.LinkItem, {
1237
+ render: /* @__PURE__ */ a(c, {
1238
+ href: I.href,
1239
+ onClick: I.onClick
1240
+ }),
1241
+ children: I.children ?? "Back"
1242
+ }, C.key ?? R);
1243
+ }) })
1244
+ }) })] })]
1245
+ }), /* @__PURE__ */ a("li", {
1246
+ className: p("m-0 flex items-center", w < i - 1 && "max-sm:hidden"),
1247
+ children: /* @__PURE__ */ a(la.Provider, {
1248
+ value: {
1249
+ index: w,
1250
+ count: i,
1251
+ departing: s,
1252
+ narrow: u
1253
+ },
1254
+ children: _
1255
+ })
1256
+ })] }, _.key ?? w)), x && /* @__PURE__ */ a("li", {
1257
+ "aria-hidden": !0,
1258
+ className: "m-0 flex items-center max-sm:hidden",
1259
+ children: /* @__PURE__ */ a(A.span, {
1260
+ initial: { opacity: 1 },
1261
+ animate: { opacity: 0 },
1262
+ transition: Ue,
1263
+ onAnimationComplete: () => v(!1),
1264
+ className: xe,
1265
+ children: ce
1266
+ })
1267
+ })]
1268
+ })
1269
+ });
1270
+ }
1271
+ var xe = "text-pho-description -mx-1 inline-flex shrink-0 text-base select-none", ce = "/", $t = 4, qt = "…";
1272
+ function ca({ href: e, className: t, morphId: n, children: r = "Back", ...l }) {
1273
+ const s = S(la), u = M(), d = n != null && !u, i = ea(d ? n : void 0);
1274
+ if (s == null) throw new Error("BasicPage.Crumb must be rendered inside BasicPage.Breadcrumbs");
1275
+ const { index: c, count: f, departing: o, narrow: m } = s, h = c === 0, g = c === f - 1, b = o != null && o.labels.length < f, x = o != null && o.labels.length > f, v = g && (o == null || b || m), _ = h || g, w = h && g ? "" : h ? "max-sm:hidden" : "sm:hidden", C = o != null, R = g ? m ? x ? "slide" : "fade" : v ? "fade" : void 0 : void 0, [I, B] = N(d && m && i.fly && o != null && !x ? o.labels[o.labels.length - 1] : null), L = d && _ && !C, W = d && !h && g && (o == null || b);
1276
+ return /* @__PURE__ */ y(de, { children: [!h && /* @__PURE__ */ a("span", {
1277
+ "aria-hidden": !0,
1278
+ className: p(xe, "max-sm:hidden"),
1279
+ children: W ? /* @__PURE__ */ a(A.span, {
1280
+ initial: i.fly ? {
1281
+ opacity: 0,
1282
+ x: Me
1283
+ } : { opacity: 0 },
1284
+ animate: i.fly ? {
1285
+ opacity: 1,
1286
+ x: 0
1287
+ } : { opacity: 1 },
1288
+ transition: i.fly ? De : D,
1289
+ className: "inline-flex",
1290
+ children: ce
1291
+ }) : ce
1292
+ }), /* @__PURE__ */ a(we, {
1293
+ variant: "ghost",
1294
+ size: "sm",
1295
+ href: e,
1296
+ prefix: _ ? L ? /* @__PURE__ */ a(A.span, {
1297
+ initial: i.fly ? {
1298
+ opacity: 0,
1299
+ x: Me
1300
+ } : { opacity: 0 },
1301
+ animate: i.fly ? {
1302
+ opacity: 1,
1303
+ x: 0
1304
+ } : { opacity: 1 },
1305
+ transition: i.fly ? De : D,
1306
+ className: p("inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0", w),
1307
+ children: /* @__PURE__ */ a(se, {})
1308
+ }) : /* @__PURE__ */ a("span", {
1309
+ className: p("inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0", w),
1310
+ children: /* @__PURE__ */ a(se, {})
1311
+ }) : /* @__PURE__ */ a("span", { className: "hidden" }),
1312
+ className: p("min-w-max", t),
1313
+ ...l,
1314
+ children: d && n != null ? /* @__PURE__ */ y("span", {
1315
+ className: p("relative block", !i.fly && R === "slide" && "overflow-hidden", !g && "max-w-40 truncate"),
1316
+ children: [/* @__PURE__ */ a(aa, {
1317
+ morphId: n,
1318
+ fromClassName: "text-pho-primary",
1319
+ fly: i.fly,
1320
+ morphRef: i.ref,
1321
+ arrival: R,
1322
+ children: r
1323
+ }), I != null && /* @__PURE__ */ a(A.span, {
1324
+ "aria-hidden": !0,
1325
+ initial: {
1326
+ x: 0,
1327
+ opacity: 1
1328
+ },
1329
+ animate: {
1330
+ x: Ka,
1331
+ opacity: 0
1332
+ },
1333
+ transition: Xa,
1334
+ onAnimationComplete: () => B(null),
1335
+ className: "pointer-events-none absolute inset-y-0 left-0 whitespace-nowrap",
1336
+ children: I
1337
+ })]
1338
+ }) : /* @__PURE__ */ a("span", {
1339
+ className: p("block", !g && "max-w-40 truncate"),
1340
+ children: r
1341
+ })
1342
+ })] });
1343
+ }
1344
+ function jt({ className: e, ...t }) {
1345
+ return /* @__PURE__ */ a(oa, {
1346
+ className: e,
1347
+ children: /* @__PURE__ */ a(ca, { ...t })
1348
+ });
1349
+ }
1350
+ function Kt({ label: e, description: t, leading: n, href: r, className: l, children: s, ...u }) {
1351
+ const d = $e(), i = $(() => A.create(d), [d]), { leaving: c, ...f } = Te();
1352
+ return /* @__PURE__ */ y(i, {
1353
+ href: r,
1354
+ ...f,
1355
+ ...u,
1356
+ className: p("flex min-h-[4.25rem] min-w-0 flex-row items-center justify-between gap-6 px-5 py-4", "group outline-pho-brand hover:bg-pho-primary-hover cursor-pointer transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2", "aria-[current=page]:bg-pho-primary-hover", "first:rounded-t-[calc(var(--radius-base)-1px)] last:rounded-b-[calc(var(--radius-base)-1px)]", c && "overflow-hidden", l),
1357
+ children: [/* @__PURE__ */ y("div", {
1358
+ className: p("flex min-w-0 flex-1 items-center", n != null && "gap-3"),
1359
+ children: [n, /* @__PURE__ */ y("div", {
1360
+ className: "min-w-0",
1361
+ children: [/* @__PURE__ */ a("div", {
1362
+ className: "flex min-w-0 items-center gap-1",
1363
+ children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ a("p", {
1364
+ className: "text-pho-primary truncate text-base font-medium",
1365
+ children: e
1366
+ }) : e
1367
+ }), t ? /* @__PURE__ */ a("div", {
1368
+ className: "text-pho-description truncate text-xs",
1369
+ children: t
1370
+ }) : null]
1371
+ })]
1372
+ }), /* @__PURE__ */ y("div", {
1373
+ className: "flex min-w-0 items-center justify-end gap-2",
1374
+ children: [s != null ? /* @__PURE__ */ a("div", {
1375
+ className: "min-w-0",
1376
+ children: s
1377
+ }) : null, /* @__PURE__ */ a(xa, {
1378
+ "aria-hidden": !0,
1379
+ className: "text-pho-secondary group-hover:text-pho-secondary-hover size-4 shrink-0 transition-colors"
1380
+ })]
1381
+ })]
1382
+ });
1383
+ }
1384
+ function Xt({ open: e, variant: t = "overlay", modal: n = !1, placeholder: r, onClose: l, width: s = "default", presentation: u, defaultPresentation: d, onPresentationChange: i, expandable: c = !0, children: f }) {
1385
+ const o = S(Xe), m = o != null ? Ha(o.paneWidth, s) : 0, h = e ?? ee.toArray(f).length > 0, { presentation: g, setPresentation: b, canChoose: x } = Qt({
1386
+ isOpen: h,
1387
+ paneNarrow: o?.paneNarrow ?? !1,
1388
+ presentation: u,
1389
+ defaultPresentation: d,
1390
+ onPresentationChange: i
1391
+ }), v = o?.setOpen, _ = o?.setAsPage, w = o?.setPresent;
1392
+ if (z(() => {
1393
+ if (w != null)
1394
+ return w(!0), () => w(!1);
1395
+ }, [w]), z(() => {
1396
+ if (v != null)
1397
+ return v(h), () => v(!1);
1398
+ }, [v, h]), z(() => {
1399
+ if (_ != null)
1400
+ return _(g === "page"), () => _(!1);
1401
+ }, [_, g]), O(() => {
1402
+ o == null && typeof process < "u" && process.env.NODE_ENV !== "production" && console.warn("BasicPage.Aside: needs a `BasicPage.Root` around it.");
1403
+ }, [o]), o == null || o.slot == null) return null;
1404
+ const C = c && x ? () => b("page") : void 0;
1405
+ if (g === "page") {
1406
+ const R = c && x && !o.paneNarrow ? () => b("panel") : void 0;
1407
+ return Oe(h ? /* @__PURE__ */ y("div", {
1408
+ "data-basic-page-aside": "page",
1409
+ "data-basic-page-aside-expanded": o.paneNarrow ? void 0 : "",
1410
+ className: "relative flex min-w-0 flex-1 flex-col",
1411
+ children: [R != null ? /* @__PURE__ */ a("span", {
1412
+ className: "absolute top-2 right-2 z-30",
1413
+ children: /* @__PURE__ */ a(j.Provider, { children: /* @__PURE__ */ a(da, {
1414
+ label: "Show as panel",
1415
+ icon: /* @__PURE__ */ a(ya, {}),
1416
+ onClick: R
1417
+ }) })
1418
+ }) : null, f]
1419
+ }) : null, o.slot);
1420
+ }
1421
+ return t === "inline" ? Oe(/* @__PURE__ */ a(Yt, {
1422
+ width: m,
1423
+ paneHeight: o.paneHeight,
1424
+ onClose: l,
1425
+ onExpand: C,
1426
+ open: h,
1427
+ placeholder: r,
1428
+ children: f
1429
+ }), o.slot) : /* @__PURE__ */ a(Ut, {
1430
+ container: o.slot,
1431
+ width: m,
1432
+ paneHeight: o.paneHeight,
1433
+ onClose: l,
1434
+ onExpand: C,
1435
+ open: h,
1436
+ modal: n,
1437
+ children: f
1438
+ });
1439
+ }
1440
+ function Qt({ isOpen: e, paneNarrow: t, presentation: n, defaultPresentation: r, onPresentationChange: l }) {
1441
+ const [s, u] = N(e), [d, i] = N(null);
1442
+ z(() => {
1443
+ e || (u(!1), i(null));
1444
+ }, [e]);
1445
+ const c = n != null;
1446
+ return {
1447
+ presentation: t ? "page" : n ?? d ?? r ?? (s ? "page" : "panel"),
1448
+ setPresentation: _e((f) => {
1449
+ c || i(f), l?.(f);
1450
+ }, [c, l]),
1451
+ canChoose: !c || l != null
1452
+ };
1453
+ }
1454
+ function ua() {
1455
+ const [e, t] = N(null), n = $(() => ({ setBack: t }), []), r = k(null);
1456
+ return {
1457
+ back: e,
1458
+ panel: n,
1459
+ closeRef: r,
1460
+ leave: _e(() => {
1461
+ const l = r.current?.querySelector("a, button");
1462
+ return l == null ? !1 : (l.click(), !0);
1463
+ }, [])
1464
+ };
1465
+ }
1466
+ var We = {
1467
+ variant: "ghost",
1468
+ size: "sm",
1469
+ svgOnly: !0,
1470
+ "aria-label": "Close",
1471
+ children: /* @__PURE__ */ a(_a, {})
1472
+ };
1473
+ function da({ label: e, icon: t, onClick: n }) {
1474
+ return /* @__PURE__ */ y(j.Root, { children: [/* @__PURE__ */ a(j.Trigger, { render: /* @__PURE__ */ a(Z, {
1475
+ variant: "ghost",
1476
+ size: "sm",
1477
+ svgOnly: !0,
1478
+ "aria-label": e,
1479
+ onClick: n,
1480
+ children: t
1481
+ }) }), /* @__PURE__ */ a(j.Portal, { children: /* @__PURE__ */ a(j.Positioner, { children: /* @__PURE__ */ a(j.Popup, { children: e }) }) })] });
1482
+ }
1483
+ function pa({ back: e, onClose: t, onExpand: n, closeRef: r, panel: l, children: s }) {
1484
+ return /* @__PURE__ */ y(de, { children: [/* @__PURE__ */ y("span", {
1485
+ className: "absolute top-2 right-2 z-30 flex items-center gap-0.5",
1486
+ children: [n != null ? /* @__PURE__ */ a(j.Provider, { children: /* @__PURE__ */ a(da, {
1487
+ label: "Expand",
1488
+ icon: /* @__PURE__ */ a(va, {}),
1489
+ onClick: n
1490
+ }) }) : null, /* @__PURE__ */ a("span", {
1491
+ ref: r,
1492
+ className: "contents",
1493
+ children: e != null ? /* @__PURE__ */ a(we, {
1494
+ ...We,
1495
+ href: e.href,
1496
+ onClick: e.onClick
1497
+ }) : t != null ? /* @__PURE__ */ a(Z, {
1498
+ ...We,
1499
+ onClick: t
1500
+ }) : null
1501
+ })]
1502
+ }), /* @__PURE__ */ y(J.Root, {
1503
+ className: "min-h-0 min-w-0 flex-1",
1504
+ children: [/* @__PURE__ */ a(J.Viewport, {
1505
+ className: "overflow-x-hidden",
1506
+ style: { overflowX: "hidden" },
1507
+ children: /* @__PURE__ */ a(J.Content, {
1508
+ className: "flex min-h-full w-full min-w-0 flex-col",
1509
+ style: {
1510
+ minWidth: 0,
1511
+ width: "100%",
1512
+ maxWidth: "100%"
1513
+ },
1514
+ children: /* @__PURE__ */ a(Qe.Provider, {
1515
+ value: l,
1516
+ children: s
1517
+ })
1518
+ })
1519
+ }), /* @__PURE__ */ a(J.Scrollbar, { children: /* @__PURE__ */ a(J.Thumb, {}) })]
1520
+ })] });
1521
+ }
1522
+ function Yt({ width: e, paneHeight: t, onClose: n, onExpand: r, open: l, placeholder: s, children: u }) {
1523
+ const d = M(), { back: i, panel: c, closeRef: f, leave: o } = ua(), m = d ? "blur(0px)" : `blur(${Ae}px)`, h = t ?? "100dvh";
1524
+ O(() => {
1525
+ const b = (x) => {
1526
+ x.key !== "Escape" || x.defaultPrevented || o() && x.preventDefault();
1527
+ };
1528
+ return document.addEventListener("keydown", b), () => document.removeEventListener("keydown", b);
1529
+ }, [o]);
1530
+ const g = {
1531
+ initial: {
1532
+ opacity: 0,
1533
+ filter: m
1534
+ },
1535
+ animate: {
1536
+ opacity: 1,
1537
+ filter: "blur(0px)"
1538
+ },
1539
+ exit: {
1540
+ opacity: 0,
1541
+ filter: m
1542
+ },
1543
+ transition: d ? { duration: 0 } : oe
1544
+ };
1545
+ return /* @__PURE__ */ a("aside", {
1546
+ "data-basic-page-aside": "panel",
1547
+ "data-basic-page-aside-variant": "inline",
1548
+ className: "relative flex min-w-0 shrink-0 flex-col",
1549
+ style: {
1550
+ width: e,
1551
+ minWidth: 0,
1552
+ maxWidth: e,
1553
+ minHeight: h
1554
+ },
1555
+ children: /* @__PURE__ */ a("div", {
1556
+ className: "border-pho-secondary bg-pho-primary sticky top-0 grid min-w-0 overflow-hidden border-l *:min-h-0 *:[grid-area:1/1]",
1557
+ style: { height: h },
1558
+ children: /* @__PURE__ */ a(q, {
1559
+ initial: !1,
1560
+ children: l ? /* @__PURE__ */ a(A.div, {
1561
+ ...g,
1562
+ className: "relative flex min-w-0 flex-col",
1563
+ children: /* @__PURE__ */ a(pa, {
1564
+ back: i,
1565
+ onClose: n,
1566
+ onExpand: r,
1567
+ closeRef: f,
1568
+ panel: c,
1569
+ children: u
1570
+ })
1571
+ }, "page") : /* @__PURE__ */ a(A.div, {
1572
+ ...g,
1573
+ className: "flex flex-col",
1574
+ children: s
1575
+ }, "empty")
1576
+ })
1577
+ })
1578
+ });
1579
+ }
1580
+ function Ut({ container: e, width: t, paneHeight: n, onClose: r, onExpand: l, open: s, modal: u, children: d }) {
1581
+ const { back: i, panel: c, closeRef: f, leave: o } = ua(), m = n ?? "100dvh";
1582
+ return /* @__PURE__ */ a(re.Root, {
1583
+ open: s,
1584
+ modal: u ? "trap-focus" : !1,
1585
+ disablePointerDismissal: !0,
1586
+ onOpenChange: (h, g) => {
1587
+ h || (g.cancel(), o());
1588
+ },
1589
+ children: /* @__PURE__ */ y(re.Portal, {
1590
+ container: e,
1591
+ className: "contents",
1592
+ children: [u ? /* @__PURE__ */ a(re.Backdrop, {
1593
+ "data-basic-page-aside-backdrop": "",
1594
+ className: p("bg-pho-overlay absolute inset-0 z-30 transition-opacity duration-200 ease-out motion-reduce:transition-none", "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0"),
1595
+ onClick: o
1596
+ }) : null, /* @__PURE__ */ a(re.Popup, {
1597
+ "data-basic-page-aside": "panel",
1598
+ "data-basic-page-aside-variant": "overlay",
1599
+ initialFocus: u ? void 0 : !1,
1600
+ finalFocus: u ? void 0 : !1,
1601
+ className: p("absolute inset-y-0 right-0 z-30 flex min-w-0 flex-col outline-none", "transition-[translate,opacity] duration-250 ease-out motion-reduce:transition-none", "data-[ending-style]:translate-x-3 data-[ending-style]:opacity-0 data-[ending-style]:duration-200 data-[starting-style]:translate-x-3 data-[starting-style]:opacity-0"),
1602
+ style: {
1603
+ width: t,
1604
+ minWidth: 0,
1605
+ maxWidth: t
1606
+ },
1607
+ children: /* @__PURE__ */ a("div", {
1608
+ className: "border-pho-secondary bg-pho-primary shadow-pho-xl sticky top-0 flex min-w-0 flex-col overflow-hidden border-l",
1609
+ style: { height: m },
1610
+ children: /* @__PURE__ */ a(pa, {
1611
+ back: i,
1612
+ onClose: r,
1613
+ onExpand: l,
1614
+ closeRef: f,
1615
+ panel: c,
1616
+ children: d
1617
+ })
1618
+ })
1619
+ })]
1620
+ })
1621
+ });
1622
+ }
1623
+ var Jt = "14rem", Zt = "transition-[width] duration-[330ms] ease-pho-spring motion-reduce:transition-none", Ve = "transition-[opacity,visibility] duration-200 ease-out motion-reduce:transition-none";
1624
+ function en({ variant: e = "box", fold: t = "auto", value: n, onValueChange: r, placeholder: l, label: s, className: u, ...d }) {
1625
+ const i = S(Ne), c = ue(i?.subscribe ?? pe, () => i?.get().api ?? null, () => null), f = n != null;
1626
+ O(() => {
1627
+ if (!(i == null || f))
1628
+ return i.adopt(!0), () => i.adopt(!1);
1629
+ }, [i, f]);
1630
+ const o = f ? {
1631
+ query: n,
1632
+ setQuery: r,
1633
+ placeholder: l ?? "Search",
1634
+ label: s ?? l ?? "Search"
1635
+ } : c == null ? null : {
1636
+ query: c.query,
1637
+ setQuery: c.setQuery,
1638
+ placeholder: c.placeholder,
1639
+ label: s ?? c.placeholder
1640
+ }, [m, h] = N(!1), g = k(null), b = m || (o?.query ?? "") !== "";
1641
+ if (O(() => {
1642
+ if (!m) return;
1643
+ let v = 0, _ = 0;
1644
+ const w = () => {
1645
+ const C = g.current;
1646
+ C != null && (C.focus(), document.activeElement !== C && _++ < 5 && (v = requestAnimationFrame(w)));
1647
+ };
1648
+ return v = requestAnimationFrame(w), () => cancelAnimationFrame(v);
1649
+ }, [m]), e === "ghost") return /* @__PURE__ */ a("div", {
1650
+ "data-basic-page-search": "",
1651
+ "data-variant": "ghost",
1652
+ className: p("flex min-w-0 flex-1", o == null && "hidden", u),
1653
+ ...d,
1654
+ children: o != null && /* @__PURE__ */ a(Ta, {
1655
+ value: o.query,
1656
+ onChange: o.setQuery,
1657
+ placeholder: o.placeholder,
1658
+ "aria-label": o.label,
1659
+ onKeyDown: (v) => {
1660
+ v.key === "Escape" && (v.preventDefault(), o.setQuery(""), v.currentTarget.blur());
1661
+ }
1662
+ })
1663
+ });
1664
+ const x = t === "auto";
1665
+ return /* @__PURE__ */ a("div", {
1666
+ "data-basic-page-search": "",
1667
+ "data-expanded": b || void 0,
1668
+ className: p("grid min-w-0 content-center", "[[data-basic-page-header]>&]:col-start-2 [[data-basic-page-header]>&]:row-span-2 [[data-basic-page-header]>&]:row-start-1 [[data-basic-page-header]>&]:ml-4 [[data-basic-page-header]>&]:justify-items-end [[data-basic-page-header]>&]:self-start", o == null && "hidden", u),
1669
+ ...d,
1670
+ children: o != null && /* @__PURE__ */ y("div", {
1671
+ className: p("grid w-9 max-w-full justify-items-end *:[grid-area:1/1]", Zt, x && "@[36rem]:w-56"),
1672
+ style: b ? { width: Jt } : void 0,
1673
+ children: [/* @__PURE__ */ a(Z, {
1674
+ variant: "outlined",
1675
+ size: "sm",
1676
+ shape: "circle",
1677
+ svgOnly: !0,
1678
+ "aria-label": o.label,
1679
+ "aria-hidden": b || void 0,
1680
+ tabIndex: b ? -1 : void 0,
1681
+ onClick: () => h(!0),
1682
+ className: p(Ve, b ? "pointer-events-none invisible opacity-0" : "visible opacity-100", x && "@[36rem]:pointer-events-none @[36rem]:invisible @[36rem]:opacity-0"),
1683
+ children: /* @__PURE__ */ a(Ie, {})
1684
+ }), /* @__PURE__ */ a("div", {
1685
+ inert: !x && !b,
1686
+ className: p("w-full min-w-0", Ve, b ? "visible opacity-100" : "pointer-events-none invisible opacity-0", x && "@[36rem]:pointer-events-auto @[36rem]:visible @[36rem]:opacity-100"),
1687
+ children: /* @__PURE__ */ y(he.Root, {
1688
+ size: "sm",
1689
+ className: "w-full",
1690
+ children: [/* @__PURE__ */ a(he.Addon, { children: /* @__PURE__ */ a(Ie, {}) }), /* @__PURE__ */ a(he.Input, {
1691
+ ref: g,
1692
+ type: "search",
1693
+ value: o.query,
1694
+ onChange: (v) => o.setQuery(v.target.value),
1695
+ onBlur: () => {
1696
+ o.query === "" && h(!1);
1697
+ },
1698
+ onKeyDown: (v) => {
1699
+ v.key === "Escape" && (v.preventDefault(), o.setQuery(""), h(!1), v.currentTarget.blur());
1700
+ },
1701
+ placeholder: o.placeholder,
1702
+ "aria-label": o.label
1703
+ })]
1704
+ })
1705
+ })]
1706
+ })
1707
+ });
1708
+ }
1709
+ function an({ header: e, main: t, side: n, foot: r, enter: l }) {
1710
+ const s = n != null;
1711
+ return /* @__PURE__ */ a("div", {
1712
+ "data-basic-page-columns": "",
1713
+ className: "@container w-full min-w-0",
1714
+ children: /* @__PURE__ */ y("div", {
1715
+ className: p("mx-auto w-full max-w-[42rem]", s && "@min-[73.5rem]:max-w-none"),
1716
+ children: [e, /* @__PURE__ */ y("div", {
1717
+ className: p("grid gap-x-10 gap-y-4", s && "@min-[73.5rem]:grid-cols-[minmax(42rem,1fr)_minmax(29rem,32rem)] @min-[73.5rem]:grid-rows-[auto_minmax(0,1fr)]", s && "[&>[data-basic-page-columns-side]]:mt-6 @min-[73.5rem]:[&>[data-basic-page-columns-side]]:mt-7", r != null && "[&>[data-basic-page-columns-foot]]:mt-6"),
1718
+ children: [
1719
+ /* @__PURE__ */ a(ie, {
1720
+ enter: l,
1721
+ "data-basic-page-columns-main": "",
1722
+ className: p("[[data-basic-page-stack]>[data-basic-page-columns]_&]:mt-0", s && "@min-[73.5rem]:col-start-1 @min-[73.5rem]:row-span-2 @min-[73.5rem]:row-start-1"),
1723
+ children: t
1724
+ }),
1725
+ s ? /* @__PURE__ */ a(ie, {
1726
+ enter: l,
1727
+ "data-basic-page-columns-side": "",
1728
+ className: p("[[data-basic-page-stack]>[data-basic-page-columns]_&]:mt-0", "@min-[73.5rem]:col-start-2 @min-[73.5rem]:row-start-1"),
1729
+ children: n
1730
+ }) : null,
1731
+ r != null ? /* @__PURE__ */ a(ie, {
1732
+ enter: l,
1733
+ "data-basic-page-columns-foot": "",
1734
+ className: p("[[data-basic-page-stack]>[data-basic-page-columns]_&]:mt-0", s && "@min-[73.5rem]:col-start-2 @min-[73.5rem]:row-start-2 @min-[73.5rem]:self-start"),
1735
+ children: r
1736
+ }) : null
1737
+ ]
1738
+ })]
1739
+ })
1740
+ });
1741
+ }
1742
+ var On = {
1743
+ Root: Ga,
1744
+ Aside: Xt,
1745
+ Search: en,
1746
+ Table: wa,
1747
+ CondenseScope: Ua,
1748
+ Breadcrumbs: oa,
1749
+ Crumb: ca,
1750
+ Back: jt,
1751
+ Title: nt,
1752
+ Stack: ie,
1753
+ Columns: an,
1754
+ Header: pt,
1755
+ HeaderAction: mt,
1756
+ SectionTitle: ft,
1757
+ Description: ra,
1758
+ TableCount: ht,
1759
+ SectionFooter: gt,
1760
+ Card: bt,
1761
+ Item: vt,
1762
+ ItemPanel: yt,
1763
+ Callout: xt,
1764
+ CalloutTitle: wt,
1765
+ CalloutDescription: Nt,
1766
+ Onboard: At,
1767
+ Step: Tt,
1768
+ Row: Rt,
1769
+ RowLink: Kt,
1770
+ Value: Pt,
1771
+ Alert: It,
1772
+ Footer: Ft,
1773
+ Form: Ot,
1774
+ Saved: Bt,
1775
+ Fields: Mt,
1776
+ Inline: Dt,
1777
+ Submit: Ht,
1778
+ Reveal: Pe
1779
+ };
1780
+ export {
1781
+ La as a,
1782
+ On as c,
1783
+ Ja as d,
1784
+ ve as f,
1785
+ Ba as i,
1786
+ oe as l,
1787
+ Rn as m,
1788
+ Be as n,
1789
+ Ma as o,
1790
+ Pn as p,
1791
+ je as r,
1792
+ Oa as s,
1793
+ In as t,
1794
+ Za as u
1795
+ };
1796
+
1797
+ //# sourceMappingURL=basic-page-D3MY3uY6.js.map