@photon-ai/pho-ui 2.1.0 → 2.2.0

package/dist/src/sections/basic-page/basic-page.d.ts

@@ -73,8 +73,11 @@ export interface BasicPageTitleProps extends ComponentProps<"h1"> {
      * Rise this title into its line on mount — for a subpage title whose line
      * an inbound Title ↔ Back morph departs from. The moment the word lifts
      * off, this title floats up from just below it (the Stack physics), so
-     * the two form one upward stream and never overlap. Skipped under
-     * reduced motion.
+     * the two form one upward stream and never overlap. Combines with
+     * `morphId` for a mid-level page (a list that is itself a subpage): the
+     * word rises in when the page is entered from its parent and flies in
+     * from the back link when returned to from its own subpage. Skipped
+     * under reduced motion.
      */
     enter?: boolean;
     ref?: Ref<HTMLHeadingElement>;
@@ -332,33 +335,64 @@ export interface BasicPageRevealProps extends Omit<ComponentProps<"div">, Reveal
  * runtime glides open/closed while its neighbours follow.
  */
 declare function Reveal({ show, gap, dividers, className, ...props }: BasicPageRevealProps): import("react").JSX.Element;
-export interface BasicPageBackProps extends Omit<ButtonLinkProps, "variant" | "size" | "shape" | "prefix" | "suffix" | "svgOnly" | "href"> {
-    /** Parent destination — rendered through the host's `LinkProvider`. */
+export interface BasicPageBreadcrumbsProps extends ComponentProps<"nav"> {
+    /** `Crumb`s, root-most first; the last one is the immediate parent. */
+    children: ReactNode;
+}
+/**
+ * The trail above the title — where this page sits, root-most crumb first,
+ * ending with the immediate parent; the current page is the `Title` below.
+ * Place inside `Root`, before `Title`. It floats in `Root`'s reserved top
+ * padding (vertically centered in the 64px zone) instead of taking layout
+ * space, so `Title` sits at the same position whether or not a page has
+ * one.
+ *
+ * One form at every depth: `‹ parent / parent / parent` — the chevron opens
+ * the trail (it is the way up), slashes separate the crumbs (they are the
+ * path), one crumb or many. Below `sm` the path collapses to `‹ parent` —
+ * the last crumb alone. Crumbs render through the host's `LinkProvider`.
+ *
+ * The offsets align the first *label* glyph with the title glyph. Title
+ * text sits 40px in (`px-5` root gutter + `px-5` title pad); inside a `sm`
+ * ghost button the label sits 29.75px in (8px icon-side pad + 15.75px
+ * chevron, 1.125em at the 14px `text-base`, + 4px gap + 2px label-span
+ * `px-0.5`) — so `left` is the 10.25px difference. `top-4` centers the 32px
+ * buttons in the 64px reserved zone. The chevron and the ghost hover pills
+ * hang in the padding — the usual optical alignment for borderless controls.
+ *
+ * Motion between pages: the tail crumb is the morph partner of the child
+ * page's `Title` (pair their `morphId`s); everything before it holds still.
+ * On a push the trail grows by one — a separator emerges from under the
+ * arriving word; on a pop it loses its tail — the word grows back into the
+ * title and the spare separator fades. Collapsed, it behaves as `Back`.
+ */
+declare function Breadcrumbs({ className, children, ...props }: BasicPageBreadcrumbsProps): import("react").JSX.Element;
+export interface BasicPageCrumbProps extends Omit<ButtonLinkProps, "variant" | "size" | "shape" | "prefix" | "suffix" | "svgOnly" | "href"> {
+    /** Destination — rendered through the host's `LinkProvider`. */
     href: string;
-    /** Label — name the parent page. @default "Back" */
+    /** Label — name the page. @default "Back" */
     children?: ReactNode;
     /**
-     * Shared-element key. Pair with the same `morphId` on the parent page's
-     * `Title` and the word morphs between title and back link across the
-     * navigation. Skipped under reduced motion.
+     * Shared-element key. Pair with the same `morphId` on that page's `Title`
+     * and the word morphs between title and crumb across the navigation.
+     * Skipped under reduced motion.
      */
     morphId?: string;
 }
 /**
- * Back link for a subpage — a small ghost `ButtonLink`; place inside `Root`,
- * before `Title`. It floats in `Root`'s reserved top padding (vertically
- * centered in the 48px zone) instead of taking layout space, so `Title` sits
- * at exactly the same position whether or not a page has one.
- *
- * The offsets align the *label* glyph with the title glyph. Title text sits
- * 40px in (`px-5` root gutter + `px-5` title pad); inside a `sm` ghost button
- * the label sits 29.75px in (8px icon-side pad + 15.75px chevron, 1.125em at
- * the 14px `text-base`, + 4px gap + 2px label-span `px-0.5`) — so `left` is
- * the 10.25px difference. `top-4` centers the 32px button in the 64px
- * reserved zone. The chevron and the ghost hover pill hang in the padding —
- * the usual optical alignment for borderless controls.
+ * One step of the trail — a small ghost `ButtonLink`. Only meaningful
+ * inside `Breadcrumbs`, which decides what shows at which width and which
+ * crumb is the tail; `Back` is the one-crumb shorthand.
+ */
+declare function Crumb({ href, className, morphId, children, ...props }: BasicPageCrumbProps): import("react").JSX.Element;
+export type BasicPageBackProps = BasicPageCrumbProps;
+/**
+ * Back link for a subpage one level down — the one-crumb `Breadcrumbs`:
+ * `‹ parent`, floating in `Root`'s reserved top padding, morphing with the
+ * parent's `Title` when they share a `morphId`. Deeper pages list the whole
+ * path with `Breadcrumbs` + `Crumb` instead.
  */
-declare function Back({ href, className, morphId, children, ...props }: BasicPageBackProps): import("react").JSX.Element;
+declare function Back({ className, ...props }: BasicPageBackProps): import("react").JSX.Element;
 export interface BasicPageRowLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "title"> {
     /** Left-side field name — plain text, or compose with a trailing badge. */
     label: ReactNode;
@@ -439,6 +473,8 @@ declare function RowLink({ label, description, leading, href, className, childre
  */
 export declare const BasicPage: {
     Root: typeof Root;
+    Breadcrumbs: typeof Breadcrumbs;
+    Crumb: typeof Crumb;
     Back: typeof Back;
     Title: typeof Title;
     Stack: typeof Stack;

package/dist/src/sections/basic-page/index.d.ts

@@ -1 +1 @@
-export { BasicPage, BASIC_PAGE_CARD, BASIC_PAGE_CALLOUT, BASIC_PAGE_ROW, BASIC_PAGE_ITEM, BASIC_PAGE_ITEM_PANEL, BASIC_PAGE_ITEM_PANEL_DIVIDED, type BasicPageRowProps, type BasicPageRowLinkProps, type BasicPageBackProps, type BasicPageFooterProps, type BasicPageItemPanelProps, } from './basic-page';
+export { BasicPage, BASIC_PAGE_CARD, BASIC_PAGE_CALLOUT, BASIC_PAGE_ROW, BASIC_PAGE_ITEM, BASIC_PAGE_ITEM_PANEL, BASIC_PAGE_ITEM_PANEL_DIVIDED, type BasicPageRowProps, type BasicPageRowLinkProps, type BasicPageBackProps, type BasicPageBreadcrumbsProps, type BasicPageCrumbProps, type BasicPageFooterProps, type BasicPageItemPanelProps, } from './basic-page';

package/dist/utils.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as s } from "./chunks/cn-DTiB6ek_.js";
+import { t as s } from "./chunks/cn-ChIgwEl3.js";
 import { n as t, r as e, t as a } from "./chunks/link-provider-9TFNyDqO.js";
 import { t as i } from "./chunks/resolve-variant-CcD8iG5l.js";
 import { n as p, r as P, t as R } from "./chunks/use-press-pulse-8iorQPsh.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {
@@ -407,33 +407,34 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@tabler/icons-react": "^3.44.0",
-    "@tailwindcss/vite": "^4.1.0",
-    "@testing-library/jest-dom": "^6.9.1",
+    "@tabler/icons-react": "^3.46.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^26.0.1",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
-    "@vitejs/plugin-react": "^6.0.3",
-    "happy-dom": "^20.10.6",
+    "@testing-library/user-event": "^14.6.5",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@typescript/typescript6": "^6.0.2",
+    "@vitejs/plugin-react": "^6.0.5",
+    "happy-dom": "^20.11.2",
     "plop": "^4.0.5",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "tailwindcss": "^4.1.0",
-    "tsx": "^4.22.4",
-    "typescript": "^5.9.0",
-    "vite": "^8.1.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tailwindcss": "^4.3.3",
+    "tsx": "^4.23.12",
+    "typescript": "^7.0.2",
+    "vite": "^8.2.1",
     "vite-plugin-dts": "^5.0.3",
-    "vitest": "^4.1.9"
+    "vitest": "^4.1.10"
   },
   "dependencies": {
-    "@base-ui/react": "^1.6.0",
+    "@base-ui/react": "^1.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "country-flag-icons": "^1.6.20",
-    "libphonenumber-js": "^1.13.10",
-    "motion": "^12.42.0",
+    "libphonenumber-js": "^1.13.11",
+    "motion": "^13.1.0",
     "tailwind-merge": "^3.6.0"
   },
   "scripts": {

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

@@ -1,482 +0,0 @@
-"use client";
-import { t as r } from "./cn-DTiB6ek_.js";
-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"
-}]], 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
-}, f = {
-  duration: 0.25,
-  ease: "easeOut"
-};
-function F({ className: e, ...t }) {
-  return /* @__PURE__ */ a("div", {
-    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 V(e) {
-  return e.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-}
-function $(e) {
-  if (!(typeof e != "string" && typeof e != "number"))
-    return V(String(e)) || void 0;
-}
-function g(e, t) {
-  if (e !== "")
-    return e ?? $(t);
-}
-var K = (e) => `basic-page-morph-${e}`, U = { layout: m }, W = 10, X = {
-  delay: 0.2,
-  duration: 0.12,
-  ease: "easeOut"
-}, q = {
-  duration: 0.18,
-  ease: "easeOut"
-}, 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 && w.set(e, s.isIntersecting);
-    });
-    return o.observe(n), () => {
-      o.disconnect();
-    };
-  }, [e]), {
-    fly: t,
-    ref: i
-  };
-}
-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: K(e),
-    initial: y ? { opacity: 0 } : void 0,
-    animate: y ? { opacity: 1 } : void 0,
-    transition: i ? U : {
-      layout: { duration: 0 },
-      opacity: f
-    },
-    onLayoutAnimationStart: () => {
-      i && c(!0);
-    },
-    onLayoutAnimationComplete: () => c(!1),
-    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: q,
-      className: r("absolute inset-0", t),
-      children: s
-    })]
-  });
-}
-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 max-w-full min-w-0 scroll-mt-12 truncate px-5 font-medium", n),
-    ...s,
-    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(u.span, {
-      initial: {
-        opacity: 0,
-        y: x
-      },
-      animate: {
-        opacity: 1,
-        y: 0
-      },
-      transition: {
-        y: m,
-        opacity: f
-      },
-      className: "inline-block max-w-full min-w-0 truncate",
-      children: o
-    }) : o
-  });
-}
-function Q({ className: e, ...t }) {
-  const i = d();
-  return /* @__PURE__ */ a(u.div, {
-    initial: i ? !1 : {
-      opacity: 0,
-      y: x
-    },
-    animate: {
-      opacity: 1,
-      y: 0
-    },
-    transition: {
-      y: m,
-      opacity: f
-    },
-    className: r("mt-6 flex min-w-0 flex-col gap-10", "*:flex *:min-w-0 *:flex-col *:gap-3", e),
-    ...t
-  });
-}
-function Y({ enter: e, className: t, ...i }) {
-  const n = d();
-  return e && !n ? /* @__PURE__ */ a(u.div, {
-    initial: {
-      opacity: 0,
-      y: x
-    },
-    animate: {
-      opacity: 1,
-      y: 0
-    },
-    transition: {
-      y: m,
-      opacity: f
-    },
-    className: r("flex min-w-0 flex-col", t),
-    ...i
-  }) : /* @__PURE__ */ a("div", {
-    className: r("flex min-w-0 flex-col", t),
-    ...i
-  });
-}
-function Z({ id: e, className: t, children: i, ...n }) {
-  return /* @__PURE__ */ a("h2", {
-    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 ee({ className: e, ...t }) {
-  return /* @__PURE__ */ a("p", {
-    className: r("text-display-xs text-pho-description px-5 font-normal", 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 ie({ animateHeight: e, className: t, children: i, ...n }) {
-  return e ? /* @__PURE__ */ a("div", {
-    className: r(_, "min-h-0 overflow-hidden", t),
-    ...n,
-    children: /* @__PURE__ */ a(M, {
-      transition: m,
-      className: h,
-      children: i
-    })
-  }) : /* @__PURE__ */ a("div", {
-    className: r(B, t),
-    ...n,
-    children: i
-  });
-}
-function ae({ className: e, ...t }) {
-  return /* @__PURE__ */ a("div", {
-    className: r(H, e),
-    ...t
-  });
-}
-function ne({ divided: e = !1, className: t, ...i }) {
-  return /* @__PURE__ */ a("div", {
-    className: r(e ? z : j, t),
-    ...i
-  });
-}
-function re({ className: e, icon: t, children: i, ...n }) {
-  if (t == null || t === !1 || t === !0) return /* @__PURE__ */ a("div", {
-    className: r(b, e),
-    ...n,
-    children: i
-  });
-  const [o, ...s] = k.toArray(i);
-  return /* @__PURE__ */ p("div", {
-    className: r(b, e),
-    ...n,
-    children: [/* @__PURE__ */ p("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 oe({ id: e, className: t, children: i, ...n }) {
-  return /* @__PURE__ */ a("h2", {
-    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 se({ className: e, ...t }) {
-  return /* @__PURE__ */ a("p", {
-    className: r("text-display-xs text-pho-description font-normal", e),
-    ...t
-  });
-}
-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__ */ p("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 ce({ className: e, ...t }) {
-  return /* @__PURE__ */ a("p", {
-    className: r("text-pho-description max-w-full min-w-0 truncate text-base", e),
-    ...t
-  });
-}
-function me({ error: e, show: t, className: i, children: n, ...o }) {
-  const s = d();
-  return /* @__PURE__ */ a(v, {
-    initial: !1,
-    children: (t ?? !0) && (e != null || n != null) ? /* @__PURE__ */ a(u.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: m,
-        opacity: f
-      },
-      children: /* @__PURE__ */ a(S, {
-        error: e,
-        className: r("px-5 pb-3", i),
-        ...o,
-        children: n
-      })
-    }) : null
-  });
-}
-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(v, {
-    initial: !1,
-    children: e ? /* @__PURE__ */ a(u.div, {
-      className: "overflow-hidden",
-      initial: {
-        height: 0,
-        opacity: 0
-      },
-      animate: {
-        height: "auto",
-        opacity: 1
-      },
-      exit: {
-        height: 0,
-        opacity: 0
-      },
-      transition: n ? { duration: 0 } : {
-        height: m,
-        opacity: f
-      },
-      children: o
-    }) : null
-  });
-}
-var x = 12, pe = {
-  stack: "-2.5rem",
-  block: "-0.75rem",
-  none: "0px"
-};
-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: x
-    },
-    animate: {
-      opacity: 1,
-      y: 0
-    },
-    transition: {
-      y: m,
-      opacity: f
-    },
-    className: r(i && h, n),
-    ...o
-  }) : /* @__PURE__ */ a(v, {
-    initial: !1,
-    children: e ? /* @__PURE__ */ a(u.div, {
-      initial: {
-        height: 0,
-        opacity: 0,
-        marginTop: l
-      },
-      animate: {
-        height: "auto",
-        opacity: 1,
-        marginTop: 0
-      },
-      exit: {
-        height: 0,
-        opacity: 0,
-        marginTop: l
-      },
-      transition: s ? { duration: 0 } : {
-        height: m,
-        marginTop: m,
-        opacity: f
-      },
-      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 = C(l ? i : void 0);
-  return /* @__PURE__ */ a(I, {
-    variant: "ghost",
-    size: "sm",
-    href: e,
-    "data-basic-page-back": "",
-    prefix: l ? /* @__PURE__ */ a(u.span, {
-      initial: c.fly ? {
-        opacity: 0,
-        x: W
-      } : { opacity: 0 },
-      animate: c.fly ? {
-        opacity: 1,
-        x: 0
-      } : { opacity: 1 },
-      transition: c.fly ? X : f,
-      className: "inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0",
-      children: /* @__PURE__ */ a(N, {})
-    }) : /* @__PURE__ */ a(N, {}),
-    className: r("absolute top-4 left-[10.25px]", t),
-    ...o,
-    children: l && i != null ? /* @__PURE__ */ a(E, {
-      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__ */ p(R(), {
-    href: n,
-    ...l,
-    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__ */ p("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__ */ 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(D, {
-        "aria-hidden": !0,
-        className: "text-pho-secondary group-hover:text-pho-secondary-hover size-4 shrink-0 transition-colors"
-      })]
-    })]
-  });
-}
-var Ee = {
-  Root: F,
-  Back: de,
-  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: ce,
-  Alert: me,
-  Footer: ue,
-  Reveal: fe
-};
-export {
-  z as a,
-  j as i,
-  B as n,
-  G as o,
-  H as r,
-  Ee as s,
-  b as t
-};
-
-//# sourceMappingURL=basic-page-Dfln58iw.js.map