@photon-ai/pho-ui 2.0.1 → 2.1.0

package/dist/chunks/animated-height-C2eQstGy.js

@@ -0,0 +1,51 @@
+"use client";
+import { useEffect as v, useRef as a } from "react";
+import { jsx as m } from "react/jsx-runtime";
+import { animate as g, motion as R, useMotionValue as x, useReducedMotion as H } from "motion/react";
+var M = {
+  type: "spring",
+  stiffness: 640,
+  damping: 50
+};
+function y({ className: d, transition: r, children: p }) {
+  const s = a(null), i = a(null), t = x("auto"), c = H();
+  return v(() => {
+    const h = s.current, n = i.current;
+    if (!h || !n) return;
+    let e = null;
+    const u = new ResizeObserver((b) => {
+      const f = b[0]?.borderBoxSize?.[0], o = f ? f.blockSize : n.offsetHeight, l = t.get();
+      if (l === "auto" || c) {
+        e?.stop(), e = null, t.set(o);
+        return;
+      }
+      !e && Math.abs(l - o) < 0.5 || (e?.stop(), e = g(t, o, {
+        ...r ?? M,
+        onComplete: () => {
+          e = null;
+        }
+      }));
+    });
+    return u.observe(n), () => {
+      u.disconnect(), e?.stop();
+    };
+  }, [
+    t,
+    c,
+    r
+  ]), /* @__PURE__ */ m(R.div, {
+    ref: s,
+    className: "min-h-0 overflow-hidden",
+    style: { height: t },
+    children: /* @__PURE__ */ m("div", {
+      ref: i,
+      className: d,
+      children: p
+    })
+  });
+}
+export {
+  y as t
+};
+
+//# sourceMappingURL=animated-height-C2eQstGy.js.map

package/dist/chunks/animated-height-C2eQstGy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-height-C2eQstGy.js","names":[],"sources":["../../src/utils/animated-height.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactNode } from \"react\";\nimport {\n  animate,\n  motion,\n  useMotionValue,\n  useReducedMotion,\n  type ValueAnimationTransition,\n} from \"motion/react\";\n\n/**\n * Height spring for container-size transitions — same feel as the onboarding /\n * invite card and BasicPage footer reveal: quick, critically damped (no\n * overshoot that would flash clipped content).\n */\nconst HEIGHT_SPRING = { type: \"spring\", stiffness: 640, damping: 50 } as const;\n\n/**\n * Animates its own height to follow the measured height of `children`, so\n * content swaps (search filtering, skeleton → data) glide instead of jumping.\n * Honors `prefers-reduced-motion` by snapping height with no spring.\n */\nexport function AnimatedHeight({\n  className,\n  transition,\n  children,\n}: {\n  className?: string;\n  /** Spring override for the height follow. @default the Command spring */\n  transition?: ValueAnimationTransition<number | \"auto\">;\n  children: ReactNode;\n}) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const height = useMotionValue<number | \"auto\">(\"auto\");\n  const reduceMotion = useReducedMotion();\n\n  useEffect(() => {\n    const container = containerRef.current;\n    const content = contentRef.current;\n    if (!container || !content) return;\n\n    let animation: ReturnType<typeof animate> | null = null;\n\n    const observer = new ResizeObserver((entries) => {\n      const box = entries[0]?.borderBoxSize?.[0];\n      const next = box ? box.blockSize : content.offsetHeight;\n      const current = height.get();\n      if (current === \"auto\" || reduceMotion) {\n        animation?.stop();\n        animation = null;\n        height.set(next);\n        return;\n      }\n      if (!animation && Math.abs(current - next) < 0.5) return;\n      animation?.stop();\n      animation = animate(height, next, {\n        ...(transition ?? HEIGHT_SPRING),\n        onComplete: () => {\n          animation = null;\n        },\n      });\n    });\n    observer.observe(content);\n\n    return () => {\n      observer.disconnect();\n      animation?.stop();\n    };\n  }, [height, reduceMotion, transition]);\n\n  return (\n    <motion.div\n      ref={containerRef}\n      // Stack (and other flex parents) set `min-height: auto` on children,\n      // which sizes to content and swallows the height spring. Clip and\n      // allow shrinking so the measured height can actually animate.\n      className=\"min-h-0 overflow-hidden\"\n      style={{ height }}\n    >\n      <div ref={contentRef} className={className}>\n        {children}\n      </div>\n    </motion.div>\n  );\n}\n"],"mappings":";;;;AAcA,IAAM,IAAgB;AAAA,EAAE,MAAM;AAAA,EAAU,WAAW;AAAA,EAAK,SAAS;AAAG;AAOpE,SAAgB,EAAe,EAC7B,WAAA,GACA,YAAA,GACA,UAAA,EAAA,GAMC;AACD,QAAM,IAAe,EAAuB,IAAI,GAC1C,IAAa,EAAuB,IAAI,GACxC,IAAS,EAAgC,MAAM,GAC/C,IAAe,EAAiB;AAEtC,SAAA,EAAA,MAAgB;AACd,UAAM,IAAY,EAAa,SACzB,IAAU,EAAW;AAC3B,QAAI,CAAC,KAAa,CAAC,EAAS;AAE5B,QAAI,IAA+C;AAEnD,UAAM,IAAW,IAAI,eAAA,CAAgB,MAAY;AAC/C,YAAM,IAAM,EAAQ,CAAA,GAAI,gBAAgB,CAAA,GAClC,IAAO,IAAM,EAAI,YAAY,EAAQ,cACrC,IAAU,EAAO,IAAI;AAC3B,UAAI,MAAY,UAAU,GAAc;AACtC,QAAA,GAAW,KAAK,GAChB,IAAY,MACZ,EAAO,IAAI,CAAI;AACf;AAAA,MACF;AACA,MAAI,CAAC,KAAa,KAAK,IAAI,IAAU,CAAI,IAAI,QAC7C,GAAW,KAAK,GAChB,IAAY,EAAQ,GAAQ,GAAM;AAAA,QAChC,GAAI,KAAc;AAAA,QAClB,YAAA,MAAkB;AAChB,UAAA,IAAY;AAAA,QACd;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AACD,WAAA,EAAS,QAAQ,CAAO,GAExB,MAAa;AACX,MAAA,EAAS,WAAW,GACpB,GAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG;AAAA,IAAC;AAAA,IAAQ;AAAA,IAAc;AAAA,EAAU,CAAC,GAGnC,gBAAA,EAAC,EAAO,KAAR;AAAA,IACE,KAAK;AAAA,IAIL,WAAU;AAAA,IACV,OAAO,EAAE,QAAA,EAAO;AAAA,cAEhB,gBAAA,EAAC,OAAD;AAAA,MAAK,KAAK;AAAA,MAAuB,WAAA;AAAA,MAC9B,UAAA;AAAA,IACE,CAAA;AAAA,EACK,CAAA;AAEhB"}

package/dist/chunks/{basic-page-D1zm81YS.js → basic-page-Dfln58iw.js}

@@ -1,18 +1,18 @@
 "use client";
 import { t as r } from "./cn-DTiB6ek_.js";
-import { n as I } from "./link-provider-9TFNyDqO.js";
-import { o as P } from "./button-X5wsWvRa.js";
-import { t as S } from "./createReactComponent-BqCmnqfX.js";
-import { t as M } from "./error-DR6G2LmG.js";
-import { t as g } from "./IconChevronLeft-CSWMKQ4C.js";
-import { t as k } from "./animated-height-DhNSac85.js";
-import { Children as T, useEffect as O, useRef as L, useState as _ } from "react";
-import { jsx as a, jsxs as m } from "react/jsx-runtime";
-import { AnimatePresence as x, motion as p, useReducedMotion as d } from "motion/react";
-var D = [["path", {
+import { n as R } from "./link-provider-9TFNyDqO.js";
+import { o as I } from "./button-X5wsWvRa.js";
+import { t as P } from "./createReactComponent-BqCmnqfX.js";
+import { t as S } from "./error-DR6G2LmG.js";
+import { t as N } from "./IconChevronLeft-CSWMKQ4C.js";
+import { t as M } from "./animated-height-C2eQstGy.js";
+import { Children as k, useEffect as T, useRef as O, useState as A } from "react";
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import { AnimatePresence as v, motion as u, useReducedMotion as d } from "motion/react";
+var L = [["path", {
   d: "M9 6l6 6l-6 6",
   key: "svg-0"
-}]], B = S("outline", "chevron-right", "ChevronRight", D), C = "rounded-base border border-pho-secondary bg-pho-primary", E = "divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0", G = `${C} ${E}`, N = "flex flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5", H = "flex min-h-[4.25rem] flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6", j = "flex flex-col gap-3 px-5 py-4", z = "-mx-5 -mb-4 flex items-center rounded-b-[calc(0.75rem-1px)] bg-pho-secondary py-1 pr-3 pl-5", F = "-mx-2 -mt-1.5 flex items-center rounded-sm bg-pho-secondary px-2 py-0.5", u = {
+}]], D = P("outline", "chevron-right", "ChevronRight", L), _ = "rounded-base border border-pho-secondary bg-pho-primary", h = "divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0", B = `${_} ${h}`, b = "flex min-w-0 flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5", G = "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", H = "flex flex-col gap-3 px-5 py-4", j = "-mx-5 -mb-4 flex items-center rounded-b-[calc(0.75rem-1px)] bg-pho-secondary py-1 pr-3 pl-5", z = "-mx-2 -mt-1.5 flex items-center rounded-sm bg-pho-secondary px-2 py-0.5", m = {
   type: "spring",
   stiffness: 400,
   damping: 40
@@ -20,39 +20,39 @@ var D = [["path", {
   duration: 0.25,
   ease: "easeOut"
 };
-function V({ className: e, ...t }) {
+function F({ className: e, ...t }) {
   return /* @__PURE__ */ a("div", {
-    className: r("relative mx-auto flex min-h-full w-full max-w-[44.5rem] flex-col px-5 pt-12 pb-12 has-[[data-basic-page-back]]:pt-16", e),
+    className: r("relative mx-auto flex min-h-full w-full max-w-[44.5rem] min-w-0 flex-col px-5 pt-12 pb-12 *:min-w-0 has-[[data-basic-page-back]]:pt-16", e),
     ...t
   });
 }
-function $(e) {
+function V(e) {
   return e.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
-function K(e) {
+function $(e) {
   if (!(typeof e != "string" && typeof e != "number"))
-    return $(String(e)) || void 0;
+    return V(String(e)) || void 0;
 }
-function v(e, t) {
+function g(e, t) {
   if (e !== "")
-    return e ?? K(t);
+    return e ?? $(t);
 }
-var U = (e) => `basic-page-morph-${e}`, W = { layout: u }, X = 10, q = {
+var K = (e) => `basic-page-morph-${e}`, U = { layout: m }, W = 10, X = {
   delay: 0.2,
   duration: 0.12,
   ease: "easeOut"
-}, J = {
+}, q = {
   duration: 0.18,
   ease: "easeOut"
-}, b = /* @__PURE__ */ new Map();
-function R(e) {
-  const [t] = _(() => e != null && b.get(e) === !0), i = L(null);
-  return O(() => {
+}, w = /* @__PURE__ */ new Map();
+function C(e) {
+  const [t] = A(() => e != null && w.get(e) === !0), i = O(null);
+  return T(() => {
     if (e == null || typeof IntersectionObserver > "u") return;
     const n = i.current;
     if (!n) return;
     const o = new IntersectionObserver(([s]) => {
-      s && b.set(e, s.isIntersecting);
+      s && w.set(e, s.isIntersecting);
     });
     return o.observe(n), () => {
       o.disconnect();
@@ -62,14 +62,14 @@ function R(e) {
     ref: i
   };
 }
-function w({ morphId: e, fromClassName: t, fly: i, morphRef: n, fallback: o = !1, children: s }) {
-  const [l, c] = _(!1), y = !i && o;
-  return /* @__PURE__ */ m(p.span, {
+function E({ morphId: e, fromClassName: t, fly: i, morphRef: n, fallback: o = !1, children: s }) {
+  const [l, c] = A(!1), y = !i && o;
+  return /* @__PURE__ */ p(u.span, {
     ref: n,
-    layoutId: U(e),
+    layoutId: K(e),
     initial: y ? { opacity: 0 } : void 0,
     animate: y ? { opacity: 1 } : void 0,
-    transition: i ? W : {
+    transition: i ? U : {
       layout: { duration: 0 },
       opacity: f
     },
@@ -77,146 +77,146 @@ function w({ morphId: e, fromClassName: t, fly: i, morphRef: n, fallback: o = !1
       i && c(!0);
     },
     onLayoutAnimationComplete: () => c(!1),
-    className: "relative inline-block",
-    children: [s, l && /* @__PURE__ */ a(p.span, {
+    className: "relative inline-block max-w-full min-w-0 truncate",
+    children: [s, l && /* @__PURE__ */ a(u.span, {
       "aria-hidden": !0,
       initial: { opacity: 1 },
       animate: { opacity: 0 },
-      transition: J,
+      transition: q,
       className: r("absolute inset-0", t),
       children: s
     })]
   });
 }
-function Q({ id: e, morphId: t, enter: i, className: n, children: o, ...s }) {
-  const l = v(e, o), c = d(), y = R(t);
+function J({ id: e, morphId: t, enter: i, className: n, children: o, ...s }) {
+  const l = g(e, o), c = d(), y = C(t);
   return /* @__PURE__ */ a("h1", {
     id: l,
-    className: r("text-display-base text-pho-primary scroll-mt-12 px-5 font-medium", n),
+    className: r("text-display-base text-pho-primary max-w-full min-w-0 scroll-mt-12 truncate px-5 font-medium", n),
     ...s,
-    children: t != null && !c ? /* @__PURE__ */ a(w, {
+    children: t != null && !c ? /* @__PURE__ */ a(E, {
       morphId: t,
       fromClassName: "text-pho-secondary",
       fly: y.fly,
       morphRef: y.ref,
       children: o
-    }) : i && !c ? /* @__PURE__ */ a(p.span, {
+    }) : i && !c ? /* @__PURE__ */ a(u.span, {
       initial: {
         opacity: 0,
-        y: h
+        y: x
       },
       animate: {
         opacity: 1,
         y: 0
       },
       transition: {
-        y: u,
+        y: m,
         opacity: f
       },
-      className: "inline-block",
+      className: "inline-block max-w-full min-w-0 truncate",
       children: o
     }) : o
   });
 }
-function Y({ className: e, ...t }) {
+function Q({ className: e, ...t }) {
   const i = d();
-  return /* @__PURE__ */ a(p.div, {
+  return /* @__PURE__ */ a(u.div, {
     initial: i ? !1 : {
       opacity: 0,
-      y: h
+      y: x
     },
     animate: {
       opacity: 1,
       y: 0
     },
     transition: {
-      y: u,
+      y: m,
       opacity: f
     },
-    className: r("mt-6 flex flex-col gap-10", "*:flex *:flex-col *:gap-3", e),
+    className: r("mt-6 flex min-w-0 flex-col gap-10", "*:flex *:min-w-0 *:flex-col *:gap-3", e),
     ...t
   });
 }
-function Z({ enter: e, className: t, ...i }) {
+function Y({ enter: e, className: t, ...i }) {
   const n = d();
-  return e && !n ? /* @__PURE__ */ a(p.div, {
+  return e && !n ? /* @__PURE__ */ a(u.div, {
     initial: {
       opacity: 0,
-      y: h
+      y: x
     },
     animate: {
       opacity: 1,
       y: 0
     },
     transition: {
-      y: u,
+      y: m,
       opacity: f
     },
-    className: r("flex flex-col", t),
+    className: r("flex min-w-0 flex-col", t),
     ...i
   }) : /* @__PURE__ */ a("div", {
-    className: r("flex flex-col", t),
+    className: r("flex min-w-0 flex-col", t),
     ...i
   });
 }
-function ee({ id: e, className: t, children: i, ...n }) {
+function Z({ id: e, className: t, children: i, ...n }) {
   return /* @__PURE__ */ a("h2", {
-    id: v(e, i),
-    className: r("text-display-xs text-pho-primary scroll-mt-12 px-5 font-medium", t),
+    id: g(e, i),
+    className: r("text-display-xs text-pho-primary max-w-full min-w-0 scroll-mt-12 truncate px-5 font-medium", t),
     ...n,
     children: i
   });
 }
-function te({ className: e, ...t }) {
+function ee({ className: e, ...t }) {
   return /* @__PURE__ */ a("p", {
     className: r("text-display-xs text-pho-description px-5 font-normal", e),
     ...t
   });
 }
-function ie({ className: e, ...t }) {
+function te({ className: e, ...t }) {
   return /* @__PURE__ */ a("p", {
     className: r("text-pho-description px-5 text-xs font-normal", e),
     ...t
   });
 }
-function ae({ animateHeight: e, className: t, children: i, ...n }) {
+function ie({ animateHeight: e, className: t, children: i, ...n }) {
   return e ? /* @__PURE__ */ a("div", {
-    className: r(C, "overflow-hidden", t),
+    className: r(_, "min-h-0 overflow-hidden", t),
     ...n,
-    children: /* @__PURE__ */ a(k, {
-      transition: u,
-      className: E,
+    children: /* @__PURE__ */ a(M, {
+      transition: m,
+      className: h,
       children: i
     })
   }) : /* @__PURE__ */ a("div", {
-    className: r(G, t),
+    className: r(B, t),
     ...n,
     children: i
   });
 }
-function ne({ className: e, ...t }) {
+function ae({ className: e, ...t }) {
   return /* @__PURE__ */ a("div", {
-    className: r(j, e),
+    className: r(H, e),
     ...t
   });
 }
-function re({ divided: e = !1, className: t, ...i }) {
+function ne({ divided: e = !1, className: t, ...i }) {
   return /* @__PURE__ */ a("div", {
-    className: r(e ? F : z, t),
+    className: r(e ? z : j, t),
     ...i
   });
 }
-function oe({ className: e, icon: t, children: i, ...n }) {
+function re({ className: e, icon: t, children: i, ...n }) {
   if (t == null || t === !1 || t === !0) return /* @__PURE__ */ a("div", {
-    className: r(N, e),
+    className: r(b, e),
     ...n,
     children: i
   });
-  const [o, ...s] = T.toArray(i);
-  return /* @__PURE__ */ m("div", {
-    className: r(N, e),
+  const [o, ...s] = k.toArray(i);
+  return /* @__PURE__ */ p("div", {
+    className: r(b, e),
     ...n,
-    children: [/* @__PURE__ */ m("div", {
+    children: [/* @__PURE__ */ p("div", {
       className: "relative",
       children: [/* @__PURE__ */ a("div", {
         className: "min-w-0 pr-16",
@@ -229,25 +229,25 @@ function oe({ className: e, icon: t, children: i, ...n }) {
     }), s]
   });
 }
-function se({ id: e, className: t, children: i, ...n }) {
+function oe({ id: e, className: t, children: i, ...n }) {
   return /* @__PURE__ */ a("h2", {
-    id: v(e, i),
-    className: r("text-display-xs text-pho-primary scroll-mt-12 font-medium", t),
+    id: g(e, i),
+    className: r("text-display-xs text-pho-primary max-w-full min-w-0 scroll-mt-12 truncate font-medium", t),
     ...n,
     children: i
   });
 }
-function le({ className: e, ...t }) {
+function se({ className: e, ...t }) {
   return /* @__PURE__ */ a("p", {
     className: r("text-display-xs text-pho-description font-normal", e),
     ...t
   });
 }
-function ce({ label: e, description: t, htmlFor: i, stacked: n = !1, className: o, children: s, ...l }) {
-  return /* @__PURE__ */ m("div", {
-    className: r(H, n && "sm:flex-col sm:items-stretch sm:justify-start sm:gap-3", o),
+function le({ label: e, description: t, htmlFor: i, stacked: n = !1, className: o, children: s, ...l }) {
+  return /* @__PURE__ */ p("div", {
+    className: r(G, n && "sm:flex-col sm:items-stretch sm:justify-start sm:gap-3", o),
     ...l,
-    children: [/* @__PURE__ */ m("div", {
+    children: [/* @__PURE__ */ p("div", {
       className: "min-w-0",
       children: [i ? /* @__PURE__ */ a("label", {
         htmlFor: i,
@@ -266,17 +266,17 @@ function ce({ label: e, description: t, htmlFor: i, stacked: n = !1, className:
     })]
   });
 }
-function ue({ className: e, ...t }) {
+function ce({ className: e, ...t }) {
   return /* @__PURE__ */ a("p", {
-    className: r("text-pho-description truncate text-base", e),
+    className: r("text-pho-description max-w-full min-w-0 truncate text-base", e),
     ...t
   });
 }
-function pe({ error: e, show: t, className: i, children: n, ...o }) {
+function me({ error: e, show: t, className: i, children: n, ...o }) {
   const s = d();
-  return /* @__PURE__ */ a(x, {
+  return /* @__PURE__ */ a(v, {
     initial: !1,
-    children: (t ?? !0) && (e != null || n != null) ? /* @__PURE__ */ a(p.div, {
+    children: (t ?? !0) && (e != null || n != null) ? /* @__PURE__ */ a(u.div, {
       "data-basic-page-alert": "",
       className: "overflow-hidden",
       initial: {
@@ -292,10 +292,10 @@ function pe({ error: e, show: t, className: i, children: n, ...o }) {
         opacity: 0
       },
       transition: s ? { duration: 0 } : {
-        height: u,
+        height: m,
         opacity: f
       },
-      children: /* @__PURE__ */ a(M, {
+      children: /* @__PURE__ */ a(S, {
         error: e,
         className: r("px-5 pb-3", i),
         ...o,
@@ -304,14 +304,14 @@ function pe({ error: e, show: t, className: i, children: n, ...o }) {
     }) : null
   });
 }
-function me({ show: e, className: t, ...i }) {
+function ue({ show: e, className: t, ...i }) {
   const n = d(), o = /* @__PURE__ */ a("div", {
     className: r("flex items-center justify-between gap-6 px-5 py-4", t),
     ...i
   });
-  return e === void 0 ? o : /* @__PURE__ */ a(x, {
+  return e === void 0 ? o : /* @__PURE__ */ a(v, {
     initial: !1,
-    children: e ? /* @__PURE__ */ a(p.div, {
+    children: e ? /* @__PURE__ */ a(u.div, {
       className: "overflow-hidden",
       initial: {
         height: 0,
@@ -326,41 +326,42 @@ function me({ show: e, className: t, ...i }) {
         opacity: 0
       },
       transition: n ? { duration: 0 } : {
-        height: u,
+        height: m,
         opacity: f
       },
       children: o
     }) : null
   });
 }
-var h = 12, A = {
+var x = 12, pe = {
   stack: "-2.5rem",
-  block: "-0.75rem"
+  block: "-0.75rem",
+  none: "0px"
 };
-function fe({ show: e, gap: t = "stack", className: i, ...n }) {
-  const o = d();
-  return e === void 0 ? /* @__PURE__ */ a(p.div, {
-    initial: o ? !1 : {
+function fe({ show: e, gap: t = "stack", dividers: i, className: n, ...o }) {
+  const s = d(), l = pe[i ? "none" : t];
+  return e === void 0 ? /* @__PURE__ */ a(u.div, {
+    initial: s ? !1 : {
       opacity: 0,
-      y: h
+      y: x
     },
     animate: {
       opacity: 1,
       y: 0
     },
     transition: {
-      y: u,
+      y: m,
       opacity: f
     },
-    className: i,
-    ...n
-  }) : /* @__PURE__ */ a(x, {
+    className: r(i && h, n),
+    ...o
+  }) : /* @__PURE__ */ a(v, {
     initial: !1,
-    children: e ? /* @__PURE__ */ a(p.div, {
+    children: e ? /* @__PURE__ */ a(u.div, {
       initial: {
         height: 0,
         opacity: 0,
-        marginTop: A[t]
+        marginTop: l
       },
       animate: {
         height: "auto",
@@ -370,41 +371,41 @@ function fe({ show: e, gap: t = "stack", className: i, ...n }) {
       exit: {
         height: 0,
         opacity: 0,
-        marginTop: A[t]
+        marginTop: l
       },
-      transition: o ? { duration: 0 } : {
-        height: u,
-        marginTop: u,
+      transition: s ? { duration: 0 } : {
+        height: m,
+        marginTop: m,
         opacity: f
       },
-      className: r("overflow-hidden", i),
-      ...n
+      className: r("overflow-hidden", i && h, n),
+      ...o
     }) : null
   });
 }
 function de({ href: e, className: t, morphId: i, children: n = "Back", ...o }) {
-  const s = d(), l = i != null && !s, c = R(l ? i : void 0);
-  return /* @__PURE__ */ a(P, {
+  const s = d(), l = i != null && !s, c = C(l ? i : void 0);
+  return /* @__PURE__ */ a(I, {
     variant: "ghost",
     size: "sm",
     href: e,
     "data-basic-page-back": "",
-    prefix: l ? /* @__PURE__ */ a(p.span, {
+    prefix: l ? /* @__PURE__ */ a(u.span, {
       initial: c.fly ? {
         opacity: 0,
-        x: X
+        x: W
       } : { opacity: 0 },
       animate: c.fly ? {
         opacity: 1,
         x: 0
       } : { opacity: 1 },
-      transition: c.fly ? q : f,
+      transition: c.fly ? X : f,
       className: "inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0",
-      children: /* @__PURE__ */ a(g, {})
-    }) : /* @__PURE__ */ a(g, {}),
+      children: /* @__PURE__ */ a(N, {})
+    }) : /* @__PURE__ */ a(N, {}),
     className: r("absolute top-4 left-[10.25px]", t),
     ...o,
-    children: l && i != null ? /* @__PURE__ */ a(w, {
+    children: l && i != null ? /* @__PURE__ */ a(E, {
       morphId: i,
       fromClassName: "text-pho-primary",
       fly: c.fly,
@@ -415,13 +416,13 @@ function de({ href: e, className: t, morphId: i, children: n = "Back", ...o }) {
   });
 }
 function ye({ label: e, description: t, leading: i, href: n, className: o, children: s, ...l }) {
-  return /* @__PURE__ */ m(I(), {
+  return /* @__PURE__ */ p(R(), {
     href: n,
     ...l,
-    className: r("flex min-h-[4.25rem] 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", "first:rounded-t-[calc(var(--radius-base)-1px)] last:rounded-b-[calc(var(--radius-base)-1px)]", o),
-    children: [/* @__PURE__ */ m("div", {
+    className: r("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", "first:rounded-t-[calc(var(--radius-base)-1px)] last:rounded-b-[calc(var(--radius-base)-1px)]", o),
+    children: [/* @__PURE__ */ p("div", {
       className: r("flex min-w-0 flex-1 items-center", i != null && "gap-3"),
-      children: [i, /* @__PURE__ */ m("div", {
+      children: [i, /* @__PURE__ */ p("div", {
         className: "min-w-0",
         children: [/* @__PURE__ */ a("div", {
           className: "flex min-w-0 items-center gap-1",
@@ -434,48 +435,48 @@ function ye({ label: e, description: t, leading: i, href: n, className: o, child
           children: t
         }) : null]
       })]
-    }), /* @__PURE__ */ m("div", {
+    }), /* @__PURE__ */ p("div", {
       className: "flex min-w-0 items-center justify-end gap-2",
       children: [s != null ? /* @__PURE__ */ a("div", {
         className: "min-w-0",
         children: s
-      }) : null, /* @__PURE__ */ a(B, {
+      }) : null, /* @__PURE__ */ a(D, {
         "aria-hidden": !0,
         className: "text-pho-secondary group-hover:text-pho-secondary-hover size-4 shrink-0 transition-colors"
       })]
     })]
   });
 }
-var Re = {
-  Root: V,
+var Ee = {
+  Root: F,
   Back: de,
-  Title: Q,
-  Stack: Y,
-  Header: Z,
-  SectionTitle: ee,
-  Description: te,
-  SectionFooter: ie,
-  Card: ae,
-  Item: ne,
-  ItemPanel: re,
-  Callout: oe,
-  CalloutTitle: se,
-  CalloutDescription: le,
-  Row: ce,
+  Title: J,
+  Stack: Q,
+  Header: Y,
+  SectionTitle: Z,
+  Description: ee,
+  SectionFooter: te,
+  Card: ie,
+  Item: ae,
+  ItemPanel: ne,
+  Callout: re,
+  CalloutTitle: oe,
+  CalloutDescription: se,
+  Row: le,
   RowLink: ye,
-  Value: ue,
-  Alert: pe,
-  Footer: me,
+  Value: ce,
+  Alert: me,
+  Footer: ue,
   Reveal: fe
 };
 export {
-  F as a,
-  z as i,
-  G as n,
-  H as o,
-  j as r,
-  Re as s,
-  N as t
+  z as a,
+  j as i,
+  B as n,
+  G as o,
+  H as r,
+  Ee as s,
+  b as t
 };
 
-//# sourceMappingURL=basic-page-D1zm81YS.js.map
+//# sourceMappingURL=basic-page-Dfln58iw.js.map