@photon-ai/pho-ui 2.4.0 → 2.6.0

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

@@ -0,0 +1,1295 @@
+"use client";
+import { t as d } from "./cn-ChIgwEl3.js";
+import { n as Ae } from "./link-provider-9TFNyDqO.js";
+import { a as se, o as le } from "./button-DNNs5RsT.js";
+import { t as De } from "./createReactComponent-BqCmnqfX.js";
+import { t as Fe } from "./error-Crs-wqMC.js";
+import { t as q } from "./IconChevronLeft-CSWMKQ4C.js";
+import { t as Ve } from "./IconX-pZ9vrtSr.js";
+import { t as Ge } from "./toast-DoXaRPIZ.js";
+import { t as ze } from "./animated-height-C2eQstGy.js";
+import { t as K } from "./scroll-area-Bu7egArU.js";
+import { t as $e } from "./form-AiHbbw4m.js";
+import { i as z } from "./menu-BQeprfxB.js";
+import { Children as J, Fragment as je, createContext as G, isValidElement as We, useContext as T, useEffect as O, useId as Xe, useLayoutEffect as F, useMemo as V, useRef as N, useState as y, useSyncExternalStore as Ke } from "react";
+import { Fragment as Ye, jsx as n, jsxs as x } from "react/jsx-runtime";
+import { AnimatePresence as j, motion as w, useIsPresent as qe, useReducedMotion as I } from "motion/react";
+import { createPortal as he } from "react-dom";
+var Ue = [["path", {
+  d: "M9 6l6 6l-6 6",
+  key: "svg-0"
+}]], Qe = De("outline", "chevron-right", "ChevronRight", Ue), oe = "rounded-base border border-pho-secondary bg-pho-primary", U = "divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0", Je = `${oe} ${U}`, ge = "flex min-w-0 flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5", Ze = "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", et = "flex flex-col gap-3 px-5 py-4", tt = "-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 = {
+  type: "spring",
+  stiffness: 400,
+  damping: 40
+}, M = {
+  duration: 0.25,
+  ease: "easeOut"
+}, W = 12, at = 768;
+function rt(e) {
+  return Math.round(Math.min(Math.max(e * 0.4, 320), 448));
+}
+var Ce = G(null), Ee = G(null);
+function it(e) {
+  const [t, a] = y(null), [i, r] = y(!1), [o, c] = y(!1), [l, s] = y(() => ({
+    width: typeof window > "u" ? 0 : window.innerWidth,
+    height: null
+  }));
+  return F(() => {
+    const u = e.current;
+    if (!i || u == null) return;
+    const f = de(u), m = () => {
+      const h = u.offsetWidth, g = f?.clientHeight ?? null;
+      s((v) => v.width === h && v.height === g ? v : {
+        width: h,
+        height: g
+      });
+    };
+    if (m(), typeof ResizeObserver > "u") return;
+    const p = new ResizeObserver(m);
+    return p.observe(u), f != null && p.observe(f), () => p.disconnect();
+  }, [e, i]), {
+    host: V(() => ({
+      slot: t,
+      presentation: l.width >= at ? "panel" : "page",
+      width: rt(l.width),
+      paneHeight: l.height,
+      setOpen: c,
+      setPresent: r
+    }), [t, l]),
+    setSlot: a,
+    open: o
+  };
+}
+function st(e) {
+  return e == null ? window.scrollY : e.scrollTop;
+}
+function ve(e, t) {
+  e == null ? window.scrollTo({ top: t }) : e.scrollTop = t;
+}
+function lt({ condense: e = !0, width: t = "base", className: a, children: i, ref: r, ...o }) {
+  const c = T(Z)?.adopt ?? !1, l = T(Ee), s = t === "wide", u = N(null), [f, m] = y(null), [p, h] = y(null), g = V(() => ({
+    setTitle: m,
+    setTail: h
+  }), []);
+  O(() => {
+    if (l != null)
+      return l.setBack(p), () => l.setBack(null);
+  }, [l, p]);
+  const { host: v, setSlot: E, open: A } = it(u), _ = A && v.presentation === "page", b = N(!1), L = N(0);
+  F(() => {
+    const R = u.current;
+    if (_ === b.current || R == null) return;
+    b.current = _;
+    const B = de(R);
+    _ ? (L.current = st(B), ve(B, 0)) : ve(B, L.current);
+  }, [_]);
+  const H = e ? /* @__PURE__ */ n(ot, {
+    title: f,
+    tail: l == null ? p : null,
+    silent: _ || l != null
+  }) : null, P = /* @__PURE__ */ n("div", {
+    "data-basic-page-column": "",
+    className: d("mx-auto flex w-full min-w-0 flex-1 flex-col px-5 pt-12 pb-12 *:min-w-0", s ? "max-w-[82.5rem]" : "max-w-[44.5rem]", c || l != null ? "[&_[data-basic-page-back]]:hidden" : "has-[[data-basic-page-back]]:pt-16"),
+    children: e ? /* @__PURE__ */ n(ue.Provider, {
+      value: g,
+      children: i
+    }) : i
+  });
+  return /* @__PURE__ */ n("div", {
+    "data-basic-page-root": "",
+    "data-basic-page-width": s ? "wide" : void 0,
+    className: d("relative flex min-h-full w-full min-w-0 flex-row", a),
+    ...o,
+    ref: (R) => {
+      u.current = R, typeof r == "function" ? r(R) : r != null && (r.current = R);
+    },
+    children: /* @__PURE__ */ x(Ce.Provider, {
+      value: v,
+      children: [/* @__PURE__ */ x("div", {
+        "data-basic-page-main": "",
+        className: d("flex min-w-0 flex-1 flex-col", _ && "hidden"),
+        children: [H, P]
+      }), /* @__PURE__ */ n("div", {
+        ref: E,
+        className: "contents"
+      })]
+    })
+  });
+}
+function ot({ title: e, tail: t, silent: a = !1 }) {
+  const i = I(), [r, o] = y(!1), c = T(Z), l = Xe();
+  O(() => {
+    if (c != null) {
+      if (a) {
+        c.store.clear(l);
+        return;
+      }
+      c.store.set(l, {
+        condensed: r,
+        title: e?.label ?? null,
+        back: t
+      });
+    }
+  }, [
+    c,
+    l,
+    r,
+    e,
+    t,
+    a
+  ]), O(() => {
+    if (c != null)
+      return () => c.store.clear(l);
+  }, [c, l]);
+  const s = e?.el ?? null;
+  return O(() => {
+    if (s == null || typeof IntersectionObserver > "u") return;
+    const u = new IntersectionObserver(([f]) => o(f != null && !f.isIntersecting), { root: de(s) });
+    return u.observe(s), () => u.disconnect();
+  }, [s]), /* @__PURE__ */ n("div", {
+    "data-basic-page-condense": "",
+    className: "sticky top-0 z-20 h-0 overflow-visible",
+    children: /* @__PURE__ */ n(j, { children: r && !(c?.adopt ?? !1) && /* @__PURE__ */ x(w.div, {
+      initial: {
+        opacity: 0,
+        y: i ? 0 : -8
+      },
+      animate: {
+        opacity: 1,
+        y: 0
+      },
+      exit: {
+        opacity: 0,
+        y: i ? 0 : -8
+      },
+      transition: {
+        ...ee,
+        y: xt
+      },
+      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", {
+        className: "flex min-w-0 items-center justify-start",
+        children: t != null && /* @__PURE__ */ n(le, {
+          variant: "ghost",
+          size: "sm",
+          href: t.href,
+          onClick: t.onClick,
+          prefix: /* @__PURE__ */ n("span", {
+            className: "inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0",
+            children: /* @__PURE__ */ n(q, {})
+          }),
+          className: "min-w-max",
+          children: t.label
+        })
+      }), /* @__PURE__ */ n("span", {
+        className: "text-pho-primary block max-w-full min-w-0 truncate text-center text-base font-medium",
+        children: e?.label
+      })]
+    }) })
+  });
+}
+function ct(e) {
+  return e.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function ut(e) {
+  if (!(typeof e != "string" && typeof e != "number"))
+    return ct(String(e)) || void 0;
+}
+function ce(e, t) {
+  if (e !== "")
+    return e ?? ut(t);
+}
+var dt = (e) => `basic-page-morph-${e}`, ft = { layout: S }, ye = 10, be = {
+  delay: 0.2,
+  duration: 0.12,
+  ease: "easeOut"
+}, mt = {
+  duration: 0.18,
+  ease: "easeOut"
+}, pt = -8, ht = {
+  duration: 0.16,
+  ease: "easeOut"
+}, gt = {
+  delay: 0.14,
+  duration: 0.16,
+  ease: "easeOut"
+}, _e = {
+  duration: 0.12,
+  ease: "easeOut"
+}, $ = [];
+function vt(e) {
+  const t = N({ labels: e });
+  t.current.labels = e, F(() => {
+    const a = t.current;
+    return $.push(a), () => {
+      $.splice($.indexOf(a), 1);
+    };
+  }, []);
+}
+function ke() {
+  const [e] = y(() => {
+    const t = $[$.length - 1];
+    return t ? { labels: [...t.labels] } : null;
+  });
+  return e;
+}
+var ue = G(null), re = {
+  condensed: !1,
+  title: null,
+  back: null
+}, Z = G(null), yt = () => () => {
+}, xe = () => re;
+function bt({ adopt: e = !0, children: t }) {
+  const [a] = y(() => {
+    let r = re, o = null;
+    const c = /* @__PURE__ */ new Set(), l = () => {
+      for (const s of c) s();
+    };
+    return {
+      get: () => r,
+      set(s, u) {
+        o = s, r = u, l();
+      },
+      clear(s) {
+        o === s && (o = null, r = re, l());
+      },
+      subscribe(s) {
+        return c.add(s), () => c.delete(s);
+      }
+    };
+  }), i = V(() => ({
+    store: a,
+    adopt: e
+  }), [a, e]);
+  return /* @__PURE__ */ n(Z.Provider, {
+    value: i,
+    children: t
+  });
+}
+function Cn() {
+  const e = T(Z);
+  return Ke(e?.store.subscribe ?? yt, e?.store.get ?? xe, e?.store.get ?? xe);
+}
+var ee = {
+  duration: 0.2,
+  ease: "easeOut"
+}, xt = {
+  duration: ee.duration,
+  ease: "linear"
+}, En = -8;
+function de(e) {
+  if (typeof getComputedStyle != "function") return null;
+  for (let t = e.parentElement; t != null && t !== document.body; t = t.parentElement) {
+    const { overflowY: a } = getComputedStyle(t);
+    if (a === "auto" || a === "scroll") return t;
+  }
+  return null;
+}
+var ne = /* @__PURE__ */ new Map(), wt = 96;
+function Nt(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 Re(e) {
+  const [t] = y(() => {
+    if (e == null) return !1;
+    const i = ne.get(e);
+    return i != null && i.visible && i.el.isConnected && Nt(i.el) <= wt;
+  }), a = N(null);
+  return O(() => {
+    if (e == null || typeof IntersectionObserver > "u") return;
+    const i = a.current;
+    if (!i) return;
+    const r = new IntersectionObserver(([o]) => {
+      o && ne.set(e, {
+        visible: o.isIntersecting,
+        el: i
+      });
+    });
+    return r.observe(i), () => {
+      r.disconnect(), ne.delete(e);
+    };
+  }, [e]), {
+    fly: t,
+    ref: a
+  };
+}
+var At = {
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    transition: { opacity: M }
+  },
+  rise: {
+    initial: {
+      opacity: 0,
+      y: W
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: S,
+      opacity: M
+    }
+  },
+  slide: {
+    initial: { x: "-100%" },
+    animate: { x: 0 },
+    transition: { x: gt }
+  }
+};
+function Se({ morphId: e, fromClassName: t, fly: a, morphRef: i, arrival: r, className: o, children: c }) {
+  const [l, s] = y(!1), u = !a && r != null ? At[r] : null;
+  return /* @__PURE__ */ x(w.span, {
+    ref: i,
+    layoutId: dt(e),
+    initial: u?.initial,
+    animate: u?.animate,
+    transition: a ? ft : {
+      layout: { duration: 0 },
+      ...u?.transition
+    },
+    onLayoutAnimationStart: () => {
+      a && s(!0);
+    },
+    onLayoutAnimationComplete: () => s(!1),
+    className: d("relative inline-block", o),
+    children: [c, l && /* @__PURE__ */ n(w.span, {
+      "aria-hidden": !0,
+      initial: { opacity: 1 },
+      animate: { opacity: 0 },
+      transition: mt,
+      onAnimationComplete: () => s(!1),
+      className: d("absolute inset-0", t),
+      children: c
+    })]
+  });
+}
+var we = "max-w-full min-w-0 truncate align-top";
+function Ct({ id: e, morphId: t, enter: a, className: i, children: r, ...o }) {
+  const c = ce(e, r), l = I(), s = Re(t), u = ke(), f = !l && (t != null || a === !0), m = a || u != null ? "rise" : void 0, p = T(ue), h = N(null);
+  F(() => {
+    if (p != null)
+      return p.setTitle({
+        label: r,
+        el: h.current
+      }), () => p.setTitle(null);
+  }, [p, r]);
+  const [g, v] = y(s.fly && u != null);
+  return F(() => {
+    $.length > 0 && v(!1);
+  }, []), /* @__PURE__ */ x("h1", {
+    id: c,
+    className: d("text-display-base text-pho-primary max-w-full min-w-0 scroll-mt-12 px-5 font-medium", f ? "whitespace-nowrap" : "truncate", i),
+    ...o,
+    ref: (E) => {
+      h.current = E;
+      const A = o.ref;
+      typeof A == "function" ? A(E) : A != null && (A.current = E);
+    },
+    children: [t != null && !l ? /* @__PURE__ */ n(Se, {
+      morphId: t,
+      fromClassName: "text-pho-secondary",
+      fly: s.fly,
+      morphRef: s.ref,
+      arrival: m,
+      className: we,
+      children: r
+    }) : a && !l ? /* @__PURE__ */ n(w.span, {
+      initial: {
+        opacity: 0,
+        y: W
+      },
+      animate: {
+        opacity: 1,
+        y: 0
+      },
+      transition: {
+        y: S,
+        opacity: M
+      },
+      className: d("inline-block", we),
+      children: r
+    }) : r, g && /* @__PURE__ */ n(w.span, {
+      "aria-hidden": !0,
+      initial: { opacity: 1 },
+      animate: { opacity: 0 },
+      transition: _e,
+      onAnimationComplete: () => v(!1),
+      className: d("text-pho-secondary pointer-events-none absolute inline-flex items-center", Qt),
+      children: /* @__PURE__ */ n(q, {})
+    })]
+  });
+}
+var Te = G(!1);
+function Et() {
+  const e = T(Te), t = I(), [a] = y(() => e && !t);
+  return a;
+}
+var _t = {
+  height: 0,
+  opacity: 0,
+  paddingTop: 0,
+  paddingBottom: 0,
+  borderTopWidth: 0
+}, kt = {
+  y: S,
+  opacity: M,
+  height: S,
+  paddingTop: S,
+  paddingBottom: S,
+  borderTopWidth: S
+};
+function fe() {
+  const e = Et(), t = qe(), a = I();
+  return {
+    initial: e ? {
+      opacity: 0,
+      y: W
+    } : !1,
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    exit: _t,
+    transition: a ? { duration: 0 } : kt,
+    leaving: !t
+  };
+}
+var Rt = typeof process < "u" && process.env.NODE_ENV !== "production";
+function Pe(e, t, a, i) {
+  O(() => {
+    if (!Rt || e.current == null || typeof getComputedStyle != "function") return;
+    const r = (c) => {
+      const l = getComputedStyle(c).rowGap;
+      return l === "" || l === "normal" ? null : parseFloat(l);
+    }, o = r(e.current);
+    o != null && o !== a && console.warn(`[BasicPage.${t}] spaced at ${o}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 c of Array.from(e.current.children)) {
+      const l = i(c);
+      if (l == null || getComputedStyle(c).display === "contents") continue;
+      const s = r(c);
+      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.`, c);
+    }
+  });
+}
+function St({ className: e, children: t, ...a }) {
+  const i = I(), r = N(null);
+  Pe(r, "Stack", 40, (u) => u.hasAttribute("data-basic-page-fields") ? 20 : 12);
+  const o = a["aria-busy"], c = o === !0 || o === "true", l = N(c), s = l.current && !c;
+  return O(() => {
+    l.current = c;
+  }), /* @__PURE__ */ n(w.div, {
+    ref: (u) => {
+      r.current = u;
+      const f = a.ref;
+      typeof f == "function" ? f(u) : f != null && (f.current = u);
+    },
+    "data-basic-page-stack": "",
+    initial: i ? !1 : {
+      opacity: 0,
+      y: W
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: S,
+      opacity: M
+    },
+    className: d("mt-6 flex min-w-0 flex-col gap-10", "*:flex *:min-w-0 *:flex-col [&>*:not([data-basic-page-fields])]:gap-3", e),
+    ...a,
+    children: /* @__PURE__ */ n(Te.Provider, {
+      value: s,
+      children: t
+    })
+  });
+}
+var Ne = "flex min-w-0 flex-col mb-3 [[data-basic-page-callout]_&]:mb-0 [[data-basic-page-stack]>*>&]:mb-0";
+function Tt({ enter: e, className: t, ...a }) {
+  const i = I();
+  return e && !i ? /* @__PURE__ */ n(w.div, {
+    initial: {
+      opacity: 0,
+      y: W
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: S,
+      opacity: M
+    },
+    "data-basic-page-header": "",
+    className: d(Ne, t),
+    ...a
+  }) : /* @__PURE__ */ n("div", {
+    "data-basic-page-header": "",
+    className: d(Ne, t),
+    ...a
+  });
+}
+function Pt({ id: e, className: t, children: a, ...i }) {
+  const r = ce(e, a);
+  return /* @__PURE__ */ n("h2", {
+    id: r,
+    className: d("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,
+    children: a
+  });
+}
+function Ot({ className: e, ...t }) {
+  return /* @__PURE__ */ n("p", {
+    className: d("text-display-xs text-pho-description px-5 font-normal", e),
+    ...t
+  });
+}
+function It({ className: e, ...t }) {
+  return /* @__PURE__ */ n("p", {
+    className: d("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 Lt({ animateHeight: e, className: t, children: a, ...i }) {
+  const r = /* @__PURE__ */ n(j, { children: J.toArray(a) });
+  return e ? /* @__PURE__ */ n("div", {
+    className: d(oe, "min-h-0 overflow-hidden", t),
+    ...i,
+    children: /* @__PURE__ */ n(ze, {
+      transition: S,
+      className: U,
+      children: r
+    })
+  }) : /* @__PURE__ */ n("div", {
+    className: d(Je, t),
+    ...i,
+    children: r
+  });
+}
+function Bt({ className: e, ...t }) {
+  const { leaving: a, ...i } = fe();
+  return /* @__PURE__ */ n(w.div, {
+    ...i,
+    className: d(et, a && "overflow-hidden", e),
+    ...t
+  });
+}
+function Mt({ divided: e = !1, className: t, ...a }) {
+  return /* @__PURE__ */ n("div", {
+    className: d(e ? nt : tt, t),
+    ...a
+  });
+}
+function Ht({ className: e, icon: t, children: a, ...i }) {
+  if (t == null || t === !1 || t === !0) return /* @__PURE__ */ n("div", {
+    "data-basic-page-callout": "",
+    className: d(ge, e),
+    ...i,
+    children: a
+  });
+  const [r, ...o] = J.toArray(a);
+  return /* @__PURE__ */ x("div", {
+    "data-basic-page-callout": "",
+    className: d(ge, e),
+    ...i,
+    children: [/* @__PURE__ */ x("div", {
+      className: "relative",
+      children: [/* @__PURE__ */ n("div", {
+        className: "min-w-0 pr-16",
+        children: r
+      }), /* @__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",
+        children: t
+      })]
+    }), o]
+  });
+}
+function Dt({ id: e, className: t, children: a, ...i }) {
+  const r = ce(e, a);
+  return /* @__PURE__ */ n("h2", {
+    id: r,
+    className: d("text-display-xs text-pho-primary max-w-full min-w-0 scroll-mt-12 truncate font-medium", t),
+    ...i,
+    children: a
+  });
+}
+function Ft({ className: e, ...t }) {
+  return /* @__PURE__ */ n("p", {
+    className: d("text-display-xs text-pho-description font-normal", e),
+    ...t
+  });
+}
+function Vt({ label: e, description: t, htmlFor: a, stacked: i = !1, className: r, children: o, ...c }) {
+  const { leaving: l, ...s } = fe();
+  return /* @__PURE__ */ x(w.div, {
+    ...s,
+    className: d(Ze, i && "sm:flex-col sm:items-stretch sm:justify-start sm:gap-3", l && "overflow-hidden", r),
+    ...c,
+    children: [/* @__PURE__ */ x("div", {
+      className: "min-w-0",
+      children: [a ? /* @__PURE__ */ n("label", {
+        htmlFor: a,
+        className: "text-pho-primary block text-base font-normal",
+        children: e
+      }) : /* @__PURE__ */ n("div", {
+        className: "text-pho-primary text-base font-normal",
+        children: e
+      }), t ? /* @__PURE__ */ n("p", {
+        className: "text-pho-description text-xs",
+        children: t
+      }) : null]
+    }), /* @__PURE__ */ n("div", {
+      className: d("flex w-full min-w-0 items-center gap-2 sm:w-auto", i && "sm:w-full"),
+      children: o
+    })]
+  });
+}
+function Gt({ className: e, ...t }) {
+  return /* @__PURE__ */ n("p", {
+    className: d("text-pho-description max-w-full min-w-0 truncate text-base", e),
+    ...t
+  });
+}
+function zt({ error: e, show: t, className: a, children: i, ...r }) {
+  const o = I(), c = T(X), l = e ?? c?.error ?? void 0;
+  return /* @__PURE__ */ n(j, {
+    initial: !1,
+    children: (t ?? !0) && (l != null || i != null) ? /* @__PURE__ */ n(w.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: S,
+        opacity: M
+      },
+      children: /* @__PURE__ */ n(Fe, {
+        error: l,
+        className: d("px-5 pb-3", a),
+        ...r,
+        children: i
+      })
+    }) : null
+  });
+}
+function _n() {
+  return T(X)?.requestSave ?? null;
+}
+var kn = 800, ae = Ge.createToastManager(), X = G(null);
+function $t({ action: e, errors: t, autoSave: a = !1, className: i, children: r, onChange: o, onBlur: c, ...l }) {
+  const [s, u] = y(!1), [f, m] = y(!1), [p, h] = y(null), [g, v] = y(t ?? {}), [E, A] = y(null), _ = N(null), b = N(null), L = N(null), H = N(!1), P = N(!1), R = N(null), B = N(async () => {
+  });
+  O(() => () => {
+    b.current != null && clearTimeout(b.current);
+  }, []);
+  const te = async () => {
+    const k = _.current;
+    if (k == null || e == null) return;
+    if (H.current) {
+      P.current = !0;
+      return;
+    }
+    if (!k.checkValidity()) return;
+    const C = Object.fromEntries(new FormData(k).entries()), Y = L.current;
+    H.current = !0, A({
+      field: Y,
+      phase: "saving"
+    }), h(null);
+    try {
+      const D = (await e(C))?.errors;
+      if (D != null && Object.keys(D).length > 0) {
+        v(D), A(null);
+        return;
+      }
+      v({}), m(!1), A({
+        field: Y,
+        phase: "saved"
+      }), R.current != null && (ae.close(R.current), R.current = null);
+    } catch (D) {
+      A(null), h(D), R.current != null && ae.close(R.current), R.current = ae.add({
+        type: "error",
+        title: "Couldn't save",
+        description: D instanceof Error && D.message !== "" ? D.message : "The change is still here — try again.",
+        timeout: 0,
+        actionProps: {
+          children: "Retry",
+          onClick: () => {
+            B.current();
+          }
+        }
+      });
+    } finally {
+      H.current = !1, P.current && (P.current = !1, B.current());
+    }
+  };
+  B.current = te;
+  const me = () => {
+    b.current != null && clearTimeout(b.current), b.current = setTimeout(() => {
+      b.current = null, B.current();
+    }, 800);
+  }, pe = V(() => a ? (k) => {
+    k != null && (L.current = k), m(!0), me();
+  } : null, [a]), Me = V(() => ({
+    pending: s,
+    dirty: f,
+    error: p,
+    auto: E,
+    requestSave: pe
+  }), [
+    s,
+    f,
+    p,
+    E,
+    pe
+  ]);
+  return /* @__PURE__ */ n(X.Provider, {
+    value: Me,
+    children: /* @__PURE__ */ n($e, {
+      errors: g,
+      onFormSubmit: async (k) => {
+        if (e != null) {
+          u(!0), h(null);
+          try {
+            const C = (await e(k))?.errors;
+            if (C != null && Object.keys(C).length > 0) {
+              v(C);
+              return;
+            }
+            v({}), m(!1);
+          } catch (C) {
+            h(C);
+          } finally {
+            u(!1);
+          }
+        }
+      },
+      onChange: (k) => {
+        m(!0), h(null);
+        const C = k.target.name;
+        C && C in g && v((Y) => {
+          const { [C]: D, ...He } = Y;
+          return He;
+        }), a && (C && (L.current = C), me()), o?.(k);
+      },
+      onBlur: (k) => {
+        a && f && b.current != null && (clearTimeout(b.current), b.current = null, B.current()), c?.(k);
+      },
+      className: d("contents [[data-basic-page-stack]>&]:flex [[data-basic-page-stack]>&]:min-w-0 [[data-basic-page-stack]>&]:flex-col", i),
+      ...l,
+      ref: (k) => {
+        _.current = k;
+        const C = l.ref;
+        typeof C == "function" ? C(k) : C != null && (C.current = k);
+      },
+      children: /* @__PURE__ */ n("fieldset", {
+        disabled: s,
+        "aria-busy": s || void 0,
+        className: "contents",
+        children: r
+      })
+    })
+  });
+}
+function jt({ name: e, className: t, ...a }) {
+  const i = T(X), r = I(), o = i?.auto ?? null, c = o != null && (e == null || o.field === e), [l, s] = y(!1), u = c ? o.phase : null;
+  O(() => {
+    if (u !== "saved") return;
+    s(!0);
+    const p = setTimeout(() => s(!1), 1800);
+    return () => clearTimeout(p);
+  }, [u, o]);
+  const f = u === "saving" ? "Saving…" : u === "saved" && l ? "Saved" : null, m = r ? "blur(0px)" : "blur(1px)";
+  return /* @__PURE__ */ n("span", {
+    className: "grid justify-items-end",
+    children: /* @__PURE__ */ n(j, {
+      initial: !1,
+      children: f != null && /* @__PURE__ */ n(w.output, {
+        initial: {
+          opacity: 0,
+          filter: m
+        },
+        animate: {
+          opacity: 1,
+          filter: "blur(0px)"
+        },
+        exit: {
+          opacity: 0,
+          filter: m
+        },
+        transition: ee,
+        className: d("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
+      }, f)
+    })
+  });
+}
+var Wt = "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 Xt({ className: e, ...t }) {
+  const a = N(null);
+  return Pe(a, "Fields", 20, () => null), /* @__PURE__ */ n("div", {
+    "data-basic-page-fields": "",
+    className: d(oe, Wt, e),
+    ...t,
+    ref: (i) => {
+      a.current = i;
+      const r = t.ref;
+      typeof r == "function" ? r(i) : r != null && (r.current = i);
+    }
+  });
+}
+function Kt({ className: e, ...t }) {
+  return /* @__PURE__ */ n("div", {
+    className: d("flex min-w-0 flex-col gap-5 *:min-w-0 sm:flex-row sm:gap-3 sm:*:flex-1", e),
+    ...t
+  });
+}
+function Yt({ children: e = "Save changes", ...t }) {
+  const a = T(X);
+  return /* @__PURE__ */ n(se, {
+    type: "submit",
+    variant: "effect",
+    size: "sm",
+    loading: a?.pending,
+    ...t,
+    children: e
+  });
+}
+function qt({ show: e, className: t, ...a }) {
+  const i = T(X), r = e === "dirty" ? i?.dirty ?? !1 : e, o = /* @__PURE__ */ n("div", {
+    "data-basic-page-footer": "",
+    className: d("flex items-center justify-end gap-3 pr-[calc(1.25rem+2.5px)]", t),
+    ...a
+  });
+  return r === void 0 ? o : /* @__PURE__ */ n(Oe, {
+    show: r,
+    gap: "block",
+    clip: !1,
+    children: o
+  });
+}
+var Ut = {
+  stack: "-2.5rem",
+  block: "-0.75rem",
+  fields: "-1.25rem",
+  none: "0px"
+};
+function Oe({ show: e, clip: t = !0, gap: a = "stack", dividers: i, className: r, ...o }) {
+  const c = I(), l = Ut[i ? "none" : a], s = N(null), u = N(e !== !0);
+  O(() => {
+    u.current = !0;
+  }, []);
+  const f = () => {
+    t && s.current && (s.current.style.overflow = "hidden");
+  }, m = () => {
+    s.current && (s.current.style.overflow = "");
+  };
+  return e === void 0 ? /* @__PURE__ */ n(w.div, {
+    initial: c ? !1 : {
+      opacity: 0,
+      y: W
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: S,
+      opacity: M
+    },
+    className: d(i && U, r),
+    ...o
+  }) : /* @__PURE__ */ n(j, {
+    initial: !1,
+    children: e ? /* @__PURE__ */ n(w.div, {
+      "data-basic-page-reveal": "",
+      ref: (p) => {
+        s.current = p, t && p && u.current && (p.style.overflow = "hidden");
+      },
+      onAnimationStart: f,
+      onAnimationComplete: m,
+      initial: {
+        height: 0,
+        opacity: 0,
+        marginTop: l
+      },
+      animate: {
+        height: "auto",
+        opacity: 1,
+        marginTop: 0
+      },
+      exit: {
+        height: 0,
+        opacity: 0,
+        marginTop: l
+      },
+      transition: c ? { duration: 0 } : {
+        height: S,
+        marginTop: S,
+        opacity: M
+      },
+      className: d(i && U, r),
+      ...o
+    }) : null
+  });
+}
+var Qt = "top-4 left-5 h-8 text-base [&>svg]:size-[1.125em] [&>svg]:shrink-0", Jt = "(min-width: 40rem)";
+function Zt() {
+  return typeof window < "u" && typeof window.matchMedia == "function" && !window.matchMedia(Jt).matches;
+}
+var Ie = G(null);
+function Le({ className: e, children: t, ...a }) {
+  const i = J.toArray(t).filter(We), r = i.map((_) => _.props.children ?? null), o = ke();
+  vt(r);
+  const [c] = y(Zt), l = I(), s = i.length, u = Ae(), f = !c && s >= en, m = T(ue), p = s > 0 ? i[s - 1]?.props : null, h = p?.children ?? "Back", g = p?.href, v = p?.onClick;
+  F(() => {
+    if (!(m == null || g == null))
+      return m.setTail({
+        label: h,
+        href: g,
+        onClick: v
+      }), () => m.setTail(null);
+  }, [
+    m,
+    h,
+    g,
+    v
+  ]);
+  const [E, A] = y(!l && !c && o != null && o.labels.length > s);
+  return /* @__PURE__ */ n("nav", {
+    "aria-label": "Breadcrumb",
+    "data-basic-page-back": "",
+    className: d("absolute top-4 left-3 flex min-w-max items-center", e),
+    ...a,
+    children: /* @__PURE__ */ x("ol", {
+      className: "m-0 flex list-none items-center p-0",
+      children: [i.map((_, b) => f && b > 0 && b < s - 2 ? null : /* @__PURE__ */ x(je, { children: [f && b === s - 2 && /* @__PURE__ */ x("li", {
+        className: "m-0 flex items-center max-sm:hidden",
+        children: [/* @__PURE__ */ n("span", {
+          "aria-hidden": !0,
+          className: ie,
+          children: Q
+        }), /* @__PURE__ */ x(z.Root, { children: [/* @__PURE__ */ n(z.Trigger, { render: /* @__PURE__ */ n(se, {
+          variant: "ghost",
+          size: "sm",
+          "aria-label": "Hidden pages",
+          className: "px-2",
+          children: tn
+        }) }), /* @__PURE__ */ n(z.Portal, { children: /* @__PURE__ */ n(z.Positioner, {
+          align: "start",
+          sideOffset: 4,
+          children: /* @__PURE__ */ n(z.Popup, { children: i.slice(1, s - 2).map((L, H) => {
+            const P = L.props;
+            return /* @__PURE__ */ n(z.LinkItem, {
+              render: /* @__PURE__ */ n(u, {
+                href: P.href,
+                onClick: P.onClick
+              }),
+              children: P.children ?? "Back"
+            }, L.key ?? H);
+          }) })
+        }) })] })]
+      }), /* @__PURE__ */ n("li", {
+        className: d("m-0 flex items-center", b < s - 1 && "max-sm:hidden"),
+        children: /* @__PURE__ */ n(Ie.Provider, {
+          value: {
+            index: b,
+            count: s,
+            departing: o,
+            narrow: c
+          },
+          children: _
+        })
+      })] }, _.key ?? b)), E && /* @__PURE__ */ n("li", {
+        "aria-hidden": !0,
+        className: "m-0 flex items-center max-sm:hidden",
+        children: /* @__PURE__ */ n(w.span, {
+          initial: { opacity: 1 },
+          animate: { opacity: 0 },
+          transition: _e,
+          onAnimationComplete: () => A(!1),
+          className: ie,
+          children: Q
+        })
+      })]
+    })
+  });
+}
+var ie = "text-pho-description -mx-1 inline-flex shrink-0 text-base select-none", Q = "/", en = 4, tn = "…";
+function Be({ href: e, className: t, morphId: a, children: i = "Back", ...r }) {
+  const o = T(Ie), c = I(), l = a != null && !c, s = Re(l ? a : void 0);
+  if (o == null) throw new Error("BasicPage.Crumb must be rendered inside BasicPage.Breadcrumbs");
+  const { index: u, count: f, departing: m, narrow: p } = o, h = u === 0, g = u === f - 1, v = m != null && m.labels.length < f, E = m != null && m.labels.length > f, A = g && (m == null || v || p), _ = h || g, b = h && g ? "" : h ? "max-sm:hidden" : "sm:hidden", L = m != null, H = g ? p ? E ? "slide" : "fade" : A ? "fade" : void 0 : void 0, [P, R] = y(l && p && s.fly && m != null && !E ? m.labels[m.labels.length - 1] : null), B = l && _ && !L, te = l && !h && g && (m == null || v);
+  return /* @__PURE__ */ x(Ye, { children: [!h && /* @__PURE__ */ n("span", {
+    "aria-hidden": !0,
+    className: d(ie, "max-sm:hidden"),
+    children: te ? /* @__PURE__ */ n(w.span, {
+      initial: s.fly ? {
+        opacity: 0,
+        x: ye
+      } : { opacity: 0 },
+      animate: s.fly ? {
+        opacity: 1,
+        x: 0
+      } : { opacity: 1 },
+      transition: s.fly ? be : M,
+      className: "inline-flex",
+      children: Q
+    }) : Q
+  }), /* @__PURE__ */ n(le, {
+    variant: "ghost",
+    size: "sm",
+    href: e,
+    prefix: _ ? B ? /* @__PURE__ */ n(w.span, {
+      initial: s.fly ? {
+        opacity: 0,
+        x: ye
+      } : { opacity: 0 },
+      animate: s.fly ? {
+        opacity: 1,
+        x: 0
+      } : { opacity: 1 },
+      transition: s.fly ? be : M,
+      className: d("inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0", b),
+      children: /* @__PURE__ */ n(q, {})
+    }) : /* @__PURE__ */ n("span", {
+      className: d("inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0", b),
+      children: /* @__PURE__ */ n(q, {})
+    }) : /* @__PURE__ */ n("span", { className: "hidden" }),
+    className: d("min-w-max", t),
+    ...r,
+    children: l && a != null ? /* @__PURE__ */ x("span", {
+      className: d("relative block", !s.fly && H === "slide" && "overflow-hidden", !g && "max-w-40 truncate"),
+      children: [/* @__PURE__ */ n(Se, {
+        morphId: a,
+        fromClassName: "text-pho-primary",
+        fly: s.fly,
+        morphRef: s.ref,
+        arrival: H,
+        children: i
+      }), P != null && /* @__PURE__ */ n(w.span, {
+        "aria-hidden": !0,
+        initial: {
+          x: 0,
+          opacity: 1
+        },
+        animate: {
+          x: pt,
+          opacity: 0
+        },
+        transition: ht,
+        onAnimationComplete: () => R(null),
+        className: "pointer-events-none absolute inset-y-0 left-0 whitespace-nowrap",
+        children: P
+      })]
+    }) : /* @__PURE__ */ n("span", {
+      className: d("block", !g && "max-w-40 truncate"),
+      children: i
+    })
+  })] });
+}
+function nn({ className: e, ...t }) {
+  return /* @__PURE__ */ n(Le, {
+    className: e,
+    children: /* @__PURE__ */ n(Be, { ...t })
+  });
+}
+function an({ label: e, description: t, leading: a, href: i, className: r, children: o, ...c }) {
+  const l = Ae(), s = V(() => w.create(l), [l]), { leaving: u, ...f } = fe();
+  return /* @__PURE__ */ x(s, {
+    href: i,
+    ...f,
+    ...c,
+    className: d("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)]", u && "overflow-hidden", r),
+    children: [/* @__PURE__ */ x("div", {
+      className: d("flex min-w-0 flex-1 items-center", a != null && "gap-3"),
+      children: [a, /* @__PURE__ */ x("div", {
+        className: "min-w-0",
+        children: [/* @__PURE__ */ n("div", {
+          className: "flex min-w-0 items-center gap-1",
+          children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ n("p", {
+            className: "text-pho-primary truncate text-base font-medium",
+            children: e
+          }) : e
+        }), t ? /* @__PURE__ */ n("div", {
+          className: "text-pho-description truncate text-xs",
+          children: t
+        }) : null]
+      })]
+    }), /* @__PURE__ */ x("div", {
+      className: "flex min-w-0 items-center justify-end gap-2",
+      children: [o != null ? /* @__PURE__ */ n("div", {
+        className: "min-w-0",
+        children: o
+      }) : null, /* @__PURE__ */ n(Qe, {
+        "aria-hidden": !0,
+        className: "text-pho-secondary group-hover:text-pho-secondary-hover size-4 shrink-0 transition-colors"
+      })]
+    })]
+  });
+}
+function rn({ open: e, placeholder: t, onClose: a, children: i }) {
+  const r = T(Ce), o = e ?? J.toArray(i).length > 0, c = r?.setOpen, l = r?.setPresent;
+  return F(() => {
+    if (l != null)
+      return l(!0), () => l(!1);
+  }, [l]), F(() => {
+    if (c != null)
+      return c(o), () => c(!1);
+  }, [c, o]), O(() => {
+    r == null && typeof process < "u" && process.env.NODE_ENV !== "production" && console.warn("BasicPage.Aside: needs a `BasicPage.Root` around it.");
+  }, [r]), r == null || r.slot == null ? null : r.presentation === "page" ? he(o ? /* @__PURE__ */ n("div", {
+    "data-basic-page-aside": "page",
+    className: "flex min-w-0 flex-1 flex-col",
+    children: i
+  }) : null, r.slot) : he(/* @__PURE__ */ n(sn, {
+    width: r.width,
+    paneHeight: r.paneHeight,
+    onClose: a,
+    open: o,
+    placeholder: t,
+    children: i
+  }), r.slot);
+}
+function sn({ width: e, paneHeight: t, onClose: a, open: i, placeholder: r, children: o }) {
+  const c = I(), [l, s] = y(null), u = V(() => ({ setBack: s }), []), f = N(null), m = c ? "blur(0px)" : "blur(1px)", p = t ?? "100dvh", h = {
+    variant: "ghost",
+    size: "sm",
+    svgOnly: !0,
+    "aria-label": "Close",
+    children: /* @__PURE__ */ n(Ve, {})
+  };
+  O(() => {
+    const v = (E) => {
+      if (E.key !== "Escape" || E.defaultPrevented) return;
+      const A = f.current?.querySelector("a, button");
+      A != null && (E.preventDefault(), A.click());
+    };
+    return document.addEventListener("keydown", v), () => document.removeEventListener("keydown", v);
+  }, []);
+  const g = {
+    initial: {
+      opacity: 0,
+      filter: m
+    },
+    animate: {
+      opacity: 1,
+      filter: "blur(0px)"
+    },
+    exit: {
+      opacity: 0,
+      filter: m
+    },
+    transition: c ? { duration: 0 } : ee
+  };
+  return /* @__PURE__ */ n("aside", {
+    "data-basic-page-aside": "panel",
+    className: "relative flex shrink-0 flex-col",
+    style: {
+      width: e,
+      minHeight: p
+    },
+    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: p },
+      children: /* @__PURE__ */ n(j, {
+        initial: !1,
+        children: i ? /* @__PURE__ */ x(w.div, {
+          ...g,
+          className: "relative flex flex-col",
+          children: [/* @__PURE__ */ n("span", {
+            ref: f,
+            className: "absolute top-2 right-2 z-30",
+            children: l != null ? /* @__PURE__ */ n(le, {
+              ...h,
+              href: l.href,
+              onClick: l.onClick
+            }) : a != null ? /* @__PURE__ */ n(se, {
+              ...h,
+              onClick: a
+            }) : null
+          }), /* @__PURE__ */ x(K.Root, {
+            className: "min-h-0 flex-1",
+            children: [/* @__PURE__ */ n(K.Viewport, { children: /* @__PURE__ */ n(K.Content, {
+              className: "flex min-h-full flex-col",
+              children: /* @__PURE__ */ n(Ee.Provider, {
+                value: u,
+                children: o
+              })
+            }) }), /* @__PURE__ */ n(K.Scrollbar, { children: /* @__PURE__ */ n(K.Thumb, {}) })]
+          })]
+        }, "page") : /* @__PURE__ */ n(w.div, {
+          ...g,
+          className: "flex flex-col",
+          children: r
+        }, "empty")
+      })
+    })
+  });
+}
+var Rn = {
+  Root: lt,
+  Aside: rn,
+  CondenseScope: bt,
+  Breadcrumbs: Le,
+  Crumb: Be,
+  Back: nn,
+  Title: Ct,
+  Stack: St,
+  Header: Tt,
+  SectionTitle: Pt,
+  Description: Ot,
+  SectionFooter: It,
+  Card: Lt,
+  Item: Bt,
+  ItemPanel: Mt,
+  Callout: Ht,
+  CalloutTitle: Dt,
+  CalloutDescription: Ft,
+  Row: Vt,
+  RowLink: an,
+  Value: Gt,
+  Alert: zt,
+  Footer: qt,
+  Form: $t,
+  Saved: jt,
+  Fields: Xt,
+  Inline: Kt,
+  Submit: Yt,
+  Reveal: Oe
+};
+export {
+  tt as a,
+  Rn as c,
+  xt as d,
+  ae as f,
+  et as i,
+  ee as l,
+  Cn as m,
+  ge as n,
+  nt as o,
+  _n as p,
+  Je as r,
+  Ze as s,
+  kn as t,
+  En as u
+};
+
+//# sourceMappingURL=basic-page-DsI1xo6p.js.map