@photon-ai/pho-ui 1.5.0 → 2.0.0

package/dist/chunks/IconAlertCircleFilled-VxKU8TYK.js

@@ -0,0 +1,11 @@
+"use client";
+import { t as l } from "./createReactComponent-BqCmnqfX.js";
+var e = [["path", {
+  d: "M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm.01 13l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z",
+  key: "svg-0"
+}]], r = l("filled", "alert-circle-filled", "AlertCircleFilled", e);
+export {
+  r as t
+};
+
+//# sourceMappingURL=IconAlertCircleFilled-VxKU8TYK.js.map

package/dist/chunks/IconAlertCircleFilled-VxKU8TYK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlertCircleFilled-VxKU8TYK.js","names":[],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertCircleFilled.mjs"],"sourcesContent":["/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm.01 13l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z\", \"key\": \"svg-0\" }]];\nconst IconAlertCircleFilled = createReactComponent(\"filled\", \"alert-circle-filled\", \"AlertCircleFilled\", __iconNode);\n\nexport { __iconNode, IconAlertCircleFilled as default };\n//# sourceMappingURL=IconAlertCircleFilled.mjs.map\n"],"x_google_ignoreList":[0],"mappings":";;AASA,IAAM,IAAa,CAAC,CAAC,QAAQ;AAAA,EAAE,GAAK;AAAA,EAAoU,KAAO;AAAQ,CAAC,CAAC,GACnX,IAAwB,EAAqB,UAAU,uBAAuB,qBAAqB,CAAU"}

package/dist/chunks/IconInfoCircle-L0zfhg7R.js

@@ -0,0 +1,21 @@
+"use client";
+import { t as e } from "./createReactComponent-BqCmnqfX.js";
+var o = [
+  ["path", {
+    d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0",
+    key: "svg-0"
+  }],
+  ["path", {
+    d: "M12 9h.01",
+    key: "svg-1"
+  }],
+  ["path", {
+    d: "M11 12h1v4h1",
+    key: "svg-2"
+  }]
+], a = e("outline", "info-circle", "InfoCircle", o);
+export {
+  a as t
+};
+
+//# sourceMappingURL=IconInfoCircle-L0zfhg7R.js.map

package/dist/chunks/IconInfoCircle-L0zfhg7R.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconInfoCircle-L0zfhg7R.js","names":[],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.mjs"],"sourcesContent":["/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M12 9h.01\", \"key\": \"svg-1\" }], [\"path\", { \"d\": \"M11 12h1v4h1\", \"key\": \"svg-2\" }]];\nconst IconInfoCircle = createReactComponent(\"outline\", \"info-circle\", \"InfoCircle\", __iconNode);\n\nexport { __iconNode, IconInfoCircle as default };\n//# sourceMappingURL=IconInfoCircle.mjs.map\n"],"x_google_ignoreList":[0],"mappings":";;AASA,IAAM,IAAa;AAAA,EAAC,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAwC,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAa,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAgB,KAAO;AAAA,EAAQ,CAAC;AAAC,GAC1L,IAAiB,EAAqB,WAAW,eAAe,cAAc,CAAU"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"animated-height-DhNSac85.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        container.style.overflow = \"\";\n        height.set(next);\n        return;\n      }\n      if (!animation && Math.abs(current - next) < 0.5) return;\n      container.style.overflow = \"hidden\";\n      animation?.stop();\n      animation = animate(height, next, {\n        ...(transition ?? HEIGHT_SPRING),\n        onComplete: () => {\n          animation = null;\n          container.style.overflow = \"\";\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 ref={containerRef} style={{ height }}>\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,EAAU,MAAM,WAAW,IAC3B,EAAO,IAAI,CAAI;AACf;AAAA,MACF;AACA,MAAI,CAAC,KAAa,KAAK,IAAI,IAAU,CAAI,IAAI,QAC7C,EAAU,MAAM,WAAW,UAC3B,GAAW,KAAK,GAChB,IAAY,EAAQ,GAAQ,GAAM;AAAA,QAChC,GAAI,KAAc;AAAA,QAClB,YAAA,MAAkB;AAChB,UAAA,IAAY,MACZ,EAAU,MAAM,WAAW;AAAA,QAC7B;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,IAAY,KAAK;AAAA,IAAc,OAAO,EAAE,QAAA,EAAO;AAAA,cAC7C,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

@@ -0,0 +1,481 @@
+"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", {
+  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 = {
+  type: "spring",
+  stiffness: 400,
+  damping: 40
+}, f = {
+  duration: 0.25,
+  ease: "easeOut"
+};
+function V({ 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),
+    ...t
+  });
+}
+function $(e) {
+  return e.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function K(e) {
+  if (!(typeof e != "string" && typeof e != "number"))
+    return $(String(e)) || void 0;
+}
+function v(e, t) {
+  if (e !== "")
+    return e ?? K(t);
+}
+var U = (e) => `basic-page-morph-${e}`, W = { layout: u }, X = 10, q = {
+  delay: 0.2,
+  duration: 0.12,
+  ease: "easeOut"
+}, J = {
+  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(() => {
+    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);
+    });
+    return o.observe(n), () => {
+      o.disconnect();
+    };
+  }, [e]), {
+    fly: t,
+    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, {
+    ref: n,
+    layoutId: U(e),
+    initial: y ? { opacity: 0 } : void 0,
+    animate: y ? { opacity: 1 } : void 0,
+    transition: i ? W : {
+      layout: { duration: 0 },
+      opacity: f
+    },
+    onLayoutAnimationStart: () => {
+      i && c(!0);
+    },
+    onLayoutAnimationComplete: () => c(!1),
+    className: "relative inline-block",
+    children: [s, l && /* @__PURE__ */ a(p.span, {
+      "aria-hidden": !0,
+      initial: { opacity: 1 },
+      animate: { opacity: 0 },
+      transition: J,
+      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);
+  return /* @__PURE__ */ a("h1", {
+    id: l,
+    className: r("text-display-base text-pho-primary scroll-mt-12 px-5 font-medium", n),
+    ...s,
+    children: t != null && !c ? /* @__PURE__ */ a(w, {
+      morphId: t,
+      fromClassName: "text-pho-secondary",
+      fly: y.fly,
+      morphRef: y.ref,
+      children: o
+    }) : i && !c ? /* @__PURE__ */ a(p.span, {
+      initial: {
+        opacity: 0,
+        y: h
+      },
+      animate: {
+        opacity: 1,
+        y: 0
+      },
+      transition: {
+        y: u,
+        opacity: f
+      },
+      className: "inline-block",
+      children: o
+    }) : o
+  });
+}
+function Y({ className: e, ...t }) {
+  const i = d();
+  return /* @__PURE__ */ a(p.div, {
+    initial: i ? !1 : {
+      opacity: 0,
+      y: h
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: u,
+      opacity: f
+    },
+    className: r("mt-6 flex flex-col gap-10", "*:flex *:flex-col *:gap-3", e),
+    ...t
+  });
+}
+function Z({ enter: e, className: t, ...i }) {
+  const n = d();
+  return e && !n ? /* @__PURE__ */ a(p.div, {
+    initial: {
+      opacity: 0,
+      y: h
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: u,
+      opacity: f
+    },
+    className: r("flex flex-col", t),
+    ...i
+  }) : /* @__PURE__ */ a("div", {
+    className: r("flex flex-col", t),
+    ...i
+  });
+}
+function ee({ 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),
+    ...n,
+    children: i
+  });
+}
+function te({ 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 }) {
+  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 }) {
+  return e ? /* @__PURE__ */ a("div", {
+    className: r(C, "overflow-hidden", t),
+    ...n,
+    children: /* @__PURE__ */ a(k, {
+      transition: u,
+      className: E,
+      children: i
+    })
+  }) : /* @__PURE__ */ a("div", {
+    className: r(G, t),
+    ...n,
+    children: i
+  });
+}
+function ne({ className: e, ...t }) {
+  return /* @__PURE__ */ a("div", {
+    className: r(j, e),
+    ...t
+  });
+}
+function re({ divided: e = !1, className: t, ...i }) {
+  return /* @__PURE__ */ a("div", {
+    className: r(e ? F : z, t),
+    ...i
+  });
+}
+function oe({ className: e, icon: t, children: i, ...n }) {
+  if (t == null || t === !1 || t === !0) return /* @__PURE__ */ a("div", {
+    className: r(N, e),
+    ...n,
+    children: i
+  });
+  const [o, ...s] = T.toArray(i);
+  return /* @__PURE__ */ m("div", {
+    className: r(N, e),
+    ...n,
+    children: [/* @__PURE__ */ m("div", {
+      className: "relative",
+      children: [/* @__PURE__ */ a("div", {
+        className: "min-w-0 pr-16",
+        children: o
+      }), /* @__PURE__ */ a("div", {
+        "aria-hidden": !0,
+        className: "text-pho-description pointer-events-none absolute top-1/2 right-0 size-14 -translate-y-1/2 opacity-50 [&>svg]:size-full",
+        children: t
+      })]
+    }), s]
+  });
+}
+function se({ 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),
+    ...n,
+    children: i
+  });
+}
+function le({ 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),
+    ...l,
+    children: [/* @__PURE__ */ m("div", {
+      className: "min-w-0",
+      children: [i ? /* @__PURE__ */ a("label", {
+        htmlFor: i,
+        className: "text-pho-primary block text-base font-normal",
+        children: e
+      }) : /* @__PURE__ */ a("p", {
+        className: "text-pho-primary text-base font-normal",
+        children: e
+      }), t ? /* @__PURE__ */ a("p", {
+        className: "text-pho-description text-xs",
+        children: t
+      }) : null]
+    }), /* @__PURE__ */ a("div", {
+      className: r("flex w-full min-w-0 items-center gap-2 sm:w-auto", n && "sm:w-full"),
+      children: s
+    })]
+  });
+}
+function ue({ className: e, ...t }) {
+  return /* @__PURE__ */ a("p", {
+    className: r("text-pho-description truncate text-base", e),
+    ...t
+  });
+}
+function pe({ error: e, show: t, className: i, children: n, ...o }) {
+  const s = d();
+  return /* @__PURE__ */ a(x, {
+    initial: !1,
+    children: (t ?? !0) && (e != null || n != null) ? /* @__PURE__ */ a(p.div, {
+      "data-basic-page-alert": "",
+      className: "overflow-hidden",
+      initial: {
+        height: 0,
+        opacity: 0
+      },
+      animate: {
+        height: "auto",
+        opacity: 1
+      },
+      exit: {
+        height: 0,
+        opacity: 0
+      },
+      transition: s ? { duration: 0 } : {
+        height: u,
+        opacity: f
+      },
+      children: /* @__PURE__ */ a(M, {
+        error: e,
+        className: r("px-5 pb-3", i),
+        ...o,
+        children: n
+      })
+    }) : null
+  });
+}
+function me({ 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, {
+    initial: !1,
+    children: e ? /* @__PURE__ */ a(p.div, {
+      className: "overflow-hidden",
+      initial: {
+        height: 0,
+        opacity: 0
+      },
+      animate: {
+        height: "auto",
+        opacity: 1
+      },
+      exit: {
+        height: 0,
+        opacity: 0
+      },
+      transition: n ? { duration: 0 } : {
+        height: u,
+        opacity: f
+      },
+      children: o
+    }) : null
+  });
+}
+var h = 12, A = {
+  stack: "-2.5rem",
+  block: "-0.75rem"
+};
+function fe({ show: e, gap: t = "stack", className: i, ...n }) {
+  const o = d();
+  return e === void 0 ? /* @__PURE__ */ a(p.div, {
+    initial: o ? !1 : {
+      opacity: 0,
+      y: h
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: u,
+      opacity: f
+    },
+    className: i,
+    ...n
+  }) : /* @__PURE__ */ a(x, {
+    initial: !1,
+    children: e ? /* @__PURE__ */ a(p.div, {
+      initial: {
+        height: 0,
+        opacity: 0,
+        marginTop: A[t]
+      },
+      animate: {
+        height: "auto",
+        opacity: 1,
+        marginTop: 0
+      },
+      exit: {
+        height: 0,
+        opacity: 0,
+        marginTop: A[t]
+      },
+      transition: o ? { duration: 0 } : {
+        height: u,
+        marginTop: u,
+        opacity: f
+      },
+      className: r("overflow-hidden", i),
+      ...n
+    }) : 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, {
+    variant: "ghost",
+    size: "sm",
+    href: e,
+    "data-basic-page-back": "",
+    prefix: l ? /* @__PURE__ */ a(p.span, {
+      initial: c.fly ? {
+        opacity: 0,
+        x: X
+      } : { opacity: 0 },
+      animate: c.fly ? {
+        opacity: 1,
+        x: 0
+      } : { opacity: 1 },
+      transition: c.fly ? q : f,
+      className: "inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0",
+      children: /* @__PURE__ */ a(g, {})
+    }) : /* @__PURE__ */ a(g, {}),
+    className: r("absolute top-4 left-[10.25px]", t),
+    ...o,
+    children: l && i != null ? /* @__PURE__ */ a(w, {
+      morphId: i,
+      fromClassName: "text-pho-primary",
+      fly: c.fly,
+      morphRef: c.ref,
+      fallback: !0,
+      children: n
+    }) : n
+  });
+}
+function ye({ label: e, description: t, leading: i, href: n, className: o, children: s, ...l }) {
+  return /* @__PURE__ */ m(I(), {
+    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-w-0 flex-1 items-center", i != null && "gap-3"),
+      children: [i, /* @__PURE__ */ m("div", {
+        className: "min-w-0",
+        children: [/* @__PURE__ */ a("div", {
+          className: "flex min-w-0 items-center gap-1",
+          children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ a("p", {
+            className: "text-pho-primary truncate text-base font-medium",
+            children: e
+          }) : e
+        }), t ? /* @__PURE__ */ a("div", {
+          className: "text-pho-description truncate text-xs",
+          children: t
+        }) : null]
+      })]
+    }), /* @__PURE__ */ m("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, {
+        "aria-hidden": !0,
+        className: "text-pho-secondary group-hover:text-pho-secondary-hover size-4 shrink-0 transition-colors"
+      })]
+    })]
+  });
+}
+var Re = {
+  Root: V,
+  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,
+  RowLink: ye,
+  Value: ue,
+  Alert: pe,
+  Footer: me,
+  Reveal: fe
+};
+export {
+  F as a,
+  z as i,
+  G as n,
+  H as o,
+  j as r,
+  Re as s,
+  N as t
+};
+
+//# sourceMappingURL=basic-page-D1zm81YS.js.map