@eifi1/ui-kit 0.33.1 → 0.34.0

package/dist/components/ui.js

@@ -1,1955 +0,0 @@
-"use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext, useId, useLayoutEffect, useRef, useState } from "react";
-import { ChevronDown, Eye, EyeOff, Plus, X } from "lucide-react";
-import { cn } from "../lib/cn.js";
-import { FOCUS_RING, FOCUS_RING_WIDTH } from "./focus-ring.js";
-import { scrollIntoStrip, useStripFade } from "../lib/strip-fade.js";
-import { horizontalStep } from "../lib/direction.js";
-import { usePhoneLayout } from "../hooks/use-breakpoint.js";
-import { useLargeText } from "../hooks/use-large-text.js";
-import { Tooltip } from "./tooltip.js";
-import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels.js";
-import { pickLinkRenderer, replacingClick, routerLinkNavigation } from "./text-link.js";
-import { useCommitReason } from "./write-lock.js";
-import { mergeDescribedBy } from "./choice-parts.js";
-import {
-  CompactControlsContext,
-  DisabledReasonLine,
-  EndHintRow,
-  FieldCaption,
-  LockedReason,
-  useDisabledReasonLine,
-  useFieldHint,
-  useLockReason,
-  FLOATING_LABEL_STATIC,
-  LABEL_ABOVE_AT_LARGE,
-  LABEL_ABOVE_BOX,
-  STATIC_LABEL_TYPE
-} from "./field-parts.js";
-import { FieldLabel, FLOATING_LABEL_STATIC as FLOATING_LABEL_STATIC2, FieldHint } from "./field-parts.js";
-import { FOCUS_RING as FOCUS_RING2, FOCUS_RING_WIDTH as FOCUS_RING_WIDTH2 } from "./focus-ring.js";
-const BUTTON_BASE = cn(
-  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:shrink-0",
-  FOCUS_RING_WIDTH
-);
-const TOUCH_TARGET_LARGE = "large:min-h-[48px] large:min-w-[48px]";
-const BUTTON_SIZES = {
-  md: "gap-2 px-3 py-2 text-sm",
-  sm: "gap-1.5 px-2 py-1 text-xs"
-};
-const BUTTON_SIZES_LARGE = {
-  md: "large:min-h-[48px]",
-  sm: "large:min-h-[48px] large:py-2.5"
-};
-const HOVER_INK = "hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]";
-const buttonVariantClasses = {
-  primary: (
-    // Hovers onto `--bg-active`, not `--border` (0.33, §12.9): More contrast steps the
-    // border until it is a 3:1 LINE, and as a fill under the label that left 2.7:1.
-    "border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-primary)] hover:bg-active focus-visible:ring-[var(--brand)]"
-  ),
-  secondary: `border border-[var(--border)] bg-transparent text-[var(--text-primary)] ${HOVER_INK} focus-visible:ring-[var(--brand)]`,
-  ghost: `bg-transparent text-[var(--text-primary)] ${HOVER_INK} focus-visible:ring-[var(--brand)]`,
-  danger: "bg-[var(--danger)] text-[var(--danger-contrast)] hover:bg-[var(--danger-hover)] focus-visible:ring-[var(--danger-border-strong)]",
-  brand: "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)] focus-visible:ring-[var(--brand)]",
-  // A text link that is still a `<button>` — keksdose's six hand-rolled
-  // `<button className="text-brand underline">` sites ("Resend code", "Show all",
-  // "Undo" in a toast…), which act rather than navigate and so must not be anchors.
-  // The box padding goes (`p-0`) so it sits in a sentence at the text's own size, but
-  // the base's focus ring stays: those copies had `outline-none` and no ring, so
-  // a keyboard user tabbing onto them saw nothing at all. `rounded-sm` keeps that
-  // ring hugging the word instead of drawing a pill round it.
-  link: "rounded-sm p-0 bg-transparent text-[var(--brand)] underline-offset-4 hover:underline focus-visible:ring-[var(--brand)]"
-};
-const BUTTON_TONES = {
-  muted: "text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:hover:text-[var(--text-secondary)]",
-  danger: "text-[var(--text-secondary)] hover:text-[var(--danger)] focus-visible:ring-[var(--danger-border-strong)] disabled:hover:text-[var(--text-secondary)]"
-};
-const TONED_VARIANTS = /* @__PURE__ */ new Set(["link", "ghost"]);
-const BUTTON_BOXED_DANGER = {
-  // Not boxed, but its hover is a fill: the danger wash under the danger text, as
-  // IconButton's danger tone (0.33). On B′'s translucent ink `--danger` fell to 4.2:1
-  // over a light page.
-  ghost: "hover:bg-[var(--danger-bg)]",
-  secondary: "border-[var(--danger-border)] bg-transparent text-[var(--danger)] hover:bg-[var(--danger-bg)] focus-visible:ring-[var(--danger-border-strong)]",
-  primary: "border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)] hover:border-[var(--danger)] hover:bg-[var(--danger)] hover:text-[var(--danger-contrast)] focus-visible:ring-[var(--danger-border-strong)] disabled:hover:border-[var(--danger-border)] disabled:hover:bg-[var(--danger-bg)] disabled:hover:text-[var(--danger)]"
-};
-const BUTTON_LINK_PRESSED = "font-medium text-[var(--brand)] hover:text-[var(--brand)] disabled:hover:text-[var(--brand)]";
-function buttonClasses(variant = "primary", classNameOrOptions) {
-  const { size = "md", className } = typeof classNameOrOptions === "object" ? classNameOrOptions : { className: classNameOrOptions };
-  return cn(
-    BUTTON_BASE,
-    BUTTON_SIZES[size],
-    variant !== "link" && BUTTON_SIZES_LARGE[size],
-    buttonVariantClasses[variant],
-    className
-  );
-}
-function hasContent(node) {
-  return node !== void 0 && node !== null && node !== false && node !== "";
-}
-import {
-  CompactControls,
-  DisabledReasonLine as DisabledReasonLine2,
-  DISABLED_REASON_LINE_CLASS,
-  useDisabledReasonLine as useDisabledReasonLine2
-} from "./field-parts.js";
-function buttonLook(variant, size, stretch, tone) {
-  return cn(
-    BUTTON_BASE,
-    BUTTON_SIZES[size],
-    // §4: `sm` at `md`'s height and the 48 px target at Large — not on a `link`. In the
-    // order `buttonClasses` has it, so the two strings stay identical.
-    variant !== "link" && BUTTON_SIZES_LARGE[size],
-    // In a flex row next to a taller labelled field, `stretch` makes the button
-    // fill the field's height so the two line up (self-stretch overrides the row's
-    // align-items). No effect outside a flex row / when it's already the tallest.
-    stretch && "self-stretch",
-    buttonVariantClasses[variant],
-    tone !== "default" && TONED_VARIANTS.has(variant) && BUTTON_TONES[tone],
-    tone === "danger" && BUTTON_BOXED_DANGER[variant]
-  );
-}
-function Button(props) {
-  if (props.href !== void 0) return /* @__PURE__ */ jsx(ButtonLink, { ...props });
-  return /* @__PURE__ */ jsx(ButtonElement, { ...props });
-}
-function RenderedButtonLink({ render, ...props }) {
-  return render(props);
-}
-function ButtonLink({
-  href,
-  renderLink,
-  external,
-  replace,
-  reloadDocument,
-  disabled,
-  variant = "primary",
-  size = "md",
-  stretch,
-  tone = "default",
-  className,
-  children,
-  target,
-  rel,
-  onClick,
-  ...rest
-}) {
-  const kitLink = useKitLink();
-  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
-  const Link = reloadDocument ? void 0 : pickLinkRenderer(renderLink, kitLink, href);
-  const newTab = !disabled && (external || target === "_blank");
-  const cls = cn(
-    buttonLook(variant, size, stretch, tone),
-    // `relative` holds the sr-only note (see sr-only-containment.test).
-    newTab && "relative",
-    // BUTTON_BASE's `disabled:` classes never match an `<a>`; no pointer events also
-    // keeps the hover fill from lighting up on something that refuses the click.
-    disabled && "pointer-events-none cursor-not-allowed opacity-50",
-    className
-  );
-  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-    children,
-    newTab && " ",
-    newTab && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
-      "(",
-      common.opensInNewTab,
-      ")"
-    ] })
-  ] });
-  if (disabled) {
-    return /* @__PURE__ */ jsx("a", { ...rest, role: "link", "aria-disabled": "true", className: cls, children: body });
-  }
-  if (external || !Link) {
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        ...rest,
-        href,
-        target: external ? "_blank" : target,
-        rel: external ? rel ?? "noopener noreferrer" : rel,
-        onClick: external ? onClick : replacingClick(onClick, href, replace, target),
-        className: cls,
-        children: body
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    RenderedButtonLink,
-    {
-      render: Link,
-      ...rest,
-      ...routerLinkNavigation(replace),
-      href,
-      target,
-      rel,
-      onClick,
-      className: cls,
-      children: body
-    }
-  );
-}
-function ButtonElement({
-  variant = "primary",
-  size = "md",
-  stretch,
-  tone = "default",
-  pressed,
-  disabledReason: ownDisabledReason,
-  disabledReasonDisplay,
-  commit,
-  pending,
-  className,
-  onClick,
-  children,
-  href: _href,
-  renderLink: _renderLink,
-  external: _external,
-  replace: _replace,
-  reloadDocument: _reloadDocument,
-  ...rest
-}) {
-  const reasonId = useId();
-  const disabledReason = useCommitReason(commit, ownDisabledReason);
-  const locked = hasContent(disabledReason);
-  const inert = locked || Boolean(pending);
-  const ownDescribedBy = rest["aria-describedby"];
-  const button = /* @__PURE__ */ jsx(
-    "button",
-    {
-      ...rest,
-      disabled: inert ? void 0 : rest.disabled,
-      "aria-disabled": inert || rest["aria-disabled"],
-      "aria-busy": pending || rest["aria-busy"],
-      "aria-describedby": locked ? ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId : ownDescribedBy,
-      "aria-pressed": pressed ?? rest["aria-pressed"],
-      onClick: (e) => {
-        if (inert) {
-          e.preventDefault();
-          return;
-        }
-        onClick?.(e);
-      },
-      className: cn(
-        buttonLook(variant, size, stretch, tone),
-        pressed && (variant === "link" ? BUTTON_LINK_PRESSED : ICON_BUTTON_PRESSED),
-        // The disabled look for the focusable kind of disabled.
-        locked && "cursor-not-allowed opacity-50",
-        // No dimming while pending: the spinner IS the state, and at half opacity it
-        // would be the faintest thing on the button. `relative` anchors it.
-        pending && "relative cursor-progress",
-        className
-      ),
-      children: pending ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center gap-[inherit] opacity-0", children }),
-        /* @__PURE__ */ jsx(
-          Spinner,
-          {
-            label: null,
-            className: "absolute inset-0 m-auto size-4 border-current/30 border-t-current"
-          }
-        )
-      ] }) : children
-    }
-  );
-  if (!locked) return button;
-  return /* @__PURE__ */ jsx(
-    ReasonFrame,
-    {
-      reason: disabledReason,
-      reasonId,
-      display: disabledReasonDisplay,
-      className: stretch ? "self-stretch" : void 0,
-      children: button
-    }
-  );
-}
-function ReasonFrame({
-  reason,
-  reasonId,
-  display,
-  className,
-  side,
-  portal,
-  children
-}) {
-  const line = useDisabledReasonLine(display);
-  if (line) {
-    return /* @__PURE__ */ jsx(DisabledReasonLine, { id: reasonId, reason, className, children });
-  }
-  return /* @__PURE__ */ jsx(Tooltip, { label: reason, side, portal, className, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-    children,
-    /* @__PURE__ */ jsx("span", { id: reasonId, hidden: true, children: reason })
-  ] }) });
-}
-const ICON_BUTTON_BASE = cn(
-  "inline-flex items-center justify-center rounded-md transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed",
-  FOCUS_RING_WIDTH
-);
-const ICON_BUTTON_SIZES = {
-  // 64px with a 28px glyph: a camera's shutter (keksdose invoices/camera-capture.tsx:248,
-  // `size-16` by hand) — the one control of a full-screen capture view, thumb-sized.
-  "2xl": "size-16 [&_svg]:size-7",
-  // 48px with a 24px glyph: the one primary action of a phone screen or sheet, a step
-  // past the 44px minimum rather than on it.
-  xl: "size-12 [&_svg]:size-6",
-  // The 44px touch target (WCAG 2.5.5's size) with the same 20px glyph — keksdose's
-  // bulk-action bars write `size-11` by hand over an `md` button to get it on phones.
-  lg: "size-11 [&_svg]:size-5",
-  md: "size-9 [&_svg]:size-5",
-  sm: "size-8 [&_svg]:size-5",
-  xs: "size-7 rounded [&_svg]:size-4",
-  "2xs": "size-6 rounded [&_svg]:size-3.5"
-};
-const ICON_BUTTON_STRETCH_SIZES = {
-  "2xl": "w-16 min-h-16 self-stretch [&_svg]:size-7",
-  xl: "w-12 min-h-12 self-stretch [&_svg]:size-6",
-  lg: "w-11 min-h-11 self-stretch [&_svg]:size-5",
-  md: "w-9 min-h-9 self-stretch [&_svg]:size-5",
-  sm: "w-8 min-h-8 self-stretch [&_svg]:size-5",
-  xs: "w-7 min-h-7 self-stretch rounded [&_svg]:size-4",
-  "2xs": "w-6 min-h-6 self-stretch rounded [&_svg]:size-3.5"
-};
-const ICON_BUTTON_TEXT_SIZES = {
-  "2xl": "h-16 gap-2 px-4 text-base [&_svg]:size-7",
-  xl: "h-12 gap-2 px-3.5 text-sm [&_svg]:size-6",
-  lg: "h-11 gap-2 px-3 text-sm [&_svg]:size-5",
-  md: "h-9 gap-1.5 px-2.5 text-sm [&_svg]:size-5",
-  sm: "h-8 gap-1.5 px-2 text-sm [&_svg]:size-5",
-  xs: "h-7 gap-1 rounded px-1.5 text-xs [&_svg]:size-4",
-  "2xs": "h-6 gap-1 rounded px-1.5 text-xs [&_svg]:size-3.5"
-};
-const ICON_BUTTON_TEXT_STRETCH_SIZES = {
-  "2xl": "min-h-16 self-stretch gap-2 px-4 text-base [&_svg]:size-7",
-  xl: "min-h-12 self-stretch gap-2 px-3.5 text-sm [&_svg]:size-6",
-  lg: "min-h-11 self-stretch gap-2 px-3 text-sm [&_svg]:size-5",
-  md: "min-h-9 self-stretch gap-1.5 px-2.5 text-sm [&_svg]:size-5",
-  sm: "min-h-8 self-stretch gap-1.5 px-2 text-sm [&_svg]:size-5",
-  xs: "min-h-7 self-stretch gap-1 rounded px-1.5 text-xs [&_svg]:size-4",
-  "2xs": "min-h-6 self-stretch gap-1 rounded px-1.5 text-xs [&_svg]:size-3.5"
-};
-const ICON_BUTTON_TOUCH_LARGE = {
-  "2xl": "",
-  xl: "",
-  lg: "",
-  md: TOUCH_TARGET_LARGE,
-  sm: TOUCH_TARGET_LARGE,
-  xs: TOUCH_TARGET_LARGE,
-  "2xs": "relative large:after:absolute large:after:inset-[calc((100%-48px)/2)] large:after:content-['']"
-};
-const ICON_BUTTON_TONES = {
-  danger: {
-    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus-visible:ring-[var(--danger-border-strong)]",
-    toned: "text-[var(--danger)] hover:bg-[var(--danger-bg)] focus-visible:ring-[var(--danger-border-strong)]"
-  },
-  warning: {
-    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--warning-bg)] hover:text-[var(--warning)] focus-visible:ring-warning-strong",
-    // The ring is warning's loud line (0.33, k27): `--warning-border`, amber-300, was a
-    // focus ring at 1.1:1 on the light surfaces.
-    toned: "text-[var(--warning)] hover:bg-[var(--warning-bg)] focus-visible:ring-warning-strong"
-  },
-  info: {
-    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--info-bg)] hover:text-[var(--info)] focus-visible:ring-[var(--info-border)]",
-    toned: "text-[var(--info)] hover:bg-[var(--info-bg)] focus-visible:ring-[var(--info-border)]"
-  },
-  success: {
-    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--success-bg)] hover:text-[var(--success)] focus-visible:ring-[var(--success-border)]",
-    toned: "text-[var(--success)] hover:bg-[var(--success-bg)] focus-visible:ring-[var(--success-border)]"
-  },
-  // The hover fill and the ring are MIXED from the one colour, since a custom tone
-  // brings no `-bg` / `-border` pair of its own. The fallback is the body colour, so a
-  // `custom` tone with no colour set is the default look rather than invisible.
-  custom: {
-    quiet: "text-[var(--text-placeholder)] hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] hover:text-[var(--icon-button-tone,var(--text-primary))] focus-visible:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]",
-    toned: "text-[var(--icon-button-tone,var(--text-primary))] hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] focus-visible:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]"
-  }
-};
-const ICON_BUTTON_MUTED = `text-[var(--text-placeholder)] ${HOVER_INK} hover:text-[var(--text-primary)]`;
-const QUIET_BY_DEFAULT = {
-  danger: true,
-  warning: false,
-  info: false,
-  success: false,
-  custom: false
-};
-function iconButtonToneClass(tone, quiet) {
-  if (tone === "default") return "";
-  if (tone === "muted") return cn(ICON_BUTTON_MUTED, ICON_BUTTON_QUIET_DISABLED_REST);
-  const isQuiet = quiet ?? QUIET_BY_DEFAULT[tone];
-  const look = ICON_BUTTON_TONES[tone];
-  return isQuiet ? cn(look.quiet, ICON_BUTTON_QUIET_DISABLED_REST) : look.toned;
-}
-const ICON_BUTTON_DISABLED_REST = {
-  primary: "disabled:hover:bg-[var(--bg-surface-2)]",
-  secondary: "disabled:hover:bg-transparent",
-  ghost: "disabled:hover:bg-transparent",
-  danger: "disabled:hover:bg-[var(--danger)]",
-  brand: "disabled:hover:bg-[var(--brand)]",
-  link: "disabled:hover:bg-transparent disabled:hover:no-underline",
-  overlay: "disabled:hover:bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)]",
-  shutter: "disabled:hover:bg-[var(--media-scrim)]"
-};
-const ICON_BUTTON_QUIET_DISABLED_REST = "disabled:hover:text-[var(--text-placeholder)]";
-const ICON_BUTTON_PRESSED = "bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)] hover:text-brand-muted disabled:hover:bg-[var(--brand-bg)] disabled:hover:text-[var(--brand)]";
-const ICON_BUTTON_OVERLAY = "rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)] text-[var(--text-inverse)] backdrop-blur-sm hover:bg-[color-mix(in_srgb,var(--bg-inverse)_75%,transparent)] focus-visible:ring-[var(--text-inverse)]";
-const ICON_BUTTON_SHUTTER = "rounded-full border-4 border-[var(--media-ink)] bg-[var(--media-scrim)] text-[var(--media-ink)] backdrop-blur-sm hover:bg-[var(--media-scrim-hover)] focus-visible:ring-[var(--media-ink)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--media-scrim-hover)]";
-const ICON_BUTTON_GLYPH_SIZES = {
-  12: "[&_svg]:size-3",
-  14: "[&_svg]:size-3.5",
-  16: "[&_svg]:size-4",
-  20: "[&_svg]:size-5",
-  24: "[&_svg]:size-6",
-  28: "[&_svg]:size-7"
-};
-const ICON_BUTTON_SPINNER = {
-  "2xl": "size-7",
-  xl: "size-6",
-  lg: "size-5",
-  md: "size-5",
-  sm: "size-5",
-  xs: "size-4",
-  "2xs": "size-3.5"
-};
-const ICON_BUTTON_SPINNER_GLYPH = {
-  12: "size-3",
-  14: "size-3.5",
-  16: "size-4",
-  20: "size-5",
-  24: "size-6",
-  28: "size-7"
-};
-function useIconButtonText(label, labelVisible, variant, tooltip) {
-  const large = useLargeText();
-  const compact = useContext(CompactControlsContext);
-  if (!large || label === void 0 || label === "" || !tooltip) return false;
-  const visible = labelVisible ?? (!compact && variant !== "overlay" && variant !== "shutter");
-  return visible;
-}
-function IconButtonText({ label }) {
-  return /* @__PURE__ */ jsx("span", { "data-slot": "icon-button-label", children: label });
-}
-const ICON_BUTTON_TONE_PAIR = "[--icon-button-tone:var(--icon-button-tone-light)] dark:[--icon-button-tone:var(--icon-button-tone-dark)]";
-function toneColorStyle(toneColor, style) {
-  if (toneColor === void 0) return style;
-  const vars = typeof toneColor === "string" ? { "--icon-button-tone": toneColor } : { "--icon-button-tone-light": toneColor.light, "--icon-button-tone-dark": toneColor.dark };
-  return { ...style, ...vars };
-}
-function iconButtonLook({
-  variant,
-  size,
-  stretch,
-  glyphSize,
-  shape,
-  tone,
-  quiet,
-  toneColor,
-  withText = false
-}) {
-  return cn(
-    ICON_BUTTON_BASE,
-    withText ? cn("font-medium whitespace-nowrap", stretch ? ICON_BUTTON_TEXT_STRETCH_SIZES[size] : ICON_BUTTON_TEXT_SIZES[size]) : stretch ? ICON_BUTTON_STRETCH_SIZES[size] : ICON_BUTTON_SIZES[size],
-    // With text the pill is a 48 px target at any size; the square follows its size.
-    withText ? TOUCH_TARGET_LARGE : ICON_BUTTON_TOUCH_LARGE[size],
-    glyphSize !== void 0 && ICON_BUTTON_GLYPH_SIZES[glyphSize],
-    // After the size, so the overlay's `rounded-full` beats the small sizes' `rounded`.
-    variant === "overlay" ? ICON_BUTTON_OVERLAY : variant === "shutter" ? ICON_BUTTON_SHUTTER : buttonVariantClasses[variant],
-    shape === "round" && "rounded-full",
-    ICON_BUTTON_DISABLED_REST[variant],
-    iconButtonToneClass(tone, quiet),
-    toneColor !== void 0 && typeof toneColor !== "string" && ICON_BUTTON_TONE_PAIR
-  );
-}
-function withIconButtonBadge(control, badge, stretch) {
-  if (!hasContent(badge)) return control;
-  return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", stretch && "self-stretch"), children: [
-    control,
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        "aria-hidden": true,
-        "data-slot": "icon-button-badge",
-        className: "pointer-events-none absolute -end-0.5 -bottom-0.5 inline-flex rounded-full bg-[var(--bg-surface)] [&_svg]:size-3",
-        children: badge
-      }
-    )
-  ] });
-}
-function IconButton(props) {
-  if (props.href !== void 0) return /* @__PURE__ */ jsx(IconButtonLink, { ...props });
-  return /* @__PURE__ */ jsx(IconButtonElement, { ...props });
-}
-IconButton.displayName = "IconButton";
-function IconButtonLink({
-  href,
-  renderLink,
-  external,
-  replace,
-  reloadDocument,
-  disabled,
-  variant = "ghost",
-  size = "md",
-  tone: toneProp,
-  quiet,
-  stopPropagation,
-  stretch,
-  shape = "square",
-  toneColor,
-  label,
-  labelVisible,
-  tooltip = true,
-  tooltipSide,
-  tooltipPortal,
-  tooltipLazy = true,
-  glyphSize,
-  badge,
-  className,
-  style,
-  target,
-  rel,
-  onClick,
-  onKeyDown,
-  children: glyph,
-  ref,
-  ...rest
-}) {
-  const withText = useIconButtonText(label, labelVisible, variant, tooltip);
-  const children = withText ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    glyph,
-    /* @__PURE__ */ jsx(IconButtonText, { label })
-  ] }) : glyph;
-  const kitLink = useKitLink();
-  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
-  const tone = toneProp ?? (toneColor !== void 0 ? "custom" : "default");
-  const Link = reloadDocument ? void 0 : pickLinkRenderer(renderLink, kitLink, href);
-  const newTab = !disabled && (external || target === "_blank");
-  const name = rest["aria-label"] ?? label;
-  const ariaLabel = name !== void 0 && newTab ? `${name} (${common.opensInNewTab})` : name;
-  const handleClick = (e) => {
-    if (stopPropagation) e.stopPropagation();
-    onClick?.(e);
-  };
-  const handleKeyDown = (e) => {
-    if (stopPropagation && e.key === "Enter") e.stopPropagation();
-    onKeyDown?.(e);
-  };
-  const cls = cn(
-    iconButtonLook({ variant, size, stretch, glyphSize, shape, tone, quiet, toneColor, withText }),
-    // BASE's `disabled:` classes never match an `<a>` — Button's disabled link look.
-    disabled && "pointer-events-none cursor-not-allowed opacity-50",
-    className
-  );
-  const look = { style: toneColorStyle(toneColor, style), className: cls };
-  let control;
-  if (disabled) {
-    control = /* @__PURE__ */ jsx("a", { ...rest, ...look, ref, role: "link", "aria-disabled": "true", "aria-label": ariaLabel, children });
-  } else if (external || !Link) {
-    control = /* @__PURE__ */ jsx(
-      "a",
-      {
-        ...rest,
-        ...look,
-        ref,
-        href,
-        "aria-label": ariaLabel,
-        target: external ? "_blank" : target,
-        rel: external ? rel ?? "noopener noreferrer" : rel,
-        onClick: external ? handleClick : replacingClick(handleClick, href, replace, target),
-        onKeyDown: handleKeyDown,
-        children
-      }
-    );
-  } else {
-    control = /* @__PURE__ */ jsx(
-      RenderedButtonLink,
-      {
-        render: Link,
-        ...rest,
-        ...look,
-        ...routerLinkNavigation(replace),
-        ref,
-        href,
-        "aria-label": ariaLabel,
-        target,
-        rel,
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        children
-      }
-    );
-  }
-  control = withIconButtonBadge(control, badge, stretch);
-  if (!tooltip || withText || label === void 0 || label === "") return control;
-  return (
-    // A fragment, as on the button: the bubble says what `aria-label` already does.
-    /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        label,
-        side: tooltipSide,
-        portal: tooltipPortal,
-        lazy: tooltipLazy,
-        className: stretch ? "self-stretch" : void 0,
-        children: /* @__PURE__ */ jsx(Fragment, { children: control })
-      }
-    )
-  );
-}
-function IconButtonElement({
-  variant = "ghost",
-  size = "md",
-  tone: toneProp,
-  quiet,
-  pressed,
-  stopPropagation,
-  stretch,
-  shape = "square",
-  toneColor,
-  label,
-  labelVisible,
-  tooltip = true,
-  tooltipSide,
-  tooltipPortal,
-  tooltipLazy = true,
-  disabledReason: ownDisabledReason,
-  disabledReasonDisplay,
-  commit,
-  pending,
-  glyphSize,
-  badge,
-  disabledStyle = "dim",
-  className,
-  style,
-  onClick,
-  onKeyDown,
-  children,
-  href: _href,
-  renderLink: _renderLink,
-  external: _external,
-  replace: _replace,
-  reloadDocument: _reloadDocument,
-  ref,
-  ...rest
-}) {
-  const tone = toneProp ?? (toneColor !== void 0 ? "custom" : "default");
-  const keep = disabledStyle === "keep";
-  const withText = useIconButtonText(label, labelVisible, variant, tooltip);
-  const reasonId = useId();
-  const disabledReason = useCommitReason(commit, ownDisabledReason);
-  const locked = hasContent(disabledReason);
-  const inert = locked || Boolean(pending);
-  const ownDescribedBy = rest["aria-describedby"];
-  const button = /* @__PURE__ */ jsxs(
-    "button",
-    {
-      ref,
-      ...rest,
-      disabled: inert ? void 0 : rest.disabled,
-      "aria-disabled": inert || rest["aria-disabled"],
-      "aria-busy": pending || rest["aria-busy"],
-      "aria-describedby": locked ? ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId : ownDescribedBy,
-      "aria-label": rest["aria-label"] ?? label,
-      "aria-pressed": pressed ?? rest["aria-pressed"],
-      style: toneColorStyle(toneColor, style),
-      onClick: (e) => {
-        if (stopPropagation) e.stopPropagation();
-        if (inert) {
-          e.preventDefault();
-          return;
-        }
-        onClick?.(e);
-      },
-      onKeyDown: (e) => {
-        if (stopPropagation && (e.key === "Enter" || e.key === " ")) e.stopPropagation();
-        onKeyDown?.(e);
-      },
-      className: cn(
-        iconButtonLook({ variant, size, stretch, glyphSize, shape, tone, quiet, toneColor, withText }),
-        pressed && ICON_BUTTON_PRESSED,
-        // The disabled look for the focusable kind of disabled, as on Button.
-        locked && (keep ? "cursor-default" : "cursor-not-allowed opacity-50"),
-        keep && "disabled:cursor-default disabled:opacity-100",
-        pending && "cursor-progress",
-        className
-      ),
-      children: [
-        pending ? (
-          // Decorative, as on Button: `aria-busy` says it. Sized to the glyph it stands
-          // in for, in the glyph's colour, so the swap does not change the button's look.
-          /* @__PURE__ */ jsx(
-            Spinner,
-            {
-              label: null,
-              className: cn(
-                "border-current/30 border-t-current",
-                glyphSize !== void 0 ? ICON_BUTTON_SPINNER_GLYPH[glyphSize] : ICON_BUTTON_SPINNER[size]
-              )
-            }
-          )
-        ) : children,
-        withText && /* @__PURE__ */ jsx(IconButtonText, { label })
-      ]
-    }
-  );
-  const control = withIconButtonBadge(button, badge, stretch);
-  if (locked) {
-    return (
-      // Button's shape: the reason as a line under it, or the bubble with a hidden copy
-      // for the description (see ReasonFrame).
-      /* @__PURE__ */ jsx(
-        ReasonFrame,
-        {
-          reason: disabledReason,
-          reasonId,
-          display: disabledReasonDisplay,
-          side: tooltipSide,
-          portal: tooltipPortal,
-          className: stretch ? "self-stretch" : void 0,
-          children: control
-        }
-      )
-    );
-  }
-  if (!tooltip || withText || label === void 0 || label === "") return control;
-  return (
-    // A fragment, so Tooltip leaves the button's description alone: the bubble says
-    // exactly what `aria-label` already does. Lazy by default — see `tooltipLazy`.
-    /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        label,
-        side: tooltipSide,
-        portal: tooltipPortal,
-        lazy: tooltipLazy,
-        className: stretch ? "self-stretch" : void 0,
-        children: /* @__PURE__ */ jsx(Fragment, { children: control })
-      }
-    )
-  );
-}
-const FIELD_TOUCH_TEXT = "pointer-coarse:text-[length:max(0.875rem,16px)]";
-const FIELD_BASE = "block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-3 py-2 text-sm text-[var(--text-primary)] shadow-sm placeholder:text-[var(--text-placeholder)] focus:border-[var(--brand)] focus:ring-[var(--brand)] " + // §10.1: at least 16 px on a touch screen, or iOS zooms the page on focus.
-FIELD_TOUCH_TEXT + " disabled:cursor-default disabled:bg-[var(--bg-surface-2)] disabled:text-[var(--text-muted)] [&[readonly]]:bg-[var(--bg-surface-2)] [&[readonly]]:text-[var(--text-muted)]";
-const FIELD_WRITABLE_LOOK = "[&[readonly]]:bg-[var(--bg-surface)] [&[readonly]]:text-[var(--text-primary)]";
-const FIELD_FLOATING_PAD = "pt-4 pb-1 large:py-2";
-const FIELD_INVALID = "border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] focus:border-[var(--danger)] focus:ring-[var(--danger)]";
-const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, "peer placeholder:text-transparent");
-const PHONE_QUERY = "(max-width: 767px)";
-const FIELD_DISPLAY = "block w-full border-x-0 border-t-0 border-b border-[var(--border)] bg-transparent px-0 pt-0 pb-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:border-[var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60";
-const FIELD_TRIGGER = cn(
-  FIELD_BASE,
-  "relative flex items-center justify-between gap-2 text-start hover:bg-[var(--bg-hover)]",
-  "[&>:first-child]:min-h-[1lh]"
-);
-function FieldChevron({ className, ...rest }) {
-  return /* @__PURE__ */ jsx(
-    ChevronDown,
-    {
-      ...rest,
-      "aria-hidden": true,
-      className: cn(
-        "pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
-        className
-      )
-    }
-  );
-}
-const LABEL_FLOATED_AT_LARGE = "large:text-caption large:leading-tight large:text-secondary large:transition-none";
-const FLOATING_LABEL_CLASS = cn(
-  "pointer-events-none absolute start-3 top-2.5 text-sm text-[var(--text-placeholder)] transition-all",
-  "max-w-[calc(100%-1.5rem)] truncate-until-large",
-  "peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-[var(--text-secondary)]",
-  "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-[var(--text-secondary)]",
-  "peer-disabled:opacity-50",
-  LABEL_ABOVE_AT_LARGE,
-  "large:block",
-  LABEL_FLOATED_AT_LARGE
-);
-const FLOATING_ROW_CLASS = cn(
-  "pointer-events-none absolute start-3 top-2.5 flex items-center gap-1 transition-all",
-  "max-w-[calc(100%-3rem)] text-sm text-[var(--text-placeholder)]",
-  "peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-[var(--text-secondary)]",
-  "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-[var(--text-secondary)]",
-  "peer-disabled:opacity-50",
-  LABEL_ABOVE_AT_LARGE,
-  LABEL_FLOATED_AT_LARGE
-);
-const STATIC_ROW_CLASS = cn("pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1", LABEL_ABOVE_AT_LARGE);
-function FloatingField({
-  className,
-  htmlFor,
-  label,
-  staticLabel,
-  srOnlyLabel,
-  hint,
-  children,
-  ...rest
-}) {
-  const withHint = hint !== void 0 && !srOnlyLabel;
-  const atEnd = withHint && staticLabel;
-  const above = label !== void 0 && !srOnlyLabel;
-  const labelEl = label !== void 0 && /* @__PURE__ */ jsx(
-    "label",
-    {
-      htmlFor,
-      "data-field-label": above && !withHint ? "" : void 0,
-      className: srOnlyLabel ? "sr-only" : atEnd ? cn("pointer-events-none min-w-0 truncate-until-large", STATIC_LABEL_TYPE) : withHint ? "pointer-events-none min-w-0 truncate-until-large" : staticLabel ? FLOATING_LABEL_STATIC : FLOATING_LABEL_CLASS,
-      children: label
-    }
-  );
-  return (
-    // `relative` is the whole contract of this wrapper — the floating label and every
-    // control that hangs off it (a reveal toggle, a chevron) are positioned against
-    // this box — so it is merged through `cn` after the spread rather than left where
-    // a caller's stray `className` or `style` could unset it. At Large, with a label
-    // above, a grid: the label's row over the field's, the field's parts in the latter.
-    /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative", above && LABEL_ABOVE_BOX, className), children: [
-      children,
-      withHint ? (
-        // Static: `inset-x-3` rather than `start-3`, so a long label truncates at
-        // the field's own end padding instead of running under the chevron.
-        // Animated: the row floats with the label and is only as wide as it needs
-        // to be. Either way the hint keeps its width (`shrink-0`) and the label
-        // is the one that gives way.
-        /* @__PURE__ */ jsxs("div", { "data-field-label": "", className: atEnd ? STATIC_ROW_CLASS : FLOATING_ROW_CLASS, children: [
-          labelEl,
-          /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
-        ] })
-      ) : labelEl
-    ] })
-  );
-}
-function Label({ required, size = "md", disabled, className, children, ...rest }) {
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      ...rest,
-      className: cn(
-        "inline-flex items-center gap-0.5 font-medium leading-none text-[var(--text-primary)]",
-        size === "sm" ? "text-xs" : "text-sm",
-        disabled && "cursor-default opacity-50",
-        className
-      ),
-      children: [
-        children,
-        required && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[var(--danger)]", children: "*" })
-      ]
-    }
-  );
-}
-const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
-function useFieldError(error, invalid, describedBy, ariaInvalid) {
-  const errorId = useId();
-  const hasError = error !== void 0 && error !== null && error !== false && error !== "";
-  return {
-    /** A field carrying a message that says what is wrong with it IS wrong. */
-    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === "true",
-    describedBy: hasError ? describedBy ? `${describedBy} ${errorId}` : errorId : describedBy,
-    errorEl: hasError ? /* @__PURE__ */ jsx("p", { id: errorId, className: FIELD_ERROR_CLASS, children: error }) : null
-  };
-}
-function FieldGroup({
-  errorEl,
-  reserve = false,
-  children
-}) {
-  if (errorEl === null && !reserve) return /* @__PURE__ */ jsx(Fragment, { children });
-  return /* @__PURE__ */ jsxs("div", { children: [
-    children,
-    errorEl
-  ] });
-}
-const DEFAULT_PASSWORD_REVEAL_LABELS = {
-  show: "Show password",
-  hide: "Hide password"
-};
-function resolvePasswordRevealLabels(partial) {
-  if (!partial) return DEFAULT_PASSWORD_REVEAL_LABELS;
-  return { ...DEFAULT_PASSWORD_REVEAL_LABELS, ...partial };
-}
-const DEFAULT_CHARACTER_COUNT_LABELS = {
-  count: (used, max) => `${used} of ${max} characters`,
-  remaining: (left) => left === 1 ? "1 character left" : `${left} characters left`,
-  limitReached: "Character limit reached"
-};
-function textLength(value) {
-  return value === void 0 || value === null ? 0 : String(value).length;
-}
-function useTypedLength(value, defaultValue) {
-  const [typed, setTyped] = useState(() => textLength(defaultValue));
-  return { used: value !== void 0 ? textLength(value) : typed, track: (text) => setTyped(text.length) };
-}
-function nearLimitAt(max) {
-  return Math.min(20, Math.max(1, Math.ceil(max * 0.1)));
-}
-function countZone(used, max) {
-  if (used >= max) return "limit";
-  return max - used <= nearLimitAt(max) ? "near" : "ok";
-}
-function CharacterCount({
-  id,
-  used,
-  max,
-  labels,
-  caption
-}) {
-  const zone = countZone(used, max);
-  const [said, setSaid] = useState({ zone, text: "" });
-  if (said.zone !== zone) {
-    setSaid({
-      zone,
-      text: zone === "near" ? labels.remaining(max - used) : zone === "limit" ? labels.limitReached : ""
-    });
-  }
-  return (
-    // `relative` holds the sr-only region (see sr-only-containment.test).
-    /* @__PURE__ */ jsxs("div", { className: "relative mt-1 flex items-start gap-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: caption }),
-      /* @__PURE__ */ jsxs(
-        "span",
-        {
-          "aria-hidden": true,
-          className: cn(
-            "shrink-0 text-caption leading-tight tabular-nums",
-            zone === "limit" ? "text-[var(--danger)]" : zone === "near" ? "text-[var(--warning)]" : "text-[var(--text-muted)]"
-          ),
-          children: [
-            used,
-            "/",
-            max
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { id, hidden: true, children: labels.count(used, max) }),
-      /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: said.text })
-    ] })
-  );
-}
-function fieldBelow(hint, counter, errorEl) {
-  if (counter === null && hint.captionText === void 0 && errorEl === null) return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    counter ?? /* @__PURE__ */ jsx(FieldCaption, { parts: hint }),
-    errorEl
-  ] });
-}
-const FLOATING_PLACEHOLDER_ON_FOCUS = "focus:placeholder:text-[var(--text-placeholder)]";
-const hasPlaceholderText = (placeholder) => placeholder !== void 0 && placeholder.trim() !== "";
-const PICKER_TYPES = /* @__PURE__ */ new Set(["date", "datetime-local", "month", "time", "week"]);
-function useCharacterCountLabels(prop) {
-  return useKitLabels("characterCount", DEFAULT_CHARACTER_COUNT_LABELS, prop);
-}
-const Input = forwardRef(function Input2(props, ref) {
-  const {
-    className,
-    inputClassName,
-    label,
-    id,
-    placeholder,
-    type,
-    variant = "field",
-    invalid,
-    error,
-    hint,
-    showCount,
-    countLabels,
-    passwordLabels,
-    ...rest
-  } = props;
-  const reserve = "error" in props || "hint" in props || "showCount" in props;
-  const generated = useId();
-  const fieldId = id ?? generated;
-  const countId = useId();
-  const hintParts = useFieldHint(hint, rest["aria-describedby"]);
-  const maxLength = rest.maxLength;
-  const counting = Boolean(showCount) && typeof maxLength === "number" && maxLength > 0;
-  const length = useTypedLength(rest.value, rest.defaultValue);
-  const countText = useCharacterCountLabels(countLabels);
-  const { isInvalid, describedBy, errorEl } = useFieldError(
-    error,
-    invalid,
-    // Caller's, caption, count — then the error, appended by the hook.
-    mergeDescribedBy(hintParts.describedBy, counting && countId),
-    rest["aria-invalid"]
-  );
-  const counter = counting ? /* @__PURE__ */ jsx(
-    CharacterCount,
-    {
-      id: countId,
-      used: length.used,
-      max: maxLength,
-      labels: countText,
-      caption: /* @__PURE__ */ jsx(FieldCaption, { parts: hintParts, className: "mt-0" })
-    }
-  ) : null;
-  const below = fieldBelow(hintParts, counter, errorEl);
-  const onChange = counting ? (e) => {
-    length.track(e.target.value);
-    rest.onChange?.(e);
-  } : rest.onChange;
-  const asDisplay = usePhoneLayout() && variant === "display";
-  const isPassword = type === "password";
-  const [revealed, setRevealed] = useState(false);
-  const effectiveType = isPassword && revealed ? "text" : type;
-  const handleClick = PICKER_TYPES.has(type ?? "") ? (e) => {
-    rest.onClick?.(e);
-    try {
-      e.currentTarget.showPicker?.();
-    } catch {
-    }
-  } : rest.onClick;
-  const passwordText = useKitLabels("passwordReveal", DEFAULT_PASSWORD_REVEAL_LABELS, passwordLabels);
-  const revealToggle = isPassword ? /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: () => setRevealed((v) => !v),
-      disabled: rest.disabled,
-      "aria-label": revealed ? passwordText.hide : passwordText.show,
-      "aria-pressed": revealed,
-      className: cn(
-        "absolute inset-y-0 end-0 flex items-center rounded-e-md px-2.5 text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)] focus:outline-none disabled:cursor-default disabled:opacity-50",
-        FOCUS_RING
-      ),
-      children: revealed ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4" })
-    }
-  ) : null;
-  if (label === void 0) {
-    const endHint = hintParts.labelHint;
-    const ownClass = endHint === void 0 ? className : void 0;
-    if (!isPassword) {
-      return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsx(EndHintRow, { hint: endHint, className, children: /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref,
-          id,
-          type,
-          placeholder,
-          ...rest,
-          "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
-          "aria-describedby": describedBy,
-          onClick: handleClick,
-          onChange,
-          className: cn(FIELD_BASE, ownClass, inputClassName, isInvalid && FIELD_INVALID)
-        }
-      ) }) });
-    }
-    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsx(EndHintRow, { hint: endHint, className, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", ownClass), children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref,
-          id,
-          type: effectiveType,
-          placeholder,
-          ...rest,
-          "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
-          "aria-describedby": describedBy,
-          onChange,
-          className: cn(FIELD_BASE, "pe-9", inputClassName, isInvalid && FIELD_INVALID)
-        }
-      ),
-      revealToggle
-    ] }) }) });
-  }
-  const ownPlaceholder = hasPlaceholderText(placeholder);
-  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsxs(
-    FloatingField,
-    {
-      className,
-      htmlFor: fieldId,
-      label,
-      srOnlyLabel: asDisplay,
-      hint: hintParts.labelHint,
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref,
-            id: fieldId,
-            type: effectiveType,
-            placeholder: asDisplay ? placeholder ?? (typeof label === "string" ? label : " ") : ownPlaceholder ? placeholder : " ",
-            ...rest,
-            "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
-            "aria-describedby": describedBy,
-            onClick: handleClick,
-            onChange,
-            className: cn(
-              asDisplay ? cn(FIELD_DISPLAY, "text-xl font-semibold leading-snug") : cn(FLOATING_INPUT_CLASS, ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS),
-              isPassword && "pe-9",
-              inputClassName,
-              isInvalid && FIELD_INVALID
-            )
-          }
-        ),
-        revealToggle
-      ]
-    }
-  ) });
-});
-Input.displayName = "Input";
-const SELECT_SM = "h-7 py-0 ps-2 pe-7 text-xs";
-const LOCKED_SELECT_KEYS = /* @__PURE__ */ new Set(["Tab", "Escape", "Shift"]);
-const FIELD_LOCKED = "cursor-not-allowed bg-[var(--bg-surface-2)] text-[var(--text-muted)]";
-const Select = forwardRef(function Select2(props, ref) {
-  const {
-    className,
-    label,
-    id,
-    children,
-    invalid,
-    error,
-    hint,
-    size,
-    selectClassName,
-    disabledReason,
-    commit,
-    onMouseDown,
-    onKeyDown,
-    onChange,
-    ...rest
-  } = props;
-  const reserve = "error" in props || "hint" in props || "showCount" in props;
-  const generated = useId();
-  const lock = useLockReason(commit, disabledReason);
-  const locked = lock.locked;
-  const nativeSize = typeof size === "number" ? size : void 0;
-  const listBox = nativeSize !== void 0 && nativeSize > 1 || Boolean(rest.multiple);
-  const small = size === "sm" && label === void 0;
-  const fieldId = id ?? generated;
-  const hintId = useId();
-  const textHint = typeof hint === "string" && hint !== "" || typeof hint === "number";
-  const { isInvalid, describedBy, errorEl } = useFieldError(
-    error,
-    invalid,
-    // The caption goes in BEFORE the error — the standing advice first, the news
-    // second, the order useFieldError keeps for a caller's own description. A lock's
-    // reason sits between the two.
-    mergeDescribedBy(rest["aria-describedby"], textHint && hintId, locked && lock.reasonId),
-    rest["aria-invalid"]
-  );
-  const below = textHint || errorEl !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    textHint && /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1 text-caption leading-tight text-[var(--text-muted)]", children: hint }),
-    errorEl
-  ] }) : null;
-  const chevron = rest.disabled || listBox || locked ? null : /* @__PURE__ */ jsx(FieldChevron, { className: small ? "end-1.5 size-3.5" : void 0 });
-  const dress = listBox ? "overflow-y-auto [&_option]:py-1" : "appearance-none pe-9";
-  const interaction = locked ? {
-    disabled: void 0,
-    "aria-disabled": true,
-    onMouseDown: (e) => e.preventDefault(),
-    onKeyDown: (e) => {
-      if (!LOCKED_SELECT_KEYS.has(e.key) && !e.ctrlKey && !e.metaKey) e.preventDefault();
-    },
-    onChange: () => {
-    }
-  } : { onMouseDown, onKeyDown, onChange };
-  const boxClass = locked ? void 0 : className;
-  const withReason = (box) => locked ? /* @__PURE__ */ jsx(LockedReason, { lock, className: cn("block", className), children: box }) : box;
-  if (label === void 0) {
-    const select = /* @__PURE__ */ jsx(
-      "select",
-      {
-        ref,
-        id,
-        size: nativeSize,
-        ...rest,
-        ...interaction,
-        "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
-        "aria-describedby": describedBy,
-        className: cn(
-          FIELD_BASE,
-          dress,
-          listBox && "py-0",
-          small && SELECT_SM,
-          locked && FIELD_LOCKED,
-          selectClassName,
-          isInvalid && FIELD_INVALID
-        ),
-        children
-      }
-    );
-    if (hasContent(hint) && !textHint) {
-      return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: withReason(
-        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", boxClass), children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
-            select,
-            chevron
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: hint })
-        ] })
-      ) });
-    }
-    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: withReason(
-      /* @__PURE__ */ jsxs("div", { className: cn("relative", boxClass), children: [
-        select,
-        chevron
-      ] })
-    ) });
-  }
-  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: withReason(
-    /* @__PURE__ */ jsxs(
-      FloatingField,
-      {
-        className: boxClass,
-        htmlFor: fieldId,
-        label,
-        staticLabel: true,
-        hint: textHint ? void 0 : hint,
-        children: [
-          /* @__PURE__ */ jsx(
-            "select",
-            {
-              ref,
-              id: fieldId,
-              size: nativeSize,
-              ...rest,
-              ...interaction,
-              "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
-              "aria-describedby": describedBy,
-              className: cn(
-                FIELD_BASE,
-                // The floated label takes the top strip of a list box too, so its first
-                // row starts under the label rather than behind it. No bottom padding — see
-                // `dress`.
-                // At Large the label stands above the field (§10.17): no strip.
-                listBox ? "pt-5 pb-0 large:pt-2" : FIELD_FLOATING_PAD,
-                "peer",
-                dress,
-                locked && FIELD_LOCKED,
-                selectClassName,
-                isInvalid && FIELD_INVALID
-              ),
-              children
-            }
-          ),
-          chevron
-        ]
-      }
-    )
-  ) });
-});
-Select.displayName = "Select";
-const TEXTAREA_LABEL_EDGE = cn(
-  "after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--label-strip-edge,0px)] after:content-['']",
-  "after:bg-inherit after:[mask-image:linear-gradient(#000_var(--label-strip-edge-solid,0px),transparent)]"
-);
-const LABEL_EDGE_SOFT_PX = 3;
-function labelEdge(scrollTop, lineHeight) {
-  if (!(scrollTop > 0)) return { height: 0, solid: 0 };
-  if (!(lineHeight > 0)) return { height: Math.min(scrollTop, LABEL_EDGE_SOFT_PX), solid: 0 };
-  const gone = scrollTop % lineHeight;
-  const left = gone === 0 ? 0 : lineHeight - gone;
-  if (left > 0 && left <= lineHeight / 2) return { height: left, solid: left };
-  return { height: Math.min(gone, LABEL_EDGE_SOFT_PX), solid: 0 };
-}
-const TEXTAREA_LABEL_STRIP = cn(
-  "pointer-events-none absolute inset-x-px top-px hidden h-4 rounded-t-[calc(0.375rem-1px)] bg-[var(--bg-surface)]",
-  // Never at Large (0.33, §10.17): the label stands above the field, so there is no
-  // strip to keep scrolled text out of, and a layer here would hide the first line.
-  "not-large:peer-focus:block not-large:peer-[:not(:placeholder-shown)]:block",
-  "peer-disabled:bg-[var(--bg-surface-2)] peer-[[readonly]]:bg-[var(--bg-surface-2)]",
-  TEXTAREA_LABEL_EDGE
-);
-function TextareaLabelStrip() {
-  const ref = useRef(null);
-  useLayoutEffect(() => {
-    const strip = ref.current;
-    const field = strip?.previousElementSibling;
-    if (!strip || !(field instanceof HTMLTextAreaElement)) return;
-    const fit = () => {
-      if (field.offsetWidth === 0) return;
-      const style = getComputedStyle(field);
-      const borderLeft = parseFloat(style.borderLeftWidth) || 0;
-      const borderRight = parseFloat(style.borderRightWidth) || 0;
-      const gutter = field.offsetWidth - field.clientWidth - borderLeft - borderRight;
-      const bar = gutter > 1.5;
-      const onLeft = field.clientLeft - borderLeft > 1.5;
-      const rtl = style.direction === "rtl";
-      const atEnd = onLeft === rtl;
-      const border = (end) => end === rtl ? borderLeft : borderRight;
-      strip.style.insetInlineEnd = bar && atEnd ? `${border(true) + gutter}px` : "";
-      strip.style.insetInlineStart = bar && !atEnd ? `${border(false) + gutter}px` : "";
-      strip.style.borderStartEndRadius = bar && atEnd ? "0" : "";
-      strip.style.borderStartStartRadius = bar && !atEnd ? "0" : "";
-    };
-    const follow = () => {
-      const edge = labelEdge(field.scrollTop, parseFloat(getComputedStyle(field).lineHeight));
-      if (edge.height > 0) {
-        strip.style.setProperty("--label-strip-edge", `${edge.height}px`);
-        strip.style.setProperty("--label-strip-edge-solid", `${edge.solid}px`);
-      } else {
-        strip.style.removeProperty("--label-strip-edge");
-        strip.style.removeProperty("--label-strip-edge-solid");
-      }
-    };
-    fit();
-    follow();
-    field.addEventListener("scroll", follow, { passive: true });
-    if (typeof ResizeObserver === "undefined") return () => field.removeEventListener("scroll", follow);
-    const observer = new ResizeObserver(() => {
-      fit();
-      follow();
-    });
-    observer.observe(field);
-    return () => {
-      field.removeEventListener("scroll", follow);
-      observer.disconnect();
-    };
-  }, []);
-  return /* @__PURE__ */ jsx("span", { ref, "aria-hidden": true, "data-slot": "label-strip", className: TEXTAREA_LABEL_STRIP });
-}
-const Textarea = forwardRef(function Textarea2(props, ref) {
-  const { className, label, id, placeholder, invalid, error, hint, showCount, countLabels, ...rest } = props;
-  const reserve = "error" in props || "hint" in props || "showCount" in props;
-  const generated = useId();
-  const fieldId = id ?? generated;
-  const countId = useId();
-  const hintParts = useFieldHint(hint, rest["aria-describedby"]);
-  const maxLength = rest.maxLength;
-  const counting = Boolean(showCount) && typeof maxLength === "number" && maxLength > 0;
-  const length = useTypedLength(rest.value, rest.defaultValue);
-  const countText = useCharacterCountLabels(countLabels);
-  const { isInvalid, describedBy, errorEl } = useFieldError(
-    error,
-    invalid,
-    mergeDescribedBy(hintParts.describedBy, counting && countId),
-    rest["aria-invalid"]
-  );
-  const counter = counting ? /* @__PURE__ */ jsx(
-    CharacterCount,
-    {
-      id: countId,
-      used: length.used,
-      max: maxLength,
-      labels: countText,
-      caption: /* @__PURE__ */ jsx(FieldCaption, { parts: hintParts, className: "mt-0" })
-    }
-  ) : null;
-  const below = fieldBelow(hintParts, counter, errorEl);
-  const onChange = counting ? (e) => {
-    length.track(e.target.value);
-    rest.onChange?.(e);
-  } : rest.onChange;
-  if (label === void 0) {
-    const endHint = hintParts.labelHint;
-    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsx(EndHintRow, { hint: endHint, className, children: /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        ref,
-        id,
-        placeholder,
-        ...rest,
-        "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
-        "aria-describedby": describedBy,
-        onChange,
-        className: cn(FIELD_BASE, endHint === void 0 && className, isInvalid && FIELD_INVALID)
-      }
-    ) }) });
-  }
-  const ownPlaceholder = hasPlaceholderText(placeholder);
-  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, hint: hintParts.labelHint, children: [
-    /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        ref,
-        id: fieldId,
-        placeholder: ownPlaceholder ? placeholder : " ",
-        ...rest,
-        "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
-        "aria-describedby": describedBy,
-        onChange,
-        className: cn(
-          FLOATING_INPUT_CLASS,
-          ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS,
-          isInvalid && FIELD_INVALID
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(TextareaLabelStrip, {})
-  ] }) });
-});
-Textarea.displayName = "Textarea";
-const CARD_TONES = {
-  warning: {
-    border: "border-[var(--warning-border)]",
-    fill: "bg-[var(--warning-bg)]",
-    title: "[&_[data-slot=card-title]]:text-[var(--warning)]"
-  },
-  danger: {
-    border: "border-[var(--danger-border)]",
-    fill: "bg-[var(--danger-bg)]",
-    title: "[&_[data-slot=card-title]]:text-[var(--danger)]"
-  },
-  info: {
-    border: "border-[var(--info-border)]",
-    fill: "bg-[var(--info-bg)]",
-    title: "[&_[data-slot=card-title]]:text-[var(--info)]"
-  },
-  success: {
-    border: "border-[var(--success-border)]",
-    fill: "bg-[var(--success-bg)]",
-    title: "[&_[data-slot=card-title]]:text-[var(--success)]"
-  }
-};
-const CARD_PADDING = {
-  none: "p-0",
-  sm: "p-3",
-  md: "p-4"
-};
-const CARD_PADDING_STRONG = {
-  none: "p-0",
-  sm: "p-[calc(0.75rem-1px)]",
-  md: "p-[calc(1rem-1px)]"
-};
-const CARD_TONE_WASH = {
-  warning: "bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]",
-  danger: "bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]",
-  info: "bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]",
-  success: "bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]"
-};
-const CARD_TONES_STRONG = {
-  warning: "border-2 border-warning-strong",
-  danger: "border-2 border-[var(--danger-border-strong)]",
-  info: "border-2 border-[var(--info)]",
-  success: "border-2 border-[var(--success)]"
-};
-const CardPaddedContext = createContext(false);
-const CardDensityContext = createContext("comfortable");
-function Card({
-  className,
-  children,
-  flush,
-  variant = "default",
-  tone,
-  toneStrength = "soft",
-  toneFill = false,
-  density = "comfortable",
-  padding,
-  ...rest
-}) {
-  const toned = tone ? CARD_TONES[tone] : void 0;
-  const bordered = variant !== "inset";
-  const strong = toned !== void 0 && bordered && toneStrength === "strong";
-  const ownPadding = padding ?? (variant === "inset" ? "sm" : variant === "outline" ? "md" : void 0);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-tone": tone,
-      "data-tone-strength": strong ? "strong" : void 0,
-      "data-density": density === "compact" ? "compact" : void 0,
-      ...rest,
-      className: cn(
-        variant === "inset" ? "rounded-md bg-[var(--bg-surface-2)] p-3" : variant === "outline" ? (
-          // No shadow and no `flush`: it sits on a surface that already has both.
-          "rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-4"
-        ) : cn(
-          // Surface + border are theme tokens so the palette switcher (feedback
-          // #307) can re-skin every card; a caller's own bg-*/border-* override
-          // still wins via tailwind-merge.
-          "bg-[var(--bg-surface)]",
-          flush ? "border-y border-[var(--border)] md:rounded-lg md:border md:shadow-sm" : "rounded-lg border border-[var(--border)] shadow-sm"
-        ),
-        toned && (bordered ? toned.border : toned.fill),
-        strong && tone && CARD_TONES_STRONG[tone],
-        toneFill && bordered && tone && CARD_TONE_WASH[tone],
-        toned?.title,
-        ownPadding && (strong ? CARD_PADDING_STRONG : CARD_PADDING)[ownPadding],
-        className
-      ),
-      children: /* @__PURE__ */ jsx(CardPaddedContext.Provider, { value: ownPadding !== void 0, children: /* @__PURE__ */ jsx(CardDensityContext.Provider, { value: density, children }) })
-    }
-  );
-}
-const CARD_STACK_ACTION = "max-sm:grid-cols-1 max-sm:[&>[data-slot=card-action]]:col-start-1 max-sm:[&>[data-slot=card-action]]:row-span-1 max-sm:[&>[data-slot=card-action]]:row-start-auto max-sm:[&>[data-slot=card-action]]:justify-self-start";
-const CARD_STACK_ACTION_AT_LARGE = "large:max-sm:grid-cols-1 large:max-sm:[&>[data-slot=card-action]]:col-start-1 large:max-sm:[&>[data-slot=card-action]]:row-span-1 large:max-sm:[&>[data-slot=card-action]]:row-start-auto large:max-sm:[&>[data-slot=card-action]]:justify-self-start";
-function CardHeader({ className, stackAction, ...props }) {
-  const padded = useContext(CardPaddedContext);
-  const compact = useContext(CardDensityContext) === "compact";
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-header",
-      className: cn(
-        // Grid (not flex) so CardAction can occupy a top-right column; with no
-        // action it collapses to one column and title/description stack.
-        //
-        // The two-column switch sets a VARIABLE, not `grid-template-columns`. As
-        // `has-data-[slot=card-action]:grid-cols-[1fr_auto]` it was two classes of
-        // specificity (the class plus the attribute inside `:has()`), and a caller's
-        // `max-sm:grid-cols-1` — one class inside a media query — lost to it at every
-        // width, so the action could never be stacked on a phone from outside. Now the
-        // property itself is set by a plain one-class utility that any `grid-cols-*`
-        // variant of the caller's outranks by coming later in the sheet; the `:has()`
-        // rule only picks the value. The base `1fr` resets the variable so a header
-        // never inherits an ancestor header's two columns.
-        "grid auto-rows-min items-start gap-1.5 [--card-header-cols:1fr] has-data-[slot=card-action]:[--card-header-cols:1fr_auto] grid-cols-[var(--card-header-cols,1fr)]",
-        padded ? "px-0 pt-0" : "px-6 pt-6",
-        compact && "gap-0.5",
-        stackAction === true && CARD_STACK_ACTION,
-        stackAction === void 0 && CARD_STACK_ACTION_AT_LARGE,
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardTitle({ className, as: Tag = "div", ...props }) {
-  const compact = useContext(CardDensityContext) === "compact";
-  return /* @__PURE__ */ jsx(
-    Tag,
-    {
-      "data-slot": "card-title",
-      className: cn(compact ? "text-sm font-medium leading-snug" : "font-semibold leading-none", className),
-      ...props
-    }
-  );
-}
-function CardDescription({ className, ...props }) {
-  const compact = useContext(CardDensityContext) === "compact";
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-description",
-      className: cn(compact ? "text-xs" : "text-sm", "text-[var(--text-muted)]", className),
-      ...props
-    }
-  );
-}
-function CardAction({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-action",
-      className: cn("col-start-2 row-start-1 row-span-2 self-start justify-self-end", className),
-      ...props
-    }
-  );
-}
-function CardContent({ className, ...props }) {
-  const padded = useContext(CardPaddedContext);
-  return /* @__PURE__ */ jsx("div", { "data-slot": "card-content", className: cn(!padded && "px-6 last:pb-6", className), ...props });
-}
-function CardFooter({ className, ...props }) {
-  const padded = useContext(CardPaddedContext);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-footer",
-      className: cn("flex items-center", !padded && "px-6 pb-6", className),
-      ...props
-    }
-  );
-}
-function Spinner({ className, label, showLabel, labelPosition = "end", ...rest }) {
-  const common = useKitLabels("common", DEFAULT_COMMON_LABELS, {
-    loading: label ?? void 0
-  });
-  const ring = cn(
-    "relative inline-block h-5 w-5 animate-spin rounded-full border-2 border-[var(--border)] border-t-[var(--text-primary)]",
-    className
-  );
-  if (label === null) return /* @__PURE__ */ jsx("span", { "aria-hidden": true, ...rest, className: ring });
-  if (showLabel) {
-    return /* @__PURE__ */ jsxs(
-      "span",
-      {
-        role: "status",
-        ...rest,
-        className: cn(
-          "inline-flex items-center text-sm text-[var(--text-secondary)]",
-          labelPosition === "below" ? "flex-col gap-2 text-center" : "gap-2"
-        ),
-        children: [
-          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: ring }),
-          /* @__PURE__ */ jsx("span", { children: common.loading })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx("span", { role: "status", ...rest, className: ring, children: /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
-    common.loading,
-    " "
-  ] }) });
-}
-const EMPTY_STATE_TONE = {
-  danger: "text-[var(--danger)]",
-  success: "text-[var(--success)]"
-};
-function EmptyState({
-  title,
-  hint,
-  icon,
-  action,
-  headingAs,
-  variant = "box",
-  tone,
-  size = "md",
-  className,
-  ...rest
-}) {
-  const Title = headingAs ?? "div";
-  const toneClass = tone ? EMPTY_STATE_TONE[tone] : void 0;
-  const hasHint = hint != null && hint !== false && hint !== "";
-  if (variant === "inline") {
-    const sm = size === "sm";
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ...rest,
-        className: cn(
-          "flex flex-wrap items-center text-[var(--text-muted)]",
-          sm ? "justify-start gap-x-1.5 gap-y-0.5 py-1 text-start text-xs" : "justify-center gap-x-2 gap-y-1 py-4 text-center text-sm",
-          className
-        ),
-        children: [
-          icon != null && /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": true,
-              className: cn("flex text-[var(--text-placeholder)]", sm ? "[&_svg]:size-3.5" : "[&_svg]:size-4", toneClass),
-              children: icon
-            }
-          ),
-          /* @__PURE__ */ jsx(Title, { className: cn(sm ? "text-xs" : "text-sm", toneClass), children: title }),
-          hasHint && /* @__PURE__ */ jsx("span", { className: "text-xs", children: hint }),
-          action != null && /* @__PURE__ */ jsx("span", { className: "flex flex-wrap items-center gap-2", children: action })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...rest,
-      className: cn(
-        "flex flex-col items-center justify-center rounded-lg border border-dashed border-[var(--border-strong)] bg-[var(--bg-surface-2)] px-4 py-10 text-center text-sm text-[var(--text-muted)]",
-        className
-      ),
-      children: [
-        icon != null && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn("mb-3 text-[var(--text-placeholder)] [&_svg]:size-8", toneClass), children: icon }),
-        /* @__PURE__ */ jsx(Title, { className: cn("text-sm font-medium text-[var(--text-secondary)]", toneClass), children: title }),
-        hasHint && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs", children: hint }),
-        action != null && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap items-center justify-center gap-2", children: action })
-      ]
-    }
-  );
-}
-const DEFAULT_TABS_LABELS = {
-  add: "Add tab",
-  remove: (tab) => `Remove ${tab}`
-};
-const TABLIST_CLASSES = "flex gap-1 overflow-x-auto overflow-y-hidden border-b border-[var(--border)]";
-const TABLIST_VERTICAL_CLASSES = "flex flex-col gap-0.5";
-const TAB_VERTICAL_CLASSES = FOCUS_RING_WIDTH + " flex w-full items-center rounded-md px-3 py-2 text-start text-sm font-medium transition-colors focus:outline-none focus-visible:ring-[var(--border-strong)]";
-const TAB_VERTICAL_ACTIVE_CLASSES = "bg-[var(--bg-active)] text-[var(--text-primary)]";
-const TAB_VERTICAL_INACTIVE_CLASSES = "text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]";
-const TABLIST_WRAP_CLASSES = "flex flex-wrap gap-1.5 md:flex-nowrap md:gap-1 md:overflow-x-auto md:overflow-y-hidden md:border-b md:border-[var(--border)]";
-const TAB_CLASSES = FOCUS_RING_WIDTH + " max-w-full whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus-visible:ring-[var(--border-strong)]";
-const TAB_ACTIVE_CLASSES = "border-[var(--text-primary)] text-[var(--text-primary)]";
-const TAB_INACTIVE_CLASSES = "border-transparent text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:border-[var(--border-strong)]";
-const TAB_WRAP_CLASSES = FOCUS_RING_WIDTH + " max-w-full whitespace-nowrap rounded-md px-2.5 py-2 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-[var(--border-strong)] md:rounded-none md:border-b-2 md:-mb-px md:bg-transparent md:px-3 md:py-2 md:text-sm";
-const TAB_WRAP_ACTIVE_CLASSES = "bg-[var(--brand)] text-[var(--brand-contrast)] md:border-[var(--text-primary)] md:text-[var(--text-primary)]";
-const TAB_WRAP_INACTIVE_CLASSES = "bg-[var(--bg-surface)] text-[var(--text-primary)] md:border-transparent md:text-[var(--text-muted)] md:hover:border-[var(--border-strong)] md:hover:text-[var(--text-secondary)]";
-const TAB_REMOVABLE_CLASSES = "pe-8 md:pe-8";
-const TAB_EMPTY_CLASSES = "-mx-1.5 rounded border border-dashed border-[var(--border-strong)] px-1.5";
-const TAB_ADD_CLASSES = FOCUS_RING_WIDTH + " inline-flex items-center gap-1 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium text-[var(--text-muted)] transition-colors hover:text-[var(--text-primary)] focus:outline-none focus-visible:ring-[var(--border-strong)] disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4";
-const TAB_ADD_WRAP_CLASSES = "px-2.5 text-xs md:px-3 md:text-sm";
-const TAB_ADD_PHONE_CLASSES = "relative max-md:px-2";
-function Tabs({
-  tabs,
-  active,
-  onChange,
-  className,
-  wrap = false,
-  label,
-  panelId,
-  onRemove,
-  removeOn = "every",
-  onAdd,
-  addLabel,
-  labels,
-  busy = false,
-  orientation = "horizontal",
-  "aria-label": ariaLabel,
-  ...rest
-}) {
-  const text = useKitLabels("tabs", DEFAULT_TABS_LABELS, labels);
-  const phone = usePhoneLayout();
-  const vertical = orientation === "vertical" && !phone;
-  const stripRef = useRef(null);
-  const fade = useStripFade(stripRef);
-  useLayoutEffect(() => {
-    const strip = stripRef.current;
-    const tab = strip?.querySelector('[role="tab"][aria-selected="true"]');
-    if (strip && tab) scrollIntoStrip(strip, tab);
-  }, [active]);
-  const isRemovable = (tab) => onRemove !== void 0 && tab.removable !== false;
-  const deletesOnKey = (tab) => isRemovable(tab) && (removeOn === "every" || tab.id === active);
-  const nameOf = (tab) => tab.name ?? (typeof tab.label === "string" ? tab.label : tab.id);
-  const pendingFocus = useRef(null);
-  const requestRemove = (id) => {
-    const index = tabs.findIndex((t) => t.id === id);
-    pendingFocus.current = {
-      removed: id,
-      wasActive: id === active,
-      neighbour: (tabs[index + 1] ?? tabs[index - 1])?.id
-    };
-    onRemove?.(id);
-  };
-  useLayoutEffect(() => {
-    const pending = pendingFocus.current;
-    if (!pending || tabs.some((t) => t.id === pending.removed)) return;
-    pendingFocus.current = null;
-    const strip = stripRef.current;
-    if (!strip) return;
-    const focused = document.activeElement;
-    if (focused && focused !== document.body && !strip.contains(focused)) return;
-    const target = !pending.wasActive && tabs.some((t) => t.id === pending.neighbour) ? pending.neighbour : active;
-    const index = tabs.findIndex((t) => t.id === target);
-    strip.querySelectorAll('[role="tab"]')[index]?.focus();
-  }, [tabs, active]);
-  const onTabKeyDown = (e, tab) => {
-    if (e.key === "Delete" && deletesOnKey(tab)) {
-      e.preventDefault();
-      if (!busy) requestRemove(tab.id);
-      return;
-    }
-    const step = vertical ? e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0 : horizontalStep(e.key, e.currentTarget);
-    if (step === 0 && e.key !== "Home" && e.key !== "End") return;
-    const strip = e.currentTarget.closest('[role="tablist"]');
-    if (!strip) return;
-    const items = Array.from(strip.querySelectorAll('[role="tab"]'));
-    const from = items.indexOf(e.currentTarget);
-    if (from === -1) return;
-    e.preventDefault();
-    const to = e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : (from + step + items.length) % items.length;
-    items[to]?.focus();
-  };
-  const tablist = /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...rest,
-      ref: stripRef,
-      role: "tablist",
-      "aria-label": ariaLabel ?? label,
-      "aria-orientation": vertical ? "vertical" : void 0,
-      style: fade.mask ? { ...rest.style, maskImage: fade.mask, WebkitMaskImage: fade.mask } : rest.style,
-      "data-overflow": fade.overflow,
-      className: cn(
-        vertical ? TABLIST_VERTICAL_CLASSES : wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES,
-        onAdd ? "min-w-0" : className
-      ),
-      children: tabs.map((tab) => {
-        const isActive = tab.id === active;
-        const removable = isRemovable(tab);
-        const shared = {
-          role: "tab",
-          "aria-selected": isActive,
-          // Roving tabindex: the whole strip is ONE stop in the page's tab order, and
-          // it is the open tab. Ten report tabs otherwise cost ten Tab presses to step
-          // over on the way to the table below them (live #262's strip is the extreme
-          // case, but every strip in the app paid it).
-          //
-          // The stop follows the SELECTION, not the focus. Arrowing is a look around —
-          // activation here is manual, because a tab can be a real route — so re-
-          // pointing the stop at a report the user only arrowed past would hand the
-          // strip back on the next visit in a state they never chose. The cost is that
-          // Tab out and back returns to the open tab rather than to the last one
-          // looked at; the ARIA pattern allows either, and this one needs no second
-          // piece of state shadowing `active`.
-          tabIndex: isActive ? 0 : -1,
-          // Only the open tab: see `panelId`.
-          "aria-controls": isActive ? panelId : void 0,
-          id: isActive && panelId ? `${panelId}-tab` : void 0,
-          "aria-keyshortcuts": deletesOnKey(tab) ? "Delete" : void 0,
-          onKeyDown: (e) => onTabKeyDown(e, tab),
-          className: vertical ? cn(
-            TAB_VERTICAL_CLASSES,
-            isActive ? TAB_VERTICAL_ACTIVE_CLASSES : TAB_VERTICAL_INACTIVE_CLASSES,
-            removable && "pe-8"
-          ) : cn(
-            wrap ? TAB_WRAP_CLASSES : TAB_CLASSES,
-            wrap ? isActive ? TAB_WRAP_ACTIVE_CLASSES : TAB_WRAP_INACTIVE_CLASSES : isActive ? TAB_ACTIVE_CLASSES : TAB_INACTIVE_CLASSES,
-            removable && TAB_REMOVABLE_CLASSES
-          )
-        };
-        const inner = /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: cn(
-              // In a side nav the row is the full width, so the label takes it and a
-              // badge lands at the row's end, where a column of counts lines up.
-              vertical ? "flex min-w-0 flex-1 items-center gap-1.5" : "inline-flex max-w-full min-w-0 items-center gap-1.5",
-              tab.empty && TAB_EMPTY_CLASSES
-            ),
-            children: [
-              tab.icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0 items-center gap-0.5", children: tab.icon }),
-              tab.detail != null ? (
-                // `min-w-0` + `truncate` on each line: capped by the tab's `max-w-full`, a
-                // long detail ends in an ellipsis. The whole text stays the tab's name.
-                /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col items-start text-start", children: [
-                  /* @__PURE__ */ jsx("span", { className: "max-w-full truncate", children: tab.label }),
-                  " ",
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "max-w-full truncate text-caption font-normal leading-tight text-[var(--text-muted)]",
-                        // On a wrapped strip's filled chip (below `md`) the muted grey
-                        // was dark text on the brand fill — "loop 2" all but vanished
-                        // under the one label that most needed reading. It takes the
-                        // chip's own ink instead, as the label and the × already do.
-                        wrap && isActive && !vertical && "text-[var(--brand-contrast)] md:text-[var(--text-muted)]"
-                      ),
-                      children: tab.detail
-                    }
-                  )
-                ] })
-              ) : tab.label,
-              tab.badge != null ? vertical ? /* @__PURE__ */ jsx("span", { className: "ms-auto flex shrink-0 items-center", children: tab.badge }) : tab.badge : null
-            ]
-          }
-        );
-        const element = tab.href ? /* @__PURE__ */ jsx(
-          "a",
-          {
-            ...shared,
-            href: tab.href,
-            draggable: false,
-            onClick: (e) => {
-              if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
-              e.preventDefault();
-              onChange(tab.id);
-            },
-            onKeyDown: (e) => {
-              onTabKeyDown(e, tab);
-              if (e.defaultPrevented || e.key !== " ") return;
-              e.preventDefault();
-              onChange(tab.id);
-            },
-            children: inner
-          },
-          tab.id
-        ) : /* @__PURE__ */ jsx("button", { ...shared, onClick: () => onChange(tab.id), children: inner }, tab.id);
-        if (!removable) return element;
-        return (
-          // The × cannot go INSIDE the tab: a button in a button is invalid HTML, and
-          // a tab's children are presentational, so a reader would flatten it into the
-          // tab's name. It sits beside the tab, over the gutter the tab reserves.
-          /* @__PURE__ */ jsxs("div", { className: cn("relative flex max-w-full", !vertical && "shrink-0"), children: [
-            element,
-            isActive && /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                size: "2xs",
-                tone: "danger",
-                tabIndex: -1,
-                type: "button",
-                "aria-label": text.remove(nameOf(tab)),
-                disabled: busy,
-                onClick: () => requestRemove(tab.id),
-                className: cn(
-                  "absolute inset-y-0 end-1 my-auto",
-                  // On a wrapped strip's filled chip the quiet grey would vanish into
-                  // the brand fill below `md`.
-                  wrap && "text-[var(--brand-contrast)] md:text-[var(--text-placeholder)]"
-                ),
-                children: /* @__PURE__ */ jsx(X, {})
-              }
-            )
-          ] }, tab.id)
-        );
-      })
-    }
-  );
-  if (!onAdd) return tablist;
-  if (vertical) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-0.5", className), children: [
-      tablist,
-      /* @__PURE__ */ jsxs("button", { type: "button", onClick: onAdd, disabled: busy, className: TAB_ADD_CLASSES, children: [
-        /* @__PURE__ */ jsx(Plus, { "aria-hidden": true }),
-        addLabel ?? text.add
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        wrap ? "flex flex-wrap items-end gap-1.5 md:flex-nowrap md:gap-0" : "flex items-end",
-        className
-      ),
-      children: [
-        tablist,
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "flex flex-1 items-center",
-              wrap ? "md:self-stretch md:border-b md:border-[var(--border)]" : "self-stretch border-b border-[var(--border)]"
-            ),
-            children: /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: onAdd,
-                disabled: busy,
-                className: cn(TAB_ADD_CLASSES, wrap ? TAB_ADD_WRAP_CLASSES : TAB_ADD_PHONE_CLASSES),
-                children: [
-                  /* @__PURE__ */ jsx(Plus, { "aria-hidden": true }),
-                  /* @__PURE__ */ jsx("span", { className: wrap ? void 0 : "max-md:sr-only", children: addLabel ?? text.add })
-                ]
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-export {
-  Button,
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  CompactControls,
-  DEFAULT_CHARACTER_COUNT_LABELS,
-  DEFAULT_PASSWORD_REVEAL_LABELS,
-  DEFAULT_TABS_LABELS,
-  DISABLED_REASON_LINE_CLASS,
-  DisabledReasonLine2 as DisabledReasonLine,
-  EmptyState,
-  FIELD_BASE,
-  FIELD_DISPLAY,
-  FIELD_FLOATING_PAD,
-  FIELD_INVALID,
-  FIELD_TOUCH_TEXT,
-  FIELD_TRIGGER,
-  FIELD_WRITABLE_LOOK,
-  FLOATING_INPUT_CLASS,
-  FLOATING_LABEL_CLASS,
-  FLOATING_LABEL_STATIC2 as FLOATING_LABEL_STATIC,
-  FOCUS_RING2 as FOCUS_RING,
-  FOCUS_RING_WIDTH2 as FOCUS_RING_WIDTH,
-  FieldChevron,
-  FieldHint,
-  FieldLabel,
-  FloatingField,
-  IconButton,
-  Input,
-  Label,
-  PHONE_QUERY,
-  Select,
-  Spinner,
-  TOUCH_TARGET_LARGE,
-  Tabs,
-  Textarea,
-  buttonClasses,
-  resolvePasswordRevealLabels,
-  useDisabledReasonLine2 as useDisabledReasonLine
-};
-//# sourceMappingURL=ui.js.map