@photon-ai/pho-ui 2.16.0 → 3.0.0

package/dist/chunks/basic-page-CYDwfVjO.js

@@ -0,0 +1,1749 @@
+"use client";
+import { t as p } from "./cn-ChIgwEl3.js";
+import { n as Ge } from "./link-provider-DXzDQ08N.js";
+import { FADE_ENTRANCE as ct, FADE_SWAP as ut, SPRING_ENTRANCE as dt, TRAVEL_LINEAR as pt, fadeThroughBlur as ae } from "../motion.js";
+import { a as Z, o as ge } from "./button-CdqS_t5a.js";
+import { t as mt } from "./error-BAQgnde7.js";
+import { n as ft, t as ht } from "./IconArrowsMinimize-BfPUGuCB.js";
+import { t as ie } from "./IconChevronLeft-CSWMKQ4C.js";
+import { t as gt } from "./IconChevronRight-CzoJnYNI.js";
+import { t as Re } from "./IconSearch-BKAHkLyX.js";
+import { i as be, n as bt, o as vt, r as yt } from "./data-table-DcwCgXJU.js";
+import { t as xt } from "./IconX-pZ9vrtSr.js";
+import { t as wt } from "./toast-72Wwlzg9.js";
+import { t as ue } from "./input-group-fc9_jD4d.js";
+import { t as Nt } from "./animated-height-CCO-Ocoz.js";
+import { n as ve, t as J } from "./scroll-area-Zik8t1Mk.js";
+import { i as At } from "./checkbox-CLPmblNA.js";
+import { t as _t } from "./form-AiHbbw4m.js";
+import { i as K } from "./menu-BQeprfxB.js";
+import { t as Ct } from "./ghost-search-BvBFa9su.js";
+import { t as W } from "./tooltip-BTF7GChl.js";
+import { Children as ee, Fragment as Et, createContext as z, isValidElement as Ve, useCallback as ye, useContext as T, useEffect as O, useId as kt, useLayoutEffect as H, useMemo as q, useRef as C, useState as w, useSyncExternalStore as xe } from "react";
+import { Fragment as we, jsx as t, jsxs as y } from "react/jsx-runtime";
+import { AnimatePresence as $, motion as A, useIsPresent as St, useReducedMotion as M } from "motion/react";
+import { Dialog as ne } from "@base-ui/react/dialog";
+import { createPortal as Pe } from "react-dom";
+var Ne = "rounded-base border border-pho-secondary bg-pho-primary", se = "divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0", $e = `${Ne} ${se} gap-0`, Ie = "flex min-w-0 flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5", Tt = "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", Rt = "flex flex-col gap-3 px-5 py-4", Pt = "-mx-5 -mb-4 flex items-center rounded-b-[calc(0.75rem-1px)] bg-pho-secondary py-1 pr-3 pl-5", It = "-mx-2 -mt-1.5 flex items-center rounded-sm bg-pho-secondary px-2 py-0.5", I = dt, D = ct, j = 12, qe = z(null), Ot = 768;
+function Lt(e, a = "default") {
+  return Math.round(a === "wide" ? Math.min(Math.max(e * 0.5, 400), 640) : Math.min(Math.max(e * 0.4, 320), 448));
+}
+var We = z(null), je = z(null);
+function Bt(e) {
+  const [a, n] = w(null), [r, i] = w(!1), [o, u] = w(!1), [c, s] = w(!1), [d, f] = w(() => ({
+    width: typeof window > "u" ? 0 : window.innerWidth,
+    height: null
+  }));
+  return H(() => {
+    const l = e.current;
+    if (!r || l == null) return;
+    const m = Ee(l), h = () => {
+      const b = l.offsetWidth, N = m?.clientHeight ?? null;
+      f((v) => v.width === b && v.height === N ? v : {
+        width: b,
+        height: N
+      });
+    };
+    if (h(), typeof ResizeObserver > "u") return;
+    const g = new ResizeObserver(h);
+    return g.observe(l), m != null && g.observe(m), () => g.disconnect();
+  }, [e, r]), {
+    host: q(() => ({
+      slot: a,
+      paneNarrow: d.width < Ot,
+      paneWidth: d.width,
+      paneHeight: d.height,
+      setOpen: u,
+      setAsPage: s,
+      setPresent: i
+    }), [a, d]),
+    setSlot: n,
+    open: o,
+    asPage: c
+  };
+}
+function Mt(e) {
+  return e == null ? window.scrollY : e.scrollTop;
+}
+function Oe(e, a) {
+  e == null ? window.scrollTo({ top: a }) : e.scrollTop = a;
+}
+function Dt({ condense: e = !0, width: a, prerendered: n = !1, className: r, children: i, ref: o, ...u }) {
+  const c = T(ce)?.adopt ?? !1, s = T(je), [d, f] = w(!1), l = C(0), m = ye((L) => {
+    l.current += L ? 1 : -1, f(l.current > 0);
+  }, []), h = a === "wide" || a == null && d, [g] = w(vt), b = C(null), N = q(() => ({
+    ref: b,
+    prerendered: n
+  }), [n]), [v, _] = w(null), [x, E] = w(null), R = q(() => ({
+    setTitle: _,
+    setTail: E
+  }), []);
+  O(() => {
+    if (s != null)
+      return s.setBack(x), () => s.setBack(null);
+  }, [s, x]);
+  const { host: P, setSlot: F, open: G, asPage: Y } = Bt(b), V = G && Y, U = C(!1), te = C(0);
+  H(() => {
+    const L = b.current;
+    if (V === U.current || L == null) return;
+    U.current = V;
+    const B = Ee(L);
+    V ? (te.current = Mt(B), Oe(B, 0)) : Oe(B, te.current);
+  }, [V]);
+  const S = e ? /* @__PURE__ */ t(Ht, {
+    title: v,
+    tail: s == null ? x : null,
+    silent: V || s != null
+  }) : null, k = /* @__PURE__ */ t("div", {
+    "data-basic-page-column": "",
+    className: p("mx-auto flex w-full min-w-0 flex-1 flex-col px-5 pt-12 pb-12 *:min-w-0", h ? "max-w-[84rem] md:px-8" : "max-w-[44.5rem]", c || s != null ? "[&_[data-basic-page-back]]:hidden" : "has-[[data-basic-page-back]]:pt-16"),
+    children: e ? /* @__PURE__ */ t(_e.Provider, {
+      value: R,
+      children: i
+    }) : i
+  });
+  return /* @__PURE__ */ t("div", {
+    "data-basic-page-root": "",
+    "data-basic-page-width": h ? "wide" : void 0,
+    "data-basic-page-prerendered": n ? "" : void 0,
+    className: p("relative flex min-h-full w-full min-w-0 flex-row", r),
+    ...u,
+    ref: (L) => {
+      b.current = L, typeof o == "function" ? o(L) : o != null && (o.current = L);
+    },
+    children: /* @__PURE__ */ t(qe.Provider, {
+      value: N,
+      children: /* @__PURE__ */ t(We.Provider, {
+        value: P,
+        children: /* @__PURE__ */ t(yt.Provider, {
+          value: m,
+          children: /* @__PURE__ */ y(be.Provider, {
+            value: g,
+            children: [/* @__PURE__ */ y("div", {
+              "data-basic-page-main": "",
+              className: p("flex min-w-0 flex-1 flex-col", V && "hidden"),
+              children: [S, k]
+            }), /* @__PURE__ */ t("div", {
+              ref: F,
+              className: "contents"
+            })]
+          })
+        })
+      })
+    })
+  });
+}
+var de = /* @__PURE__ */ new Set();
+function Ht({ title: e, tail: a, silent: n = !1 }) {
+  const r = M(), [i, o] = w(() => !n && de.size > 0), u = T(ce), c = kt();
+  H(() => {
+    if (!(!i || n))
+      return de.add(c), () => {
+        de.delete(c);
+      };
+  }, [
+    c,
+    i,
+    n
+  ]), O(() => {
+    if (u != null) {
+      if (n) {
+        u.store.clear(c);
+        return;
+      }
+      u.store.set(c, {
+        condensed: i,
+        title: e?.label ?? null,
+        back: a
+      });
+    }
+  }, [
+    u,
+    c,
+    i,
+    e,
+    a,
+    n
+  ]), O(() => {
+    if (u != null)
+      return () => u.store.clear(c);
+  }, [u, c]);
+  const s = e?.el ?? null;
+  O(() => {
+    if (s == null || typeof IntersectionObserver > "u") {
+      if (typeof requestAnimationFrame > "u") return;
+      const m = requestAnimationFrame(() => o(!1));
+      return () => cancelAnimationFrame(m);
+    }
+    const l = new IntersectionObserver(([m]) => o(m != null && !m.isIntersecting), { root: Ee(s) });
+    return l.observe(s), () => l.disconnect();
+  }, [s]);
+  const d = r ? 0 : -Yt, f = r ? "blur(0px)" : `blur(${ve}px)`;
+  return /* @__PURE__ */ t("div", {
+    "data-basic-page-condense": "",
+    className: "sticky top-0 z-20 h-0 overflow-visible",
+    children: /* @__PURE__ */ t($, {
+      initial: !1,
+      children: i && !(u?.adopt ?? !1) && /* @__PURE__ */ y(A.div, {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: le,
+        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__ */ t("div", {
+          className: "flex min-w-0 items-center justify-start",
+          children: a != null && /* @__PURE__ */ t(ge, {
+            variant: "ghost",
+            size: "sm",
+            href: a.href,
+            onClick: a.onClick,
+            prefix: /* @__PURE__ */ t("span", {
+              className: "inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0",
+              children: /* @__PURE__ */ t(ie, {})
+            }),
+            className: "min-w-max",
+            children: a.label
+          })
+        }), /* @__PURE__ */ t(A.span, {
+          initial: {
+            opacity: 0,
+            y: d,
+            filter: f
+          },
+          animate: {
+            opacity: 1,
+            y: 0,
+            filter: "blur(0px)"
+          },
+          exit: {
+            opacity: 0,
+            y: d,
+            filter: f
+          },
+          transition: {
+            ...le,
+            y: Qt
+          },
+          className: "text-pho-primary block max-w-full min-w-0 truncate text-center text-base font-medium",
+          children: e?.label
+        })]
+      })
+    })
+  });
+}
+function Ft(e) {
+  return e.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function zt(e) {
+  if (!(typeof e != "string" && typeof e != "number"))
+    return Ft(String(e)) || void 0;
+}
+function Ae(e, a) {
+  if (e !== "")
+    return e ?? zt(a);
+}
+var Gt = (e) => `basic-page-morph-${e}`, Vt = { layout: I }, Le = 10, Be = {
+  delay: 0.2,
+  duration: 0.12,
+  ease: "easeOut"
+}, $t = {
+  duration: 0.18,
+  ease: "easeOut"
+}, qt = -8, Wt = {
+  duration: 0.16,
+  ease: "easeOut"
+}, jt = {
+  delay: 0.14,
+  duration: 0.16,
+  ease: "easeOut"
+}, Ke = {
+  duration: 0.12,
+  ease: "easeOut"
+}, X = [];
+function Kt(e) {
+  const a = C({ labels: e });
+  a.current.labels = e, H(() => {
+    const n = a.current;
+    return X.push(n), () => {
+      X.splice(X.indexOf(n), 1);
+    };
+  }, []);
+}
+function Xe() {
+  const [e] = w(() => {
+    const a = X[X.length - 1];
+    return a ? { labels: [...a.labels] } : null;
+  });
+  return e;
+}
+var _e = z(null), fe = {
+  condensed: !1,
+  title: null,
+  back: null
+}, ce = z(null), Ce = () => () => {
+}, Me = () => fe;
+function Xt({ adopt: e = !0, children: a }) {
+  const [n] = w(() => {
+    let i = fe, o = null;
+    const u = /* @__PURE__ */ new Set(), c = () => {
+      for (const s of u) s();
+    };
+    return {
+      get: () => i,
+      set(s, d) {
+        o = s, i = d, c();
+      },
+      clear(s) {
+        o === s && (o = null, i = fe, c());
+      },
+      subscribe(s) {
+        return u.add(s), () => u.delete(s);
+      }
+    };
+  }), r = q(() => ({
+    store: n,
+    adopt: e
+  }), [n, e]);
+  return /* @__PURE__ */ t(ce.Provider, {
+    value: r,
+    children: a
+  });
+}
+function _n() {
+  const e = T(ce);
+  return xe(e?.store.subscribe ?? Ce, e?.store.get ?? Me, e?.store.get ?? Me);
+}
+var le = ut, Qt = pt, Yt = -8;
+function Ee(e) {
+  if (typeof getComputedStyle != "function") return null;
+  for (let a = e.parentElement; a != null && a !== document.body; a = a.parentElement) {
+    const { overflowY: n } = getComputedStyle(a);
+    if (n === "auto" || n === "scroll") return a;
+  }
+  return null;
+}
+var pe = /* @__PURE__ */ new Map(), Ut = 96;
+function Jt(e) {
+  const a = e.closest("[data-basic-page-root]"), n = a?.querySelector("[data-basic-page-column]");
+  return !a || !n ? 0 : n.getBoundingClientRect().left - a.getBoundingClientRect().left;
+}
+function Qe(e) {
+  const [a] = w(() => {
+    if (e == null) return !1;
+    const r = pe.get(e);
+    return r != null && r.visible && r.el.isConnected && Jt(r.el) <= Ut;
+  }), n = C(null);
+  return O(() => {
+    if (e == null || typeof IntersectionObserver > "u") return;
+    const r = n.current;
+    if (!r) return;
+    const i = new IntersectionObserver(([o]) => {
+      o && pe.set(e, {
+        visible: o.isIntersecting,
+        el: r
+      });
+    });
+    return i.observe(r), () => {
+      i.disconnect(), pe.delete(e);
+    };
+  }, [e]), {
+    fly: a,
+    ref: n
+  };
+}
+var Zt = {
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    transition: { opacity: D }
+  },
+  rise: {
+    initial: {
+      opacity: 0,
+      y: j
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: I,
+      opacity: D
+    }
+  },
+  slide: {
+    initial: { x: "-100%" },
+    animate: { x: 0 },
+    transition: { x: jt }
+  }
+};
+function Ye({ morphId: e, fromClassName: a, fly: n, morphRef: r, arrival: i, className: o, children: u }) {
+  const [c, s] = w(!1), d = !n && i != null ? Zt[i] : null;
+  return /* @__PURE__ */ y(A.span, {
+    ref: r,
+    layoutId: Gt(e),
+    initial: d?.initial,
+    animate: d?.animate,
+    transition: n ? Vt : {
+      layout: { duration: 0 },
+      ...d?.transition
+    },
+    onLayoutAnimationStart: () => {
+      n && s(!0);
+    },
+    onLayoutAnimationComplete: () => s(!1),
+    className: p("relative inline-block", o),
+    children: [u, c && /* @__PURE__ */ t(A.span, {
+      "aria-hidden": !0,
+      initial: { opacity: 1 },
+      animate: { opacity: 0 },
+      transition: $t,
+      onAnimationComplete: () => s(!1),
+      className: p("absolute inset-0", a),
+      children: u
+    })]
+  });
+}
+var De = "max-w-full min-w-0 truncate align-top";
+function ea({ id: e, morphId: a, enter: n, trailing: r, className: i, children: o, ...u }) {
+  const c = Ae(e, o), s = M(), d = Se(n === !0), f = Qe(a), l = Xe(), m = !s && (a != null || d === !0), h = d || l != null ? "rise" : void 0, g = T(_e), b = C(null);
+  H(() => {
+    if (g != null)
+      return g.setTitle({
+        label: o,
+        el: b.current
+      }), () => g.setTitle(null);
+  }, [g, o]);
+  const [N, v] = w(f.fly && l != null);
+  H(() => {
+    X.length > 0 && v(!1);
+  }, []);
+  const _ = r != null && r !== !1, x = !s && (a != null ? f.fly || h != null : d === !0), E = a != null && !s ? /* @__PURE__ */ t(Ye, {
+    morphId: a,
+    fromClassName: "text-pho-secondary",
+    fly: f.fly,
+    morphRef: f.ref,
+    arrival: h,
+    className: De,
+    children: o
+  }) : d && !s ? /* @__PURE__ */ t(A.span, {
+    initial: {
+      opacity: 0,
+      y: j
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: I,
+      opacity: D
+    },
+    className: p("inline-block", De),
+    children: o
+  }) : _ ? /* @__PURE__ */ t("span", {
+    className: "min-w-0 truncate",
+    children: o
+  }) : o;
+  return /* @__PURE__ */ y("h1", {
+    id: c,
+    "data-basic-page-title": "",
+    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", i),
+    ...u,
+    ref: (R) => {
+      b.current = R;
+      const P = u.ref;
+      typeof P == "function" ? P(R) : P != null && (P.current = R);
+    },
+    children: [_ ? /* @__PURE__ */ y("span", {
+      className: "flex max-w-full min-w-0 items-center gap-2",
+      children: [E, x ? /* @__PURE__ */ t(A.span, {
+        "data-basic-page-title-trailing": "",
+        initial: {
+          opacity: 0,
+          y: j
+        },
+        animate: {
+          opacity: 1,
+          y: 0
+        },
+        transition: {
+          y: I,
+          opacity: D
+        },
+        className: "shrink-0",
+        children: r
+      }) : /* @__PURE__ */ t("span", {
+        "data-basic-page-title-trailing": "",
+        className: "shrink-0",
+        children: r
+      })]
+    }) : E, N && /* @__PURE__ */ t(A.span, {
+      "aria-hidden": !0,
+      initial: { opacity: 1 },
+      animate: { opacity: 0 },
+      transition: Ke,
+      onAnimationComplete: () => v(!1),
+      className: p("text-pho-secondary pointer-events-none absolute inline-flex items-center", Ba),
+      children: /* @__PURE__ */ t(ie, {})
+    })]
+  });
+}
+var Ue = z(!1);
+function ta() {
+  const e = T(Ue), a = M(), [n] = w(() => e && !a);
+  return n;
+}
+var aa = {
+  height: 0,
+  opacity: 0,
+  paddingTop: 0,
+  paddingBottom: 0,
+  borderTopWidth: 0
+}, na = {
+  y: I,
+  opacity: D,
+  height: I,
+  paddingTop: I,
+  paddingBottom: I,
+  borderTopWidth: I
+};
+function ke() {
+  const e = ta(), a = St(), n = M();
+  return {
+    initial: e ? {
+      opacity: 0,
+      y: j
+    } : !1,
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    exit: aa,
+    transition: n ? { duration: 0 } : na,
+    leaving: !a
+  };
+}
+var ra = typeof process < "u" && process.env.NODE_ENV !== "production";
+function Je(e, a, n, r) {
+  O(() => {
+    if (!ra || e.current == null || typeof getComputedStyle != "function") return;
+    const i = (u) => {
+      const c = getComputedStyle(u).rowGap;
+      return c === "" || c === "normal" ? null : parseFloat(c);
+    }, o = i(e.current);
+    o != null && o !== n && console.warn(`[BasicPage.${a}] spaced at ${o}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);
+    for (const u of Array.from(e.current.children)) {
+      const c = r(u);
+      if (c == null || getComputedStyle(u).display === "contents") continue;
+      const s = i(u);
+      s != null && s !== c && console.warn(`[BasicPage.${a}] a child is spaced at ${s}px instead of ${c}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);
+    }
+  });
+}
+function ia(e) {
+  return Array.from(e.querySelectorAll("[data-basic-page-stack], [data-basic-page-title], [data-basic-page-header]")).some((a) => a.closest('[aria-busy="true"]') != null);
+}
+function Se(e, a = !1) {
+  const n = T(qe), [r] = w(() => {
+    if (typeof document > "u" || !e || n?.prerendered) return !1;
+    if (a) return !0;
+    if (document.querySelector("[data-basic-page-prerendered]") != null) return !1;
+    const i = n ? n.ref.current : document;
+    return i == null || !ia(i);
+  });
+  return r;
+}
+function re({ enter: e, className: a, children: n, ref: r, ...i }) {
+  const o = M(), u = C(null);
+  Je(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);
+  const c = Se(e ?? !0, e === !0), s = i["aria-busy"], d = s === !0 || s === "true", f = C(d), l = f.current && !d;
+  return O(() => {
+    f.current = d;
+  }), /* @__PURE__ */ t(A.div, {
+    ref: (m) => {
+      u.current = m, typeof r == "function" ? r(m) : r != null && (r.current = m);
+    },
+    "data-basic-page-stack": "",
+    initial: o || !c ? !1 : {
+      opacity: 0,
+      y: j
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: I,
+      opacity: D
+    },
+    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", "*: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", a),
+    ...i,
+    children: /* @__PURE__ */ t(Ue.Provider, {
+      value: l,
+      children: n
+    })
+  });
+}
+var He = "@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 [&>: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";
+function sa({ enter: e, className: a, ...n }) {
+  const r = M();
+  return Se(e === !0) && !r ? /* @__PURE__ */ t(A.div, {
+    initial: {
+      opacity: 0,
+      y: j
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: I,
+      opacity: D
+    },
+    className: p(He, a),
+    ...n,
+    "data-basic-page-header": ""
+  }) : /* @__PURE__ */ t("div", {
+    className: p(He, a),
+    ...n,
+    "data-basic-page-header": ""
+  });
+}
+function la({ className: e, ...a }) {
+  return /* @__PURE__ */ t("div", {
+    "data-basic-page-header-action": "",
+    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),
+    ...a
+  });
+}
+function oa({ id: e, className: a, children: n, ...r }) {
+  const i = Ae(e, n);
+  return /* @__PURE__ */ t("h2", {
+    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", a),
+    ...r,
+    children: n
+  });
+}
+function Ze({ className: e, ...a }) {
+  return /* @__PURE__ */ t("p", {
+    className: p("text-display-xs text-pho-description px-5 font-normal", e),
+    ...a
+  });
+}
+function ca({ one: e, other: a, ...n }) {
+  const r = T(be), i = xe(r?.subscribe ?? Ce, () => r?.get().api ?? null, () => null);
+  if (i == null) return null;
+  const o = i.query.trim() !== "" ? `${i.matched} of ${i.total}.` : `${i.total} ${i.total === 1 ? e : a}.`;
+  return /* @__PURE__ */ t(Ze, {
+    ...n,
+    children: o
+  });
+}
+function ua({ className: e, ...a }) {
+  return /* @__PURE__ */ t("p", {
+    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),
+    ...a
+  });
+}
+function da({ animateHeight: e, className: a, children: n, ...r }) {
+  const i = /* @__PURE__ */ t($, { children: ee.toArray(n) });
+  return e ? /* @__PURE__ */ t("div", {
+    className: p(Ne, "min-h-0 gap-0 overflow-hidden", a),
+    ...r,
+    "data-basic-page-card": "",
+    children: /* @__PURE__ */ t(Nt, {
+      transition: I,
+      className: se,
+      children: i
+    })
+  }) : /* @__PURE__ */ t("div", {
+    className: p($e, a),
+    ...r,
+    "data-basic-page-card": "",
+    children: i
+  });
+}
+function pa({ className: e, ...a }) {
+  const { leaving: n, ...r } = ke();
+  return /* @__PURE__ */ t(A.div, {
+    ...r,
+    className: p(Rt, n && "overflow-hidden", e),
+    ...a
+  });
+}
+function ma({ divided: e = !1, className: a, ...n }) {
+  return /* @__PURE__ */ t("div", {
+    className: p(e ? It : Pt, a),
+    ...n
+  });
+}
+function fa({ className: e, icon: a, children: n, ...r }) {
+  if (a == null || a === !1 || a === !0) return /* @__PURE__ */ t("div", {
+    className: p(Ie, e),
+    ...r,
+    "data-basic-page-callout": "",
+    children: n
+  });
+  const [i, ...o] = ee.toArray(n);
+  return /* @__PURE__ */ y("div", {
+    className: p(Ie, e),
+    ...r,
+    "data-basic-page-callout": "",
+    children: [/* @__PURE__ */ y("div", {
+      className: "relative",
+      children: [/* @__PURE__ */ t("div", {
+        className: "min-w-0 pr-16",
+        children: i
+      }), /* @__PURE__ */ t("div", {
+        "aria-hidden": !0,
+        className: "text-pho-primary pointer-events-none absolute top-0 right-0 size-14 opacity-[0.275] [&>svg]:size-full",
+        children: a
+      })]
+    }), o]
+  });
+}
+function ha({ id: e, className: a, children: n, ...r }) {
+  const i = Ae(e, n);
+  return /* @__PURE__ */ t("h2", {
+    id: i,
+    className: p("text-display-xs text-pho-primary max-w-full min-w-0 scroll-mt-12 truncate font-medium", a),
+    ...r,
+    children: n
+  });
+}
+function ga({ className: e, ...a }) {
+  return /* @__PURE__ */ t("p", {
+    className: p("text-display-xs text-pho-description font-normal", e),
+    ...a
+  });
+}
+var et = z(null), tt = z(!1);
+function ba({ className: e, children: a, ...n }) {
+  let r = !1;
+  const i = ee.toArray(a).map((o, u) => {
+    if (!Ve(o)) return o;
+    let c;
+    return o.props.done ? c = "done" : r ? c = "upcoming" : (r = !0, c = o.props.working ? "working" : o.props.pending ? "pending" : "current"), /* @__PURE__ */ t(et.Provider, {
+      value: {
+        number: u + 1,
+        state: c
+      },
+      children: o
+    }, o.key ?? u);
+  });
+  return /* @__PURE__ */ t("ol", {
+    className: p($e, "m-0 list-none p-0", e),
+    ...n,
+    "data-basic-page-onboard": "",
+    children: i
+  });
+}
+var va = "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]", ya = {
+  done: "border-pho-ink text-pho-primary",
+  current: "bg-pho-brand-solid text-pho-on-brand border-transparent",
+  working: "border-transparent text-pho-primary",
+  pending: "border-pho-ink text-pho-primary border-dashed",
+  upcoming: "border-pho-primary text-pho-description"
+}, xa = "pointer-events-none absolute -inset-px rounded-full border border-pho-ink opacity-30", wa = "pointer-events-none absolute -inset-px rounded-full border border-pho-ink border-r-transparent border-b-transparent border-l-transparent animate-pho-spinner", Na = {
+  done: "Done.",
+  working: "In progress.",
+  pending: "Waiting."
+};
+function Aa({ icon: e, aside: a, title: n, description: r, done: i, working: o, pending: u, className: c, children: s, ...d }) {
+  const f = T(et), l = f?.state ?? (i ? "done" : o ? "working" : u ? "pending" : "current"), m = M(), h = l === "current" || l === "working" || l === "pending", g = l === "upcoming", b = Na[l], N = s != null && s !== !1, v = e != null && e !== !1, _ = a != null && a !== !1;
+  return /* @__PURE__ */ t("li", {
+    "data-basic-page-step": l,
+    "aria-current": h ? "step" : void 0,
+    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", c),
+    ...d,
+    children: /* @__PURE__ */ y(tt.Provider, {
+      value: !0,
+      children: [
+        /* @__PURE__ */ y("span", {
+          "aria-hidden": !0,
+          className: p(va, ya[l], "col-start-1 row-start-1"),
+          children: [/* @__PURE__ */ t($, {
+            initial: !1,
+            children: l === "done" ? /* @__PURE__ */ t(A.span, {
+              ...ae(m),
+              className: "flex",
+              children: /* @__PURE__ */ t(At, { className: "size-3" })
+            }, "check") : /* @__PURE__ */ t(A.span, {
+              ...ae(m),
+              children: f?.number ?? 1
+            }, "number")
+          }), l === "working" ? /* @__PURE__ */ y(we, { children: [/* @__PURE__ */ t("span", { className: xa }), /* @__PURE__ */ t("span", { className: wa })] }) : null]
+        }),
+        /* @__PURE__ */ y("div", {
+          "data-basic-page-step-title": "",
+          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"),
+          children: [b ? /* @__PURE__ */ y("span", {
+            className: "sr-only",
+            children: [b, " "]
+          }) : null, n]
+        }),
+        /* @__PURE__ */ t(Te, {
+          show: h,
+          gap: "none",
+          clip: !1,
+          className: "col-start-2 row-start-2 flex min-w-0 flex-col self-stretch",
+          children: /* @__PURE__ */ y("div", {
+            "data-basic-page-step-body": "",
+            className: "flex min-w-0 flex-1 flex-col",
+            children: [r ? /* @__PURE__ */ t("div", {
+              className: "text-display-xs text-pho-description font-normal",
+              children: r
+            }) : null, N ? /* @__PURE__ */ t("div", {
+              className: "mt-auto flex flex-wrap items-center gap-2 pt-3",
+              children: s
+            }) : null]
+          })
+        }),
+        l === "done" && N ? /* @__PURE__ */ t("div", {
+          className: "col-start-3 row-start-1 flex min-w-0 items-center gap-2",
+          children: s
+        }) : _ ? /* @__PURE__ */ t($, {
+          initial: !1,
+          children: h ? /* @__PURE__ */ t(A.div, {
+            ...ae(m),
+            className: "col-start-3 row-span-2 row-start-1 self-start",
+            children: a
+          }, "aside") : null
+        }) : v ? /* @__PURE__ */ t($, {
+          initial: !1,
+          children: h ? /* @__PURE__ */ t(A.div, {
+            "aria-hidden": !0,
+            ...ae(m),
+            className: "pointer-events-none col-start-3 row-span-2 row-start-1 size-14 self-start",
+            children: /* @__PURE__ */ t("div", {
+              className: "text-pho-primary size-full opacity-[0.275] [&>svg]:size-full",
+              children: e
+            })
+          }, "icon") : null
+        }) : null
+      ]
+    })
+  });
+}
+function _a({ label: e, description: a, htmlFor: n, stacked: r = !1, className: i, children: o, ...u }) {
+  const { leaving: c, ...s } = ke();
+  return /* @__PURE__ */ y(A.div, {
+    ...s,
+    className: p(Tt, r && "sm:flex-col sm:items-stretch sm:justify-start sm:gap-3", c && "overflow-hidden", i),
+    ...u,
+    children: [/* @__PURE__ */ y("div", {
+      className: "min-w-0",
+      children: [n ? /* @__PURE__ */ t("label", {
+        htmlFor: n,
+        className: "text-pho-primary block text-base font-normal",
+        children: e
+      }) : /* @__PURE__ */ t("div", {
+        className: "text-pho-primary text-base font-normal",
+        children: e
+      }), a ? /* @__PURE__ */ t("p", {
+        className: "text-pho-description text-xs",
+        children: a
+      }) : null]
+    }), /* @__PURE__ */ t("div", {
+      className: p("flex w-full min-w-0 items-center gap-2 sm:w-auto", r && "sm:w-full"),
+      children: o
+    })]
+  });
+}
+function Ca({ className: e, ...a }) {
+  const n = T(tt);
+  return /* @__PURE__ */ t("p", {
+    className: p("text-pho-description max-w-full min-w-0 truncate", n ? "text-display-xs font-normal" : "text-base", e),
+    ...a
+  });
+}
+function Ea({ error: e, show: a, className: n, children: r, ...i }) {
+  const o = M(), u = T(Q), c = e ?? u?.error ?? void 0;
+  return /* @__PURE__ */ t($, {
+    initial: !1,
+    children: (a ?? !0) && (c != null || r != null) ? /* @__PURE__ */ t(A.div, {
+      "data-basic-page-alert": "",
+      className: "overflow-hidden",
+      initial: {
+        height: 0,
+        opacity: 0
+      },
+      animate: {
+        height: "auto",
+        opacity: 1
+      },
+      exit: {
+        height: 0,
+        opacity: 0
+      },
+      transition: o ? { duration: 0 } : {
+        height: I,
+        opacity: D
+      },
+      children: /* @__PURE__ */ t(mt, {
+        error: c,
+        className: p("px-5 pb-3", n),
+        ...i,
+        children: r
+      })
+    }) : null
+  });
+}
+function Cn() {
+  return T(Q)?.requestSave ?? null;
+}
+var En = 800, me = wt.createToastManager(), Q = z(null);
+function ka({ action: e, errors: a, autoSave: n = !1, className: r, children: i, onChange: o, onBlur: u, ...c }) {
+  const [s, d] = w(!1), [f, l] = w(!1), [m, h] = w(null), [g, b] = w(a ?? {}), [N, v] = w(null), _ = C(null), x = C(null), E = C(null), R = C(!1), P = C(!1), F = C(null), G = C(async () => {
+  });
+  O(() => () => {
+    x.current != null && clearTimeout(x.current);
+  }, []);
+  const Y = async () => {
+    const S = _.current;
+    if (S == null || e == null) return;
+    if (R.current) {
+      P.current = !0;
+      return;
+    }
+    if (!S.checkValidity()) return;
+    const k = Object.fromEntries(new FormData(S).entries()), L = E.current;
+    R.current = !0, v({
+      field: L,
+      phase: "saving"
+    }), h(null);
+    try {
+      const B = (await e(k))?.errors;
+      if (B != null && Object.keys(B).length > 0) {
+        b(B), v(null);
+        return;
+      }
+      b({}), l(!1), v({
+        field: L,
+        phase: "saved"
+      }), F.current != null && (me.close(F.current), F.current = null);
+    } catch (B) {
+      v(null), h(B), F.current != null && me.close(F.current), F.current = me.add({
+        type: "error",
+        title: "Couldn't save",
+        description: B instanceof Error && B.message !== "" ? B.message : "The change is still here — try again.",
+        timeout: 0,
+        actionProps: {
+          children: "Retry",
+          onClick: () => {
+            G.current();
+          }
+        }
+      });
+    } finally {
+      R.current = !1, P.current && (P.current = !1, G.current());
+    }
+  };
+  G.current = Y;
+  const V = () => {
+    x.current != null && clearTimeout(x.current), x.current = setTimeout(() => {
+      x.current = null, G.current();
+    }, 800);
+  }, U = q(() => n ? (S) => {
+    S != null && (E.current = S), l(!0), V();
+  } : null, [n]), te = q(() => ({
+    pending: s,
+    dirty: f,
+    error: m,
+    auto: N,
+    requestSave: U
+  }), [
+    s,
+    f,
+    m,
+    N,
+    U
+  ]);
+  return /* @__PURE__ */ t(Q.Provider, {
+    value: te,
+    children: /* @__PURE__ */ t(_t, {
+      errors: g,
+      onFormSubmit: async (S) => {
+        if (e != null) {
+          d(!0), h(null);
+          try {
+            const k = (await e(S))?.errors;
+            if (k != null && Object.keys(k).length > 0) {
+              b(k);
+              return;
+            }
+            b({}), l(!1);
+          } catch (k) {
+            h(k);
+          } finally {
+            d(!1);
+          }
+        }
+      },
+      onChange: (S) => {
+        l(!0), h(null);
+        const k = S.target.name;
+        k && k in g && b((L) => {
+          const { [k]: B, ...ot } = L;
+          return ot;
+        }), n && (k && (E.current = k), V()), o?.(S);
+      },
+      onBlur: (S) => {
+        n && f && x.current != null && (clearTimeout(x.current), x.current = null, G.current()), u?.(S);
+      },
+      className: p("contents [[data-basic-page-stack]>&]:flex [[data-basic-page-stack]>&]:min-w-0 [[data-basic-page-stack]>&]:flex-col", r),
+      ...c,
+      ref: (S) => {
+        _.current = S;
+        const k = c.ref;
+        typeof k == "function" ? k(S) : k != null && (k.current = S);
+      },
+      children: /* @__PURE__ */ t("fieldset", {
+        disabled: s,
+        "aria-busy": s || void 0,
+        className: "contents",
+        children: i
+      })
+    })
+  });
+}
+function Sa({ name: e, className: a, ...n }) {
+  const r = T(Q), i = M(), o = r?.auto ?? null, u = o != null && (e == null || o.field === e), [c, s] = w(!1), d = u ? o.phase : null;
+  O(() => {
+    if (d !== "saved") return;
+    s(!0);
+    const m = setTimeout(() => s(!1), 1800);
+    return () => clearTimeout(m);
+  }, [d, o]);
+  const f = d === "saving" ? "Saving…" : d === "saved" && c ? "Saved" : null, l = i ? "blur(0px)" : `blur(${ve}px)`;
+  return /* @__PURE__ */ t("span", {
+    className: "grid justify-items-end",
+    children: /* @__PURE__ */ t($, {
+      initial: !1,
+      children: f != null && /* @__PURE__ */ t(A.output, {
+        initial: {
+          opacity: 0,
+          filter: l
+        },
+        animate: {
+          opacity: 1,
+          filter: "blur(0px)"
+        },
+        exit: {
+          opacity: 0,
+          filter: l
+        },
+        transition: le,
+        className: p("text-pho-description pl-8 [grid-area:1/1]", a),
+        style: { background: "linear-gradient(to left, var(--background-color-pho-primary) calc(100% - 2rem), transparent)" },
+        ...n,
+        children: f
+      }, f)
+    })
+  });
+}
+var Ta = "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 Ra({ className: e, ...a }) {
+  const n = C(null);
+  return Je(n, "Fields", 20, () => null), /* @__PURE__ */ t("div", {
+    className: p(Ne, Ta, e),
+    ...a,
+    ref: (r) => {
+      n.current = r;
+      const i = a.ref;
+      typeof i == "function" ? i(r) : i != null && (i.current = r);
+    },
+    "data-basic-page-fields": ""
+  });
+}
+function Pa({ className: e, ...a }) {
+  return /* @__PURE__ */ t("div", {
+    className: p("flex min-w-0 flex-col gap-5 *:min-w-0 sm:flex-row sm:gap-3 sm:*:flex-1", e),
+    ...a
+  });
+}
+function Ia({ children: e = "Save changes", ...a }) {
+  const n = T(Q);
+  return /* @__PURE__ */ t(Z, {
+    type: "submit",
+    variant: "effect",
+    size: "sm",
+    loading: n?.pending,
+    ...a,
+    children: e
+  });
+}
+function Oa({ show: e, className: a, ...n }) {
+  const r = T(Q), i = e === "dirty" ? r?.dirty ?? !1 : e, o = /* @__PURE__ */ t("div", {
+    "data-basic-page-footer": "",
+    className: p("flex items-center justify-end gap-3 pr-[calc(1.25rem+2.5px)]", a),
+    ...n
+  });
+  return i === void 0 ? o : /* @__PURE__ */ t(Te, {
+    show: i,
+    gap: "block",
+    clip: !1,
+    children: o
+  });
+}
+var La = {
+  stack: "-2.5rem",
+  block: "-0.75rem",
+  fields: "-1.25rem",
+  none: "0px"
+};
+function Te({ show: e, clip: a = !0, gap: n = "stack", dividers: r, className: i, ...o }) {
+  const u = M(), c = La[r ? "none" : n], s = C(null), d = C(e !== !0);
+  O(() => {
+    d.current = !0;
+  }, []);
+  const f = () => {
+    a && s.current && (s.current.style.overflow = "hidden");
+  }, l = () => {
+    s.current && (s.current.style.overflow = "");
+  };
+  return e === void 0 ? /* @__PURE__ */ t(A.div, {
+    initial: u ? !1 : {
+      opacity: 0,
+      y: j
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: I,
+      opacity: D
+    },
+    className: p(r && se, i),
+    ...o
+  }) : /* @__PURE__ */ t($, {
+    initial: !1,
+    children: e ? /* @__PURE__ */ t(A.div, {
+      "data-basic-page-reveal": "",
+      ref: (m) => {
+        s.current = m, a && m && d.current && (m.style.overflow = "hidden");
+      },
+      onAnimationStart: f,
+      onAnimationComplete: l,
+      initial: {
+        height: 0,
+        opacity: 0,
+        marginTop: c
+      },
+      animate: {
+        height: "auto",
+        opacity: 1,
+        marginTop: 0
+      },
+      exit: {
+        height: 0,
+        opacity: 0,
+        marginTop: c
+      },
+      transition: u ? { duration: 0 } : {
+        height: I,
+        marginTop: I,
+        opacity: D
+      },
+      className: p(r && se, i),
+      ...o
+    }) : null
+  });
+}
+var Ba = "top-4 left-5 h-8 text-base [&>svg]:size-[1.125em] [&>svg]:shrink-0", Ma = "(min-width: 40rem)";
+function Da() {
+  return typeof window < "u" && typeof window.matchMedia == "function" && !window.matchMedia(Ma).matches;
+}
+var at = z(null);
+function nt({ className: e, children: a, ...n }) {
+  const r = ee.toArray(a).filter(Ve), i = r.map((_) => _.props.children ?? null), o = Xe();
+  Kt(i);
+  const [u] = w(Da), c = M(), s = r.length, d = Ge(), f = !u && s >= Ha, l = T(_e), m = s > 0 ? r[s - 1]?.props : null, h = m?.children ?? "Back", g = m?.href, b = m?.onClick;
+  H(() => {
+    if (!(l == null || g == null))
+      return l.setTail({
+        label: h,
+        href: g,
+        onClick: b
+      }), () => l.setTail(null);
+  }, [
+    l,
+    h,
+    g,
+    b
+  ]);
+  const [N, v] = w(!c && !u && o != null && o.labels.length > s);
+  return /* @__PURE__ */ t("nav", {
+    "aria-label": "Breadcrumb",
+    "data-basic-page-back": "",
+    className: p("absolute top-4 left-3 flex min-w-max items-center", e),
+    ...n,
+    children: /* @__PURE__ */ y("ol", {
+      className: "m-0 flex list-none items-center p-0",
+      children: [r.map((_, x) => f && x > 0 && x < s - 2 ? null : /* @__PURE__ */ y(Et, { children: [f && x === s - 2 && /* @__PURE__ */ y("li", {
+        className: "m-0 flex items-center max-sm:hidden",
+        children: [/* @__PURE__ */ t("span", {
+          "aria-hidden": !0,
+          className: he,
+          children: oe
+        }), /* @__PURE__ */ y(K.Root, { children: [/* @__PURE__ */ t(K.Trigger, { render: /* @__PURE__ */ t(Z, {
+          variant: "ghost",
+          size: "sm",
+          "aria-label": "Hidden pages",
+          className: "px-2",
+          children: Fa
+        }) }), /* @__PURE__ */ t(K.Portal, { children: /* @__PURE__ */ t(K.Positioner, {
+          align: "start",
+          sideOffset: 4,
+          children: /* @__PURE__ */ t(K.Popup, { children: r.slice(1, s - 2).map((E, R) => {
+            const P = E.props;
+            return /* @__PURE__ */ t(K.LinkItem, {
+              render: /* @__PURE__ */ t(d, {
+                href: P.href,
+                onClick: P.onClick
+              }),
+              children: P.children ?? "Back"
+            }, E.key ?? R);
+          }) })
+        }) })] })]
+      }), /* @__PURE__ */ t("li", {
+        className: p("m-0 flex items-center", x < s - 1 && "max-sm:hidden"),
+        children: /* @__PURE__ */ t(at.Provider, {
+          value: {
+            index: x,
+            count: s,
+            departing: o,
+            narrow: u
+          },
+          children: _
+        })
+      })] }, _.key ?? x)), N && /* @__PURE__ */ t("li", {
+        "aria-hidden": !0,
+        className: "m-0 flex items-center max-sm:hidden",
+        children: /* @__PURE__ */ t(A.span, {
+          initial: { opacity: 1 },
+          animate: { opacity: 0 },
+          transition: Ke,
+          onAnimationComplete: () => v(!1),
+          className: he,
+          children: oe
+        })
+      })]
+    })
+  });
+}
+var he = "text-pho-description -mx-1 inline-flex shrink-0 text-base select-none", oe = "/", Ha = 4, Fa = "…";
+function rt({ href: e, className: a, morphId: n, children: r = "Back", ...i }) {
+  const o = T(at), u = M(), c = n != null && !u, s = Qe(c ? n : void 0);
+  if (o == null) throw new Error("BasicPage.Crumb must be rendered inside BasicPage.Breadcrumbs");
+  const { index: d, count: f, departing: l, narrow: m } = o, h = d === 0, g = d === f - 1, b = l != null && l.labels.length < f, N = l != null && l.labels.length > f, v = g && (l == null || b || m), _ = h || g, x = h && g ? "" : h ? "max-sm:hidden" : "sm:hidden", E = l != null, R = g ? m ? N ? "slide" : "fade" : v ? "fade" : void 0 : void 0, [P, F] = w(c && m && s.fly && l != null && !N ? l.labels[l.labels.length - 1] : null), G = c && _ && !E, Y = c && !h && g && (l == null || b);
+  return /* @__PURE__ */ y(we, { children: [!h && /* @__PURE__ */ t("span", {
+    "aria-hidden": !0,
+    className: p(he, "max-sm:hidden"),
+    children: Y ? /* @__PURE__ */ t(A.span, {
+      initial: s.fly ? {
+        opacity: 0,
+        x: Le
+      } : { opacity: 0 },
+      animate: s.fly ? {
+        opacity: 1,
+        x: 0
+      } : { opacity: 1 },
+      transition: s.fly ? Be : D,
+      className: "inline-flex",
+      children: oe
+    }) : oe
+  }), /* @__PURE__ */ t(ge, {
+    variant: "ghost",
+    size: "sm",
+    href: e,
+    prefix: _ ? G ? /* @__PURE__ */ t(A.span, {
+      initial: s.fly ? {
+        opacity: 0,
+        x: Le
+      } : { opacity: 0 },
+      animate: s.fly ? {
+        opacity: 1,
+        x: 0
+      } : { opacity: 1 },
+      transition: s.fly ? Be : D,
+      className: p("inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0", x),
+      children: /* @__PURE__ */ t(ie, {})
+    }) : /* @__PURE__ */ t("span", {
+      className: p("inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0", x),
+      children: /* @__PURE__ */ t(ie, {})
+    }) : /* @__PURE__ */ t("span", { className: "hidden" }),
+    className: p("min-w-max", a),
+    ...i,
+    children: c && n != null ? /* @__PURE__ */ y("span", {
+      className: p("relative block", !s.fly && R === "slide" && "overflow-hidden", !g && "max-w-40 truncate"),
+      children: [/* @__PURE__ */ t(Ye, {
+        morphId: n,
+        fromClassName: "text-pho-primary",
+        fly: s.fly,
+        morphRef: s.ref,
+        arrival: R,
+        children: r
+      }), P != null && /* @__PURE__ */ t(A.span, {
+        "aria-hidden": !0,
+        initial: {
+          x: 0,
+          opacity: 1
+        },
+        animate: {
+          x: qt,
+          opacity: 0
+        },
+        transition: Wt,
+        onAnimationComplete: () => F(null),
+        className: "pointer-events-none absolute inset-y-0 left-0 whitespace-nowrap",
+        children: P
+      })]
+    }) : /* @__PURE__ */ t("span", {
+      className: p("block", !g && "max-w-40 truncate"),
+      children: r
+    })
+  })] });
+}
+function za({ className: e, ...a }) {
+  return /* @__PURE__ */ t(nt, {
+    className: e,
+    children: /* @__PURE__ */ t(rt, { ...a })
+  });
+}
+function Ga({ label: e, description: a, leading: n, href: r, className: i, children: o, ...u }) {
+  const c = Ge(), s = q(() => A.create(c), [c]), { leaving: d, ...f } = ke();
+  return /* @__PURE__ */ y(s, {
+    href: r,
+    ...f,
+    ...u,
+    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__ */ y("div", {
+      className: p("flex min-w-0 flex-1 items-center", n != null && "gap-3"),
+      children: [n, /* @__PURE__ */ y("div", {
+        className: "min-w-0",
+        children: [/* @__PURE__ */ t("div", {
+          className: "flex min-w-0 items-center gap-1",
+          children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ t("p", {
+            className: "text-pho-primary truncate text-base font-medium",
+            children: e
+          }) : e
+        }), a ? /* @__PURE__ */ t("div", {
+          className: "text-pho-description truncate text-xs",
+          children: a
+        }) : null]
+      })]
+    }), /* @__PURE__ */ y("div", {
+      className: "flex min-w-0 items-center justify-end gap-2",
+      children: [o != null ? /* @__PURE__ */ t("div", {
+        className: "min-w-0",
+        children: o
+      }) : null, /* @__PURE__ */ t(gt, {
+        "aria-hidden": !0,
+        className: "text-pho-secondary group-hover:text-pho-secondary-hover size-4 shrink-0 transition-colors"
+      })]
+    })]
+  });
+}
+function Va({ open: e, variant: a = "overlay", modal: n = !1, placeholder: r, onClose: i, width: o = "default", presentation: u, defaultPresentation: c, onPresentationChange: s, expandable: d = !0, children: f }) {
+  const l = T(We), m = l != null ? Lt(l.paneWidth, o) : 0, h = e ?? ee.toArray(f).length > 0, { presentation: g, setPresentation: b, canChoose: N } = $a({
+    isOpen: h,
+    paneNarrow: l?.paneNarrow ?? !1,
+    presentation: u,
+    defaultPresentation: c,
+    onPresentationChange: s
+  }), v = l?.setOpen, _ = l?.setAsPage, x = l?.setPresent;
+  if (H(() => {
+    if (x != null)
+      return x(!0), () => x(!1);
+  }, [x]), H(() => {
+    if (v != null)
+      return v(h), () => v(!1);
+  }, [v, h]), H(() => {
+    if (_ != null)
+      return _(g === "page"), () => _(!1);
+  }, [_, g]), O(() => {
+    l == null && typeof process < "u" && process.env.NODE_ENV !== "production" && console.warn("BasicPage.Aside: needs a `BasicPage.Root` around it.");
+  }, [l]), l == null || l.slot == null) return null;
+  const E = d && N ? () => b("page") : void 0;
+  if (g === "page") {
+    const R = d && N && !l.paneNarrow ? () => b("panel") : void 0;
+    return Pe(h ? /* @__PURE__ */ y("div", {
+      "data-basic-page-aside": "page",
+      "data-basic-page-aside-expanded": l.paneNarrow ? void 0 : "",
+      className: "relative flex min-w-0 flex-1 flex-col",
+      children: [R != null ? /* @__PURE__ */ t("span", {
+        className: "absolute top-2 right-2 z-30",
+        children: /* @__PURE__ */ t(W.Provider, { children: /* @__PURE__ */ t(st, {
+          label: "Show as panel",
+          icon: /* @__PURE__ */ t(ht, {}),
+          onClick: R
+        }) })
+      }) : null, f]
+    }) : null, l.slot);
+  }
+  return a === "inline" ? Pe(/* @__PURE__ */ t(qa, {
+    width: m,
+    paneHeight: l.paneHeight,
+    onClose: i,
+    onExpand: E,
+    open: h,
+    placeholder: r,
+    children: f
+  }), l.slot) : /* @__PURE__ */ t(Wa, {
+    container: l.slot,
+    width: m,
+    paneHeight: l.paneHeight,
+    onClose: i,
+    onExpand: E,
+    open: h,
+    modal: n,
+    children: f
+  });
+}
+function $a({ isOpen: e, paneNarrow: a, presentation: n, defaultPresentation: r, onPresentationChange: i }) {
+  const [o, u] = w(e), [c, s] = w(null);
+  H(() => {
+    e || (u(!1), s(null));
+  }, [e]);
+  const d = n != null;
+  return {
+    presentation: a ? "page" : n ?? c ?? r ?? (o ? "page" : "panel"),
+    setPresentation: ye((f) => {
+      d || s(f), i?.(f);
+    }, [d, i]),
+    canChoose: !d || i != null
+  };
+}
+function it() {
+  const [e, a] = w(null), n = q(() => ({ setBack: a }), []), r = C(null);
+  return {
+    back: e,
+    panel: n,
+    closeRef: r,
+    leave: ye(() => {
+      const i = r.current?.querySelector("a, button");
+      return i == null ? !1 : (i.click(), !0);
+    }, [])
+  };
+}
+var Fe = {
+  variant: "ghost",
+  size: "sm",
+  svgOnly: !0,
+  "aria-label": "Close",
+  children: /* @__PURE__ */ t(xt, {})
+};
+function st({ label: e, icon: a, onClick: n }) {
+  return /* @__PURE__ */ y(W.Root, { children: [/* @__PURE__ */ t(W.Trigger, { render: /* @__PURE__ */ t(Z, {
+    variant: "ghost",
+    size: "sm",
+    svgOnly: !0,
+    "aria-label": e,
+    onClick: n,
+    children: a
+  }) }), /* @__PURE__ */ t(W.Portal, { children: /* @__PURE__ */ t(W.Positioner, { children: /* @__PURE__ */ t(W.Popup, { children: e }) }) })] });
+}
+function lt({ back: e, onClose: a, onExpand: n, closeRef: r, panel: i, children: o }) {
+  return /* @__PURE__ */ y(we, { children: [/* @__PURE__ */ y("span", {
+    className: "absolute top-2 right-2 z-30 flex items-center gap-0.5",
+    children: [n != null ? /* @__PURE__ */ t(W.Provider, { children: /* @__PURE__ */ t(st, {
+      label: "Expand",
+      icon: /* @__PURE__ */ t(ft, {}),
+      onClick: n
+    }) }) : null, /* @__PURE__ */ t("span", {
+      ref: r,
+      className: "contents",
+      children: e != null ? /* @__PURE__ */ t(ge, {
+        ...Fe,
+        href: e.href,
+        onClick: e.onClick
+      }) : a != null ? /* @__PURE__ */ t(Z, {
+        ...Fe,
+        onClick: a
+      }) : null
+    })]
+  }), /* @__PURE__ */ y(J.Root, {
+    className: "min-h-0 flex-1",
+    children: [/* @__PURE__ */ t(J.Viewport, { children: /* @__PURE__ */ t(J.Content, {
+      className: "flex min-h-full flex-col",
+      children: /* @__PURE__ */ t(je.Provider, {
+        value: i,
+        children: o
+      })
+    }) }), /* @__PURE__ */ t(J.Scrollbar, { children: /* @__PURE__ */ t(J.Thumb, {}) })]
+  })] });
+}
+function qa({ width: e, paneHeight: a, onClose: n, onExpand: r, open: i, placeholder: o, children: u }) {
+  const c = M(), { back: s, panel: d, closeRef: f, leave: l } = it(), m = c ? "blur(0px)" : `blur(${ve}px)`, h = a ?? "100dvh";
+  O(() => {
+    const b = (N) => {
+      N.key !== "Escape" || N.defaultPrevented || l() && N.preventDefault();
+    };
+    return document.addEventListener("keydown", b), () => document.removeEventListener("keydown", b);
+  }, [l]);
+  const g = {
+    initial: {
+      opacity: 0,
+      filter: m
+    },
+    animate: {
+      opacity: 1,
+      filter: "blur(0px)"
+    },
+    exit: {
+      opacity: 0,
+      filter: m
+    },
+    transition: c ? { duration: 0 } : le
+  };
+  return /* @__PURE__ */ t("aside", {
+    "data-basic-page-aside": "panel",
+    "data-basic-page-aside-variant": "inline",
+    className: "relative flex shrink-0 flex-col",
+    style: {
+      width: e,
+      minHeight: h
+    },
+    children: /* @__PURE__ */ t("div", {
+      className: "border-pho-secondary bg-pho-primary sticky top-0 grid border-l *:min-h-0 *:[grid-area:1/1]",
+      style: { height: h },
+      children: /* @__PURE__ */ t($, {
+        initial: !1,
+        children: i ? /* @__PURE__ */ t(A.div, {
+          ...g,
+          className: "relative flex flex-col",
+          children: /* @__PURE__ */ t(lt, {
+            back: s,
+            onClose: n,
+            onExpand: r,
+            closeRef: f,
+            panel: d,
+            children: u
+          })
+        }, "page") : /* @__PURE__ */ t(A.div, {
+          ...g,
+          className: "flex flex-col",
+          children: o
+        }, "empty")
+      })
+    })
+  });
+}
+function Wa({ container: e, width: a, paneHeight: n, onClose: r, onExpand: i, open: o, modal: u, children: c }) {
+  const { back: s, panel: d, closeRef: f, leave: l } = it(), m = n ?? "100dvh";
+  return /* @__PURE__ */ t(ne.Root, {
+    open: o,
+    modal: u ? "trap-focus" : !1,
+    disablePointerDismissal: !0,
+    onOpenChange: (h, g) => {
+      h || (g.cancel(), l());
+    },
+    children: /* @__PURE__ */ y(ne.Portal, {
+      container: e,
+      className: "contents",
+      children: [u ? /* @__PURE__ */ t(ne.Backdrop, {
+        "data-basic-page-aside-backdrop": "",
+        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: l
+      }) : null, /* @__PURE__ */ t(ne.Popup, {
+        "data-basic-page-aside": "panel",
+        "data-basic-page-aside-variant": "overlay",
+        initialFocus: u ? void 0 : !1,
+        finalFocus: u ? void 0 : !1,
+        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: a },
+        children: /* @__PURE__ */ t("div", {
+          className: "border-pho-secondary bg-pho-primary shadow-pho-xl sticky top-0 flex flex-col border-l",
+          style: { height: m },
+          children: /* @__PURE__ */ t(lt, {
+            back: s,
+            onClose: r,
+            onExpand: i,
+            closeRef: f,
+            panel: d,
+            children: c
+          })
+        })
+      })]
+    })
+  });
+}
+var ja = "14rem", Ka = "transition-[width] duration-[330ms] ease-pho-spring motion-reduce:transition-none", ze = "transition-[opacity,visibility] duration-200 ease-out motion-reduce:transition-none";
+function Xa({ variant: e = "box", fold: a = "auto", value: n, onValueChange: r, placeholder: i, label: o, className: u, ...c }) {
+  const s = T(be), d = xe(s?.subscribe ?? Ce, () => s?.get().api ?? null, () => null), f = n != null;
+  O(() => {
+    if (!(s == null || f))
+      return s.adopt(!0), () => s.adopt(!1);
+  }, [s, f]);
+  const l = f ? {
+    query: n,
+    setQuery: r,
+    placeholder: i ?? "Search",
+    label: o ?? i ?? "Search"
+  } : d == null ? null : {
+    query: d.query,
+    setQuery: d.setQuery,
+    placeholder: d.placeholder,
+    label: o ?? d.placeholder
+  }, [m, h] = w(!1), g = C(null), b = m || (l?.query ?? "") !== "";
+  if (O(() => {
+    if (!m) return;
+    let v = 0, _ = 0;
+    const x = () => {
+      const E = g.current;
+      E != null && (E.focus(), document.activeElement !== E && _++ < 5 && (v = requestAnimationFrame(x)));
+    };
+    return v = requestAnimationFrame(x), () => cancelAnimationFrame(v);
+  }, [m]), e === "ghost") return /* @__PURE__ */ t("div", {
+    "data-basic-page-search": "",
+    "data-variant": "ghost",
+    className: p("flex min-w-0 flex-1", l == null && "hidden", u),
+    ...c,
+    children: l != null && /* @__PURE__ */ t(Ct, {
+      value: l.query,
+      onChange: l.setQuery,
+      placeholder: l.placeholder,
+      "aria-label": l.label,
+      onKeyDown: (v) => {
+        v.key === "Escape" && (v.preventDefault(), l.setQuery(""), v.currentTarget.blur());
+      }
+    })
+  });
+  const N = a === "auto";
+  return /* @__PURE__ */ t("div", {
+    "data-basic-page-search": "",
+    "data-expanded": b || 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-start", l == null && "hidden", u),
+    ...c,
+    children: l != null && /* @__PURE__ */ y("div", {
+      className: p("grid w-9 max-w-full justify-items-end *:[grid-area:1/1]", Ka, N && "@[36rem]:w-56"),
+      style: b ? { width: ja } : void 0,
+      children: [/* @__PURE__ */ t(Z, {
+        variant: "outlined",
+        size: "sm",
+        shape: "circle",
+        svgOnly: !0,
+        "aria-label": l.label,
+        "aria-hidden": b || void 0,
+        tabIndex: b ? -1 : void 0,
+        onClick: () => h(!0),
+        className: p(ze, b ? "pointer-events-none invisible opacity-0" : "visible opacity-100", N && "@[36rem]:pointer-events-none @[36rem]:invisible @[36rem]:opacity-0"),
+        children: /* @__PURE__ */ t(Re, {})
+      }), /* @__PURE__ */ t("div", {
+        inert: !N && !b,
+        className: p("w-full min-w-0", ze, b ? "visible opacity-100" : "pointer-events-none invisible opacity-0", N && "@[36rem]:pointer-events-auto @[36rem]:visible @[36rem]:opacity-100"),
+        children: /* @__PURE__ */ y(ue.Root, {
+          size: "sm",
+          className: "w-full",
+          children: [/* @__PURE__ */ t(ue.Addon, { children: /* @__PURE__ */ t(Re, {}) }), /* @__PURE__ */ t(ue.Input, {
+            ref: g,
+            type: "search",
+            value: l.query,
+            onChange: (v) => l.setQuery(v.target.value),
+            onBlur: () => {
+              l.query === "" && h(!1);
+            },
+            onKeyDown: (v) => {
+              v.key === "Escape" && (v.preventDefault(), l.setQuery(""), h(!1), v.currentTarget.blur());
+            },
+            placeholder: l.placeholder,
+            "aria-label": l.label
+          })]
+        })
+      })]
+    })
+  });
+}
+function Qa({ header: e, main: a, side: n, foot: r, enter: i }) {
+  const o = n != null;
+  return /* @__PURE__ */ t("div", {
+    "data-basic-page-columns": "",
+    className: "@container w-full min-w-0",
+    children: /* @__PURE__ */ y("div", {
+      className: p("mx-auto w-full max-w-[42rem]", o && "@min-[73.5rem]:max-w-none"),
+      children: [e, /* @__PURE__ */ y("div", {
+        className: p("grid gap-x-10 gap-y-4", o && "@min-[73.5rem]:grid-cols-[minmax(42rem,1fr)_minmax(29rem,32rem)] @min-[73.5rem]:grid-rows-[auto_minmax(0,1fr)]", o && "[&>[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"),
+        children: [
+          /* @__PURE__ */ t(re, {
+            enter: i,
+            "data-basic-page-columns-main": "",
+            className: p("[[data-basic-page-stack]>[data-basic-page-columns]_&]:mt-0", o && "@min-[73.5rem]:col-start-1 @min-[73.5rem]:row-span-2 @min-[73.5rem]:row-start-1"),
+            children: a
+          }),
+          o ? /* @__PURE__ */ t(re, {
+            enter: i,
+            "data-basic-page-columns-side": "",
+            className: p("[[data-basic-page-stack]>[data-basic-page-columns]_&]:mt-0", "@min-[73.5rem]:col-start-2 @min-[73.5rem]:row-start-1"),
+            children: n
+          }) : null,
+          r != null ? /* @__PURE__ */ t(re, {
+            enter: i,
+            "data-basic-page-columns-foot": "",
+            className: p("[[data-basic-page-stack]>[data-basic-page-columns]_&]:mt-0", o && "@min-[73.5rem]:col-start-2 @min-[73.5rem]:row-start-2 @min-[73.5rem]:self-start"),
+            children: r
+          }) : null
+        ]
+      })]
+    })
+  });
+}
+var kn = {
+  Root: Dt,
+  Aside: Va,
+  Search: Xa,
+  Table: bt,
+  CondenseScope: Xt,
+  Breadcrumbs: nt,
+  Crumb: rt,
+  Back: za,
+  Title: ea,
+  Stack: re,
+  Columns: Qa,
+  Header: sa,
+  HeaderAction: la,
+  SectionTitle: oa,
+  Description: Ze,
+  TableCount: ca,
+  SectionFooter: ua,
+  Card: da,
+  Item: pa,
+  ItemPanel: ma,
+  Callout: fa,
+  CalloutTitle: ha,
+  CalloutDescription: ga,
+  Onboard: ba,
+  Step: Aa,
+  Row: _a,
+  RowLink: Ga,
+  Value: Ca,
+  Alert: Ea,
+  Footer: Oa,
+  Form: ka,
+  Saved: Sa,
+  Fields: Ra,
+  Inline: Pa,
+  Submit: Ia,
+  Reveal: Te
+};
+export {
+  Pt as a,
+  kn as c,
+  Qt as d,
+  me as f,
+  Rt as i,
+  le as l,
+  _n as m,
+  Ie as n,
+  It as o,
+  Cn as p,
+  $e as r,
+  Tt as s,
+  En as t,
+  Yt as u
+};
+
+//# sourceMappingURL=basic-page-CYDwfVjO.js.map