@photon-ai/pho-ui 2.8.0 → 2.9.0

package/dist/chunks/{basic-page-BI8y4hHk.js → basic-page-B3iBvhbz.js}

@@ -1,119 +1,119 @@
 "use client";
-import { t as u } from "./cn-ChIgwEl3.js";
-import { n as Ie } from "./link-provider-DXzDQ08N.js";
-import { FADE_ENTRANCE as Je, FADE_SWAP as Ze, SPRING_ENTRANCE as et, TRAVEL_LINEAR as tt } from "../motion.js";
+import { t as p } from "./cn-ChIgwEl3.js";
+import { n as Oe } from "./link-provider-DXzDQ08N.js";
+import { FADE_ENTRANCE as Ze, FADE_SWAP as et, SPRING_ENTRANCE as tt, TRAVEL_LINEAR as nt } from "../motion.js";
 import { a as ae, o as de } from "./button-CdqS_t5a.js";
-import { t as nt } from "./createReactComponent-BqCmnqfX.js";
-import { t as at } from "./error-D0yoFxCv.js";
+import { t as at } from "./createReactComponent-BqCmnqfX.js";
+import { t as rt } from "./error-D0yoFxCv.js";
 import { t as ee } from "./IconChevronLeft-CSWMKQ4C.js";
-import { a as pe, i as rt, n as it, r as st, s as lt } from "./data-table-Cmz0p-jt.js";
+import { a as pe, i as it, n as st, r as lt, s as ot } from "./data-table-Cmz0p-jt.js";
 import { t as we } from "./IconSearch-BKAHkLyX.js";
-import { t as ot } from "./IconX-pZ9vrtSr.js";
-import { t as ct } from "./toast-iSf6NuAS.js";
+import { t as ct } from "./IconX-pZ9vrtSr.js";
+import { t as ut } from "./toast-iSf6NuAS.js";
 import { t as se } from "./input-group-fc9_jD4d.js";
-import { t as ut } from "./animated-height-CCO-Ocoz.js";
-import { n as Oe, t as Y } from "./scroll-area-BO-9PMM7.js";
-import { t as dt } from "./form-AiHbbw4m.js";
+import { t as dt } from "./animated-height-CCO-Ocoz.js";
+import { n as Le, t as Q } from "./scroll-area-BO-9PMM7.js";
+import { t as pt } from "./form-AiHbbw4m.js";
 import { i as j } from "./menu-BQeprfxB.js";
-import { Children as re, Fragment as pt, createContext as V, isValidElement as ft, useCallback as Le, useContext as _, useEffect as k, useId as mt, useLayoutEffect as G, useMemo as z, useRef as N, useState as v, useSyncExternalStore as fe } from "react";
-import { Fragment as Be, jsx as n, jsxs as b } from "react/jsx-runtime";
-import { AnimatePresence as X, motion as A, useIsPresent as ht, useReducedMotion as O } from "motion/react";
+import { Children as re, Fragment as ft, createContext as V, isValidElement as mt, useCallback as Be, useContext as S, useEffect as I, useId as ht, useLayoutEffect as G, useMemo as z, useRef as A, useState as b, useSyncExternalStore as fe } from "react";
+import { Fragment as Me, jsx as n, jsxs as w } from "react/jsx-runtime";
+import { AnimatePresence as W, motion as E, useIsPresent as gt, useReducedMotion as L } from "motion/react";
 import { Dialog as Z } from "@base-ui/react/dialog";
 import { createPortal as Ne } from "react-dom";
-var gt = [["path", {
+var vt = [["path", {
   d: "M9 6l6 6l-6 6",
   key: "svg-0"
-}]], vt = nt("outline", "chevron-right", "ChevronRight", gt), me = "rounded-base border border-pho-secondary bg-pho-primary", te = "divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0", yt = `${me} ${te}`, Ae = "flex min-w-0 flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5", bt = "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", xt = "flex flex-col gap-3 px-5 py-4", wt = "-mx-5 -mb-4 flex items-center rounded-b-[calc(0.75rem-1px)] bg-pho-secondary py-1 pr-3 pl-5", Nt = "-mx-2 -mt-1.5 flex items-center rounded-sm bg-pho-secondary px-2 py-0.5", S = et, B = Je, K = 12, At = 768;
+}]], yt = at("outline", "chevron-right", "ChevronRight", vt), me = "rounded-base border border-pho-secondary bg-pho-primary", te = "divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0", bt = `${me} ${te}`, Ae = "flex min-w-0 flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5", xt = "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", wt = "flex flex-col gap-3 px-5 py-4", Nt = "-mx-5 -mb-4 flex items-center rounded-b-[calc(0.75rem-1px)] bg-pho-secondary py-1 pr-3 pl-5", At = "-mx-2 -mt-1.5 flex items-center rounded-sm bg-pho-secondary px-2 py-0.5", T = tt, B = Ze, X = 12, Et = 768;
 function Ct(e) {
   return Math.round(Math.min(Math.max(e * 0.4, 320), 448));
 }
-var Me = V(null), De = V(null);
-function Et(e) {
-  const [t, a] = v(null), [i, r] = v(!1), [c, o] = v(!1), [l, s] = v(() => ({
+var De = V(null), He = V(null);
+function _t(e) {
+  const [t, a] = b(null), [r, i] = b(!1), [c, o] = b(!1), [l, s] = b(() => ({
     width: typeof window > "u" ? 0 : window.innerWidth,
     height: null
   }));
   return G(() => {
     const d = e.current;
-    if (!i || d == null) return;
-    const f = be(d), p = () => {
-      const h = d.offsetWidth, g = f?.clientHeight ?? null;
-      s((y) => y.width === h && y.height === g ? y : {
-        width: h,
-        height: g
+    if (!r || d == null) return;
+    const f = be(d), u = () => {
+      const g = d.offsetWidth, y = f?.clientHeight ?? null;
+      s((h) => h.width === g && h.height === y ? h : {
+        width: g,
+        height: y
       });
     };
-    if (p(), typeof ResizeObserver > "u") return;
-    const m = new ResizeObserver(p);
+    if (u(), typeof ResizeObserver > "u") return;
+    const m = new ResizeObserver(u);
     return m.observe(d), f != null && m.observe(f), () => m.disconnect();
-  }, [e, i]), {
+  }, [e, r]), {
     host: z(() => ({
       slot: t,
-      presentation: l.width >= At ? "panel" : "page",
+      presentation: l.width >= Et ? "panel" : "page",
       width: Ct(l.width),
       paneHeight: l.height,
       setOpen: o,
-      setPresent: r
+      setPresent: i
     }), [t, l]),
     setSlot: a,
     open: c
   };
 }
-function _t(e) {
+function St(e) {
   return e == null ? window.scrollY : e.scrollTop;
 }
-function Ce(e, t) {
+function Ee(e, t) {
   e == null ? window.scrollTo({ top: t }) : e.scrollTop = t;
 }
-function Rt({ condense: e = !0, width: t, className: a, children: i, ref: r, ...c }) {
-  const o = _(ie)?.adopt ?? !1, l = _(De), [s, d] = v(!1), f = N(0), p = Le((H) => {
+function Rt({ condense: e = !0, width: t, className: a, children: r, ref: i, ...c }) {
+  const o = S(ie)?.adopt ?? !1, l = S(He), [s, d] = b(!1), f = A(0), u = Be((H) => {
     f.current += H ? 1 : -1, d(f.current > 0);
-  }, []), m = t === "wide" || t == null && s, [h] = v(lt), g = N(null), [y, T] = v(null), [E, P] = v(null), x = z(() => ({
-    setTitle: T,
+  }, []), m = t === "wide" || t == null && s, [g] = b(ot), y = A(null), [h, C] = b(null), [v, P] = b(null), x = z(() => ({
+    setTitle: C,
     setTail: P
   }), []);
-  k(() => {
+  I(() => {
     if (l != null)
-      return l.setBack(E), () => l.setBack(null);
-  }, [l, E]);
-  const { host: L, setSlot: M, open: I } = Et(g), R = I && L.presentation === "page", D = N(!1), $ = N(0);
+      return l.setBack(v), () => l.setBack(null);
+  }, [l, v]);
+  const { host: R, setSlot: M, open: O } = _t(y), k = O && R.presentation === "page", D = A(!1), $ = A(0);
   G(() => {
-    const H = g.current;
-    if (R === D.current || H == null) return;
-    D.current = R;
-    const w = be(H);
-    R ? ($.current = _t(w), Ce(w, 0)) : Ce(w, $.current);
-  }, [R]);
-  const Q = e ? /* @__PURE__ */ n(St, {
-    title: y,
-    tail: l == null ? E : null,
-    silent: R || l != null
+    const H = y.current;
+    if (k === D.current || H == null) return;
+    D.current = k;
+    const N = be(H);
+    k ? ($.current = St(N), Ee(N, 0)) : Ee(N, $.current);
+  }, [k]);
+  const Y = e ? /* @__PURE__ */ n(kt, {
+    title: h,
+    tail: l == null ? v : null,
+    silent: k || l != null
   }) : null, U = /* @__PURE__ */ n("div", {
     "data-basic-page-column": "",
-    className: u("mx-auto flex w-full min-w-0 flex-1 flex-col px-5 pt-12 pb-12 *:min-w-0", m ? "max-w-[84rem] md:px-8" : "max-w-[44.5rem]", o || l != null ? "[&_[data-basic-page-back]]:hidden" : "has-[[data-basic-page-back]]:pt-16"),
+    className: p("mx-auto flex w-full min-w-0 flex-1 flex-col px-5 pt-12 pb-12 *:min-w-0", m ? "max-w-[84rem] md:px-8" : "max-w-[44.5rem]", o || l != null ? "[&_[data-basic-page-back]]:hidden" : "has-[[data-basic-page-back]]:pt-16"),
     children: e ? /* @__PURE__ */ n(ge.Provider, {
       value: x,
-      children: i
-    }) : i
+      children: r
+    }) : r
   });
   return /* @__PURE__ */ n("div", {
     "data-basic-page-root": "",
     "data-basic-page-width": m ? "wide" : void 0,
-    className: u("relative flex min-h-full w-full min-w-0 flex-row", a),
+    className: p("relative flex min-h-full w-full min-w-0 flex-row", a),
     ...c,
     ref: (H) => {
-      g.current = H, typeof r == "function" ? r(H) : r != null && (r.current = H);
+      y.current = H, typeof i == "function" ? i(H) : i != null && (i.current = H);
     },
-    children: /* @__PURE__ */ n(Me.Provider, {
-      value: L,
-      children: /* @__PURE__ */ n(rt.Provider, {
-        value: p,
-        children: /* @__PURE__ */ b(pe.Provider, {
-          value: h,
-          children: [/* @__PURE__ */ b("div", {
+    children: /* @__PURE__ */ n(De.Provider, {
+      value: R,
+      children: /* @__PURE__ */ n(it.Provider, {
+        value: u,
+        children: /* @__PURE__ */ w(pe.Provider, {
+          value: g,
+          children: [/* @__PURE__ */ w("div", {
             "data-basic-page-main": "",
-            className: u("flex min-w-0 flex-1 flex-col", R && "hidden"),
-            children: [Q, U]
+            className: p("flex min-w-0 flex-1 flex-col", k && "hidden"),
+            children: [Y, U]
           }), /* @__PURE__ */ n("div", {
             ref: M,
             className: "contents"
@@ -123,16 +123,16 @@ function Rt({ condense: e = !0, width: t, className: a, children: i, ref: r, ...
     })
   });
 }
-function St({ title: e, tail: t, silent: a = !1 }) {
-  const i = O(), [r, c] = v(!1), o = _(ie), l = mt();
-  k(() => {
+function kt({ title: e, tail: t, silent: a = !1 }) {
+  const r = L(), [i, c] = b(!1), o = S(ie), l = ht();
+  I(() => {
     if (o != null) {
       if (a) {
         o.store.clear(l);
         return;
       }
       o.store.set(l, {
-        condensed: r,
+        condensed: i,
         title: e?.label ?? null,
         back: t
       });
@@ -140,26 +140,26 @@ function St({ title: e, tail: t, silent: a = !1 }) {
   }, [
     o,
     l,
-    r,
+    i,
     e,
     t,
     a
-  ]), k(() => {
+  ]), I(() => {
     if (o != null)
       return () => o.store.clear(l);
   }, [o, l]);
   const s = e?.el ?? null;
-  return k(() => {
+  return I(() => {
     if (s == null || typeof IntersectionObserver > "u") return;
     const d = new IntersectionObserver(([f]) => c(f != null && !f.isIntersecting), { root: be(s) });
     return d.observe(s), () => d.disconnect();
   }, [s]), /* @__PURE__ */ n("div", {
     "data-basic-page-condense": "",
     className: "sticky top-0 z-20 h-0 overflow-visible",
-    children: /* @__PURE__ */ n(X, { children: r && !(o?.adopt ?? !1) && /* @__PURE__ */ b(A.div, {
+    children: /* @__PURE__ */ n(W, { children: i && !(o?.adopt ?? !1) && /* @__PURE__ */ w(E.div, {
       initial: {
         opacity: 0,
-        y: i ? 0 : Se
+        y: r ? 0 : Re
       },
       animate: {
         opacity: 1,
@@ -167,11 +167,11 @@ function St({ title: e, tail: t, silent: a = !1 }) {
       },
       exit: {
         opacity: 0,
-        y: i ? 0 : Se
+        y: r ? 0 : Re
       },
       transition: {
         ...ye,
-        y: Ft
+        y: Gt
       },
       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",
       children: [/* @__PURE__ */ n("div", {
@@ -195,47 +195,47 @@ function St({ title: e, tail: t, silent: a = !1 }) {
     }) })
   });
 }
-function kt(e) {
+function Tt(e) {
   return e.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
-function Tt(e) {
+function Pt(e) {
   if (!(typeof e != "string" && typeof e != "number"))
-    return kt(String(e)) || void 0;
+    return Tt(String(e)) || void 0;
 }
 function he(e, t) {
   if (e !== "")
-    return e ?? Tt(t);
+    return e ?? Pt(t);
 }
-var Pt = (e) => `basic-page-morph-${e}`, It = { layout: S }, Ee = 10, _e = {
+var It = (e) => `basic-page-morph-${e}`, Ot = { layout: T }, Ce = 10, _e = {
   delay: 0.2,
   duration: 0.12,
   ease: "easeOut"
-}, Ot = {
+}, Lt = {
   duration: 0.18,
   ease: "easeOut"
-}, Lt = -8, Bt = {
+}, Bt = -8, Mt = {
   duration: 0.16,
   ease: "easeOut"
-}, Mt = {
+}, Dt = {
   delay: 0.14,
   duration: 0.16,
   ease: "easeOut"
-}, He = {
+}, Fe = {
   duration: 0.12,
   ease: "easeOut"
-}, W = [];
-function Dt(e) {
-  const t = N({ labels: e });
+}, q = [];
+function Ht(e) {
+  const t = A({ labels: e });
   t.current.labels = e, G(() => {
     const a = t.current;
-    return W.push(a), () => {
-      W.splice(W.indexOf(a), 1);
+    return q.push(a), () => {
+      q.splice(q.indexOf(a), 1);
     };
   }, []);
 }
-function Fe() {
-  const [e] = v(() => {
-    const t = W[W.length - 1];
+function Ge() {
+  const [e] = b(() => {
+    const t = q[q.length - 1];
     return t ? { labels: [...t.labels] } : null;
   });
   return e;
@@ -245,39 +245,39 @@ var ge = V(null), ce = {
   title: null,
   back: null
 }, ie = V(null), ve = () => () => {
-}, Re = () => ce;
-function Ht({ adopt: e = !0, children: t }) {
-  const [a] = v(() => {
-    let r = ce, c = null;
+}, Se = () => ce;
+function Ft({ adopt: e = !0, children: t }) {
+  const [a] = b(() => {
+    let i = ce, c = null;
     const o = /* @__PURE__ */ new Set(), l = () => {
       for (const s of o) s();
     };
     return {
-      get: () => r,
+      get: () => i,
       set(s, d) {
-        c = s, r = d, l();
+        c = s, i = d, l();
       },
       clear(s) {
-        c === s && (c = null, r = ce, l());
+        c === s && (c = null, i = ce, l());
       },
       subscribe(s) {
         return o.add(s), () => o.delete(s);
       }
     };
-  }), i = z(() => ({
+  }), r = z(() => ({
     store: a,
     adopt: e
   }), [a, e]);
   return /* @__PURE__ */ n(ie.Provider, {
-    value: i,
+    value: r,
     children: t
   });
 }
-function Zn() {
-  const e = _(ie);
-  return fe(e?.store.subscribe ?? ve, e?.store.get ?? Re, e?.store.get ?? Re);
+function ta() {
+  const e = S(ie);
+  return fe(e?.store.subscribe ?? ve, e?.store.get ?? Se, e?.store.get ?? Se);
 }
-var ye = Ze, Ft = tt, Se = -8;
+var ye = et, Gt = nt, Re = -8;
 function be(e) {
   if (typeof getComputedStyle != "function") return null;
   for (let t = e.parentElement; t != null && t !== document.body; t = t.parentElement) {
@@ -286,36 +286,36 @@ function be(e) {
   }
   return null;
 }
-var le = /* @__PURE__ */ new Map(), Gt = 96;
-function zt(e) {
+var le = /* @__PURE__ */ new Map(), zt = 96;
+function Vt(e) {
   const t = e.closest("[data-basic-page-root]"), a = t?.querySelector("[data-basic-page-column]");
   return !t || !a ? 0 : a.getBoundingClientRect().left - t.getBoundingClientRect().left;
 }
-function Ge(e) {
-  const [t] = v(() => {
+function ze(e) {
+  const [t] = b(() => {
     if (e == null) return !1;
-    const i = le.get(e);
-    return i != null && i.visible && i.el.isConnected && zt(i.el) <= Gt;
-  }), a = N(null);
-  return k(() => {
+    const r = le.get(e);
+    return r != null && r.visible && r.el.isConnected && Vt(r.el) <= zt;
+  }), a = A(null);
+  return I(() => {
     if (e == null || typeof IntersectionObserver > "u") return;
-    const i = a.current;
-    if (!i) return;
-    const r = new IntersectionObserver(([c]) => {
+    const r = a.current;
+    if (!r) return;
+    const i = new IntersectionObserver(([c]) => {
       c && le.set(e, {
         visible: c.isIntersecting,
-        el: i
+        el: r
       });
     });
-    return r.observe(i), () => {
-      r.disconnect(), le.delete(e);
+    return i.observe(r), () => {
+      i.disconnect(), le.delete(e);
     };
   }, [e]), {
     fly: t,
     ref: a
   };
 }
-var Vt = {
+var $t = {
   fade: {
     initial: { opacity: 0 },
     animate: { opacity: 1 },
@@ -324,31 +324,31 @@ var Vt = {
   rise: {
     initial: {
       opacity: 0,
-      y: K
+      y: X
     },
     animate: {
       opacity: 1,
       y: 0
     },
     transition: {
-      y: S,
+      y: T,
       opacity: B
     }
   },
   slide: {
     initial: { x: "-100%" },
     animate: { x: 0 },
-    transition: { x: Mt }
+    transition: { x: Dt }
   }
 };
-function ze({ morphId: e, fromClassName: t, fly: a, morphRef: i, arrival: r, className: c, children: o }) {
-  const [l, s] = v(!1), d = !a && r != null ? Vt[r] : null;
-  return /* @__PURE__ */ b(A.span, {
-    ref: i,
-    layoutId: Pt(e),
+function Ve({ morphId: e, fromClassName: t, fly: a, morphRef: r, arrival: i, className: c, children: o }) {
+  const [l, s] = b(!1), d = !a && i != null ? $t[i] : null;
+  return /* @__PURE__ */ w(E.span, {
+    ref: r,
+    layoutId: It(e),
     initial: d?.initial,
     animate: d?.animate,
-    transition: a ? It : {
+    transition: a ? Ot : {
       layout: { duration: 0 },
       ...d?.transition
     },
@@ -356,77 +356,77 @@ function ze({ morphId: e, fromClassName: t, fly: a, morphRef: i, arrival: r, cla
       a && s(!0);
     },
     onLayoutAnimationComplete: () => s(!1),
-    className: u("relative inline-block", c),
-    children: [o, l && /* @__PURE__ */ n(A.span, {
+    className: p("relative inline-block", c),
+    children: [o, l && /* @__PURE__ */ n(E.span, {
       "aria-hidden": !0,
       initial: { opacity: 1 },
       animate: { opacity: 0 },
-      transition: Ot,
+      transition: Lt,
       onAnimationComplete: () => s(!1),
-      className: u("absolute inset-0", t),
+      className: p("absolute inset-0", t),
       children: o
     })]
   });
 }
 var ke = "max-w-full min-w-0 truncate align-top";
-function $t({ id: e, morphId: t, enter: a, className: i, children: r, ...c }) {
-  const o = he(e, r), l = O(), s = Ge(t), d = Fe(), f = !l && (t != null || a === !0), p = a || d != null ? "rise" : void 0, m = _(ge), h = N(null);
+function jt({ id: e, morphId: t, enter: a, className: r, children: i, ...c }) {
+  const o = he(e, i), l = L(), s = ze(t), d = Ge(), f = !l && (t != null || a === !0), u = a || d != null ? "rise" : void 0, m = S(ge), g = A(null);
   G(() => {
     if (m != null)
       return m.setTitle({
-        label: r,
-        el: h.current
+        label: i,
+        el: g.current
       }), () => m.setTitle(null);
-  }, [m, r]);
-  const [g, y] = v(s.fly && d != null);
+  }, [m, i]);
+  const [y, h] = b(s.fly && d != null);
   return G(() => {
-    W.length > 0 && y(!1);
-  }, []), /* @__PURE__ */ b("h1", {
+    q.length > 0 && h(!1);
+  }, []), /* @__PURE__ */ w("h1", {
     id: o,
-    className: u("text-display-base text-pho-primary max-w-full min-w-0 scroll-mt-12 px-5 font-medium", f ? "whitespace-nowrap" : "truncate", i),
+    className: p("text-display-base text-pho-primary max-w-full min-w-0 scroll-mt-12 px-5 font-medium", f ? "whitespace-nowrap" : "truncate", r),
     ...c,
-    ref: (T) => {
-      h.current = T;
-      const E = c.ref;
-      typeof E == "function" ? E(T) : E != null && (E.current = T);
+    ref: (C) => {
+      g.current = C;
+      const v = c.ref;
+      typeof v == "function" ? v(C) : v != null && (v.current = C);
     },
-    children: [t != null && !l ? /* @__PURE__ */ n(ze, {
+    children: [t != null && !l ? /* @__PURE__ */ n(Ve, {
       morphId: t,
       fromClassName: "text-pho-secondary",
       fly: s.fly,
       morphRef: s.ref,
-      arrival: p,
+      arrival: u,
       className: ke,
-      children: r
-    }) : a && !l ? /* @__PURE__ */ n(A.span, {
+      children: i
+    }) : a && !l ? /* @__PURE__ */ n(E.span, {
       initial: {
         opacity: 0,
-        y: K
+        y: X
       },
       animate: {
         opacity: 1,
         y: 0
       },
       transition: {
-        y: S,
+        y: T,
         opacity: B
       },
-      className: u("inline-block", ke),
-      children: r
-    }) : r, g && /* @__PURE__ */ n(A.span, {
+      className: p("inline-block", ke),
+      children: i
+    }) : i, y && /* @__PURE__ */ n(E.span, {
       "aria-hidden": !0,
       initial: { opacity: 1 },
       animate: { opacity: 0 },
-      transition: He,
-      onAnimationComplete: () => y(!1),
-      className: u("text-pho-secondary pointer-events-none absolute inline-flex items-center", yn),
+      transition: Fe,
+      onAnimationComplete: () => h(!1),
+      className: p("text-pho-secondary pointer-events-none absolute inline-flex items-center", bn),
       children: /* @__PURE__ */ n(ee, {})
     })]
   });
 }
-var Ve = V(!1);
-function jt() {
-  const e = _(Ve), t = O(), [a] = v(() => e && !t);
+var $e = V(!1);
+function qt() {
+  const e = S($e), t = L(), [a] = b(() => e && !t);
   return a;
 }
 var Wt = {
@@ -436,19 +436,19 @@ var Wt = {
   paddingBottom: 0,
   borderTopWidth: 0
 }, Xt = {
-  y: S,
+  y: T,
   opacity: B,
-  height: S,
-  paddingTop: S,
-  paddingBottom: S,
-  borderTopWidth: S
+  height: T,
+  paddingTop: T,
+  paddingBottom: T,
+  borderTopWidth: T
 };
 function xe() {
-  const e = jt(), t = ht(), a = O();
+  const e = qt(), t = gt(), a = L();
   return {
     initial: e ? {
       opacity: 0,
-      y: K
+      y: X
     } : !1,
     animate: {
       opacity: 1,
@@ -460,48 +460,48 @@ function xe() {
   };
 }
 var Kt = typeof process < "u" && process.env.NODE_ENV !== "production";
-function $e(e, t, a, i) {
-  k(() => {
+function je(e, t, a, r) {
+  I(() => {
     if (!Kt || e.current == null || typeof getComputedStyle != "function") return;
-    const r = (o) => {
+    const i = (o) => {
       const l = getComputedStyle(o).rowGap;
       return l === "" || l === "normal" ? null : parseFloat(l);
-    }, c = r(e.current);
+    }, c = i(e.current);
     c != null && c !== a && console.warn(`[BasicPage.${t}] spaced at ${c}px instead of ${a}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);
     for (const o of Array.from(e.current.children)) {
-      const l = i(o);
+      const l = r(o);
       if (l == null || getComputedStyle(o).display === "contents") continue;
-      const s = r(o);
+      const s = i(o);
       s != null && s !== l && console.warn(`[BasicPage.${t}] a child is spaced at ${s}px instead of ${l}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.`, o);
     }
   });
 }
-function qt({ className: e, children: t, ref: a, ...i }) {
-  const r = O(), c = N(null);
-  $e(c, "Stack", 40, (f) => f.hasAttribute("data-basic-page-fields") ? 20 : 12);
-  const o = i["aria-busy"], l = o === !0 || o === "true", s = N(l), d = s.current && !l;
-  return k(() => {
+function Qt({ className: e, children: t, ref: a, ...r }) {
+  const i = L(), c = A(null);
+  je(c, "Stack", 40, (f) => f.hasAttribute("data-basic-page-fields") ? 20 : 12);
+  const o = r["aria-busy"], l = o === !0 || o === "true", s = A(l), d = s.current && !l;
+  return I(() => {
     s.current = l;
-  }), /* @__PURE__ */ n(A.div, {
+  }), /* @__PURE__ */ n(E.div, {
     ref: (f) => {
       c.current = f, typeof a == "function" ? a(f) : a != null && (a.current = f);
     },
     "data-basic-page-stack": "",
-    initial: r ? !1 : {
+    initial: i ? !1 : {
       opacity: 0,
-      y: K
+      y: X
     },
     animate: {
       opacity: 1,
       y: 0
     },
     transition: {
-      y: S,
+      y: T,
       opacity: B
     },
-    className: u("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", "*:flex *:min-w-0 *:flex-col [&>*:not([data-basic-page-fields])]:gap-3", e),
-    ...i,
-    children: /* @__PURE__ */ n(Ve.Provider, {
+    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", "*:flex *:min-w-0 *:flex-col [&>*:not([data-basic-page-fields])]:gap-3", e),
+    ...r,
+    children: /* @__PURE__ */ n($e.Provider, {
       value: d,
       children: t
     })
@@ -509,113 +509,113 @@ function qt({ className: e, children: t, ref: a, ...i }) {
 }
 var Te = "@container grid min-w-0 grid-cols-[minmax(0,1fr)_auto_auto] mb-3 [&>:not([data-basic-page-search]):not([data-basic-page-header-action])]:col-start-1 [[data-basic-page-callout]_&]:mb-0 [[data-basic-page-stack]>*>&]:mb-0";
 function Yt({ enter: e, className: t, ...a }) {
-  const i = O();
-  return e && !i ? /* @__PURE__ */ n(A.div, {
+  const r = L();
+  return e && !r ? /* @__PURE__ */ n(E.div, {
     initial: {
       opacity: 0,
-      y: K
+      y: X
     },
     animate: {
       opacity: 1,
       y: 0
     },
     transition: {
-      y: S,
+      y: T,
       opacity: B
     },
     "data-basic-page-header": "",
-    className: u(Te, t),
+    className: p(Te, t),
     ...a
   }) : /* @__PURE__ */ n("div", {
     "data-basic-page-header": "",
-    className: u(Te, t),
+    className: p(Te, t),
     ...a
   });
 }
-function Qt({ className: e, ...t }) {
+function Ut({ className: e, ...t }) {
   return /* @__PURE__ */ n("div", {
     "data-basic-page-header-action": "",
-    className: u("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]>&]:ml-4 [[data-basic-page-header]>&]:self-start [[data-basic-page-header]>&]:justify-self-end", e),
+    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]>&]:ml-4 [[data-basic-page-header]>&]:self-start [[data-basic-page-header]>&]:justify-self-end", e),
     ...t
   });
 }
-function Ut({ id: e, className: t, children: a, ...i }) {
-  const r = he(e, a);
+function Jt({ id: e, className: t, children: a, ...r }) {
+  const i = he(e, a);
   return /* @__PURE__ */ n("h2", {
-    id: r,
-    className: u("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),
-    ...i,
+    id: i,
+    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),
+    ...r,
     children: a
   });
 }
-function je({ className: e, ...t }) {
+function qe({ className: e, ...t }) {
   return /* @__PURE__ */ n("p", {
-    className: u("text-display-xs text-pho-description px-5 font-normal", e),
+    className: p("text-display-xs text-pho-description px-5 font-normal", e),
     ...t
   });
 }
-function Jt({ one: e, other: t, ...a }) {
-  const i = _(pe), r = fe(i?.subscribe ?? ve, () => i?.get().api ?? null, () => null);
-  if (r == null) return null;
-  const c = r.query.trim() !== "" ? `${r.matched} of ${r.total}.` : `${r.total} ${r.total === 1 ? e : t}.`;
-  return /* @__PURE__ */ n(je, {
+function Zt({ one: e, other: t, ...a }) {
+  const r = S(pe), i = fe(r?.subscribe ?? ve, () => r?.get().api ?? null, () => null);
+  if (i == null) return null;
+  const c = i.query.trim() !== "" ? `${i.matched} of ${i.total}.` : `${i.total} ${i.total === 1 ? e : t}.`;
+  return /* @__PURE__ */ n(qe, {
     ...a,
     children: c
   });
 }
-function Zt({ className: e, ...t }) {
+function en({ className: e, ...t }) {
   return /* @__PURE__ */ n("p", {
-    className: u("text-pho-description px-5 text-xs font-normal", "mt-3 [[data-basic-page-callout]_&]:mt-0 [[data-basic-page-stack]>*>&]:mt-0", e),
+    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),
     ...t
   });
 }
-function en({ animateHeight: e, className: t, children: a, ...i }) {
-  const r = /* @__PURE__ */ n(X, { children: re.toArray(a) });
+function tn({ animateHeight: e, className: t, children: a, ...r }) {
+  const i = /* @__PURE__ */ n(W, { children: re.toArray(a) });
   return e ? /* @__PURE__ */ n("div", {
-    className: u(me, "min-h-0 overflow-hidden", t),
-    ...i,
-    children: /* @__PURE__ */ n(ut, {
-      transition: S,
+    className: p(me, "min-h-0 overflow-hidden", t),
+    ...r,
+    children: /* @__PURE__ */ n(dt, {
+      transition: T,
       className: te,
-      children: r
+      children: i
     })
   }) : /* @__PURE__ */ n("div", {
-    className: u(yt, t),
-    ...i,
-    children: r
+    className: p(bt, t),
+    ...r,
+    children: i
   });
 }
-function tn({ className: e, ...t }) {
-  const { leaving: a, ...i } = xe();
-  return /* @__PURE__ */ n(A.div, {
-    ...i,
-    className: u(xt, a && "overflow-hidden", e),
+function nn({ className: e, ...t }) {
+  const { leaving: a, ...r } = xe();
+  return /* @__PURE__ */ n(E.div, {
+    ...r,
+    className: p(wt, a && "overflow-hidden", e),
     ...t
   });
 }
-function nn({ divided: e = !1, className: t, ...a }) {
+function an({ divided: e = !1, className: t, ...a }) {
   return /* @__PURE__ */ n("div", {
-    className: u(e ? Nt : wt, t),
+    className: p(e ? At : Nt, t),
     ...a
   });
 }
-function an({ className: e, icon: t, children: a, ...i }) {
+function rn({ className: e, icon: t, children: a, ...r }) {
   if (t == null || t === !1 || t === !0) return /* @__PURE__ */ n("div", {
     "data-basic-page-callout": "",
-    className: u(Ae, e),
-    ...i,
+    className: p(Ae, e),
+    ...r,
     children: a
   });
-  const [r, ...c] = re.toArray(a);
-  return /* @__PURE__ */ b("div", {
+  const [i, ...c] = re.toArray(a);
+  return /* @__PURE__ */ w("div", {
     "data-basic-page-callout": "",
-    className: u(Ae, e),
-    ...i,
-    children: [/* @__PURE__ */ b("div", {
+    className: p(Ae, e),
+    ...r,
+    children: [/* @__PURE__ */ w("div", {
       className: "relative",
       children: [/* @__PURE__ */ n("div", {
         className: "min-w-0 pr-16",
-        children: r
+        children: i
       }), /* @__PURE__ */ n("div", {
         "aria-hidden": !0,
         className: "text-pho-primary pointer-events-none absolute top-0 right-0 size-14 opacity-[0.275] [&>svg]:size-full",
@@ -624,28 +624,28 @@ function an({ className: e, icon: t, children: a, ...i }) {
     }), c]
   });
 }
-function rn({ id: e, className: t, children: a, ...i }) {
-  const r = he(e, a);
+function sn({ id: e, className: t, children: a, ...r }) {
+  const i = he(e, a);
   return /* @__PURE__ */ n("h2", {
-    id: r,
-    className: u("text-display-xs text-pho-primary max-w-full min-w-0 scroll-mt-12 truncate font-medium", t),
-    ...i,
+    id: i,
+    className: p("text-display-xs text-pho-primary max-w-full min-w-0 scroll-mt-12 truncate font-medium", t),
+    ...r,
     children: a
   });
 }
-function sn({ className: e, ...t }) {
+function ln({ className: e, ...t }) {
   return /* @__PURE__ */ n("p", {
-    className: u("text-display-xs text-pho-description font-normal", e),
+    className: p("text-display-xs text-pho-description font-normal", e),
     ...t
   });
 }
-function ln({ label: e, description: t, htmlFor: a, stacked: i = !1, className: r, children: c, ...o }) {
+function on({ label: e, description: t, htmlFor: a, stacked: r = !1, className: i, children: c, ...o }) {
   const { leaving: l, ...s } = xe();
-  return /* @__PURE__ */ b(A.div, {
+  return /* @__PURE__ */ w(E.div, {
     ...s,
-    className: u(bt, i && "sm:flex-col sm:items-stretch sm:justify-start sm:gap-3", l && "overflow-hidden", r),
+    className: p(xt, r && "sm:flex-col sm:items-stretch sm:justify-start sm:gap-3", l && "overflow-hidden", i),
     ...o,
-    children: [/* @__PURE__ */ b("div", {
+    children: [/* @__PURE__ */ w("div", {
       className: "min-w-0",
       children: [a ? /* @__PURE__ */ n("label", {
         htmlFor: a,
@@ -659,22 +659,22 @@ function ln({ label: e, description: t, htmlFor: a, stacked: i = !1, className:
         children: t
       }) : null]
     }), /* @__PURE__ */ n("div", {
-      className: u("flex w-full min-w-0 items-center gap-2 sm:w-auto", i && "sm:w-full"),
+      className: p("flex w-full min-w-0 items-center gap-2 sm:w-auto", r && "sm:w-full"),
       children: c
     })]
   });
 }
-function on({ className: e, ...t }) {
+function cn({ className: e, ...t }) {
   return /* @__PURE__ */ n("p", {
-    className: u("text-pho-description max-w-full min-w-0 truncate text-base", e),
+    className: p("text-pho-description max-w-full min-w-0 truncate text-base", e),
     ...t
   });
 }
-function cn({ error: e, show: t, className: a, children: i, ...r }) {
-  const c = O(), o = _(q), l = e ?? o?.error ?? void 0;
-  return /* @__PURE__ */ n(X, {
+function un({ error: e, show: t, className: a, children: r, ...i }) {
+  const c = L(), o = S(K), l = e ?? o?.error ?? void 0;
+  return /* @__PURE__ */ n(W, {
     initial: !1,
-    children: (t ?? !0) && (l != null || i != null) ? /* @__PURE__ */ n(A.div, {
+    children: (t ?? !0) && (l != null || r != null) ? /* @__PURE__ */ n(E.div, {
       "data-basic-page-alert": "",
       className: "overflow-hidden",
       initial: {
@@ -690,53 +690,53 @@ function cn({ error: e, show: t, className: a, children: i, ...r }) {
         opacity: 0
       },
       transition: c ? { duration: 0 } : {
-        height: S,
+        height: T,
         opacity: B
       },
-      children: /* @__PURE__ */ n(at, {
+      children: /* @__PURE__ */ n(rt, {
         error: l,
-        className: u("px-5 pb-3", a),
-        ...r,
-        children: i
+        className: p("px-5 pb-3", a),
+        ...i,
+        children: r
       })
     }) : null
   });
 }
-function ea() {
-  return _(q)?.requestSave ?? null;
+function na() {
+  return S(K)?.requestSave ?? null;
 }
-var ta = 800, oe = ct.createToastManager(), q = V(null);
-function un({ action: e, errors: t, autoSave: a = !1, className: i, children: r, onChange: c, onBlur: o, ...l }) {
-  const [s, d] = v(!1), [f, p] = v(!1), [m, h] = v(null), [g, y] = v(t ?? {}), [T, E] = v(null), P = N(null), x = N(null), L = N(null), M = N(!1), I = N(!1), R = N(null), D = N(async () => {
+var aa = 800, oe = ut.createToastManager(), K = V(null);
+function dn({ action: e, errors: t, autoSave: a = !1, className: r, children: i, onChange: c, onBlur: o, ...l }) {
+  const [s, d] = b(!1), [f, u] = b(!1), [m, g] = b(null), [y, h] = b(t ?? {}), [C, v] = b(null), P = A(null), x = A(null), R = A(null), M = A(!1), O = A(!1), k = A(null), D = A(async () => {
   });
-  k(() => () => {
+  I(() => () => {
     x.current != null && clearTimeout(x.current);
   }, []);
   const $ = async () => {
-    const w = P.current;
-    if (w == null || e == null) return;
+    const N = P.current;
+    if (N == null || e == null) return;
     if (M.current) {
-      I.current = !0;
+      O.current = !0;
       return;
     }
-    if (!w.checkValidity()) return;
-    const C = Object.fromEntries(new FormData(w).entries()), J = L.current;
-    M.current = !0, E({
+    if (!N.checkValidity()) return;
+    const _ = Object.fromEntries(new FormData(N).entries()), J = R.current;
+    M.current = !0, v({
       field: J,
       phase: "saving"
-    }), h(null);
+    }), g(null);
     try {
-      const F = (await e(C))?.errors;
+      const F = (await e(_))?.errors;
       if (F != null && Object.keys(F).length > 0) {
-        y(F), E(null);
+        h(F), v(null);
         return;
       }
-      y({}), p(!1), E({
+      h({}), u(!1), v({
         field: J,
         phase: "saved"
-      }), R.current != null && (oe.close(R.current), R.current = null);
+      }), k.current != null && (oe.close(k.current), k.current = null);
     } catch (F) {
-      E(null), h(F), R.current != null && oe.close(R.current), R.current = oe.add({
+      v(null), g(F), k.current != null && oe.close(k.current), k.current = oe.add({
         type: "error",
         title: "Couldn't save",
         description: F instanceof Error && F.message !== "" ? F.message : "The change is still here — try again.",
@@ -749,94 +749,94 @@ function un({ action: e, errors: t, autoSave: a = !1, className: i, children: r,
         }
       });
     } finally {
-      M.current = !1, I.current && (I.current = !1, D.current());
+      M.current = !1, O.current && (O.current = !1, D.current());
     }
   };
   D.current = $;
-  const Q = () => {
+  const Y = () => {
     x.current != null && clearTimeout(x.current), x.current = setTimeout(() => {
       x.current = null, D.current();
     }, 800);
-  }, U = z(() => a ? (w) => {
-    w != null && (L.current = w), p(!0), Q();
+  }, U = z(() => a ? (N) => {
+    N != null && (R.current = N), u(!0), Y();
   } : null, [a]), H = z(() => ({
     pending: s,
     dirty: f,
     error: m,
-    auto: T,
+    auto: C,
     requestSave: U
   }), [
     s,
     f,
     m,
-    T,
+    C,
     U
   ]);
-  return /* @__PURE__ */ n(q.Provider, {
+  return /* @__PURE__ */ n(K.Provider, {
     value: H,
-    children: /* @__PURE__ */ n(dt, {
-      errors: g,
-      onFormSubmit: async (w) => {
+    children: /* @__PURE__ */ n(pt, {
+      errors: y,
+      onFormSubmit: async (N) => {
         if (e != null) {
-          d(!0), h(null);
+          d(!0), g(null);
           try {
-            const C = (await e(w))?.errors;
-            if (C != null && Object.keys(C).length > 0) {
-              y(C);
+            const _ = (await e(N))?.errors;
+            if (_ != null && Object.keys(_).length > 0) {
+              h(_);
               return;
             }
-            y({}), p(!1);
-          } catch (C) {
-            h(C);
+            h({}), u(!1);
+          } catch (_) {
+            g(_);
           } finally {
             d(!1);
           }
         }
       },
-      onChange: (w) => {
-        p(!0), h(null);
-        const C = w.target.name;
-        C && C in g && y((J) => {
-          const { [C]: F, ...Ue } = J;
-          return Ue;
-        }), a && (C && (L.current = C), Q()), c?.(w);
+      onChange: (N) => {
+        u(!0), g(null);
+        const _ = N.target.name;
+        _ && _ in y && h((J) => {
+          const { [_]: F, ...Je } = J;
+          return Je;
+        }), a && (_ && (R.current = _), Y()), c?.(N);
       },
-      onBlur: (w) => {
-        a && f && x.current != null && (clearTimeout(x.current), x.current = null, D.current()), o?.(w);
+      onBlur: (N) => {
+        a && f && x.current != null && (clearTimeout(x.current), x.current = null, D.current()), o?.(N);
       },
-      className: u("contents [[data-basic-page-stack]>&]:flex [[data-basic-page-stack]>&]:min-w-0 [[data-basic-page-stack]>&]:flex-col", i),
+      className: p("contents [[data-basic-page-stack]>&]:flex [[data-basic-page-stack]>&]:min-w-0 [[data-basic-page-stack]>&]:flex-col", r),
       ...l,
-      ref: (w) => {
-        P.current = w;
-        const C = l.ref;
-        typeof C == "function" ? C(w) : C != null && (C.current = w);
+      ref: (N) => {
+        P.current = N;
+        const _ = l.ref;
+        typeof _ == "function" ? _(N) : _ != null && (_.current = N);
       },
       children: /* @__PURE__ */ n("fieldset", {
         disabled: s,
         "aria-busy": s || void 0,
         className: "contents",
-        children: r
+        children: i
       })
     })
   });
 }
-function dn({ name: e, className: t, ...a }) {
-  const i = _(q), r = O(), c = i?.auto ?? null, o = c != null && (e == null || c.field === e), [l, s] = v(!1), d = o ? c.phase : null;
-  k(() => {
+function pn({ name: e, className: t, ...a }) {
+  const r = S(K), i = L(), c = r?.auto ?? null, o = c != null && (e == null || c.field === e), [l, s] = b(!1), d = o ? c.phase : null;
+  I(() => {
     if (d !== "saved") return;
     s(!0);
     const m = setTimeout(() => s(!1), 1800);
     return () => clearTimeout(m);
   }, [d, c]);
-  const f = d === "saving" ? "Saving…" : d === "saved" && l ? "Saved" : null, p = r ? "blur(0px)" : `blur(${Oe}px)`;
+  const f = d === "saving" ? "Saving…" : d === "saved" && l ? "Saved" : null, u = i ? "blur(0px)" : `blur(${Le}px)`;
   return /* @__PURE__ */ n("span", {
     className: "grid justify-items-end",
-    children: /* @__PURE__ */ n(X, {
+    children: /* @__PURE__ */ n(W, {
       initial: !1,
-      children: f != null && /* @__PURE__ */ n(A.output, {
+      children: f != null && /* @__PURE__ */ n(E.output, {
         initial: {
           opacity: 0,
-          filter: p
+          filter: u
         },
         animate: {
           opacity: 1,
@@ -844,10 +844,10 @@ function dn({ name: e, className: t, ...a }) {
         },
         exit: {
           opacity: 0,
-          filter: p
+          filter: u
         },
         transition: ye,
-        className: u("text-pho-description pl-8 [grid-area:1/1]", t),
+        className: p("text-pho-description pl-8 [grid-area:1/1]", t),
         style: { background: "linear-gradient(to left, var(--background-color-pho-primary) calc(100% - 2rem), transparent)" },
         ...a,
         children: f
@@ -855,28 +855,28 @@ function dn({ name: e, className: t, ...a }) {
     })
   });
 }
-var pn = "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";
-function fn({ className: e, ...t }) {
-  const a = N(null);
-  return $e(a, "Fields", 20, () => null), /* @__PURE__ */ n("div", {
+var fn = "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";
+function mn({ className: e, ...t }) {
+  const a = A(null);
+  return je(a, "Fields", 20, () => null), /* @__PURE__ */ n("div", {
     "data-basic-page-fields": "",
-    className: u(me, pn, e),
+    className: p(me, fn, e),
     ...t,
-    ref: (i) => {
-      a.current = i;
-      const r = t.ref;
-      typeof r == "function" ? r(i) : r != null && (r.current = i);
+    ref: (r) => {
+      a.current = r;
+      const i = t.ref;
+      typeof i == "function" ? i(r) : i != null && (i.current = r);
     }
   });
 }
-function mn({ className: e, ...t }) {
+function hn({ className: e, ...t }) {
   return /* @__PURE__ */ n("div", {
-    className: u("flex min-w-0 flex-col gap-5 *:min-w-0 sm:flex-row sm:gap-3 sm:*:flex-1", e),
+    className: p("flex min-w-0 flex-col gap-5 *:min-w-0 sm:flex-row sm:gap-3 sm:*:flex-1", e),
     ...t
   });
 }
-function hn({ children: e = "Save changes", ...t }) {
-  const a = _(q);
+function gn({ children: e = "Save changes", ...t }) {
+  const a = S(K);
   return /* @__PURE__ */ n(ae, {
     type: "submit",
     variant: "effect",
@@ -886,59 +886,59 @@ function hn({ children: e = "Save changes", ...t }) {
     children: e
   });
 }
-function gn({ show: e, className: t, ...a }) {
-  const i = _(q), r = e === "dirty" ? i?.dirty ?? !1 : e, c = /* @__PURE__ */ n("div", {
+function vn({ show: e, className: t, ...a }) {
+  const r = S(K), i = e === "dirty" ? r?.dirty ?? !1 : e, c = /* @__PURE__ */ n("div", {
     "data-basic-page-footer": "",
-    className: u("flex items-center justify-end gap-3 pr-[calc(1.25rem+2.5px)]", t),
+    className: p("flex items-center justify-end gap-3 pr-[calc(1.25rem+2.5px)]", t),
     ...a
   });
-  return r === void 0 ? c : /* @__PURE__ */ n(We, {
-    show: r,
+  return i === void 0 ? c : /* @__PURE__ */ n(We, {
+    show: i,
     gap: "block",
     clip: !1,
     children: c
   });
 }
-var vn = {
+var yn = {
   stack: "-2.5rem",
   block: "-0.75rem",
   fields: "-1.25rem",
   none: "0px"
 };
-function We({ show: e, clip: t = !0, gap: a = "stack", dividers: i, className: r, ...c }) {
-  const o = O(), l = vn[i ? "none" : a], s = N(null), d = N(e !== !0);
-  k(() => {
+function We({ show: e, clip: t = !0, gap: a = "stack", dividers: r, className: i, ...c }) {
+  const o = L(), l = yn[r ? "none" : a], s = A(null), d = A(e !== !0);
+  I(() => {
     d.current = !0;
   }, []);
   const f = () => {
     t && s.current && (s.current.style.overflow = "hidden");
-  }, p = () => {
+  }, u = () => {
     s.current && (s.current.style.overflow = "");
   };
-  return e === void 0 ? /* @__PURE__ */ n(A.div, {
+  return e === void 0 ? /* @__PURE__ */ n(E.div, {
     initial: o ? !1 : {
       opacity: 0,
-      y: K
+      y: X
     },
     animate: {
       opacity: 1,
       y: 0
     },
     transition: {
-      y: S,
+      y: T,
       opacity: B
     },
-    className: u(i && te, r),
+    className: p(r && te, i),
     ...c
-  }) : /* @__PURE__ */ n(X, {
+  }) : /* @__PURE__ */ n(W, {
     initial: !1,
-    children: e ? /* @__PURE__ */ n(A.div, {
+    children: e ? /* @__PURE__ */ n(E.div, {
       "data-basic-page-reveal": "",
       ref: (m) => {
         s.current = m, t && m && d.current && (m.style.overflow = "hidden");
       },
       onAnimationStart: f,
-      onAnimationComplete: p,
+      onAnimationComplete: u,
       initial: {
         height: 0,
         opacity: 0,
@@ -955,73 +955,73 @@ function We({ show: e, clip: t = !0, gap: a = "stack", dividers: i, className: r
         marginTop: l
       },
       transition: o ? { duration: 0 } : {
-        height: S,
-        marginTop: S,
+        height: T,
+        marginTop: T,
         opacity: B
       },
-      className: u(i && te, r),
+      className: p(r && te, i),
       ...c
     }) : null
   });
 }
-var yn = "top-4 left-5 h-8 text-base [&>svg]:size-[1.125em] [&>svg]:shrink-0", bn = "(min-width: 40rem)";
-function xn() {
-  return typeof window < "u" && typeof window.matchMedia == "function" && !window.matchMedia(bn).matches;
+var bn = "top-4 left-5 h-8 text-base [&>svg]:size-[1.125em] [&>svg]:shrink-0", xn = "(min-width: 40rem)";
+function wn() {
+  return typeof window < "u" && typeof window.matchMedia == "function" && !window.matchMedia(xn).matches;
 }
 var Xe = V(null);
 function Ke({ className: e, children: t, ...a }) {
-  const i = re.toArray(t).filter(ft), r = i.map((P) => P.props.children ?? null), c = Fe();
-  Dt(r);
-  const [o] = v(xn), l = O(), s = i.length, d = Ie(), f = !o && s >= wn, p = _(ge), m = s > 0 ? i[s - 1]?.props : null, h = m?.children ?? "Back", g = m?.href, y = m?.onClick;
+  const r = re.toArray(t).filter(mt), i = r.map((P) => P.props.children ?? null), c = Ge();
+  Ht(i);
+  const [o] = b(wn), l = L(), s = r.length, d = Oe(), f = !o && s >= Nn, u = S(ge), m = s > 0 ? r[s - 1]?.props : null, g = m?.children ?? "Back", y = m?.href, h = m?.onClick;
   G(() => {
-    if (!(p == null || g == null))
-      return p.setTail({
-        label: h,
-        href: g,
-        onClick: y
-      }), () => p.setTail(null);
+    if (!(u == null || y == null))
+      return u.setTail({
+        label: g,
+        href: y,
+        onClick: h
+      }), () => u.setTail(null);
   }, [
-    p,
-    h,
+    u,
     g,
-    y
+    y,
+    h
   ]);
-  const [T, E] = v(!l && !o && c != null && c.labels.length > s);
+  const [C, v] = b(!l && !o && c != null && c.labels.length > s);
   return /* @__PURE__ */ n("nav", {
     "aria-label": "Breadcrumb",
     "data-basic-page-back": "",
-    className: u("absolute top-4 left-3 flex min-w-max items-center", e),
+    className: p("absolute top-4 left-3 flex min-w-max items-center", e),
     ...a,
-    children: /* @__PURE__ */ b("ol", {
+    children: /* @__PURE__ */ w("ol", {
       className: "m-0 flex list-none items-center p-0",
-      children: [i.map((P, x) => f && x > 0 && x < s - 2 ? null : /* @__PURE__ */ b(pt, { children: [f && x === s - 2 && /* @__PURE__ */ b("li", {
+      children: [r.map((P, x) => f && x > 0 && x < s - 2 ? null : /* @__PURE__ */ w(ft, { children: [f && x === s - 2 && /* @__PURE__ */ w("li", {
         className: "m-0 flex items-center max-sm:hidden",
         children: [/* @__PURE__ */ n("span", {
           "aria-hidden": !0,
           className: ue,
           children: ne
-        }), /* @__PURE__ */ b(j.Root, { children: [/* @__PURE__ */ n(j.Trigger, { render: /* @__PURE__ */ n(ae, {
+        }), /* @__PURE__ */ w(j.Root, { children: [/* @__PURE__ */ n(j.Trigger, { render: /* @__PURE__ */ n(ae, {
           variant: "ghost",
           size: "sm",
           "aria-label": "Hidden pages",
           className: "px-2",
-          children: Nn
+          children: An
         }) }), /* @__PURE__ */ n(j.Portal, { children: /* @__PURE__ */ n(j.Positioner, {
           align: "start",
           sideOffset: 4,
-          children: /* @__PURE__ */ n(j.Popup, { children: i.slice(1, s - 2).map((L, M) => {
-            const I = L.props;
+          children: /* @__PURE__ */ n(j.Popup, { children: r.slice(1, s - 2).map((R, M) => {
+            const O = R.props;
             return /* @__PURE__ */ n(j.LinkItem, {
               render: /* @__PURE__ */ n(d, {
-                href: I.href,
-                onClick: I.onClick
+                href: O.href,
+                onClick: O.onClick
               }),
-              children: I.children ?? "Back"
-            }, L.key ?? M);
+              children: O.children ?? "Back"
+            }, R.key ?? M);
           }) })
         }) })] })]
       }), /* @__PURE__ */ n("li", {
-        className: u("m-0 flex items-center", x < s - 1 && "max-sm:hidden"),
+        className: p("m-0 flex items-center", x < s - 1 && "max-sm:hidden"),
         children: /* @__PURE__ */ n(Xe.Provider, {
           value: {
             index: x,
@@ -1031,14 +1031,14 @@ function Ke({ className: e, children: t, ...a }) {
           },
           children: P
         })
-      })] }, P.key ?? x)), T && /* @__PURE__ */ n("li", {
+      })] }, P.key ?? x)), C && /* @__PURE__ */ n("li", {
         "aria-hidden": !0,
         className: "m-0 flex items-center max-sm:hidden",
-        children: /* @__PURE__ */ n(A.span, {
+        children: /* @__PURE__ */ n(E.span, {
           initial: { opacity: 1 },
           animate: { opacity: 0 },
-          transition: He,
-          onAnimationComplete: () => E(!1),
+          transition: Fe,
+          onAnimationComplete: () => v(!1),
           className: ue,
           children: ne
         })
@@ -1046,18 +1046,18 @@ function Ke({ className: e, children: t, ...a }) {
     })
   });
 }
-var ue = "text-pho-description -mx-1 inline-flex shrink-0 text-base select-none", ne = "/", wn = 4, Nn = "…";
-function qe({ href: e, className: t, morphId: a, children: i = "Back", ...r }) {
-  const c = _(Xe), o = O(), l = a != null && !o, s = Ge(l ? a : void 0);
+var ue = "text-pho-description -mx-1 inline-flex shrink-0 text-base select-none", ne = "/", Nn = 4, An = "…";
+function Qe({ href: e, className: t, morphId: a, children: r = "Back", ...i }) {
+  const c = S(Xe), o = L(), l = a != null && !o, s = ze(l ? a : void 0);
   if (c == null) throw new Error("BasicPage.Crumb must be rendered inside BasicPage.Breadcrumbs");
-  const { index: d, count: f, departing: p, narrow: m } = c, h = d === 0, g = d === f - 1, y = p != null && p.labels.length < f, T = p != null && p.labels.length > f, E = g && (p == null || y || m), P = h || g, x = h && g ? "" : h ? "max-sm:hidden" : "sm:hidden", L = p != null, M = g ? m ? T ? "slide" : "fade" : E ? "fade" : void 0 : void 0, [I, R] = v(l && m && s.fly && p != null && !T ? p.labels[p.labels.length - 1] : null), D = l && P && !L, $ = l && !h && g && (p == null || y);
-  return /* @__PURE__ */ b(Be, { children: [!h && /* @__PURE__ */ n("span", {
+  const { index: d, count: f, departing: u, narrow: m } = c, g = d === 0, y = d === f - 1, h = u != null && u.labels.length < f, C = u != null && u.labels.length > f, v = y && (u == null || h || m), P = g || y, x = g && y ? "" : g ? "max-sm:hidden" : "sm:hidden", R = u != null, M = y ? m ? C ? "slide" : "fade" : v ? "fade" : void 0 : void 0, [O, k] = b(l && m && s.fly && u != null && !C ? u.labels[u.labels.length - 1] : null), D = l && P && !R, $ = l && !g && y && (u == null || h);
+  return /* @__PURE__ */ w(Me, { children: [!g && /* @__PURE__ */ n("span", {
     "aria-hidden": !0,
-    className: u(ue, "max-sm:hidden"),
-    children: $ ? /* @__PURE__ */ n(A.span, {
+    className: p(ue, "max-sm:hidden"),
+    children: $ ? /* @__PURE__ */ n(E.span, {
       initial: s.fly ? {
         opacity: 0,
-        x: Ee
+        x: Ce
       } : { opacity: 0 },
       animate: s.fly ? {
         opacity: 1,
@@ -1071,70 +1071,70 @@ function qe({ href: e, className: t, morphId: a, children: i = "Back", ...r }) {
     variant: "ghost",
     size: "sm",
     href: e,
-    prefix: P ? D ? /* @__PURE__ */ n(A.span, {
+    prefix: P ? D ? /* @__PURE__ */ n(E.span, {
       initial: s.fly ? {
         opacity: 0,
-        x: Ee
+        x: Ce
       } : { opacity: 0 },
       animate: s.fly ? {
         opacity: 1,
         x: 0
       } : { opacity: 1 },
       transition: s.fly ? _e : B,
-      className: u("inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0", x),
+      className: p("inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0", x),
       children: /* @__PURE__ */ n(ee, {})
     }) : /* @__PURE__ */ n("span", {
-      className: u("inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0", x),
+      className: p("inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0", x),
       children: /* @__PURE__ */ n(ee, {})
     }) : /* @__PURE__ */ n("span", { className: "hidden" }),
-    className: u("min-w-max", t),
-    ...r,
-    children: l && a != null ? /* @__PURE__ */ b("span", {
-      className: u("relative block", !s.fly && M === "slide" && "overflow-hidden", !g && "max-w-40 truncate"),
-      children: [/* @__PURE__ */ n(ze, {
+    className: p("min-w-max", t),
+    ...i,
+    children: l && a != null ? /* @__PURE__ */ w("span", {
+      className: p("relative block", !s.fly && M === "slide" && "overflow-hidden", !y && "max-w-40 truncate"),
+      children: [/* @__PURE__ */ n(Ve, {
         morphId: a,
         fromClassName: "text-pho-primary",
         fly: s.fly,
         morphRef: s.ref,
         arrival: M,
-        children: i
-      }), I != null && /* @__PURE__ */ n(A.span, {
+        children: r
+      }), O != null && /* @__PURE__ */ n(E.span, {
         "aria-hidden": !0,
         initial: {
           x: 0,
           opacity: 1
         },
         animate: {
-          x: Lt,
+          x: Bt,
           opacity: 0
         },
-        transition: Bt,
-        onAnimationComplete: () => R(null),
+        transition: Mt,
+        onAnimationComplete: () => k(null),
         className: "pointer-events-none absolute inset-y-0 left-0 whitespace-nowrap",
-        children: I
+        children: O
       })]
     }) : /* @__PURE__ */ n("span", {
-      className: u("block", !g && "max-w-40 truncate"),
-      children: i
+      className: p("block", !y && "max-w-40 truncate"),
+      children: r
     })
   })] });
 }
-function An({ className: e, ...t }) {
+function En({ className: e, ...t }) {
   return /* @__PURE__ */ n(Ke, {
     className: e,
-    children: /* @__PURE__ */ n(qe, { ...t })
+    children: /* @__PURE__ */ n(Qe, { ...t })
   });
 }
-function Cn({ label: e, description: t, leading: a, href: i, className: r, children: c, ...o }) {
-  const l = Ie(), s = z(() => A.create(l), [l]), { leaving: d, ...f } = xe();
-  return /* @__PURE__ */ b(s, {
-    href: i,
+function Cn({ label: e, description: t, leading: a, href: r, className: i, children: c, ...o }) {
+  const l = Oe(), s = z(() => E.create(l), [l]), { leaving: d, ...f } = xe();
+  return /* @__PURE__ */ w(s, {
+    href: r,
     ...f,
     ...o,
-    className: u("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)]", d && "overflow-hidden", r),
-    children: [/* @__PURE__ */ b("div", {
-      className: u("flex min-w-0 flex-1 items-center", a != null && "gap-3"),
-      children: [a, /* @__PURE__ */ b("div", {
+    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)]", d && "overflow-hidden", i),
+    children: [/* @__PURE__ */ w("div", {
+      className: p("flex min-w-0 flex-1 items-center", a != null && "gap-3"),
+      children: [a, /* @__PURE__ */ w("div", {
         className: "min-w-0",
         children: [/* @__PURE__ */ n("div", {
           className: "flex min-w-0 items-center gap-1",
@@ -1147,58 +1147,58 @@ function Cn({ label: e, description: t, leading: a, href: i, className: r, child
           children: t
         }) : null]
       })]
-    }), /* @__PURE__ */ b("div", {
+    }), /* @__PURE__ */ w("div", {
       className: "flex min-w-0 items-center justify-end gap-2",
       children: [c != null ? /* @__PURE__ */ n("div", {
         className: "min-w-0",
         children: c
-      }) : null, /* @__PURE__ */ n(vt, {
+      }) : null, /* @__PURE__ */ n(yt, {
         "aria-hidden": !0,
         className: "text-pho-secondary group-hover:text-pho-secondary-hover size-4 shrink-0 transition-colors"
       })]
     })]
   });
 }
-function En({ open: e, variant: t = "overlay", modal: a = !1, placeholder: i, onClose: r, children: c }) {
-  const o = _(Me), l = e ?? re.toArray(c).length > 0, s = o?.setOpen, d = o?.setPresent;
+function _n({ open: e, variant: t = "overlay", modal: a = !1, placeholder: r, onClose: i, children: c }) {
+  const o = S(De), l = e ?? re.toArray(c).length > 0, s = o?.setOpen, d = o?.setPresent;
   return G(() => {
     if (d != null)
       return d(!0), () => d(!1);
   }, [d]), G(() => {
     if (s != null)
       return s(l), () => s(!1);
-  }, [s, l]), k(() => {
+  }, [s, l]), I(() => {
     o == null && typeof process < "u" && process.env.NODE_ENV !== "production" && console.warn("BasicPage.Aside: needs a `BasicPage.Root` around it.");
   }, [o]), o == null || o.slot == null ? null : o.presentation === "page" ? Ne(l ? /* @__PURE__ */ n("div", {
     "data-basic-page-aside": "page",
     className: "flex min-w-0 flex-1 flex-col",
     children: c
-  }) : null, o.slot) : t === "inline" ? Ne(/* @__PURE__ */ n(_n, {
+  }) : null, o.slot) : t === "inline" ? Ne(/* @__PURE__ */ n(Sn, {
     width: o.width,
     paneHeight: o.paneHeight,
-    onClose: r,
+    onClose: i,
     open: l,
-    placeholder: i,
+    placeholder: r,
     children: c
   }), o.slot) : /* @__PURE__ */ n(Rn, {
     container: o.slot,
     width: o.width,
     paneHeight: o.paneHeight,
-    onClose: r,
+    onClose: i,
     open: l,
     modal: a,
     children: c
   });
 }
 function Ye() {
-  const [e, t] = v(null), a = z(() => ({ setBack: t }), []), i = N(null);
+  const [e, t] = b(null), a = z(() => ({ setBack: t }), []), r = A(null);
   return {
     back: e,
     panel: a,
-    closeRef: i,
-    leave: Le(() => {
-      const r = i.current?.querySelector("a, button");
-      return r == null ? !1 : (r.click(), !0);
+    closeRef: r,
+    leave: Be(() => {
+      const i = r.current?.querySelector("a, button");
+      return i == null ? !1 : (i.click(), !0);
     }, [])
   };
 }
@@ -1207,10 +1207,10 @@ var Pe = {
   size: "sm",
   svgOnly: !0,
   "aria-label": "Close",
-  children: /* @__PURE__ */ n(ot, {})
+  children: /* @__PURE__ */ n(ct, {})
 };
-function Qe({ back: e, onClose: t, closeRef: a, panel: i, children: r }) {
-  return /* @__PURE__ */ b(Be, { children: [/* @__PURE__ */ n("span", {
+function Ue({ back: e, onClose: t, closeRef: a, panel: r, children: i }) {
+  return /* @__PURE__ */ w(Me, { children: [/* @__PURE__ */ n("span", {
     ref: a,
     className: "absolute top-2 right-2 z-30",
     children: e != null ? /* @__PURE__ */ n(de, {
@@ -1221,29 +1221,29 @@ function Qe({ back: e, onClose: t, closeRef: a, panel: i, children: r }) {
       ...Pe,
       onClick: t
     }) : null
-  }), /* @__PURE__ */ b(Y.Root, {
+  }), /* @__PURE__ */ w(Q.Root, {
     className: "min-h-0 flex-1",
-    children: [/* @__PURE__ */ n(Y.Viewport, { children: /* @__PURE__ */ n(Y.Content, {
+    children: [/* @__PURE__ */ n(Q.Viewport, { children: /* @__PURE__ */ n(Q.Content, {
       className: "flex min-h-full flex-col",
-      children: /* @__PURE__ */ n(De.Provider, {
-        value: i,
-        children: r
+      children: /* @__PURE__ */ n(He.Provider, {
+        value: r,
+        children: i
       })
-    }) }), /* @__PURE__ */ n(Y.Scrollbar, { children: /* @__PURE__ */ n(Y.Thumb, {}) })]
+    }) }), /* @__PURE__ */ n(Q.Scrollbar, { children: /* @__PURE__ */ n(Q.Thumb, {}) })]
   })] });
 }
-function _n({ width: e, paneHeight: t, onClose: a, open: i, placeholder: r, children: c }) {
-  const o = O(), { back: l, panel: s, closeRef: d, leave: f } = Ye(), p = o ? "blur(0px)" : `blur(${Oe}px)`, m = t ?? "100dvh";
-  k(() => {
-    const g = (y) => {
-      y.key !== "Escape" || y.defaultPrevented || f() && y.preventDefault();
+function Sn({ width: e, paneHeight: t, onClose: a, open: r, placeholder: i, children: c }) {
+  const o = L(), { back: l, panel: s, closeRef: d, leave: f } = Ye(), u = o ? "blur(0px)" : `blur(${Le}px)`, m = t ?? "100dvh";
+  I(() => {
+    const y = (h) => {
+      h.key !== "Escape" || h.defaultPrevented || f() && h.preventDefault();
     };
-    return document.addEventListener("keydown", g), () => document.removeEventListener("keydown", g);
+    return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
   }, [f]);
-  const h = {
+  const g = {
     initial: {
       opacity: 0,
-      filter: p
+      filter: u
     },
     animate: {
       opacity: 1,
@@ -1251,7 +1251,7 @@ function _n({ width: e, paneHeight: t, onClose: a, open: i, placeholder: r, chil
     },
     exit: {
       opacity: 0,
-      filter: p
+      filter: u
     },
     transition: o ? { duration: 0 } : ye
   };
@@ -1266,56 +1266,56 @@ function _n({ width: e, paneHeight: t, onClose: a, open: i, placeholder: r, chil
     children: /* @__PURE__ */ n("div", {
       className: "border-pho-secondary bg-pho-primary sticky top-0 grid border-l *:min-h-0 *:[grid-area:1/1]",
       style: { height: m },
-      children: /* @__PURE__ */ n(X, {
+      children: /* @__PURE__ */ n(W, {
         initial: !1,
-        children: i ? /* @__PURE__ */ n(A.div, {
-          ...h,
+        children: r ? /* @__PURE__ */ n(E.div, {
+          ...g,
           className: "relative flex flex-col",
-          children: /* @__PURE__ */ n(Qe, {
+          children: /* @__PURE__ */ n(Ue, {
             back: l,
             onClose: a,
             closeRef: d,
             panel: s,
             children: c
           })
-        }, "page") : /* @__PURE__ */ n(A.div, {
-          ...h,
+        }, "page") : /* @__PURE__ */ n(E.div, {
+          ...g,
           className: "flex flex-col",
-          children: r
+          children: i
         }, "empty")
       })
     })
   });
 }
-function Rn({ container: e, width: t, paneHeight: a, onClose: i, open: r, modal: c, children: o }) {
-  const { back: l, panel: s, closeRef: d, leave: f } = Ye(), p = a ?? "100dvh";
+function Rn({ container: e, width: t, paneHeight: a, onClose: r, open: i, modal: c, children: o }) {
+  const { back: l, panel: s, closeRef: d, leave: f } = Ye(), u = a ?? "100dvh";
   return /* @__PURE__ */ n(Z.Root, {
-    open: r,
+    open: i,
     modal: c ? "trap-focus" : !1,
     disablePointerDismissal: !0,
-    onOpenChange: (m, h) => {
-      m || (h.cancel(), f());
+    onOpenChange: (m, g) => {
+      m || (g.cancel(), f());
     },
-    children: /* @__PURE__ */ b(Z.Portal, {
+    children: /* @__PURE__ */ w(Z.Portal, {
       container: e,
       className: "contents",
       children: [c ? /* @__PURE__ */ n(Z.Backdrop, {
         "data-basic-page-aside-backdrop": "",
-        className: u("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"),
+        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"),
         onClick: f
       }) : null, /* @__PURE__ */ n(Z.Popup, {
         "data-basic-page-aside": "panel",
         "data-basic-page-aside-variant": "overlay",
         initialFocus: c ? void 0 : !1,
         finalFocus: c ? void 0 : !1,
-        className: u("absolute inset-y-0 right-0 z-30 flex 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"),
+        className: p("absolute inset-y-0 right-0 z-30 flex 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"),
         style: { width: t },
         children: /* @__PURE__ */ n("div", {
           className: "border-pho-secondary bg-pho-primary shadow-pho-xl sticky top-0 flex flex-col border-l",
-          style: { height: p },
-          children: /* @__PURE__ */ n(Qe, {
+          style: { height: u },
+          children: /* @__PURE__ */ n(Ue, {
             back: l,
-            onClose: i,
+            onClose: r,
             closeRef: d,
             panel: s,
             children: o
@@ -1325,125 +1325,142 @@ function Rn({ container: e, width: t, paneHeight: a, onClose: i, open: r, modal:
     })
   });
 }
-var Sn = "14rem";
-function kn({ variant: e = "box", className: t, ...a }) {
-  const i = _(pe), r = fe(i?.subscribe ?? ve, () => i?.get().api ?? null, () => null);
-  k(() => {
-    if (i != null)
-      return i.adopt(!0), () => i.adopt(!1);
-  }, [i]);
-  const [c, o] = v("folded"), l = N(null), s = () => o("open"), d = () => {
-    o("closing"), window.setTimeout(() => o((p) => p === "closing" ? "folded" : p), 250);
-  };
-  k(() => {
-    c === "open" && l.current?.focus();
-  }, [c]);
-  const f = c !== "folded";
-  return e === "ghost" ? /* @__PURE__ */ n("div", {
+var kn = "14rem", Tn = "transition-[width] duration-[330ms] ease-pho-spring motion-reduce:transition-none", Ie = "transition-[opacity,visibility] duration-200 ease-out motion-reduce:transition-none";
+function Pn({ variant: e = "box", fold: t = "auto", value: a, onValueChange: r, placeholder: i, label: c, className: o, ...l }) {
+  const s = S(pe), d = fe(s?.subscribe ?? ve, () => s?.get().api ?? null, () => null), f = a != null;
+  I(() => {
+    if (!(s == null || f))
+      return s.adopt(!0), () => s.adopt(!1);
+  }, [s, f]);
+  const u = f ? {
+    query: a,
+    setQuery: r,
+    placeholder: i ?? "Search",
+    label: c ?? i ?? "Search"
+  } : d == null ? null : {
+    query: d.query,
+    setQuery: d.setQuery,
+    placeholder: d.placeholder,
+    label: c ?? d.placeholder
+  }, [m, g] = b(!1), y = A(null), h = m || (u?.query ?? "") !== "";
+  if (I(() => {
+    if (!m) return;
+    let v = 0, P = 0;
+    const x = () => {
+      const R = y.current;
+      R != null && (R.focus(), document.activeElement !== R && P++ < 5 && (v = requestAnimationFrame(x)));
+    };
+    return v = requestAnimationFrame(x), () => cancelAnimationFrame(v);
+  }, [m]), e === "ghost") return /* @__PURE__ */ n("div", {
     "data-basic-page-search": "",
     "data-variant": "ghost",
-    className: u("flex min-w-0 flex-1", r == null && "hidden", t),
-    ...a,
-    children: r != null && /* @__PURE__ */ n(st, {
-      value: r.query,
-      onChange: r.setQuery,
-      placeholder: r.placeholder,
-      "aria-label": r.placeholder,
-      onKeyDown: (p) => {
-        p.key === "Escape" && (p.preventDefault(), r.setQuery(""), p.currentTarget.blur());
+    className: p("flex min-w-0 flex-1", u == null && "hidden", o),
+    ...l,
+    children: u != null && /* @__PURE__ */ n(lt, {
+      value: u.query,
+      onChange: u.setQuery,
+      placeholder: u.placeholder,
+      "aria-label": u.label,
+      onKeyDown: (v) => {
+        v.key === "Escape" && (v.preventDefault(), u.setQuery(""), v.currentTarget.blur());
       }
     })
-  }) : /* @__PURE__ */ n("div", {
+  });
+  const C = t === "auto";
+  return /* @__PURE__ */ n("div", {
     "data-basic-page-search": "",
-    "data-expanded": c === "open" || void 0,
-    className: u("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-center", r == null && "hidden", t),
-    ...a,
-    children: r != null && /* @__PURE__ */ b("div", {
-      className: u("grid w-9 max-w-full justify-items-end transition-[width] duration-200 ease-linear *:[grid-area:1/1] motion-reduce:transition-none", "@[36rem]:w-56"),
-      style: c === "open" ? { width: Sn } : void 0,
+    "data-expanded": h || void 0,
+    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-center", "[[data-basic-page-header]:has([data-basic-page-header-action])>&]:self-start", u == null && "hidden", o),
+    ...l,
+    children: u != null && /* @__PURE__ */ w("div", {
+      className: p("grid w-9 max-w-full justify-items-end *:[grid-area:1/1]", Tn, C && "@[36rem]:w-56"),
+      style: h ? { width: kn } : void 0,
       children: [/* @__PURE__ */ n(ae, {
         variant: "outlined",
         size: "sm",
         shape: "circle",
         svgOnly: !0,
-        "aria-label": r.placeholder,
-        onClick: s,
-        className: u("@[36rem]:hidden", f && "hidden"),
+        "aria-label": u.label,
+        "aria-hidden": h || void 0,
+        tabIndex: h ? -1 : void 0,
+        onClick: () => g(!0),
+        className: p(Ie, h ? "pointer-events-none invisible opacity-0" : "visible opacity-100", C && "@[36rem]:pointer-events-none @[36rem]:invisible @[36rem]:opacity-0"),
         children: /* @__PURE__ */ n(we, {})
       }), /* @__PURE__ */ n("div", {
-        className: u("w-full @[36rem]:block", f ? "block" : "hidden"),
-        children: /* @__PURE__ */ b(se.Root, {
+        inert: !C && !h,
+        className: p("w-full min-w-0", Ie, h ? "visible opacity-100" : "pointer-events-none invisible opacity-0", C && "@[36rem]:pointer-events-auto @[36rem]:visible @[36rem]:opacity-100"),
+        children: /* @__PURE__ */ w(se.Root, {
           size: "sm",
           className: "w-full",
           children: [/* @__PURE__ */ n(se.Addon, { children: /* @__PURE__ */ n(we, {}) }), /* @__PURE__ */ n(se.Input, {
-            ref: l,
+            ref: y,
             type: "search",
-            value: r.query,
-            onChange: (p) => r.setQuery(p.target.value),
+            value: u.query,
+            onChange: (v) => u.setQuery(v.target.value),
             onBlur: () => {
-              r.query === "" && d();
+              u.query === "" && g(!1);
             },
-            onKeyDown: (p) => {
-              p.key === "Escape" && (p.preventDefault(), r.setQuery(""), d(), p.currentTarget.blur());
+            onKeyDown: (v) => {
+              v.key === "Escape" && (v.preventDefault(), u.setQuery(""), g(!1), v.currentTarget.blur());
             },
-            placeholder: r.placeholder,
-            "aria-label": r.placeholder
+            placeholder: u.placeholder,
+            "aria-label": u.label
           })]
         })
       })]
     })
   });
 }
-var na = {
+var ra = {
   Root: Rt,
-  Aside: En,
-  Search: kn,
-  Table: it,
-  CondenseScope: Ht,
+  Aside: _n,
+  Search: Pn,
+  Table: st,
+  CondenseScope: Ft,
   Breadcrumbs: Ke,
-  Crumb: qe,
-  Back: An,
-  Title: $t,
-  Stack: qt,
+  Crumb: Qe,
+  Back: En,
+  Title: jt,
+  Stack: Qt,
   Header: Yt,
-  HeaderAction: Qt,
-  SectionTitle: Ut,
-  Description: je,
-  TableCount: Jt,
-  SectionFooter: Zt,
-  Card: en,
-  Item: tn,
-  ItemPanel: nn,
-  Callout: an,
-  CalloutTitle: rn,
-  CalloutDescription: sn,
-  Row: ln,
+  HeaderAction: Ut,
+  SectionTitle: Jt,
+  Description: qe,
+  TableCount: Zt,
+  SectionFooter: en,
+  Card: tn,
+  Item: nn,
+  ItemPanel: an,
+  Callout: rn,
+  CalloutTitle: sn,
+  CalloutDescription: ln,
+  Row: on,
   RowLink: Cn,
-  Value: on,
-  Alert: cn,
-  Footer: gn,
-  Form: un,
-  Saved: dn,
-  Fields: fn,
-  Inline: mn,
-  Submit: hn,
+  Value: cn,
+  Alert: un,
+  Footer: vn,
+  Form: dn,
+  Saved: pn,
+  Fields: mn,
+  Inline: hn,
+  Submit: gn,
   Reveal: We
 };
 export {
-  wt as a,
-  na as c,
-  Ft as d,
+  Nt as a,
+  ra as c,
+  Gt as d,
   oe as f,
-  xt as i,
+  wt as i,
   ye as l,
-  Zn as m,
+  ta as m,
   Ae as n,
-  Nt as o,
-  ea as p,
-  yt as r,
-  bt as s,
-  ta as t,
-  Se as u
+  At as o,
+  na as p,
+  bt as r,
+  xt as s,
+  aa as t,
+  Re as u
 };
 
-//# sourceMappingURL=basic-page-BI8y4hHk.js.map
+//# sourceMappingURL=basic-page-B3iBvhbz.js.map