@photon-ai/pho-ui 1.4.0 → 2.0.0

package/dist/chunks/basic-page-D1zm81YS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-page-D1zm81YS.js","names":[],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs","../../src/sections/basic-page/basic-page.tsx"],"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\": \"M9 6l6 6l-6 6\", \"key\": \"svg-0\" }]];\nconst IconChevronRight = createReactComponent(\"outline\", \"chevron-right\", \"ChevronRight\", __iconNode);\n\nexport { __iconNode, IconChevronRight as default };\n//# sourceMappingURL=IconChevronRight.mjs.map\n","import {\n  Children,\n  useEffect,\n  useRef,\n  useState,\n  type AnchorHTMLAttributes,\n  type ComponentProps,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { IconChevronLeft, IconChevronRight } from \"@tabler/icons-react\";\nimport { ButtonLink, type ButtonLinkProps } from \"../../components/button\";\nimport { Error as ErrorLine } from \"../../components/error\";\nimport { AnimatedHeight } from \"../../utils/animated-height\";\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\n\n/**\n * BasicPage — Pho's standard content page: a page title, section titles, and\n * bordered cards of label/control rows. Settings, billing, members — any\n * single-column management surface.\n *\n * Spacing: wrap the page in `Root` (a 42rem column with `px-5` gutters,\n * vertical padding). `Stack` separates blocks (`gap-10`). Inside a block,\n * children share `gap-3`. Wrap a section title + description in `Header`\n * (no gap — title and description sit flush) so that pair stays tight —\n * don't put them as loose siblings.\n * Parts already carry `px-5`.\n *\n * Navigation: pages may drill into subpages. `RowLink` is a whole-row link\n * (trailing chevron) and `Back` returns to the parent — both render through\n * the host's `LinkProvider`; the URL itself stays the router's job. `Back`\n * floats in `Root`'s top padding, so `Title` never moves between pages that\n * have a back link and pages that don't.\n */\n\n/* ------------------------------- class map ------------------------------- */\n\n/** Card surface — border, corner, fill; no divider rules. */\nconst BASIC_PAGE_CARD_SURFACE =\n  \"rounded-base border border-pho-secondary bg-pho-primary\";\n\n/**\n * Card divider rules — hairlines between direct children. A row followed by\n * an `Alert` drops its divider (the `:has()` rule) so the error line reads\n * as part of the row it belongs to — the alert's own bottom divider takes\n * over toward whatever follows. Kept separate from the surface so\n * `animateHeight` can move the dividers onto the measured content wrapper.\n */\nconst BASIC_PAGE_CARD_DIVIDERS =\n  \"divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0\";\n\n/** Bordered card that stacks rows with hairline dividers. */\nexport const BASIC_PAGE_CARD = `${BASIC_PAGE_CARD_SURFACE} ${BASIC_PAGE_CARD_DIVIDERS}`;\n\n/**\n * Standalone callout surface — featured block (invite form, notice, etc.).\n * Don't wrap in `Card`; this is the outer chrome.\n */\nexport const BASIC_PAGE_CALLOUT =\n  \"flex flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5\";\n\n/**\n * One row — label (+ optional description) left, control right.\n * `min-h-[4.25rem]` (68px) keeps avatar/control rows from collapsing shorter\n * than a comfortable touch target.\n */\nexport const BASIC_PAGE_ROW =\n  \"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\";\n\n/**\n * One card row that can host subviews. Same padding rhythm as a plain row —\n * an optional trailing `ItemPanel` breaks out of it on its own.\n */\nexport const BASIC_PAGE_ITEM = \"flex flex-col gap-3 px-5 py-4\";\n\n/**\n * Secondary strip closing an `Item` that is last in its card. Negative\n * margins escape the item's `px-5 pb-4` so the gray sheet runs edge-to-edge\n * and owns the row's bottom padding. The body above stays square and the\n * sheet's top is flush against it; only the bottom rounds, nesting into the\n * card's 12px corner (11px inside the 1px border). Content lands back on the\n * item's left gutter.\n */\nexport const BASIC_PAGE_ITEM_PANEL =\n  \"-mx-5 -mb-4 flex items-center rounded-b-[calc(0.75rem-1px)] bg-pho-secondary py-1 pr-3 pl-5\";\n\n/**\n * Mid-list variant — the full-bleed sheet only reads well against the card's\n * bottom corner, so when later rows follow, the panel becomes an inset chip\n * instead: fully rounded at the small-control radius, overhanging the text\n * gutter by 8px per side (content stays aligned with the body above), and\n * leaving the row's own bottom padding and the card's hairline divider alone.\n * `-mt-1.5` collapses the item's `gap-3` (12px) to an effective `gap-1.5` (6px).\n */\nexport const BASIC_PAGE_ITEM_PANEL_DIVIDED =\n  \"-mx-2 -mt-1.5 flex items-center rounded-sm bg-pho-secondary px-2 py-0.5\";\n\n/* --------------------------------- motion -------------------------------- */\n\n/**\n * One spring for every BasicPage motion — the `Stack` entrance, `Title` /\n * `Header` enter, `Reveal`, the Title ↔ Back morph, and the `Alert` /\n * `Footer` height reveals. Measured off a 60fps iOS push: ~330ms with a\n * long, gentle glide, everything co-landing. Essentially critically damped\n * (an overshooting edge would show clipped content).\n */\nconst ENTRANCE_SPRING = {\n  type: \"spring\",\n  stiffness: 400,\n  damping: 40,\n} as const;\n\n/** Fade paired with the spring — spans most of the glide. */\nconst ENTRANCE_FADE = { duration: 0.25, ease: \"easeOut\" } as const;\n\n/* --------------------------------- parts --------------------------------- */\n\n/**\n * Page chrome — centered column at the standard content width. Hosts\n * `Title` + `Stack` (and any route-level siblings). Prefer this over\n * ad-hoc `max-w-*` wrappers in the app shell.\n *\n * `44.5rem` = the 42rem (`2xl`) content column plus the two `px-5` gutters,\n * so wide viewports render exactly as before while narrow ones keep a 20px\n * breathing edge instead of running content into the viewport.\n *\n * `relative` anchors `Back`, which floats in the top padding. The top zone\n * is conditional (`:has()`): pages carrying a `Back` reserve 64px for it;\n * pages without one keep the tighter 48px so the title doesn't sit low.\n *\n * The column is also a `min-h-full` flex stack: when the host gives it a\n * height context (an app shell's scroll pane), a full-page state can claim\n * the leftover viewport with `flex-1` — `ErrorView className=\"flex-1\"`\n * centers itself vertically below the title. Hosts without a height context\n * see a normal column; regular pages are unaffected.\n *\n * Root itself never animates — the page entrance lives on `Stack`, so\n * `Title` and `Back` (the page chrome) stay put while the body below rises\n * in.\n */\nfunction Root({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return (\n    <div\n      className={cn(\n        \"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\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Slug for hash targets — \"Danger zone\" → `danger-zone`. Empty / non-string\n * children yield no id; pass an explicit `id` to override or `id=\"\"` to opt out.\n */\nfunction slugifyHeading(value: string): string {\n  return value\n    .normalize(\"NFKD\")\n    .replace(/[\\u0300-\\u036f]/g, \"\")\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-+|-+$/g, \"\");\n}\n\nfunction headingIdFromChildren(children: ReactNode): string | undefined {\n  if (typeof children !== \"string\" && typeof children !== \"number\") {\n    return undefined;\n  }\n  const slug = slugifyHeading(String(children));\n  return slug || undefined;\n}\n\n/** Resolve `id`: explicit wins; `\"\"` opts out; else slug from plain-text children. */\nfunction resolveHeadingId(\n  id: string | undefined,\n  children: ReactNode,\n): string | undefined {\n  if (id === \"\") return undefined;\n  if (id != null) return id;\n  return headingIdFromChildren(children);\n}\n\n/**\n * Namespaced Motion `layoutId` for the Title ↔ Back shared-element morph —\n * give a parent page's `Title` and its subpage's `Back` the same `morphId`\n * and the word itself travels between the two: the large title shrinks into\n * the back link on drill-in, and grows back on return.\n */\nconst morphLayoutId = (id: string) => `basic-page-morph-${id}`;\n\n/** The morph rides the page-tier entrance spring — one glide, everywhere. */\nconst MORPH_TRANSITION = { layout: ENTRANCE_SPRING } as const;\n\n/**\n * Chevron entrance for a morphing `Back`, measured off a 60fps iOS push\n * (sub-pixel tracking of the recording): the arrow emerges from under the\n * left edge of the arriving word at ~62% of the flight — sliding left by\n * ~2/3 of its own width with a strong ease-out while fading in over ~120ms\n * — and lands together with the word, which is still gliding its last few\n * pixels the whole time. Nothing is sequential.\n */\nconst MORPH_CHEVRON_RISE_X = 10;\nconst MORPH_CHEVRON_ENTER = {\n  delay: 0.2,\n  duration: 0.12,\n  ease: \"easeOut\",\n} as const;\n\n/**\n * Ink crossfade for the morphing word — iOS redraws the word in the\n * destination's ink and fades the origin-ink rendition out over the first\n * half of the flight, so the word takes off in the color it had and lands\n * in the color it gets. `MorphLabel` mounts the ghost only while a layout\n * animation is actually running, so static renders never see it.\n */\nconst MORPH_INK_FADE = { duration: 0.18, ease: \"easeOut\" } as const;\n\n/**\n * A shared element can only fly between two points the user has seen. Each\n * morph word tracks whether it is on screen (keyed by `morphId`); when the\n * other end mounts, it flies only if the word it continues was visible.\n * A title scrolled out of view yields a plain fade at the destination\n * instead of a dive in from off-screen.\n */\nconst morphWordVisible = new Map<string, boolean>();\n\n/**\n * Mount-locked flight decision + live visibility tracking for a morph word.\n * `fly` is read from the registry once at mount (was the other end on\n * screen?); the ref then feeds this word's own visibility back for the next\n * navigation. No-ops without `IntersectionObserver` (jsdom, SSR).\n */\nfunction useMorphFlight(morphId: string | undefined) {\n  const [fly] = useState(\n    () => morphId != null && morphWordVisible.get(morphId) === true,\n  );\n  const ref = useRef<HTMLSpanElement | null>(null);\n  useEffect(() => {\n    if (morphId == null || typeof IntersectionObserver === \"undefined\") return;\n    const el = ref.current;\n    if (!el) return;\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry) morphWordVisible.set(morphId, entry.isIntersecting);\n    });\n    observer.observe(el);\n    return () => {\n      observer.disconnect();\n    };\n  }, [morphId]);\n  return { fly, ref };\n}\n\n/**\n * The shared-element word of a Title ↔ Back morph. While the box flies, an\n * origin-ink copy of the word sits on top and fades out (the iOS snapshot\n * crossfade); the copy only exists during a real layout animation. When the\n * flight is skipped (`fly` false — the other end wasn't on screen), the\n * layout snap is instant and, with `fallback`, the word fades in instead.\n */\nfunction MorphLabel({\n  morphId,\n  fromClassName,\n  fly,\n  morphRef,\n  fallback = false,\n  children,\n}: {\n  morphId: string;\n  /** Ink the word arrives FROM (the other end's text color). */\n  fromClassName: string;\n  /** Fly the layout box — the other end was on screen at navigation. */\n  fly: boolean;\n  morphRef: React.Ref<HTMLSpanElement>;\n  /** Fade the word in when not flying (instead of appearing instantly). */\n  fallback?: boolean;\n  children: ReactNode;\n}) {\n  const [crossfading, setCrossfading] = useState(false);\n  const fade = !fly && fallback;\n  return (\n    <motion.span\n      ref={morphRef}\n      layoutId={morphLayoutId(morphId)}\n      initial={fade ? { opacity: 0 } : undefined}\n      animate={fade ? { opacity: 1 } : undefined}\n      transition={\n        fly\n          ? MORPH_TRANSITION\n          : { layout: { duration: 0 }, opacity: ENTRANCE_FADE }\n      }\n      onLayoutAnimationStart={() => {\n        if (fly) setCrossfading(true);\n      }}\n      onLayoutAnimationComplete={() => setCrossfading(false)}\n      className=\"relative inline-block\"\n    >\n      {children}\n      {crossfading && (\n        <motion.span\n          aria-hidden\n          initial={{ opacity: 1 }}\n          animate={{ opacity: 0 }}\n          transition={MORPH_INK_FADE}\n          className={cn(\"absolute inset-0\", fromClassName)}\n        >\n          {children}\n        </motion.span>\n      )}\n    </motion.span>\n  );\n}\n\nexport interface BasicPageTitleProps extends ComponentProps<\"h1\"> {\n  /**\n   * Shared-element key. Pair with the same `morphId` on the subpage's\n   * `Back` and the word morphs between title and back link across the\n   * navigation. Skipped under reduced motion.\n   */\n  morphId?: string;\n  /**\n   * Rise this title into its line on mount — for a subpage title whose line\n   * an inbound Title ↔ Back morph departs from. The moment the word lifts\n   * off, this title floats up from just below it (the Stack physics), so\n   * the two form one upward stream and never overlap. Skipped under\n   * reduced motion.\n   */\n  enter?: boolean;\n  ref?: Ref<HTMLHeadingElement>;\n}\n\n/**\n * Page title — largest heading on the surface. Plain-text children get a slug\n * `id` for hash targets (`#profile`); the heading itself is not a link.\n */\nfunction Title({\n  id,\n  morphId,\n  enter,\n  className,\n  children,\n  ...props\n}: BasicPageTitleProps) {\n  const headingId = resolveHeadingId(id, children);\n  const reduceMotion = useReducedMotion();\n  const flight = useMorphFlight(morphId);\n  return (\n    <h1\n      id={headingId}\n      className={cn(\n        \"text-display-base text-pho-primary scroll-mt-12 px-5 font-medium\",\n        className,\n      )}\n      {...props}\n    >\n      {morphId != null && !reduceMotion ? (\n        <MorphLabel\n          morphId={morphId}\n          fromClassName=\"text-pho-secondary\"\n          fly={flight.fly}\n          morphRef={flight.ref}\n        >\n          {children}\n        </MorphLabel>\n      ) : enter && !reduceMotion ? (\n        <motion.span\n          initial={{ opacity: 0, y: REVEAL_RISE_PX }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ y: ENTRANCE_SPRING, opacity: ENTRANCE_FADE }}\n          className=\"inline-block\"\n        >\n          {children}\n        </motion.span>\n      ) : (\n        children\n      )}\n    </h1>\n  );\n}\n\nexport interface BasicPageStackProps extends Omit<\n  ComponentProps<\"div\">,\n  RevealMotionConflicts\n> {\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Vertical stack under the page title. Blocks (forms / sections) use `gap-10`;\n * each block lays out its children with `gap-3`.\n *\n * Mounting plays the page entrance: the stack rises 12px and fades in on the\n * Card-shell / Command spring while `Title` / `Back` above stay put. What\n * that means per state:\n *\n * - **Entering the page** — whatever the page first shows (skeleton\n *   included) rides in with its stack.\n * - **Skeleton in a separate component** — swapping it for the loaded\n *   return mounts a fresh stack, so the entrance replays as the\n *   data-arrival animation. That's the right feel for shapes the skeleton\n *   couldn't predict (lists of unknown length).\n * - **1:1 skeleton** — keep ONE stack mounted and branch its children\n *   (`{pending ? bones : content}`): values then fill in place with no\n *   motion.\n *\n * Static under reduced motion.\n */\nfunction Stack({ className, ...props }: BasicPageStackProps) {\n  const reduceMotion = useReducedMotion();\n  return (\n    <motion.div\n      initial={reduceMotion ? false : { opacity: 0, y: REVEAL_RISE_PX }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ y: ENTRANCE_SPRING, opacity: ENTRANCE_FADE }}\n      className={cn(\n        \"mt-6 flex flex-col gap-10\",\n        \"*:flex *:flex-col *:gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Title + optional description pair. No gap between them — the block's\n * `gap-3` only applies between this header and the card.\n */\nexport interface BasicPageHeaderProps extends Omit<\n  ComponentProps<\"div\">,\n  RevealMotionConflicts\n> {\n  /**\n   * Rise this header into place on mount — the Header flavor of `Title`'s\n   * `enter`, for a subpage title that carries a description: the pair\n   * floats up from below the departing morph word as one block. Put `enter`\n   * here and NOT on the `Title` inside. Skipped under reduced motion.\n   */\n  enter?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nfunction Header({ enter, className, ...props }: BasicPageHeaderProps) {\n  const reduceMotion = useReducedMotion();\n  if (enter && !reduceMotion) {\n    return (\n      <motion.div\n        initial={{ opacity: 0, y: REVEAL_RISE_PX }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ y: ENTRANCE_SPRING, opacity: ENTRANCE_FADE }}\n        className={cn(\"flex flex-col\", className)}\n        {...props}\n      />\n    );\n  }\n  return <div className={cn(\"flex flex-col\", className)} {...props} />;\n}\n\n/**\n * Section heading — same padding as the page title, smaller type. Hashable via\n * slug `id` (not a link).\n */\nfunction SectionTitle({\n  id,\n  className,\n  children,\n  ...props\n}: ComponentProps<\"h2\"> & { ref?: Ref<HTMLHeadingElement> }) {\n  const headingId = resolveHeadingId(id, children);\n  return (\n    <h2\n      id={headingId}\n      className={cn(\n        \"text-display-xs text-pho-primary scroll-mt-12 px-5 font-medium\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h2>\n  );\n}\n\n/**\n * Supporting copy under a section title. Same display step as the title;\n * color + normal weight keep it secondary. Always wrap with `Header`.\n */\nfunction Description({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      className={cn(\n        \"text-display-xs text-pho-description px-5 font-normal\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Optional caption below a section's `Card` (outside the card). One step\n * smaller than `Description` (`text-xs`). Not the card-internal dirty-state\n * `Footer`.\n */\nfunction SectionFooter({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      className={cn(\"text-pho-description px-5 text-xs font-normal\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface BasicPageCardProps extends ComponentProps<\"div\"> {\n  /**\n   * Glide the card's height when its content swaps — bones becoming a\n   * different number of rows, a row created or revoked, an inline state\n   * change. The height follows the content on the page spring instead of\n   * jumping. Reserve it for cards whose contents change while mounted.\n   */\n  animateHeight?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** Bordered card that stacks rows with hairline dividers. */\nfunction Card({\n  animateHeight,\n  className,\n  children,\n  ...props\n}: BasicPageCardProps) {\n  if (animateHeight) {\n    return (\n      <div\n        className={cn(BASIC_PAGE_CARD_SURFACE, \"overflow-hidden\", className)}\n        {...props}\n      >\n        <AnimatedHeight\n          transition={ENTRANCE_SPRING}\n          className={BASIC_PAGE_CARD_DIVIDERS}\n        >\n          {children}\n        </AnimatedHeight>\n      </div>\n    );\n  }\n  return (\n    <div className={cn(BASIC_PAGE_CARD, className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\n/**\n * One card row that can host subviews. Padding matches a plain row, so use it\n * for any row that may grow an `ItemPanel` — primary content goes straight in\n * as children; the panel, when present, is the last child.\n *\n * ```tsx\n * <BasicPage.Card>\n *   <BasicPage.Item>\n *     …name, meta, actions…\n *     <BasicPage.ItemPanel divided>…secret / expanded content…</BasicPage.ItemPanel>\n *   </BasicPage.Item>\n *   …later siblings (pass `divided` on the panel above)…\n * </BasicPage.Card>\n * ```\n */\nfunction Item({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return <div className={cn(BASIC_PAGE_ITEM, className)} {...props} />;\n}\n\nexport interface BasicPageItemPanelProps extends ComponentProps<\"div\"> {\n  /**\n   * Set when later card rows follow this item. The panel then renders as an\n   * inset rounded chip (keeping the card's own divider) instead of the\n   * full-bleed bottom sheet, which only reads well against the card's corner.\n   * @default false\n   */\n  divided?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Secondary strip at the end of an `Item`. When the item closes the card,\n * it's a gray sheet flush under the body, full-bleed and owning the row's\n * bottom padding, rounding only into the card's bottom corner. Pass `divided`\n * when later card rows follow — the panel becomes an inset rounded chip and\n * the card's hairline divider stays in charge. Content is already a centered\n * flex row either way.\n */\nfunction ItemPanel({\n  divided = false,\n  className,\n  ...props\n}: BasicPageItemPanelProps) {\n  return (\n    <div\n      className={cn(\n        divided ? BASIC_PAGE_ITEM_PANEL_DIVIDED : BASIC_PAGE_ITEM_PANEL,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Standalone callout. Pair with `CalloutTitle` / `CalloutDescription` (and\n * optional actions) for a featured block — e.g. an invite form. Do not wrap\n * in `Card`; this is already the outer surface.\n *\n * Pass `icon` for a decorative glyph anchored to the header block (first\n * child) — typically a Tabler outline icon. The icon is aria-hidden; keep\n * meaning in the title/description.\n */\nfunction Callout({\n  className,\n  icon,\n  children,\n  ...props\n}: ComponentProps<\"div\"> & {\n  ref?: Ref<HTMLDivElement>;\n  /** Decorative icon, top-right of the header (first child). */\n  icon?: ReactNode;\n}) {\n  // Treat boolean false (and other empty values) as absent — `icon={cond &&\n  // <Icon />}` is a common pattern and must not reserve header padding.\n  if (icon == null || icon === false || icon === true) {\n    return (\n      <div className={cn(BASIC_PAGE_CALLOUT, className)} {...props}>\n        {children}\n      </div>\n    );\n  }\n\n  const [header, ...rest] = Children.toArray(children);\n\n  return (\n    <div className={cn(BASIC_PAGE_CALLOUT, className)} {...props}>\n      <div className=\"relative\">\n        <div className=\"min-w-0 pr-16\">{header}</div>\n        <div\n          aria-hidden\n          className=\"text-pho-description pointer-events-none absolute top-1/2 right-0 size-14 -translate-y-1/2 opacity-50 [&>svg]:size-full\"\n        >\n          {icon}\n        </div>\n      </div>\n      {rest}\n    </div>\n  );\n}\n\n/** Callout heading — same type as `SectionTitle`. Hashable via slug `id`. */\nfunction CalloutTitle({\n  id,\n  className,\n  children,\n  ...props\n}: ComponentProps<\"h2\"> & { ref?: Ref<HTMLHeadingElement> }) {\n  const headingId = resolveHeadingId(id, children);\n  return (\n    <h2\n      id={headingId}\n      className={cn(\n        \"text-display-xs text-pho-primary scroll-mt-12 font-medium\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h2>\n  );\n}\n\n/** Supporting copy under a callout title. */\nfunction CalloutDescription({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      className={cn(\n        \"text-display-xs text-pho-description font-normal\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface BasicPageRowProps extends Omit<\n  ComponentProps<\"div\">,\n  \"title\"\n> {\n  /** Left-side field name. */\n  label: string;\n  /** Optional helper under the label. */\n  description?: ReactNode;\n  /** Associates the label with a control id. When omitted, the label is not a `<label>`. */\n  htmlFor?: string;\n  /**\n   * Stack the label above a full-width control instead of the default\n   * label-left / control-right layout at `sm+`. Keeps the compact `gap-3`\n   * rhythm — the default row's `justify-between` would otherwise stretch\n   * label and control apart under `min-h-[4.25rem]`.\n   */\n  stacked?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * One row: label (+ optional description) left, control right.\n * Pass `htmlFor` when the row wraps a labelled input; omit it for display/\n * action rows (avatar, danger-zone delete). Pass `stacked` for full-width\n * controls that sit under the label.\n */\nfunction Row({\n  label,\n  description,\n  htmlFor,\n  stacked = false,\n  className,\n  children,\n  ...props\n}: BasicPageRowProps) {\n  return (\n    <div\n      className={cn(\n        BASIC_PAGE_ROW,\n        stacked && \"sm:flex-col sm:items-stretch sm:justify-start sm:gap-3\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"min-w-0\">\n        {htmlFor ? (\n          <label\n            htmlFor={htmlFor}\n            className=\"text-pho-primary block text-base font-normal\"\n          >\n            {label}\n          </label>\n        ) : (\n          <p className=\"text-pho-primary text-base font-normal\">{label}</p>\n        )}\n        {description ? (\n          <p className=\"text-pho-description text-xs\">{description}</p>\n        ) : null}\n      </div>\n      <div\n        className={cn(\n          \"flex w-full min-w-0 items-center gap-2 sm:w-auto\",\n          stacked && \"sm:w-full\",\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\n/** Read-only value on the right side of a row (email, etc.). */\nfunction Value({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      className={cn(\"text-pho-description truncate text-base\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface BasicPageAlertProps extends Omit<\n  ComponentProps<\"div\">,\n  \"children\"\n> {\n  /** The caught value — a problem body, an `Error` wrapping one, or unknown. */\n  error?: unknown;\n  /** Override the derived message. */\n  children?: ReactNode;\n  /**\n   * Explicit presence override — defaults to whether there is anything to\n   * show, so the reveal plays as the mutation's error comes and goes.\n   */\n  show?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Server error under a row, still inside the card — the partial failure\n * (\"Couldn't update your name\"), rendered by `Error` from the problem body.\n * Keep it mounted and pass the mutation's error: the line reveals and\n * collapses on `Footer`'s height spring + fade. The card drops its divider\n * above the line so it reads as part of the row it belongs to. Matches card\n * horizontal padding — don't re-apply `px-5`.\n *\n * For a page that failed to load outright, swap the stack for an `ErrorView`\n * instead.\n */\nfunction Alert({\n  error,\n  show,\n  className,\n  children,\n  ...props\n}: BasicPageAlertProps) {\n  const reduceMotion = useReducedMotion();\n  const hasContent = error != null || children != null;\n  // Explicit `show` cannot force an empty animated slot — ErrorLine returns\n  // null when there is nothing to render.\n  const visible = (show ?? true) && hasContent;\n  return (\n    <AnimatePresence initial={false}>\n      {visible ? (\n        <motion.div\n          data-basic-page-alert=\"\"\n          className=\"overflow-hidden\"\n          initial={{ height: 0, opacity: 0 }}\n          animate={{ height: \"auto\", opacity: 1 }}\n          exit={{ height: 0, opacity: 0 }}\n          transition={\n            reduceMotion\n              ? { duration: 0 }\n              : { height: ENTRANCE_SPRING, opacity: ENTRANCE_FADE }\n          }\n        >\n          <ErrorLine\n            error={error}\n            className={cn(\"px-5 pb-3\", className)}\n            {...props}\n          >\n            {children}\n          </ErrorLine>\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n}\n\nexport interface BasicPageFooterProps extends ComponentProps<\"div\"> {\n  /**\n   * Animated presence for dirty-state bars: the card glides open/closed on a\n   * height spring while the content fades. Omit for a static, always-visible\n   * footer (no animation). No reveal plays on first mount — only on flips.\n   */\n  show?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Trailing bar inside a card — typically a save status + submit button that\n * appears after the form is dirty. Same horizontal/vertical padding as a row.\n * Pass `show` (instead of conditional rendering) to animate the bar in and\n * out following the onboarding card's motion language.\n */\nfunction Footer({ show, className, ...props }: BasicPageFooterProps) {\n  const reduceMotion = useReducedMotion();\n  const bar = (\n    <div\n      className={cn(\n        \"flex items-center justify-between gap-6 px-5 py-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n\n  if (show === undefined) return bar;\n\n  return (\n    <AnimatePresence initial={false}>\n      {show ? (\n        <motion.div\n          className=\"overflow-hidden\"\n          initial={{ height: 0, opacity: 0 }}\n          animate={{ height: \"auto\", opacity: 1 }}\n          exit={{ height: 0, opacity: 0 }}\n          transition={\n            reduceMotion\n              ? { duration: 0 }\n              : { height: ENTRANCE_SPRING, opacity: ENTRANCE_FADE }\n          }\n        >\n          {bar}\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n}\n\n/**\n * Rise distance for the `Reveal` entrance — small travel; the content\n * surfaces, it doesn't slide in.\n */\nconst REVEAL_RISE_PX = 12;\n\n/**\n * DOM handlers whose React signatures clash with Motion's gesture props of\n * the same name on `motion.*` elements — excluded from `Reveal`'s public API\n * (same policy as Button).\n */\ntype RevealMotionConflicts =\n  | \"onAnimationStart\"\n  | \"onAnimationEnd\"\n  | \"onAnimationIteration\"\n  | \"onDrag\"\n  | \"onDragStart\"\n  | \"onDragEnd\"\n  | \"onDragEnter\"\n  | \"onDragExit\"\n  | \"onDragLeave\"\n  | \"onDragOver\"\n  | \"onDrop\";\n\nexport interface BasicPageRevealProps extends Omit<\n  ComponentProps<\"div\">,\n  RevealMotionConflicts\n> {\n  /**\n   * Animated presence for a `Stack` block that comes and goes: keep the\n   * block mounted and drive it with `show` — it glides open and closed\n   * (height + fade) on the page spring, with the Stack's `gap-10`\n   * compensated so nothing jumps when it fully collapses. Omit `show` for\n   * the one-shot data-arrival entrance.\n   */\n  show?: boolean;\n  /**\n   * Which gap the presence variant compensates while collapsing —\n   * `\"stack\"` for a Stack block (`gap-10`), `\"block\"` for an element\n   * inside a block (`gap-3`). @default \"stack\"\n   */\n  gap?: \"stack\" | \"block\";\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Exactly one surrounding flex gap — the presence variant trades this much\n * margin against its height so neighbours glide to their final positions\n * instead of snapping by a gap when the block unmounts.\n */\nconst GAP_COMPENSATION = { stack: \"-2.5rem\", block: \"-0.75rem\" } as const;\n\n/**\n * Data-arrival entrance for regions whose shape the skeleton couldn't\n * predict — a list of unknown length, a region that depends on the data.\n * Wrap that region (keeping `Title` and 1:1 chrome outside): once the shape\n * is known it rises 12px and fades in on the Card-shell / Command spring,\n * the same physics as the `Footer` / `Alert` reveals. When the skeleton\n * mirrors the loaded layout element for element, skip the reveal — values\n * fill into a shape that never moves. The page *entrance* is separate and\n * already built into `Stack`: whatever the page first shows (including the\n * skeleton) rides that. Static under reduced motion.\n *\n * With `show`, Reveal becomes an animated-presence block instead (the\n * `Footer` grammar): a whole section of the Stack that appears or leaves at\n * runtime glides open/closed while its neighbours follow.\n */\nfunction Reveal({\n  show,\n  gap = \"stack\",\n  className,\n  ...props\n}: BasicPageRevealProps) {\n  const reduceMotion = useReducedMotion();\n\n  if (show === undefined) {\n    return (\n      <motion.div\n        initial={reduceMotion ? false : { opacity: 0, y: REVEAL_RISE_PX }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ y: ENTRANCE_SPRING, opacity: ENTRANCE_FADE }}\n        className={className}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <AnimatePresence initial={false}>\n      {show ? (\n        <motion.div\n          initial={{\n            height: 0,\n            opacity: 0,\n            marginTop: GAP_COMPENSATION[gap],\n          }}\n          animate={{ height: \"auto\", opacity: 1, marginTop: 0 }}\n          exit={{ height: 0, opacity: 0, marginTop: GAP_COMPENSATION[gap] }}\n          transition={\n            reduceMotion\n              ? { duration: 0 }\n              : {\n                  height: ENTRANCE_SPRING,\n                  marginTop: ENTRANCE_SPRING,\n                  opacity: ENTRANCE_FADE,\n                }\n          }\n          className={cn(\"overflow-hidden\", className)}\n          {...props}\n        />\n      ) : null}\n    </AnimatePresence>\n  );\n}\n\n/* ------------------------------- navigation ------------------------------ */\n\nexport interface BasicPageBackProps extends Omit<\n  ButtonLinkProps,\n  \"variant\" | \"size\" | \"shape\" | \"prefix\" | \"suffix\" | \"svgOnly\" | \"href\"\n> {\n  /** Parent destination — rendered through the host's `LinkProvider`. */\n  href: string;\n  /** Label — name the parent page. @default \"Back\" */\n  children?: ReactNode;\n  /**\n   * Shared-element key. Pair with the same `morphId` on the parent page's\n   * `Title` and the word morphs between title and back link across the\n   * navigation. Skipped under reduced motion.\n   */\n  morphId?: string;\n}\n\n/**\n * Back link for a subpage — a small ghost `ButtonLink`; place inside `Root`,\n * before `Title`. It floats in `Root`'s reserved top padding (vertically\n * centered in the 48px zone) instead of taking layout space, so `Title` sits\n * at exactly the same position whether or not a page has one.\n *\n * The offsets align the *label* glyph with the title glyph. Title text sits\n * 40px in (`px-5` root gutter + `px-5` title pad); inside a `sm` ghost button\n * the label sits 29.75px in (8px icon-side pad + 15.75px chevron, 1.125em at\n * the 14px `text-base`, + 4px gap + 2px label-span `px-0.5`) — so `left` is\n * the 10.25px difference. `top-4` centers the 32px button in the 64px\n * reserved zone. The chevron and the ghost hover pill hang in the padding —\n * the usual optical alignment for borderless controls.\n */\nfunction Back({\n  href,\n  className,\n  morphId,\n  children = \"Back\",\n  ...props\n}: BasicPageBackProps) {\n  const reduceMotion = useReducedMotion();\n  const morphing = morphId != null && !reduceMotion;\n  const flight = useMorphFlight(morphing ? morphId : undefined);\n  return (\n    <ButtonLink\n      variant=\"ghost\"\n      size=\"sm\"\n      href={href}\n      data-basic-page-back=\"\"\n      prefix={\n        morphing ? (\n          // Mirrors the slot's direct-child svg sizing — the fade wrapper\n          // sits between the slot and the icon.\n          <motion.span\n            initial={\n              flight.fly\n                ? { opacity: 0, x: MORPH_CHEVRON_RISE_X }\n                : { opacity: 0 }\n            }\n            animate={flight.fly ? { opacity: 1, x: 0 } : { opacity: 1 }}\n            transition={flight.fly ? MORPH_CHEVRON_ENTER : ENTRANCE_FADE}\n            className=\"inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0\"\n          >\n            <IconChevronLeft />\n          </motion.span>\n        ) : (\n          <IconChevronLeft />\n        )\n      }\n      className={cn(\"absolute top-4 left-[10.25px]\", className)}\n      {...props}\n    >\n      {morphing && morphId != null ? (\n        <MorphLabel\n          morphId={morphId}\n          fromClassName=\"text-pho-primary\"\n          fly={flight.fly}\n          morphRef={flight.ref}\n          fallback\n        >\n          {children}\n        </MorphLabel>\n      ) : (\n        children\n      )}\n    </ButtonLink>\n  );\n}\n\nexport interface BasicPageRowLinkProps extends Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"href\" | \"title\"\n> {\n  /** Left-side field name — plain text, or compose with a trailing badge. */\n  label: ReactNode;\n  /** Optional helper under the label. */\n  description?: ReactNode;\n  /** Optional media left of the label (e.g. project avatar). */\n  leading?: ReactNode;\n  /** Subpage destination — rendered through the host's `LinkProvider`. */\n  href: string;\n  /** Optional trailing value before the chevron (compose with `Value`). */\n  children?: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n}\n\n/**\n * A row that navigates — the whole row is one link into a subpage, with a\n * trailing chevron cue. Always horizontal: a column stack would park the\n * chevron under the label on narrow viewports. Hover lifts the row, and\n * first/last rows follow the card's corner radius.\n */\nfunction RowLink({\n  label,\n  description,\n  leading,\n  href,\n  className,\n  children,\n  ...props\n}: BasicPageRowLinkProps) {\n  const Link = useLinkComponent();\n  return (\n    <Link\n      href={href}\n      {...props}\n      className={cn(\n        // Same padding / min-height as `BASIC_PAGE_ROW`, but never `flex-col`\n        // — navigation rows keep label left and chevron right at every width.\n        \"flex min-h-[4.25rem] flex-row items-center justify-between gap-6 px-5 py-4\",\n        \"group outline-pho-brand hover:bg-pho-primary-hover cursor-pointer transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2\",\n        // Hover wash follows the card's rounding (minus the 1px border).\n        \"first:rounded-t-[calc(var(--radius-base)-1px)] last:rounded-b-[calc(var(--radius-base)-1px)]\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          \"flex min-w-0 flex-1 items-center\",\n          leading != null && \"gap-3\",\n        )}\n      >\n        {leading}\n        <div className=\"min-w-0\">\n          <div className=\"flex min-w-0 items-center gap-1\">\n            {typeof label === \"string\" || typeof label === \"number\" ? (\n              <p className=\"text-pho-primary truncate text-base font-medium\">\n                {label}\n              </p>\n            ) : (\n              label\n            )}\n          </div>\n          {description ? (\n            <div className=\"text-pho-description truncate text-xs\">\n              {description}\n            </div>\n          ) : null}\n        </div>\n      </div>\n      <div className=\"flex min-w-0 items-center justify-end gap-2\">\n        {children != null ? <div className=\"min-w-0\">{children}</div> : null}\n        <IconChevronRight\n          aria-hidden\n          className=\"text-pho-secondary group-hover:text-pho-secondary-hover size-4 shrink-0 transition-colors\"\n        />\n      </div>\n    </Link>\n  );\n}\n\n/* -------------------------------- assembly ------------------------------- */\n\n/**\n * Basic page layout. One stack, one gap rhythm — only title scale differs:\n *\n * ```tsx\n * <BasicPage.Root>\n *   <BasicPage.Title>Profile</BasicPage.Title>\n *   <BasicPage.Stack>\n *     <form>\n *       <BasicPage.Card>\n *         <BasicPage.Row label=\"Name\" htmlFor=\"first-name\">\n *           <Input id=\"first-name\" size=\"sm\" />\n *         </BasicPage.Row>\n *       </BasicPage.Card>\n *     </form>\n *     <form>\n *       <BasicPage.Header>\n *         <BasicPage.SectionTitle>Agent profile</BasicPage.SectionTitle>\n *         <BasicPage.Description>…</BasicPage.Description>\n *       </BasicPage.Header>\n *       <BasicPage.Card>…</BasicPage.Card>\n *     </form>\n *     <div>\n *       <BasicPage.SectionTitle>Danger zone</BasicPage.SectionTitle>\n *       <BasicPage.Card>\n *         <BasicPage.Row label=\"Delete account\" description=\"…\">\n *           <Button color=\"destructive\" size=\"sm\">Delete</Button>\n *         </BasicPage.Row>\n *       </BasicPage.Card>\n *     </div>\n *     <BasicPage.Callout icon={<IconMail stroke={1.25} />}>\n *       <BasicPage.Header>\n *         <BasicPage.CalloutTitle>Invitations</BasicPage.CalloutTitle>\n *         <BasicPage.CalloutDescription>…</BasicPage.CalloutDescription>\n *       </BasicPage.Header>\n *       …invite form…\n *     </BasicPage.Callout>\n *   </BasicPage.Stack>\n * </BasicPage.Root>\n * ```\n *\n * Subpage — `Back` above the title, `RowLink` rows to drill in:\n *\n * ```tsx\n * <BasicPage.Root>\n *   <BasicPage.Back href=\"/settings\">Settings</BasicPage.Back>\n *   <BasicPage.Title>Billing</BasicPage.Title>\n *   <BasicPage.Stack>\n *     <div>\n *       <BasicPage.Card>\n *         <BasicPage.RowLink label=\"Invoices\" href=\"/settings/invoices\">\n *           <BasicPage.Value>12 documents</BasicPage.Value>\n *         </BasicPage.RowLink>\n *       </BasicPage.Card>\n *     </div>\n *   </BasicPage.Stack>\n * </BasicPage.Root>\n * ```\n */\nexport const BasicPage = {\n  Root,\n  Back,\n  Title,\n  Stack,\n  Header,\n  SectionTitle,\n  Description,\n  SectionFooter,\n  Card,\n  Item,\n  ItemPanel,\n  Callout,\n  CalloutTitle,\n  CalloutDescription,\n  Row,\n  RowLink,\n  Value,\n  Alert,\n  Footer,\n  Reveal,\n};\n"],"x_google_ignoreList":[0],"mappings":"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"}

package/dist/chunks/{close-button-B8gF5UNk.js → button-X5wsWvRa.js}

@@ -1,26 +1,25 @@
 "use client";
-import { t as p } from "./cn-DTiB6ek_.js";
-import { n as Z, r as I } from "./link-provider-9TFNyDqO.js";
-import { t as k } from "./resolve-variant-CcD8iG5l.js";
+import { t as l } from "./cn-DTiB6ek_.js";
+import { n as Z, r as A } from "./link-provider-9TFNyDqO.js";
+import { t as R } from "./resolve-variant-CcD8iG5l.js";
 import { n as C } from "./spinner-Cy8bkyJf.js";
-import { t as Q } from "./IconX-pZ9vrtSr.js";
-import { isValidElement as A, useEffect as X, useMemo as J, useRef as Y, useState as $ } from "react";
-import { Fragment as z, jsx as t, jsxs as ee } from "react/jsx-runtime";
-import { motion as S, useReducedMotion as oe } from "motion/react";
-var ae = p("group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-pho-brand transition-[color,background-color,border-color,opacity,box-shadow,outline-color] duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"), L = {
+import { isValidElement as I, useEffect as Q, useMemo as J, useRef as X, useState as Y } from "react";
+import { Fragment as $, jsx as s, jsxs as z } from "react/jsx-runtime";
+import { motion as w, useReducedMotion as ee } from "motion/react";
+var oe = l("group relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-pho-brand transition-[color,background-color,border-color,opacity,box-shadow,outline-color] duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"), L = {
   sm: {
-    classes: p("gap-1 px-3.5 py-1.5 text-base font-medium data-svg-only:p-2", "has-[[data-icon=prefix]]:pl-2 has-[[data-icon=loading]]:pl-2 has-[[data-icon=suffix]]:pr-2"),
+    classes: l("gap-1 px-3.5 py-1.5 text-base font-medium data-svg-only:p-2", "has-[[data-icon=prefix]]:pl-2 has-[[data-icon=loading]]:pl-2 has-[[data-icon=suffix]]:pr-2"),
     description: "Small — compact rows, tables, and toolbars"
   },
   md: {
-    classes: p("gap-1 px-4 py-2 text-base font-medium data-svg-only:p-2.5", "has-[[data-icon=prefix]]:pl-2.5 has-[[data-icon=loading]]:pl-2.5 has-[[data-icon=suffix]]:pr-2.5"),
+    classes: l("gap-1 px-4 py-2 text-base font-medium data-svg-only:p-2.5", "has-[[data-icon=prefix]]:pl-2.5 has-[[data-icon=loading]]:pl-2.5 has-[[data-icon=suffix]]:pr-2.5"),
     description: "Medium — the default"
   },
   lg: {
-    classes: p("gap-1.5 px-5 py-2.5 text-md font-medium data-svg-only:p-3", "has-[[data-icon=prefix]]:pl-3 has-[[data-icon=loading]]:pl-3 has-[[data-icon=suffix]]:pr-3"),
+    classes: l("gap-1.5 px-5 py-2.5 text-md font-medium data-svg-only:p-3", "has-[[data-icon=prefix]]:pl-3 has-[[data-icon=loading]]:pl-3 has-[[data-icon=suffix]]:pr-3"),
     description: "Large — prominent and marketing actions"
   }
-}, re = {
+}, ae = {
   rounded: {
     classes: "rounded-full",
     description: "Pill — the default; every button on photon.codes"
@@ -33,11 +32,11 @@ var ae = p("group relative inline-flex h-max cursor-pointer items-center justify
     classes: "rounded-full",
     description: "Circular — pair with svgOnly for round icon buttons"
   }
-}, ne = "squircle", te = {
+}, re = "squircle", ne = {
   sm: "py-[4.5px] data-svg-only:p-[6.5px]",
   md: "py-[6.5px] data-svg-only:p-[8.5px]",
   lg: "py-[8.5px] data-svg-only:p-[10.5px]"
-}, Te = {
+}, Ne = {
   effect: {
     classes: "",
     description: "Default — marketing pill with same-hue outer rim and inset sheen"
@@ -54,7 +53,7 @@ var ae = p("group relative inline-flex h-max cursor-pointer items-center justify
     classes: "",
     description: "Borderless — quiet / inline action"
   }
-}, Re = {
+}, ke = {
   default: {
     classes: "",
     description: "Neutral / brand contrast"
@@ -63,10 +62,10 @@ var ae = p("group relative inline-flex h-max cursor-pointer items-center justify
     classes: "",
     description: "Destructive intent (delete, discard)"
   }
-}, se = {
+}, te = {
   effect: {
-    default: p("squircle overflow-hidden bg-pho-brand-solid text-pho-on-brand transition-none", "hover:bg-pho-brand-solid data-loading:bg-pho-brand-solid", "[--pho-rim:color-mix(in_oklab,var(--background-color-pho-brand-solid)_62%,transparent)]", "[--pho-sheen:light-dark(rgba(255,255,255,0.5),rgba(0,0,0,0.12))]", "shadow-[0_0_0_1.5px_var(--pho-rim),inset_0_0_0_1px_var(--border-color-pho-on-brand),inset_0_var(--pho-sheen-y,0px)_var(--pho-sheen-blur,5px)_var(--pho-sheen-spread,2px)_var(--pho-sheen)]"),
-    destructive: p("squircle overflow-hidden bg-pho-error-solid text-white outline-pho-error transition-none", "hover:bg-pho-error-solid data-loading:bg-pho-error-solid", "[--pho-rim:color-mix(in_oklab,var(--background-color-pho-error-solid)_62%,transparent)]", "[--pho-sheen:light-dark(rgba(255,255,255,0.45),rgba(0,0,0,0.18))]", "shadow-[0_0_0_1.5px_var(--pho-rim),inset_0_0_0_1px_oklch(1_0_0/0.2),inset_0_var(--pho-sheen-y,0px)_var(--pho-sheen-blur,5px)_var(--pho-sheen-spread,2px)_var(--pho-sheen)]")
+    default: l("squircle overflow-hidden bg-pho-brand-solid text-pho-on-brand transition-none", "hover:bg-pho-brand-solid data-loading:bg-pho-brand-solid", "[--pho-rim:color-mix(in_oklab,var(--background-color-pho-brand-solid)_62%,transparent)]", "[--pho-sheen:light-dark(rgba(255,255,255,0.5),rgba(0,0,0,0.12))]", "shadow-[0_0_0_1.5px_var(--pho-rim),inset_0_0_0_1px_var(--border-color-pho-on-brand),inset_0_var(--pho-sheen-y,0px)_var(--pho-sheen-blur,5px)_var(--pho-sheen-spread,2px)_var(--pho-sheen)]"),
+    destructive: l("squircle overflow-hidden bg-pho-error-solid text-white outline-pho-error transition-none", "hover:bg-pho-error-solid data-loading:bg-pho-error-solid", "[--pho-rim:color-mix(in_oklab,var(--background-color-pho-error-solid)_62%,transparent)]", "[--pho-sheen:light-dark(rgba(255,255,255,0.45),rgba(0,0,0,0.18))]", "shadow-[0_0_0_1.5px_var(--pho-rim),inset_0_0_0_1px_oklch(1_0_0/0.2),inset_0_var(--pho-sheen-y,0px)_var(--pho-sheen-blur,5px)_var(--pho-sheen-spread,2px)_var(--pho-sheen)]")
   },
   filled: {
     default: "bg-pho-brand-solid text-pho-on-brand hover:bg-pho-brand-solid-hover data-loading:bg-pho-brand-solid-hover",
@@ -82,22 +81,22 @@ var ae = p("group relative inline-flex h-max cursor-pointer items-center justify
   }
 };
 function F(e) {
-  const { variant: a = "effect", color: o = "default", size: r = "md", shape: n = "rounded", className: s } = e ?? {}, l = a === "effect" ? "rounded" : n, i = se[a]?.[o] ?? "";
-  return p(ae, k(re, l), l === "square" && r === "lg" && ne, k(L, r), a === "effect" && te[r], i, s);
+  const { variant: a = "effect", color: o = "default", size: r = "md", shape: n = "rounded", className: t } = e ?? {}, p = a === "effect" ? "rounded" : n, i = te[a]?.[o] ?? "";
+  return l(oe, R(ae, p), p === "square" && r === "lg" && re, R(L, r), a === "effect" && ne[r], i, t);
 }
-var ie = "transition-inherit-all pointer-events-none inline-flex shrink-0 items-center [&>svg]:size-[1.125em] [&>svg]:shrink-0";
-function w({ position: e, children: a }) {
-  return /* @__PURE__ */ t("span", {
+var se = "transition-inherit-all pointer-events-none inline-flex shrink-0 items-center [&>svg]:size-[1.125em] [&>svg]:shrink-0";
+function k({ position: e, children: a }) {
+  return /* @__PURE__ */ s("span", {
     "data-icon": e,
-    className: ie,
+    className: se,
     children: a
   });
 }
 function B(e, a) {
-  return e == null || e === !1 ? null : I(e) ? /* @__PURE__ */ t(w, {
+  return e == null || e === !1 ? null : A(e) ? /* @__PURE__ */ s(k, {
     position: a,
-    children: /* @__PURE__ */ t(e, {})
-  }) : A(e) ? /* @__PURE__ */ t(w, {
+    children: /* @__PURE__ */ s(e, {})
+  }) : I(e) ? /* @__PURE__ */ s(k, {
     position: a,
     children: e
   }) : null;
@@ -110,7 +109,7 @@ var V = {
   stiffness: 200,
   damping: 30,
   mass: 0.1
-}, le = {
+}, ie = {
   "--pho-sheen-y": "0px",
   "--pho-sheen-blur": "5px",
   "--pho-sheen-spread": "2px"
@@ -130,7 +129,7 @@ var V = {
     "--pho-sheen-blur": "14px",
     "--pho-sheen-spread": "1px"
   }
-}, de = {
+}, le = {
   sm: {
     "--pho-sheen-y": "1.5px",
     "--pho-sheen-blur": "4px",
@@ -146,7 +145,7 @@ var V = {
     "--pho-sheen-blur": "7px",
     "--pho-sheen-spread": "1px"
   }
-}, he = 0.97, ce = {
+}, he = 0.97, de = {
   sm: {
     "--pho-sheen-y": [
       "1.5px",
@@ -198,7 +197,7 @@ var V = {
       "2px"
     ]
   }
-}, ue = {
+}, ce = {
   duration: 0.6,
   delay: 0.05,
   times: [
@@ -209,21 +208,21 @@ var V = {
   ease: ["easeOut", "easeInOut"]
 };
 function M(e, a) {
-  const [o, r] = $(!1), n = Y(e), s = oe();
-  return X(() => {
-    n.current && !e && a && !s ? r(!0) : e && r(!1), n.current = e;
+  const [o, r] = Y(!1), n = X(e), t = ee();
+  return Q(() => {
+    n.current && !e && a && !t ? r(!0) : e && r(!1), n.current = e;
   }, [
     e,
     a,
-    s
+    t
   ]), {
     waking: o,
-    onWakeComplete: (l) => {
-      l === "wake" && r(!1);
+    onWakeComplete: (p) => {
+      p === "wake" && r(!1);
     }
   };
 }
-var fe = {
+var ue = {
   sm: {
     rest: {
       opacity: 0,
@@ -266,9 +265,9 @@ var fe = {
   lg: "has-[[data-icon=prefix]]:pl-5 has-[[data-icon=loading]]:pl-5 has-[[data-icon=suffix]]:pr-5"
 };
 function N({ position: e, size: a, children: o }) {
-  return /* @__PURE__ */ t(S.span, {
+  return /* @__PURE__ */ s(w.span, {
     "data-icon": e,
-    variants: fe[a],
+    variants: ue[a],
     transition: V,
     style: {
       display: "inline-flex",
@@ -282,46 +281,46 @@ function N({ position: e, size: a, children: o }) {
 }
 function O(e, a, o) {
   if (!(e == null || e === !1))
-    return I(e) ? /* @__PURE__ */ t(N, {
+    return A(e) ? /* @__PURE__ */ s(N, {
       position: a,
       size: o,
-      children: /* @__PURE__ */ t(e, {})
-    }) : A(e) ? /* @__PURE__ */ t(N, {
+      children: /* @__PURE__ */ s(e, {})
+    }) : I(e) ? /* @__PURE__ */ s(N, {
       position: a,
       size: o,
       children: e
-    }) : /* @__PURE__ */ t(N, {
+    }) : /* @__PURE__ */ s(N, {
       position: a,
       size: o,
       children: e
     });
 }
-function q({ svgOnly: e, loading: a, prefix: o, suffix: r, children: n, iconReveal: s, size: l }) {
-  if (e) return a ? /* @__PURE__ */ t(C, {}) : n;
-  const i = !!s;
-  return /* @__PURE__ */ ee(z, { children: [
-    a ? /* @__PURE__ */ t(w, {
+function H({ svgOnly: e, loading: a, prefix: o, suffix: r, children: n, iconReveal: t, size: p }) {
+  if (e) return a ? /* @__PURE__ */ s(C, {}) : n;
+  const i = !!t;
+  return /* @__PURE__ */ z($, { children: [
+    a ? /* @__PURE__ */ s(k, {
       position: "loading",
-      children: /* @__PURE__ */ t(C, {})
-    }) : i ? O(o, "prefix", l) : B(o, "prefix"),
-    n != null && n !== !1 && /* @__PURE__ */ t("span", {
+      children: /* @__PURE__ */ s(C, {})
+    }) : i ? O(o, "prefix", p) : B(o, "prefix"),
+    n != null && n !== !1 && /* @__PURE__ */ s("span", {
       "data-text": !0,
       className: "transition-inherit-all px-0.5",
       children: n
     }),
-    i ? O(r, "suffix", l) : B(r, "suffix")
+    i ? O(r, "suffix", p) : B(r, "suffix")
   ] });
 }
-function H(e, a, o) {
+function W(e, a, o) {
   const r = {
     scale: 1,
-    ...o.sheen ? le : {}
-  }, n = o.sheen ? { ...pe[e] } : {}, s = {
+    ...o.sheen ? ie : {}
+  }, n = o.sheen ? { ...pe[e] } : {}, t = {
     scale: he,
-    ...o.sheen ? de[e] : {}
-  }, l = o.sheen ? {
-    ...ce[e],
-    transition: ue
+    ...o.sheen ? le[e] : {}
+  }, p = o.sheen ? {
+    ...de[e],
+    transition: ce
   } : {};
   return o.iconReveal && (r.gap = 0, n.gap = e === "lg" ? 4 : 0), {
     initial: !1,
@@ -331,165 +330,146 @@ function H(e, a, o) {
     variants: {
       rest: r,
       hover: n,
-      press: s,
-      wake: l
+      press: t,
+      wake: p
     },
     transition: V
   };
 }
-function W({ variant: e, color: a, size: o, shape: r, loading: n, svgOnly: s, className: l }) {
-  return p(F({
+function q({ variant: e, color: a, size: o, shape: r, loading: n, svgOnly: t, className: p }) {
+  return l(F({
     variant: e,
     color: a,
     size: o,
     shape: r
-  }), n && "pointer-events-none", s && "[&>svg]:size-[1.25em] [&>svg]:shrink-0", l);
+  }), n && "pointer-events-none", t && "[&>svg]:size-[1.25em] [&>svg]:shrink-0", p);
 }
-function D({ variant: e = "effect", color: a, size: o = "md", shape: r, prefix: n, suffix: s, iconReveal: l = !1, svgOnly: i, loading: d, children: b, className: g, ref: _, ...v }) {
+function D({ variant: e = "effect", color: a, size: o = "md", shape: r, prefix: n, suffix: t, iconReveal: p = !1, svgOnly: i, loading: h, children: g, className: b, ref: _, ...v }) {
   U(i, v["aria-label"]);
-  const h = e === "effect", u = l && !i, m = !!(v.disabled || d), { waking: f, onWakeComplete: y } = M(m, h), x = W({
+  const d = e === "effect", u = p && !i, x = !!(v.disabled || h), { waking: f, onWakeComplete: y } = M(x, d), m = q({
     variant: e,
     color: a,
     size: o,
     shape: r,
-    loading: d,
+    loading: h,
     svgOnly: i,
-    className: p(u && P[o], g)
-  }), E = q({
+    className: l(u && P[o], b)
+  }), E = H({
     svgOnly: i,
-    loading: d,
+    loading: h,
     prefix: n,
-    suffix: s,
-    children: b,
+    suffix: t,
+    children: g,
     iconReveal: u,
     size: o
   });
-  return /* @__PURE__ */ t(S.button, {
+  return /* @__PURE__ */ s(w.button, {
     ref: _,
     type: "button",
-    ...H(o, m, {
-      sheen: h,
+    ...W(o, x, {
+      sheen: d,
       iconReveal: u,
       waking: f
     }),
     onAnimationComplete: y,
     ...v,
-    "aria-busy": d || void 0,
-    "data-loading": d ? "true" : void 0,
+    "aria-busy": h || void 0,
+    "data-loading": h ? "true" : void 0,
     "data-svg-only": i ? "true" : void 0,
     "data-waking": f || void 0,
-    className: x,
+    className: m,
     children: E
   });
 }
 D.displayName = "Button";
-function j({ variant: e = "effect", color: a, size: o = "md", shape: r, prefix: n, suffix: s, iconReveal: l = !1, svgOnly: i, loading: d, disabled: b, href: g, children: _, className: v, ...h }) {
-  U(i, h["aria-label"]);
-  const u = Z(), m = e === "effect", f = l && !i, y = W({
+function j({ variant: e = "effect", color: a, size: o = "md", shape: r, prefix: n, suffix: t, iconReveal: p = !1, svgOnly: i, loading: h, disabled: g, href: b, children: _, className: v, ...d }) {
+  U(i, d["aria-label"]);
+  const u = Z(), x = e === "effect", f = p && !i, y = q({
     variant: e,
     color: a,
     size: o,
     shape: r,
-    loading: d,
+    loading: h,
     svgOnly: i,
-    className: p(f && P[o], v)
-  }), x = q({
+    className: l(f && P[o], v)
+  }), m = H({
     svgOnly: i,
-    loading: d,
+    loading: h,
     prefix: n,
-    suffix: s,
+    suffix: t,
     children: _,
     iconReveal: f,
     size: o
-  }), E = J(() => S.create(u), [u]), c = !!(b || d), { waking: T, onWakeComplete: G } = M(c, m), R = {
-    ...h,
-    ...c ? {} : { href: g },
+  }), E = J(() => w.create(u), [u]), c = !!(g || h), { waking: S, onWakeComplete: G } = M(c, x), T = {
+    ...d,
+    ...c ? {} : { href: b },
     "aria-disabled": c || void 0,
-    "aria-busy": d || void 0,
-    "data-loading": d ? "true" : void 0,
+    "aria-busy": h || void 0,
+    "data-loading": h ? "true" : void 0,
     "data-svg-only": i ? "true" : void 0,
     className: y,
-    tabIndex: c ? -1 : h.tabIndex,
+    tabIndex: c ? -1 : d.tabIndex,
     onClick: c ? (K) => {
       K.preventDefault();
-    } : h.onClick
+    } : d.onClick
   };
-  return c ? /* @__PURE__ */ t("span", {
-    ...R,
-    children: x
-  }) : /* @__PURE__ */ t(E, {
-    ...H(o, c, {
-      sheen: m,
+  return c ? /* @__PURE__ */ s("span", {
+    ...T,
+    children: m
+  }) : /* @__PURE__ */ s(E, {
+    ...W(o, c, {
+      sheen: x,
       iconReveal: f,
-      waking: T
+      waking: S
     }),
     onAnimationComplete: G,
-    "data-waking": T || void 0,
-    ...R,
-    children: x
+    "data-waking": S || void 0,
+    ...T,
+    children: m
   });
 }
 j.displayName = "ButtonLink";
-var Ce = L;
-function Be(e) {
+var we = L;
+function Se(e) {
   const { size: a = "md", fullWidth: o, className: r } = e ?? {};
   return F({
     variant: "effect",
     size: a,
-    className: p(o && "w-full", r)
+    className: l(o && "w-full", r)
   });
 }
-function ve({ size: e = "md", fullWidth: a, animated: o, iconReveal: r, className: n, ...s }) {
-  return /* @__PURE__ */ t(D, {
+function fe({ size: e = "md", fullWidth: a, animated: o, iconReveal: r, className: n, ...t }) {
+  return /* @__PURE__ */ s(D, {
     variant: "effect",
     size: e,
     iconReveal: r ?? o ?? !0,
-    className: p(a && "w-full", n),
-    ...s
+    className: l(a && "w-full", n),
+    ...t
   });
 }
-ve.displayName = "EffectButton";
-function me({ size: e = "md", fullWidth: a, animated: o, iconReveal: r, className: n, ...s }) {
-  return /* @__PURE__ */ t(j, {
+fe.displayName = "EffectButton";
+function ve({ size: e = "md", fullWidth: a, animated: o, iconReveal: r, className: n, ...t }) {
+  return /* @__PURE__ */ s(j, {
     variant: "effect",
     size: e,
     iconReveal: r ?? o ?? !0,
-    className: p(a && "w-full", n),
-    ...s
-  });
-}
-me.displayName = "EffectButtonLink";
-var xe = {
-  sm: { classes: "size-9 rounded-base *:size-5" },
-  md: { classes: "size-10 rounded-base *:size-5" },
-  lg: { classes: "size-11 rounded-base *:size-6" }
-};
-function be({ size: e = "sm", label: a, className: o, ...r }) {
-  return /* @__PURE__ */ t("button", {
-    type: "button",
-    "aria-label": a || "Close",
-    ...r,
-    className: p("squircle text-pho-secondary outline-pho-brand hover:bg-pho-ghost-hover hover:text-pho-secondary-hover inline-flex cursor-pointer items-center justify-center p-2 transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", k(xe, e), o),
-    children: /* @__PURE__ */ t(Q, {
-      "aria-hidden": "true",
-      className: "transition-inherit-all shrink-0"
-    })
+    className: l(a && "w-full", n),
+    ...t
   });
 }
-be.displayName = "CloseButton";
+ve.displayName = "EffectButtonLink";
 export {
-  Te as a,
-  Ce as c,
-  F as d,
-  Be as f,
-  L as i,
+  D as a,
+  fe as c,
+  Se as d,
+  Ne as i,
   ve as l,
-  Re as n,
-  D as o,
-  re as r,
-  j as s,
-  be as t,
-  me as u
+  ae as n,
+  j as o,
+  L as r,
+  we as s,
+  ke as t,
+  F as u
 };
 
-//# sourceMappingURL=close-button-B8gF5UNk.js.map
+//# sourceMappingURL=button-X5wsWvRa.js.map