@financedistrict/apps-ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,4583 @@
+'use strict';
+
+var React21 = require('react');
+var react = require('@phosphor-icons/react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React21__namespace = /*#__PURE__*/_interopNamespace(React21);
+
+// src/accordion/Accordion.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var accordionRootVariants = classVarianceAuthority.cva(["flex flex-col"]);
+var accordionItemVariants = classVarianceAuthority.cva(["border-b border-card-border"], {
+  variants: {
+    disabled: {
+      true: "opacity-60",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+var accordionTriggerVariants = classVarianceAuthority.cva(
+  [
+    "group flex w-full cursor-pointer items-start gap-4 pt-3 text-left",
+    "outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    "disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      open: {
+        true: "pb-2",
+        false: "pb-3"
+      }
+    },
+    defaultVariants: {
+      open: false
+    }
+  }
+);
+var accordionTriggerTitleVariants = classVarianceAuthority.cva([
+  "body-02-medium min-w-0 flex-1 break-words text-card-foreground"
+]);
+var accordionTriggerIconVariants = classVarianceAuthority.cva([
+  "flex shrink-0 items-center text-card-foreground-muted transition-colors",
+  "group-hover:text-card-foreground",
+  "[&_svg]:size-4 [&_svg]:shrink-0"
+]);
+var accordionContentVariants = classVarianceAuthority.cva([
+  "body-03 pb-3 text-card-foreground-muted"
+]);
+var AccordionContext = React21__namespace.createContext(
+  null
+);
+function useAccordionContext(part) {
+  const context = React21__namespace.useContext(AccordionContext);
+  if (context === null) {
+    throw new Error(`${part} must be used within <Accordion.Root>`);
+  }
+  return context;
+}
+var AccordionItemContext = React21__namespace.createContext(null);
+function useAccordionItemContext(part) {
+  const context = React21__namespace.useContext(AccordionItemContext);
+  if (context === null) {
+    throw new Error(`${part} must be used within <Accordion.Item>`);
+  }
+  return context;
+}
+function setRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function AccordionRoot({
+  type = "single",
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  collapsible = true,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const isMultiple = type === "multiple";
+  const isControlled = valueProp !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = React21__namespace.useState(
+    () => defaultValue !== void 0 ? defaultValue : isMultiple ? [] : null
+  );
+  const openModel = isControlled ? valueProp : uncontrolledValue;
+  const commit = (next) => {
+    if (!isControlled) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+  const isOpen = (itemValue) => isMultiple ? Array.isArray(openModel) && openModel.includes(itemValue) : openModel === itemValue;
+  const toggle = (itemValue) => {
+    if (isMultiple) {
+      const current2 = Array.isArray(openModel) ? openModel : [];
+      commit(
+        current2.includes(itemValue) ? current2.filter((v) => v !== itemValue) : [...current2, itemValue]
+      );
+      return;
+    }
+    const current = Array.isArray(openModel) ? null : openModel;
+    if (current === itemValue) {
+      commit(collapsible ? null : itemValue);
+    } else {
+      commit(itemValue);
+    }
+  };
+  const triggersRef = React21__namespace.useRef(/* @__PURE__ */ new Set());
+  const registerTrigger = React21__namespace.useCallback((node) => {
+    triggersRef.current.add(node);
+  }, []);
+  const unregisterTrigger = React21__namespace.useCallback((node) => {
+    triggersRef.current.delete(node);
+  }, []);
+  const onTriggerKeyDown = (event) => {
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+    const triggers = Array.from(triggersRef.current).filter((el) => !el.disabled).sort(
+      (a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+    );
+    if (triggers.length === 0) return;
+    const currentIndex = triggers.indexOf(event.currentTarget);
+    if (currentIndex === -1) return;
+    event.preventDefault();
+    let nextIndex = currentIndex;
+    switch (event.key) {
+      case "ArrowDown":
+        nextIndex = (currentIndex + 1) % triggers.length;
+        break;
+      case "ArrowUp":
+        nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = triggers.length - 1;
+        break;
+    }
+    triggers[nextIndex]?.focus();
+  };
+  const contextValue = {
+    type,
+    isOpen,
+    toggle,
+    registerTrigger,
+    unregisterTrigger,
+    onTriggerKeyDown
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "accordion",
+      className: cn(accordionRootVariants(), className),
+      ...props,
+      children
+    }
+  ) });
+}
+function AccordionItem({
+  value,
+  disabled = false,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const { isOpen } = useAccordionContext("Accordion.Item");
+  const open = isOpen(value);
+  const reactId = React21__namespace.useId();
+  const triggerId = `${reactId}-trigger`;
+  const contentId = `${reactId}-content`;
+  const itemContext = {
+    value,
+    open,
+    disabled,
+    triggerId,
+    contentId
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "accordion-item",
+      "data-state": open ? "open" : "closed",
+      "data-disabled": disabled || void 0,
+      className: cn(accordionItemVariants({ disabled }), className),
+      ...props,
+      children
+    }
+  ) });
+}
+function AccordionTrigger({
+  className,
+  children,
+  onClick,
+  onKeyDown,
+  ref,
+  ...props
+}) {
+  const { toggle, registerTrigger, unregisterTrigger, onTriggerKeyDown } = useAccordionContext("Accordion.Trigger");
+  const { value, open, disabled, triggerId, contentId } = useAccordionItemContext("Accordion.Trigger");
+  const buttonRef = React21__namespace.useRef(null);
+  const setButtonRef = (node) => {
+    buttonRef.current = node;
+    setRef(ref, node);
+  };
+  React21__namespace.useEffect(() => {
+    const node = buttonRef.current;
+    if (!node) return;
+    registerTrigger(node);
+    return () => unregisterTrigger(node);
+  }, [registerTrigger, unregisterTrigger]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...props,
+      ref: setButtonRef,
+      type: "button",
+      id: triggerId,
+      "data-slot": "accordion-trigger",
+      "aria-expanded": open,
+      "aria-controls": open ? contentId : void 0,
+      disabled,
+      className: cn(accordionTriggerVariants({ open }), className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) toggle(value);
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented) onTriggerKeyDown(event);
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "accordion-trigger-title",
+            className: accordionTriggerTitleVariants(),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "accordion-trigger-icon",
+            "aria-hidden": "true",
+            className: accordionTriggerIconVariants(),
+            children: open ? /* @__PURE__ */ jsxRuntime.jsx(react.MinusIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(react.PlusIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function AccordionContent({
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const { open, triggerId, contentId } = useAccordionItemContext("Accordion.Content");
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "region",
+      id: contentId,
+      "aria-labelledby": triggerId,
+      "data-slot": "accordion-content",
+      "data-state": "open",
+      className: cn(accordionContentVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+var Accordion = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+};
+function buildCutPath({
+  W,
+  H,
+  cut,
+  rTR,
+  rBL,
+  rCut,
+  ox = 0,
+  oy = 0
+}) {
+  const rCutSq = rCut / Math.SQRT2;
+  const x = (v) => v + ox;
+  const y = (v) => v + oy;
+  return [
+    `M ${x(cut + rCut)} ${y(0)}`,
+    `L ${x(W - rTR)} ${y(0)}`,
+    `Q ${x(W)} ${y(0)} ${x(W)} ${y(rTR)}`,
+    `L ${x(W)} ${y(H - cut - rCut)}`,
+    `Q ${x(W)} ${y(H - cut)} ${x(W - rCutSq)} ${y(H - cut + rCutSq)}`,
+    `L ${x(W - cut + rCutSq)} ${y(H - rCutSq)}`,
+    `Q ${x(W - cut)} ${y(H)} ${x(W - cut - rCut)} ${y(H)}`,
+    `L ${x(rBL)} ${y(H)}`,
+    `Q ${x(0)} ${y(H)} ${x(0)} ${y(H - rBL)}`,
+    `L ${x(0)} ${y(cut + rCut)}`,
+    `Q ${x(0)} ${y(cut)} ${x(rCutSq)} ${y(cut - rCutSq)}`,
+    `L ${x(cut - rCutSq)} ${y(rCutSq)}`,
+    `Q ${x(cut)} ${y(0)} ${x(cut + rCut)} ${y(0)}`,
+    `Z`
+  ].join(" ");
+}
+function useCutCornerClipPath(cut, {
+  radius = 2,
+  radiusCuts,
+  radiusTopRight,
+  radiusBottomLeft,
+  outset
+} = {}) {
+  const ref = React21__namespace.useRef(null);
+  const [clipPath, setClipPath] = React21__namespace.useState();
+  const [pathD, setPathD] = React21__namespace.useState();
+  const [outsetPathD, setOutsetPathD] = React21__namespace.useState();
+  React21__namespace.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const rTR = radiusTopRight ?? radius;
+    const rBL = radiusBottomLeft ?? radius;
+    const rCut = radiusCuts ?? radius;
+    function compute(W, H) {
+      const d = buildCutPath({ W, H, cut, rTR, rBL, rCut });
+      setClipPath(`path('${d}')`);
+      setPathD(d);
+      if (outset != null) {
+        const g = outset;
+        setOutsetPathD(
+          buildCutPath({
+            W: W + 2 * g,
+            H: H + 2 * g,
+            cut: cut + (2 - Math.SQRT2) * g,
+            rTR: rTR + g,
+            rBL: rBL + g,
+            rCut: rCut + g,
+            ox: -g,
+            oy: -g
+          })
+        );
+      }
+    }
+    const initial = el.getBoundingClientRect();
+    compute(initial.width, initial.height);
+    const ro = new ResizeObserver((entries) => {
+      const box = entries[entries.length - 1]?.borderBoxSize?.[0];
+      if (box) {
+        compute(box.inlineSize, box.blockSize);
+      } else {
+        const rect = el.getBoundingClientRect();
+        compute(rect.width, rect.height);
+      }
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [cut, radius, radiusCuts, radiusTopRight, radiusBottomLeft, outset]);
+  return { ref, clipPath, pathD, outsetPathD };
+}
+var BUTTON_CUT = { cut: 8, radius: 2, radiusCuts: 0 };
+var buttonVariants = classVarianceAuthority.cva(
+  [
+    // Layout
+    "inline-flex shrink-0 items-center justify-center gap-1",
+    // Type — the Figma `button-01` text style (Archivo Medium 14/20)
+    "button-01",
+    // Shape — cut corners are applied as a clip-path in <Button>; keep the box square
+    "rounded-none",
+    // Transition
+    "transition-colors cursor-pointer",
+    // Suppress the native ring. The Figma focus ring is drawn OUTSIDE the
+    // clip-path (which would swallow an outline here), so cut-corner variants
+    // render it on the wrapper in <Button>; ghost renders it directly (below).
+    "outline-none",
+    // Disabled
+    "disabled:pointer-events-none disabled:cursor-not-allowed",
+    // Icons
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variation: {
+        primary: [
+          "bg-button-primary-background text-button-primary-foreground",
+          "hover:bg-button-primary-accent active:bg-button-primary-accent",
+          "disabled:bg-button-primary-muted disabled:text-button-primary-foreground-muted"
+        ],
+        brand: [
+          "bg-button-brand-primary-background text-button-brand-primary-foreground",
+          "hover:bg-button-brand-primary-accent active:bg-button-brand-primary-accent",
+          "disabled:bg-button-primary-muted disabled:text-button-primary-foreground-muted"
+        ],
+        destructive: [
+          "bg-button-destructive-background text-button-destructive-primary-foreground",
+          "hover:bg-button-destructive-accent active:bg-button-destructive-accent",
+          "disabled:bg-button-primary-muted disabled:text-button-primary-foreground-muted"
+        ],
+        // Outline — background fill + an SVG stroke border drawn in <Button>.
+        secondary: [
+          "bg-button-secondary-background text-button-secondary-foreground",
+          "hover:text-button-secondary-foreground-accent active:text-button-secondary-foreground-accent",
+          "disabled:text-button-secondary-foreground-muted"
+        ],
+        // No background, no cut corner — so no wrapper; ring on the element.
+        // `outline-solid` restores the style that base `outline-none` zeroed.
+        ghost: [
+          "bg-transparent text-button-secondary-foreground",
+          "hover:text-button-secondary-foreground-accent active:text-button-secondary-foreground-accent",
+          "disabled:text-button-secondary-foreground-muted",
+          // `rounded-xs` (2px) keeps the ghost focus ring as sharp as the other
+          // variants' corners (which now use sharp chamfers + 2px square corners).
+          "rounded-xs focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+        ]
+      },
+      size: {
+        sm: "h-8 px-2.5 [&_svg:not([class*='size-'])]:size-4",
+        md: "h-10 px-2.5 [&_svg:not([class*='size-'])]:size-4",
+        lg: "h-12 px-3 [&_svg:not([class*='size-'])]:size-4"
+      },
+      iconOnly: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Icon-only: square footprint, no horizontal padding.
+      { iconOnly: true, size: "sm", className: "w-8 px-0" },
+      { iconOnly: true, size: "md", className: "w-10 px-0" },
+      { iconOnly: true, size: "lg", className: "w-12 px-0" },
+      // Ghost has no chamfer/background, so it sits flush with no inset padding.
+      { variation: "ghost", iconOnly: false, className: "px-0" }
+    ],
+    defaultVariants: {
+      variation: "primary",
+      size: "md",
+      iconOnly: false
+    }
+  }
+);
+var FOCUS_RING_GAP = 3;
+var FOCUS_RING_WIDTH = 2;
+function setRef2(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function Button({
+  className,
+  variation = "primary",
+  size = "md",
+  iconOnly = false,
+  asChild = false,
+  loading = false,
+  leftSlot,
+  rightSlot,
+  wrapperClassName,
+  disabled,
+  style,
+  children,
+  onClick,
+  ref,
+  ...props
+}) {
+  const {
+    ref: cutRef,
+    clipPath,
+    pathD,
+    outsetPathD
+  } = useCutCornerClipPath(BUTTON_CUT.cut, {
+    radius: BUTTON_CUT.radius,
+    radiusCuts: BUTTON_CUT.radiusCuts,
+    outset: FOCUS_RING_GAP
+  });
+  const setRootRef = React21__namespace.useCallback(
+    (node) => {
+      cutRef.current = node;
+      setRef2(ref, node);
+    },
+    [cutRef, ref]
+  );
+  const isDisabled = disabled;
+  const hasCutCorner = variation !== "ghost";
+  const hasSvgBorder = variation === "secondary";
+  const handleClick = loading ? (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  } : onClick;
+  const rootClassName = cn(
+    buttonVariants({ variation, size, iconOnly }),
+    hasSvgBorder && "border-0",
+    loading && "pointer-events-none",
+    className
+  );
+  const rootStyle = hasCutCorner ? { ...style, clipPath } : style;
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    loading ? /* @__PURE__ */ jsxRuntime.jsx(react.CircleNotchIcon, { className: "animate-spin", "aria-hidden": "true" }) : leftSlot,
+    !iconOnly && children,
+    iconOnly && !loading && children,
+    !iconOnly && rightSlot
+  ] });
+  let rootEl;
+  if (asChild) {
+    if (!React21__namespace.isValidElement(children)) {
+      throw new Error(
+        "Button: `asChild` requires a single React element child"
+      );
+    }
+    const child = children;
+    const childProps = child.props;
+    const childOnClick = childProps.onClick;
+    rootEl = React21__namespace.cloneElement(
+      child,
+      {
+        ...props,
+        ...childProps,
+        "data-slot": "button",
+        "data-loading": loading || void 0,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || void 0,
+        // Block activation while loading; otherwise run both handlers.
+        onClick: loading ? (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        } : (event) => {
+          onClick?.(event);
+          childOnClick?.(event);
+        },
+        ref: (node) => {
+          setRootRef(node);
+          setRef2(childProps.ref, node);
+        },
+        className: cn(
+          rootClassName,
+          childProps.className
+        ),
+        style: {
+          ...rootStyle,
+          ...childProps.style
+        }
+      },
+      loading ? /* @__PURE__ */ jsxRuntime.jsx(react.CircleNotchIcon, { className: "animate-spin", "aria-hidden": "true" }) : null,
+      childProps.children
+    );
+  } else {
+    rootEl = /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        "data-slot": "button",
+        "data-loading": loading || void 0,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || void 0,
+        className: rootClassName,
+        style: rootStyle,
+        disabled: isDisabled,
+        ...props,
+        onClick: handleClick,
+        ref: setRootRef,
+        children: content
+      }
+    );
+  }
+  if (!hasCutCorner) return rootEl;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("group relative inline-block", wrapperClassName), children: [
+    rootEl,
+    outsetPathD && /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        className: "pointer-events-none absolute inset-0 h-full w-full overflow-visible opacity-0 group-has-[:focus-visible]:opacity-100",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: outsetPathD,
+            fill: "none",
+            strokeWidth: FOCUS_RING_WIDTH,
+            className: "stroke-focus"
+          }
+        )
+      }
+    ),
+    hasSvgBorder && pathD && /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        className: "pointer-events-none absolute inset-0 h-full w-full overflow-visible",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: pathD,
+            fill: "none",
+            strokeWidth: 1,
+            className: cn(
+              // Disabled locks the muted stroke; the hover/active accent
+              // classes must not be present at all (a `group-hover:` variant
+              // out-specifies the plain muted class, so it would still
+              // recolor the border on hover of a disabled button).
+              isDisabled ? "stroke-button-secondary-border-muted" : [
+                "stroke-button-secondary-border",
+                "group-hover:stroke-button-secondary-border-accent group-active:stroke-button-secondary-border-accent"
+              ]
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+var checkboxVariants = classVarianceAuthority.cva([
+  // Box — 20×20 (`size-5`), 2px radius (Figma `radius/xs`), 1px border.
+  // `peer` lets the sibling indicator react to :checked / :disabled.
+  "peer size-5 shrink-0 appearance-none rounded-xs border",
+  "cursor-pointer transition-colors",
+  // Default
+  "bg-background border-border",
+  // Hover (unselected) — focus keeps the DEFAULT border; only the ring signals
+  // focus (so focus doesn't visually read as hover).
+  "hover:border-border-accent",
+  // Focus ring — suppress the native ring, draw the shared `--focus` ring the
+  // same way ghost Button does: 2px stroke, 2px offset (`outline-solid`
+  // restores what `outline-none` zeroed).
+  "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus",
+  // Selected
+  "checked:bg-brand-primary-background checked:border-brand-primary-border",
+  "checked:hover:bg-brand-primary-accent checked:hover:border-brand-primary-border",
+  "checked:focus-visible:bg-brand-primary-accent checked:focus-visible:border-brand-primary-border",
+  // Disabled — shared neutral-muted look whether selected or not (per Figma)
+  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-border-muted",
+  "checked:disabled:bg-background checked:disabled:border-border-muted"
+]);
+function Checkbox({
+  className,
+  wrapperClassName,
+  onChange,
+  onCheckedChange,
+  ...props
+}) {
+  const handleChange = (event) => {
+    onChange?.(event);
+    onCheckedChange?.(event.currentTarget.checked);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("relative inline-flex shrink-0", wrapperClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "checkbox",
+        "data-slot": "checkbox",
+        className: cn(checkboxVariants(), className),
+        ...props,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.CheckIcon,
+      {
+        "aria-hidden": "true",
+        weight: "regular",
+        "data-slot": "checkbox-indicator",
+        className: cn(
+          "pointer-events-none invisible absolute inset-0 m-auto size-4",
+          "text-brand-primary-foreground",
+          "peer-checked:visible peer-disabled:text-foreground-muted"
+        )
+      }
+    )
+  ] });
+}
+var scrollbarVariants = classVarianceAuthority.cva(
+  [
+    // Firefox (approximate): thin themed scrollbar over a transparent track.
+    "[scrollbar-width:thin]",
+    "[scrollbar-color:var(--color-card-foreground-muted)_transparent]",
+    // WebKit gutter — 12px, both axes so the utility is axis-agnostic.
+    "[&::-webkit-scrollbar]:w-3 [&::-webkit-scrollbar]:h-3",
+    // WebKit thumb — 4px pill: a 4px transparent border + content-box clip
+    // leaves a 4px-wide fill centred in the 12px gutter.
+    "[&::-webkit-scrollbar-thumb]:rounded-full",
+    "[&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent",
+    "[&::-webkit-scrollbar-thumb]:bg-clip-content",
+    "[&::-webkit-scrollbar-thumb]:bg-card-foreground-muted",
+    // WebKit track — transparent by default (stroke is the `stroke` variant).
+    "[&::-webkit-scrollbar-track]:bg-transparent"
+  ],
+  {
+    variants: {
+      stroke: {
+        // 1px leading-edge track stroke (Figma `stroke`, on by default).
+        true: "[&::-webkit-scrollbar-track]:border-l [&::-webkit-scrollbar-track]:border-card-border",
+        false: ""
+      }
+    },
+    defaultVariants: { stroke: true }
+  }
+);
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function getFocusableElements(container) {
+  return Array.from(
+    container.querySelectorAll(FOCUSABLE_SELECTOR)
+  );
+}
+function useFocusTrap({
+  active,
+  containerRef
+}) {
+  React21__namespace.useEffect(() => {
+    if (!active) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const previouslyFocused = document.activeElement;
+    const initial = getFocusableElements(container)[0] ?? container;
+    initial.focus();
+    const body = document.body;
+    const previousOverflow = body.style.overflow;
+    body.style.overflow = "hidden";
+    const handleKeyDown = (event) => {
+      if (event.key !== "Tab") return;
+      const focusables = getFocusableElements(container);
+      if (focusables.length === 0) {
+        event.preventDefault();
+        container.focus();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const activeEl = document.activeElement;
+      if (event.shiftKey) {
+        if (activeEl === first || !container.contains(activeEl)) {
+          event.preventDefault();
+          last.focus();
+        }
+      } else if (activeEl === last || !container.contains(activeEl)) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+      body.style.overflow = previousOverflow;
+      previouslyFocused?.focus?.();
+    };
+  }, [active, containerRef]);
+}
+var dialogOverlayVariants = classVarianceAuthority.cva([
+  "fixed inset-0 z-50 flex items-center justify-center p-4",
+  "bg-overlay"
+]);
+var dialogContentVariants = classVarianceAuthority.cva([
+  "relative flex w-[438px] max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)] flex-col gap-6",
+  "rounded-md border border-border bg-card-background p-6 shadow-s",
+  // Programmatic-focus fallback target (no visible ring when focused as a last
+  // resort by the focus trap — the card is not an interactive control).
+  "outline-none"
+]);
+var dialogHeaderVariants = classVarianceAuthority.cva([
+  "flex shrink-0 flex-col items-start gap-4"
+]);
+var dialogHeaderIconVariants = classVarianceAuthority.cva([
+  "flex items-center text-foreground [&_svg]:size-8 [&_svg]:shrink-0"
+]);
+var dialogHeaderTextVariants = classVarianceAuthority.cva(["flex w-full flex-col gap-2"]);
+var dialogCloseButtonVariants = classVarianceAuthority.cva([
+  "absolute right-6 top-6 flex cursor-pointer items-center justify-center rounded-xs",
+  "text-foreground-muted transition-colors hover:text-foreground",
+  "[&_svg]:size-4 [&_svg]:shrink-0",
+  // TW4 needs `outline-solid` to render a solid ring (a bare `outline` won't).
+  "outline-none focus-visible:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+]);
+var dialogBodyVariants = classVarianceAuthority.cva([
+  "min-h-0 flex-1 overflow-y-auto text-foreground"
+]);
+var dialogFooterVariants = classVarianceAuthority.cva([
+  "flex w-full shrink-0 gap-2 [&>*]:flex-1 [&_button]:w-full"
+]);
+var DialogContext = React21__namespace.createContext(null);
+function useDialogContext(part) {
+  const context = React21__namespace.useContext(DialogContext);
+  if (context === null) {
+    throw new Error(`${part} must be used within <Dialog.Root>`);
+  }
+  return context;
+}
+function DialogRoot({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  dismissable = true,
+  children
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React21__namespace.useState(defaultOpen);
+  const [hasDescription, setHasDescription] = React21__namespace.useState(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const reactId = React21__namespace.useId();
+  const titleId = `${reactId}-title`;
+  const descriptionId = `${reactId}-description`;
+  const setOpen = React21__namespace.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const value = {
+    open,
+    setOpen,
+    dismissable,
+    titleId,
+    descriptionId,
+    hasDescription,
+    setHasDescription
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value, children });
+}
+function setRef3(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function TriggerLike({
+  asChild = false,
+  onActivate,
+  dataSlot,
+  children,
+  className,
+  type,
+  ...props
+}) {
+  if (asChild) {
+    if (!React21__namespace.isValidElement(children)) {
+      throw new Error(
+        `${dataSlot}: \`asChild\` requires a single React element child`
+      );
+    }
+    const child = children;
+    const childProps = child.props;
+    const childOnClick = childProps.onClick;
+    return React21__namespace.cloneElement(child, {
+      ...props,
+      ...childProps,
+      "data-slot": dataSlot,
+      onClick: (event) => {
+        childOnClick?.(event);
+        if (!event.defaultPrevented) onActivate();
+      },
+      className: cn(className, childProps.className),
+      ref: (node) => {
+        setRef3(childProps.ref, node);
+      }
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: type ?? "button",
+      "data-slot": dataSlot,
+      className,
+      onClick: () => onActivate(),
+      ...props,
+      children
+    }
+  );
+}
+function DialogTrigger({ asChild = false, ...props }) {
+  const { open, setOpen } = useDialogContext("Dialog.Trigger");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TriggerLike,
+    {
+      asChild,
+      dataSlot: "dialog-trigger",
+      onActivate: () => setOpen(true),
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      ...props
+    }
+  );
+}
+function DialogClose({ asChild = false, ...props }) {
+  const { setOpen } = useDialogContext("Dialog.Close");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TriggerLike,
+    {
+      asChild,
+      dataSlot: "dialog-close",
+      onActivate: () => setOpen(false),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  ref,
+  onKeyDown,
+  ...props
+}) {
+  const { open, setOpen, dismissable, titleId, descriptionId, hasDescription } = useDialogContext("Dialog.Content");
+  const cardRef = React21__namespace.useRef(null);
+  useFocusTrap({ active: open, containerRef: cardRef });
+  React21__namespace.useEffect(() => {
+    if (!open || !dismissable) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [open, dismissable, setOpen]);
+  if (!open) return null;
+  const setCardRef = (node) => {
+    cardRef.current = node;
+    setRef3(ref, node);
+  };
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "dialog-overlay",
+        className: dialogOverlayVariants(),
+        onClick: (event) => {
+          if (dismissable && event.target === event.currentTarget) {
+            setOpen(false);
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: setCardRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": hasDescription ? descriptionId : void 0,
+            tabIndex: -1,
+            "data-slot": "dialog-content",
+            className: cn(dialogContentVariants(), className),
+            onKeyDown,
+            ...props,
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+function DialogHeader({
+  icon,
+  title,
+  description,
+  showClose = true,
+  className,
+  ref,
+  ...props
+}) {
+  const { titleId, descriptionId, setHasDescription, setOpen } = useDialogContext("Dialog.Header");
+  const hasDescription = description != null;
+  React21__namespace.useEffect(() => {
+    if (!hasDescription) return;
+    setHasDescription(true);
+    return () => setHasDescription(false);
+  }, [hasDescription, setHasDescription]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "dialog-header",
+      className: cn(dialogHeaderVariants(), className),
+      ...props,
+      children: [
+        icon != null && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "dialog-header-icon",
+            "aria-hidden": "true",
+            className: dialogHeaderIconVariants(),
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.IconContext.Provider, { value: { weight: "fill" }, children: icon })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              dialogHeaderTextVariants(),
+              // Reserve right space for the corner X only when it would collide: an
+              // icon-less header puts the title on the X's row. With an icon the
+              // title sits below the X, so no reservation is needed.
+              showClose && icon == null && "pr-8"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: "display-04 text-foreground", children: title }),
+              hasDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { id: descriptionId, className: "body-03 text-foreground-muted", children: description })
+            ]
+          }
+        ),
+        showClose && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "dialog-header-close",
+            "aria-label": "Close",
+            className: dialogCloseButtonVariants(),
+            onClick: () => setOpen(false),
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { weight: "regular" })
+          }
+        )
+      ]
+    }
+  );
+}
+function DialogBody({ className, children, ref, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "dialog-body",
+      className: cn(dialogBodyVariants(), scrollbarVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+function DialogFooter({
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "dialog-footer",
+      className: cn(dialogFooterVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+var Dialog = {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+  Header: DialogHeader,
+  Body: DialogBody,
+  Footer: DialogFooter,
+  Close: DialogClose
+};
+var featureCardVariants = classVarianceAuthority.cva(
+  "flex h-16 items-center gap-3 px-4 py-3 bg-card-background no-underline",
+  {
+    variants: {
+      interactive: {
+        true: [
+          "cursor-pointer transition-colors hover:bg-card-accent",
+          "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus"
+        ],
+        false: ""
+      }
+    },
+    defaultVariants: { interactive: false }
+  }
+);
+var featureCardLeadingVariants = classVarianceAuthority.cva(
+  "flex shrink-0 items-center text-card-foreground [&_svg]:size-6 [&_svg]:shrink-0"
+);
+var featureCardTrailingVariants = classVarianceAuthority.cva(
+  "flex shrink-0 items-center text-card-foreground-muted [&_svg]:size-6 [&_svg]:shrink-0"
+);
+var featureCardTextVariants = classVarianceAuthority.cva("flex min-w-0 flex-1 flex-col");
+var featureCardTitleRowVariants = classVarianceAuthority.cva(
+  "flex min-w-0 items-center gap-0.5"
+);
+var featureCardCaretVariants = classVarianceAuthority.cva(
+  "flex shrink-0 items-center text-card-foreground-muted [&_svg]:size-4 [&_svg]:shrink-0"
+);
+function setRef4(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function FeatureCard({
+  title,
+  subtitle,
+  leading,
+  trailing,
+  caret = true,
+  asChild = false,
+  href,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const interactive = asChild || href != null;
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    leading != null && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "data-slot": "feature-card-leading",
+        "aria-hidden": "true",
+        className: featureCardLeadingVariants(),
+        children: leading
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-slot": "feature-card-text", className: featureCardTextVariants(), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: featureCardTitleRowVariants(), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "body-02-medium truncate text-card-foreground", children: title }),
+        caret && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "feature-card-caret",
+            "aria-hidden": "true",
+            className: featureCardCaretVariants(),
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretRightIcon, {})
+          }
+        )
+      ] }),
+      subtitle != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "body-03 truncate text-card-foreground-muted", children: subtitle })
+    ] }),
+    trailing != null && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "data-slot": "feature-card-trailing",
+        "aria-hidden": "true",
+        className: featureCardTrailingVariants(),
+        children: trailing
+      }
+    )
+  ] });
+  const rootClassName = cn(featureCardVariants({ interactive }), className);
+  if (asChild) {
+    if (!React21__namespace.isValidElement(children)) {
+      throw new Error(
+        "FeatureCard: `asChild` requires a single React element child"
+      );
+    }
+    const child = children;
+    const childProps = child.props;
+    return React21__namespace.cloneElement(
+      child,
+      {
+        ...props,
+        ...childProps,
+        "data-slot": "feature-card",
+        ref: (node) => {
+          setRef4(ref, node);
+          setRef4(childProps.ref, node);
+        },
+        className: cn(
+          rootClassName,
+          childProps.className
+        ),
+        onClick: (event) => {
+          props.onClick?.(event);
+          childProps.onClick?.(event);
+        },
+        style: {
+          ...props.style,
+          ...childProps.style
+        }
+      },
+      content,
+      childProps.children
+    );
+  }
+  if (href != null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        "data-slot": "feature-card",
+        href,
+        className: rootClassName,
+        ref,
+        ...props,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "feature-card",
+      className: rootClassName,
+      ref,
+      ...props,
+      children: content
+    }
+  );
+}
+var selectListboxVariants = classVarianceAuthority.cva([
+  "flex flex-col",
+  "bg-card-background border border-card-border rounded-sm shadow-s",
+  // Small vertical inset so the first/last option isn't flush to the border.
+  "py-1",
+  // Scroll when the list outgrows its max-height (set inline from the rect).
+  "overflow-y-auto",
+  // The panel is not itself focusable; focus stays on the trigger.
+  "outline-none"
+]);
+var selectListboxPanelVariants = classVarianceAuthority.cva([
+  "flex flex-col min-h-0",
+  "bg-card-background border border-card-border rounded-sm shadow-s",
+  "overflow-hidden",
+  "outline-none"
+]);
+var selectListboxScrollVariants = classVarianceAuthority.cva([
+  "flex flex-col min-h-0 flex-1",
+  "py-1",
+  "overflow-y-auto",
+  "outline-none"
+]);
+var selectListboxFooterVariants = classVarianceAuthority.cva([
+  "shrink-0",
+  "border-t border-t-card-border",
+  "px-3 py-1"
+]);
+var selectOptionVariants = classVarianceAuthority.cva(
+  [
+    "body-03",
+    "flex w-full items-center gap-2",
+    "px-3 py-2",
+    "cursor-pointer select-none",
+    "transition-colors",
+    // Reserve the 3px left accent bar on EVERY row (transparent by default,
+    // recoloured only when single-selected). Keeping the border-box constant
+    // across rows means selecting one never shifts its text right — same
+    // no-layout-shift trick Input uses for its `showBottomLine` bottom line.
+    "border-l-3",
+    // Mirror the 3px on the right (always transparent) so content is inset
+    // equally on both sides — the left accent bar would otherwise make the left
+    // padding read 3px larger than the right.
+    "border-r-3 border-r-transparent"
+    // NOTE: no text-/border-colour in the base. cva concatenates class strings
+    // without resolving conflicting Tailwind utilities, so a base colour + a
+    // compound colour would both survive and CSS source-order (not our intent)
+    // would pick the winner. Every state below sets exactly ONE text colour and
+    // ONE left-border colour via compound variants.
+  ],
+  {
+    variants: {
+      active: { true: "", false: "" },
+      selected: { true: "", false: "" },
+      multiple: { true: "", false: "" },
+      disabled: { true: "cursor-not-allowed", false: "" }
+    },
+    compoundVariants: [
+      // ── Text colour (exactly one matches per state) ──
+      { disabled: true, className: "text-foreground-muted" },
+      { disabled: false, selected: false, className: "text-foreground" },
+      // Multi keeps the normal foreground when selected (the checkbox marks it).
+      {
+        disabled: false,
+        selected: true,
+        multiple: true,
+        className: "text-foreground"
+      },
+      // Single-select selected → brand foreground (Figma node 4921:8203).
+      {
+        disabled: false,
+        selected: true,
+        multiple: false,
+        className: "text-card-brand-foreground"
+      },
+      // ── Left accent bar colour (exactly one matches per state) ──
+      // Invisible on every row except the single-select selected one, where it
+      // becomes the brand accent. Width is reserved in the base, so this is a
+      // pure colour change — no content shift.
+      { selected: false, className: "border-l-transparent" },
+      { selected: true, multiple: true, className: "border-l-transparent" },
+      {
+        selected: true,
+        multiple: false,
+        className: "border-l-card-brand-border-accent"
+      },
+      // ── Background ──
+      // Neutral hover/keyboard highlight (Figma card/neutral/normal/accent) —
+      // every row EXCEPT a single-select selected one (which stays branded).
+      { active: true, selected: false, className: "bg-card-accent" },
+      {
+        active: true,
+        selected: true,
+        multiple: true,
+        className: "bg-card-accent"
+      },
+      // Single-select selected: brand-tinted row. No neutral `active` bg matches
+      // this combo, so it stays branded on hover.
+      { selected: true, multiple: false, className: "bg-card-brand-accent" }
+    ],
+    defaultVariants: {
+      active: false,
+      selected: false,
+      multiple: false,
+      disabled: false
+    }
+  }
+);
+var LISTBOX_OFFSET = 4;
+var LISTBOX_MARGIN = 8;
+var LISTBOX_MAX_HEIGHT = 208;
+function computeListboxPosition(anchor, listboxHeight, viewportHeight) {
+  const flipsAbove = anchor.bottom + listboxHeight > viewportHeight && anchor.top > listboxHeight;
+  return {
+    left: anchor.left,
+    width: anchor.width,
+    top: flipsAbove ? anchor.top - listboxHeight : anchor.bottom,
+    placement: flipsAbove ? "top" : "bottom"
+  };
+}
+function computeListboxHorizontal(anchor, widthMode, measuredWidth, viewportWidth, margin) {
+  if (widthMode === "trigger") {
+    return { left: anchor.left, width: anchor.width };
+  }
+  const maxWidth = viewportWidth - 2 * margin;
+  const upperBound = viewportWidth - margin - measuredWidth;
+  const left = Math.max(margin, Math.min(anchor.left, upperBound));
+  return { left, minWidth: anchor.width, maxWidth };
+}
+function SelectListbox({
+  id,
+  options,
+  selected,
+  multiple,
+  activeIndex,
+  anchorRect,
+  widthMode = "trigger",
+  onSelect,
+  onActiveChange,
+  footer,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby
+}) {
+  const listRef = React21__namespace.useRef(null);
+  const panelRef = React21__namespace.useRef(null);
+  const hasFooter = footer != null;
+  const [style, setStyle] = React21__namespace.useState(null);
+  React21__namespace.useLayoutEffect(() => {
+    if (anchorRect == null) {
+      setStyle(null);
+      return;
+    }
+    const measureEl = hasFooter ? panelRef.current : listRef.current;
+    const measured = measureEl ? measureEl.offsetHeight : 0;
+    const height = Math.min(measured || LISTBOX_MAX_HEIGHT, LISTBOX_MAX_HEIGHT);
+    const pos = computeListboxPosition(anchorRect, height, window.innerHeight);
+    const measuredWidth = measureEl ? measureEl.offsetWidth : 0;
+    const horizontal = computeListboxHorizontal(
+      anchorRect,
+      widthMode,
+      measuredWidth,
+      window.innerWidth,
+      LISTBOX_MARGIN
+    );
+    setStyle({
+      position: "absolute",
+      top: pos.top + window.scrollY + (pos.placement === "bottom" ? LISTBOX_OFFSET : -LISTBOX_OFFSET),
+      left: horizontal.left + window.scrollX,
+      // `"trigger"`: fixed pixel width = trigger width (Select, unchanged).
+      // `"auto"`: content-sized via `max-content`, bounded by min/max width.
+      ...widthMode === "trigger" ? { width: horizontal.width } : {
+        width: "max-content",
+        minWidth: horizontal.minWidth,
+        maxWidth: horizontal.maxWidth
+      },
+      // Bound to the design token (208px). `overflow-y-auto` on the panel
+      // scrolls the list past this cap.
+      maxHeight: "var(--container-4xs)",
+      zIndex: 50
+    });
+  }, [anchorRect, widthMode, hasFooter]);
+  React21__namespace.useLayoutEffect(() => {
+    if (activeIndex < 0) return;
+    const el = listRef.current?.querySelector(
+      `#${CSS.escape(`${id}-opt-${activeIndex}`)}`
+    );
+    el?.scrollIntoView?.({ block: "nearest" });
+  }, [activeIndex, id]);
+  const positionStyle = style ?? (widthMode === "auto" ? { position: "absolute", visibility: "hidden", width: "max-content" } : { position: "absolute", visibility: "hidden" });
+  const optionItems = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map((option, index) => {
+    const isSelected = selected.includes(option.value);
+    const isActive = index === activeIndex;
+    const isDisabled = option.disabled === true;
+    const iconColorClass = isSelected && !multiple ? "text-card-brand-foreground" : "text-foreground-muted";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        id: `${id}-opt-${index}`,
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-disabled": isDisabled || void 0,
+        "data-slot": "select-option",
+        "data-active": isActive || void 0,
+        className: selectOptionVariants({
+          active: isActive,
+          selected: isSelected,
+          multiple,
+          disabled: isDisabled
+        }),
+        onMouseEnter: () => {
+          if (!isDisabled) onActiveChange(index);
+        },
+        onMouseDown: (event) => {
+          event.preventDefault();
+          if (!isDisabled) onSelect(option.value);
+        },
+        children: [
+          multiple && // Visual mirror of the row's selection — the `option` carries the
+          // semantics, so the checkbox is hidden from AT and out of the tab
+          // order. `readOnly` because the <li> owns the toggle.
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Checkbox,
+            {
+              checked: isSelected,
+              disabled: true,
+              tabIndex: -1,
+              "aria-hidden": "true",
+              "data-slot": "select-option-checkbox",
+              className: cn(
+                "pointer-events-none disabled:border-border",
+                "checked:disabled:bg-brand-primary-background checked:disabled:border-brand-primary-border"
+              ),
+              wrapperClassName: "[&_[data-slot=checkbox-indicator]]:text-brand-primary-foreground"
+            }
+          ),
+          option.leadingSlot != null && // After the checkbox in multi mode. Decorative; muted foreground
+          // except on the single-select selected row (brand), per iconColorClass.
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "select-option-leading",
+              "aria-hidden": "true",
+              className: cn(
+                "flex shrink-0 items-center [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+                iconColorClass
+              ),
+              children: option.leadingSlot
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
+          option.trailingSlot != null && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "select-option-trailing",
+              "aria-hidden": "true",
+              className: cn(
+                "flex shrink-0 items-center [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+                iconColorClass
+              ),
+              children: option.trailingSlot
+            }
+          )
+        ]
+      },
+      option.value
+    );
+  }) });
+  if (!hasFooter) {
+    return reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "ul",
+        {
+          ref: listRef,
+          id,
+          role: "listbox",
+          "aria-multiselectable": multiple || void 0,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby,
+          "data-slot": "select-listbox",
+          className: cn(selectListboxVariants(), scrollbarVariants()),
+          style: positionStyle,
+          children: optionItems
+        }
+      ),
+      document.body
+    );
+  }
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: panelRef,
+        "data-slot": "select-listbox-panel",
+        className: selectListboxPanelVariants(),
+        style: positionStyle,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "ul",
+            {
+              ref: listRef,
+              id,
+              role: "listbox",
+              "aria-multiselectable": multiple || void 0,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledby,
+              "data-slot": "select-listbox",
+              className: cn(selectListboxScrollVariants(), scrollbarVariants()),
+              children: optionItems
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-slot": "select-listbox-footer",
+              className: selectListboxFooterVariants(),
+              children: footer
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+var inputVariants = classVarianceAuthority.cva(
+  [
+    // Field row layout — icons + input on one line, vertically centred.
+    "flex w-full items-center",
+    // Colour transitions for the focus border change.
+    "transition-colors",
+    // I-beam text cursor over the WHOLE field row (not just the inner input),
+    // so clicking anywhere in the padding/icon area reads as "type here". This
+    // is the only hover affordance — hover intentionally does NOT recolour the
+    // border (user-authorized deviation from the Figma). `cursor-text` sits in
+    // the base; `has-[:disabled]:cursor-not-allowed` below is declared AFTER it
+    // so it wins on a disabled field (same-specificity utilities, later class
+    // takes precedence — confirmed by tailwind-merge ordering).
+    "cursor-text",
+    // Disabled: not-allowed cursor + block pointer interaction on the whole
+    // field (the native `disabled` on the input already stops typing; icons are
+    // dimmed separately by the `disabled`-derived `iconStateClass` in <Input>).
+    // Declared after `cursor-text` so it overrides the I-beam when disabled.
+    "has-[:disabled]:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      variation: {
+        field: [
+          "bg-input-background border border-input-border rounded-sm",
+          // Focus (mouse or keyboard) strengthens the whole border to the
+          // accent. Hover does NOT change colour (cursor-only affordance).
+          "focus-within:border-input-border-accent"
+        ],
+        line: [
+          "border-b border-input-border",
+          // Focus (mouse or keyboard) strengthens the bottom line to the
+          // accent. Hover does NOT change colour (cursor-only affordance).
+          "focus-within:border-input-border-accent"
+        ]
+      },
+      size: {
+        // sm/lg heights reuse the Button scale; gap follows Figma per size.
+        sm: "h-8 gap-1",
+        lg: "h-10 gap-2"
+      },
+      error: {
+        // Error out-ranks focus: declare the destructive border for the resting
+        // state AND its `focus-within:` form so an errored field never recolours
+        // to the accent when focused (a bare `border-…` alone would lose to the
+        // variation's `focus-within:` accent utility above). No `hover:` form is
+        // needed — hover no longer changes colour on any variation. The `error`
+        // variant's classes are emitted after the variation's, so at equal
+        // specificity the destructive `focus-within:` wins by order.
+        true: "border-input-destructive-foreground-accent focus-within:border-input-destructive-foreground-accent",
+        false: ""
+      },
+      // Bottom-line visibility toggle. LINE ONLY — the hide effect is applied
+      // via a compound variant below (scoped to `variation:line`), so `field`
+      // is unaffected. Boolean → `true`/`false`; `true` (default) keeps today's
+      // behaviour. No classes here: `true` is the resting `border-input-border`
+      // from the variation, and `false`'s hide is the compound variant.
+      showBottomLine: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // field padding — Figma field-lg = px-3 (12px) / py-2 (8px).
+      { variation: "field", size: "lg", className: "px-3 py-2" },
+      // field-sm: DERIVED. px-2 (8px = spacing/2) steps down from field-lg's
+      // px-3 (12px) and equals py-2 for a uniform spacing/2 inset all around.
+      { variation: "field", size: "sm", className: "px-2 py-2" },
+      // line — no horizontal padding (Figma px-0); vertical padding per size.
+      { variation: "line", size: "lg", className: "py-2" },
+      { variation: "line", size: "sm", className: "py-2.5" },
+      // Hide the resting bottom line (LINE ONLY): recolour to transparent while
+      // keeping `border-b` for a stable 1px width (no layout shift). Gated on
+      // `error:false` so an errored field keeps its destructive rest border
+      // (transparent would otherwise last-win over it). Focus still wins:
+      // `focus-within:border-input-border-accent` out-ranks `border-transparent`
+      // (later in class order), so the line reappears on focus. `field` is
+      // untouched — this compound only matches `variation:line`.
+      {
+        variation: "line",
+        showBottomLine: false,
+        error: false,
+        className: "border-transparent"
+      }
+    ],
+    defaultVariants: {
+      variation: "field",
+      size: "lg",
+      error: false,
+      showBottomLine: true
+    }
+  }
+);
+function selectTriggerLabel(options, selected, placeholder) {
+  if (selected.length === 0) {
+    return { text: placeholder, isPlaceholder: true };
+  }
+  if (selected.length === 1) {
+    const match = options.find((o) => o.value === selected[0]);
+    return { text: match?.label ?? placeholder, isPlaceholder: match == null };
+  }
+  return { text: `${selected.length} selected`, isPlaceholder: false };
+}
+function SelectTrigger({
+  variation = "field",
+  error = false,
+  showBottomLine = true,
+  open = false,
+  displayText,
+  isPlaceholder,
+  label,
+  hint,
+  leadingSlot,
+  id,
+  hintId,
+  disabled,
+  className,
+  wrapperClassName,
+  fieldClassName,
+  ref,
+  ...props
+}) {
+  const iconStateClass = cn(
+    error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+    disabled && "text-input-foreground-muted"
+  );
+  const HintIcon = error ? react.WarningIcon : react.InfoIcon;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", wrapperClassName), children: [
+    label != null && /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        htmlFor: id,
+        "data-slot": "select-label",
+        className: cn(
+          "caption-03-medium uppercase",
+          error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+          disabled && "text-input-foreground-muted"
+        ),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        id,
+        ref,
+        role: "combobox",
+        "data-slot": "select-trigger",
+        "data-variation": variation,
+        "data-error": error || void 0,
+        disabled,
+        "aria-invalid": error || void 0,
+        "aria-describedby": hintId,
+        className: cn(
+          // Reuse the Input field-row styling (field/line + focus/error border).
+          inputVariants({ variation, size: "lg", error, showBottomLine }),
+          // The field is a pointer target, not a text field: pointer cursor,
+          // and not-allowed when disabled (overrides `inputVariants`' I-beam).
+          "cursor-pointer disabled:cursor-not-allowed",
+          // No system focus ring: like Input (ADR-0011), this field-shaped
+          // control signals focus purely by recolouring its 1px border to the
+          // accent (via `inputVariants`' `focus-within:`). The focusable element
+          // here is the field itself, so kill the browser's default outline —
+          // otherwise it layers ~1.5px on top of the border and reads as 2px.
+          "outline-none",
+          // Left-align content; the value grows, the caret stays trailing.
+          "text-left",
+          // Icon slots inherit the shared state colour; 16px default size for
+          // any nested svg that hasn't set its own size (mirrors Input).
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          iconStateClass,
+          fieldClassName,
+          className
+        ),
+        ...props,
+        children: [
+          leadingSlot != null && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "select-leading",
+              "aria-hidden": "true",
+              className: "flex items-center",
+              children: leadingSlot
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "select-value",
+              className: cn(
+                "body-03 w-full min-w-0 truncate",
+                isPlaceholder ? "text-input-foreground-muted" : "text-input-foreground-accent",
+                disabled && "text-input-foreground-muted"
+              ),
+              children: displayText
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "select-trailing",
+              "aria-hidden": "true",
+              className: "flex items-center",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                react.CaretDownIcon,
+                {
+                  weight: "fill",
+                  className: cn("size-3 transition-transform", open && "rotate-180")
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    hint != null && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        id: hintId,
+        "data-slot": "select-hint",
+        className: cn(
+          "body-04 flex items-center gap-1",
+          error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+          disabled && "text-input-foreground-muted"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HintIcon,
+            {
+              "aria-hidden": "true",
+              weight: "regular",
+              className: "size-4 shrink-0"
+            }
+          ),
+          hint
+        ]
+      }
+    )
+  ] });
+}
+var TYPEAHEAD_RESET_MS = 500;
+function nextEnabledIndex(options, from, dir) {
+  for (let i = from + dir; i >= 0 && i < options.length; i += dir) {
+    if (!options[i].disabled) return i;
+  }
+  return from;
+}
+function firstEnabledIndex(options) {
+  const i = options.findIndex((o) => !o.disabled);
+  return i;
+}
+function toArray(value) {
+  if (value == null) return [];
+  return Array.isArray(value) ? value : [value];
+}
+function useSelectListbox(options) {
+  const {
+    options: opts,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    multiple = false,
+    disabled = false,
+    closeOnSelect = true,
+    id,
+    ref,
+    placeholder = "Select"
+  } = options;
+  const listboxId = `${id}-listbox`;
+  const isControlled = valueProp !== void 0;
+  const [uncontrolled, setUncontrolled] = React21__namespace.useState(
+    () => toArray(defaultValue)
+  );
+  const selected = isControlled ? toArray(valueProp) : uncontrolled;
+  const [open, setOpen] = React21__namespace.useState(false);
+  const [activeIndex, setActiveIndex] = React21__namespace.useState(-1);
+  const [anchorRect, setAnchorRect] = React21__namespace.useState(null);
+  const triggerRef = React21__namespace.useRef(null);
+  const setTriggerRef = React21__namespace.useCallback(
+    (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref != null) ref.current = node;
+    },
+    [ref]
+  );
+  const typeahead = React21__namespace.useRef({ buffer: "", at: 0 });
+  const commit = (next) => {
+    if (!isControlled) setUncontrolled(next);
+    onValueChange?.(multiple ? next : next[0] ?? "");
+  };
+  const measure = React21__namespace.useCallback(() => {
+    const node = triggerRef.current;
+    if (node) setAnchorRect(node.getBoundingClientRect());
+  }, []);
+  const openListbox = React21__namespace.useCallback(() => {
+    measure();
+    const selectedIndex = opts.findIndex((o) => selected.includes(o.value));
+    setActiveIndex(
+      selectedIndex >= 0 ? selectedIndex : firstEnabledIndex(opts)
+    );
+    setOpen(true);
+  }, [measure, opts, selected]);
+  const closeListbox = React21__namespace.useCallback((restoreFocus) => {
+    setOpen(false);
+    setActiveIndex(-1);
+    setAnchorRect(null);
+    if (restoreFocus) triggerRef.current?.focus();
+  }, []);
+  const handleSelect = (optionValue) => {
+    if (multiple) {
+      const next = selected.includes(optionValue) ? selected.filter((v) => v !== optionValue) : [...selected, optionValue];
+      commit(next);
+      const idx = opts.findIndex((o) => o.value === optionValue);
+      if (idx >= 0) setActiveIndex(idx);
+    } else {
+      commit([optionValue]);
+      if (closeOnSelect) {
+        closeListbox(true);
+      } else {
+        const idx = opts.findIndex((o) => o.value === optionValue);
+        if (idx >= 0) setActiveIndex(idx);
+      }
+    }
+  };
+  const reset = () => {
+    commit([]);
+  };
+  React21__namespace.useEffect(() => {
+    if (!open) return;
+    const onReflow = () => measure();
+    window.addEventListener("scroll", onReflow, true);
+    window.addEventListener("resize", onReflow);
+    return () => {
+      window.removeEventListener("scroll", onReflow, true);
+      window.removeEventListener("resize", onReflow);
+    };
+  }, [open, measure]);
+  React21__namespace.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      const trigger = triggerRef.current;
+      const listbox = document.getElementById(listboxId);
+      const panel = listbox?.closest("[data-slot=select-listbox-panel]") ?? listbox;
+      if (trigger?.contains(target) || panel?.contains(target)) return;
+      closeListbox(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open, listboxId, closeListbox]);
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        if (!open) {
+          openListbox();
+        } else {
+          setActiveIndex((i) => nextEnabledIndex(opts, i < 0 ? -1 : i, 1));
+        }
+        return;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        if (!open) {
+          openListbox();
+        } else {
+          setActiveIndex(
+            (i) => i < 0 ? firstEnabledIndex(opts) : nextEnabledIndex(opts, i, -1)
+          );
+        }
+        return;
+      }
+      case "Home": {
+        if (!open) return;
+        event.preventDefault();
+        setActiveIndex(firstEnabledIndex(opts));
+        return;
+      }
+      case "End": {
+        if (!open) return;
+        event.preventDefault();
+        setActiveIndex(nextEnabledIndex(opts, opts.length, -1));
+        return;
+      }
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        if (!open) {
+          openListbox();
+        } else if (activeIndex >= 0 && !opts[activeIndex]?.disabled) {
+          handleSelect(opts[activeIndex].value);
+        }
+        return;
+      }
+      case "Escape": {
+        if (open) {
+          event.preventDefault();
+          closeListbox(true);
+        }
+        return;
+      }
+      case "Tab": {
+        if (open) closeListbox(false);
+        return;
+      }
+      default: {
+        if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
+          if (!open) openListbox();
+          const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+          const t = typeahead.current;
+          t.buffer = now - t.at > TYPEAHEAD_RESET_MS ? event.key : t.buffer + event.key;
+          t.at = now;
+          const query = t.buffer.toLowerCase();
+          const match = opts.findIndex(
+            (o) => !o.disabled && o.label.toLowerCase().startsWith(query)
+          );
+          if (match >= 0) setActiveIndex(match);
+        }
+      }
+    }
+  };
+  const handleTriggerClick = () => {
+    if (disabled) return;
+    if (open) closeListbox(true);
+    else openListbox();
+  };
+  const { text, isPlaceholder } = selectTriggerLabel(
+    opts,
+    selected,
+    placeholder
+  );
+  const activeId = open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : void 0;
+  return {
+    selected,
+    open,
+    setTriggerRef,
+    listboxId,
+    activeId,
+    triggerProps: {
+      onClick: handleTriggerClick,
+      onKeyDown: handleKeyDown,
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      "aria-controls": open ? listboxId : void 0,
+      "aria-activedescendant": activeId
+    },
+    listboxProps: {
+      id: listboxId,
+      options: opts,
+      selected,
+      multiple,
+      activeIndex,
+      anchorRect,
+      onSelect: handleSelect,
+      onActiveChange: setActiveIndex
+    },
+    closeListbox,
+    text,
+    isPlaceholder,
+    reset
+  };
+}
+function Select({
+  options,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  multiple = false,
+  variation = "field",
+  placeholder = "Select",
+  label,
+  error = false,
+  hint,
+  leadingSlot,
+  showBottomLine = true,
+  disabled,
+  id: idProp,
+  className,
+  wrapperClassName,
+  fieldClassName,
+  ref,
+  ...props
+}) {
+  const generatedId = React21__namespace.useId();
+  const id = idProp ?? generatedId;
+  const hintId = hint != null ? `${id}-hint` : void 0;
+  const {
+    open,
+    setTriggerRef,
+    triggerProps,
+    listboxProps,
+    text,
+    isPlaceholder
+  } = useSelectListbox({
+    options,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    multiple,
+    disabled,
+    id,
+    ref,
+    placeholder
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SelectTrigger,
+      {
+        ref: setTriggerRef,
+        id,
+        variation,
+        error,
+        showBottomLine,
+        open,
+        displayText: text,
+        isPlaceholder,
+        label,
+        hint,
+        hintId,
+        leadingSlot,
+        disabled,
+        className,
+        wrapperClassName,
+        fieldClassName,
+        ...triggerProps,
+        ...props
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx(
+      SelectListbox,
+      {
+        ...listboxProps,
+        "aria-labelledby": label != null ? id : void 0,
+        "aria-label": label == null ? props["aria-label"] : void 0
+      }
+    )
+  ] });
+}
+var filterTriggerVariants = classVarianceAuthority.cva(
+  [
+    // Layout — chip row: label + optional badge + caret, 6px gap (spacing/1-5).
+    "inline-flex h-10 w-fit shrink-0 items-center gap-1.5",
+    "rounded-sm px-3",
+    "cursor-pointer text-left align-middle transition-colors",
+    // Surface — card/neutral/primary (the `neutral` segment is stripped in the
+    // token name transform → `card-primary-*`).
+    "bg-card-primary-background border border-card-primary-border",
+    // System focus ring (ADR-0010/0014). `outline-solid` restores the style the
+    // base `outline-none` zeroed (TW4 gotcha) so the 2px ring actually paints.
+    "outline-none",
+    "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    // Decorative svgs (caret) never intercept the click and keep explicit sizes.
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      disabled: {
+        // Muted + not-allowed; the ring is suppressed (a disabled control is not
+        // focusable, but belt-and-braces if a consumer forces focus).
+        true: "cursor-not-allowed focus-visible:outline-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+var filterCountBadgeVariants = classVarianceAuthority.cva([
+  "inline-flex h-5 min-w-5 items-center justify-center px-0.5",
+  "rounded-xs bg-brand-primary-background",
+  // `body-04` = the Figma badge text style (Archivo Regular 12/16) — NOT
+  // a `caption-*` utility (those render Chakra Petch, `font-caption`).
+  "body-04 text-brand-primary-foreground"
+]);
+function FilterTrigger({
+  displayText,
+  count = 0,
+  open = false,
+  disabled = false,
+  id,
+  className,
+  ref,
+  ...props
+}) {
+  const Caret = open ? react.CaretUpIcon : react.CaretDownIcon;
+  const caretColor = disabled ? "text-card-primary-foreground-muted" : open ? "text-card-primary-foreground" : "text-card-primary-foreground-muted group-hover:text-card-primary-foreground";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      id,
+      ref,
+      role: "combobox",
+      "data-slot": "filter-trigger",
+      "data-open": open || void 0,
+      disabled,
+      className: cn("group", filterTriggerVariants({ disabled }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "filter-label",
+            className: cn(
+              "body-03 truncate",
+              disabled ? "text-card-primary-foreground-muted" : "text-card-primary-foreground"
+            ),
+            children: displayText
+          }
+        ),
+        count > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "filter-count",
+            "aria-hidden": "true",
+            className: filterCountBadgeVariants(),
+            children: count
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "filter-caret",
+            "aria-hidden": "true",
+            className: "flex items-center",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Caret,
+              {
+                weight: "fill",
+                className: cn("size-3 transition-transform", caretColor)
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function Filter({
+  options,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  multiple = false,
+  label,
+  disabled,
+  id: idProp,
+  className,
+  ref,
+  ...props
+}) {
+  const generatedId = React21__namespace.useId();
+  const id = idProp ?? generatedId;
+  const {
+    selected,
+    open,
+    setTriggerRef,
+    triggerProps,
+    listboxProps,
+    reset,
+    text
+  } = useSelectListbox({
+    options,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    multiple,
+    disabled,
+    // Filter's dropdown persists after a pick (single stays open like multi).
+    closeOnSelect: false,
+    id,
+    ref,
+    // The single-select empty state shows the filter `label`, not a generic
+    // "Select" placeholder — so `selectTriggerLabel`'s placeholder IS `label`.
+    // (In multi the trigger text is always `label` regardless — see below.)
+    placeholder: label
+  });
+  const displayText = multiple ? label : text;
+  const count = multiple ? selected.length : 0;
+  const canReset = selected.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FilterTrigger,
+      {
+        ref: setTriggerRef,
+        id,
+        displayText,
+        count,
+        open,
+        disabled,
+        "aria-label": label,
+        className,
+        ...triggerProps,
+        ...props
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx(
+      SelectListbox,
+      {
+        ...listboxProps,
+        widthMode: "auto",
+        "aria-label": label,
+        footer: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "filter-reset",
+            disabled: !canReset,
+            onClick: () => {
+              if (canReset) reset();
+            },
+            className: cn(
+              // A ghost button styled as `button/neutral/secondary`
+              // (`button-secondary-*`): foreground when enabled, muted when
+              // disabled. System focus ring (ADR-0010/0014) — `outline-solid`
+              // beside `outline-2` so it actually paints (TW4 gotcha).
+              "button-01 inline-flex h-8 items-center rounded-xs bg-transparent",
+              "outline-none transition-colors",
+              "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+              canReset ? "cursor-pointer text-button-secondary-foreground hover:text-button-secondary-foreground-accent" : "cursor-not-allowed text-button-secondary-foreground-muted"
+            ),
+            children: "Reset"
+          }
+        )
+      }
+    )
+  ] });
+}
+var inlineSelectVariants = classVarianceAuthority.cva(
+  [
+    // Inline text run: label + caret, 4px gap (Figma spacing/1), baseline-ish
+    // centered. `w-fit` so the ring hugs the content, not a full-width box.
+    "inline-flex w-fit items-center gap-1",
+    // Behaves as inline text — no field padding/background/border.
+    "cursor-pointer bg-transparent p-0 text-left align-middle",
+    "transition-colors",
+    // System focus ring (ADR-0010): momentary-control treatment, not a border
+    // recolor. Kill the default outline, then draw the 2px --focus ring with a
+    // 2px gap on :focus-visible only. `rounded-xs` matches the Figma ring.
+    "rounded-xs outline-none",
+    "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    // Decorative svgs (caret / leading slot) never intercept the click and keep
+    // their explicit sizes.
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variation: {
+        primary: "",
+        secondary: ""
+      },
+      disabled: {
+        // Muted + not-allowed, and the focus ring is suppressed (a disabled
+        // control is not focusable, but belt-and-braces if a consumer forces it).
+        true: "cursor-not-allowed focus-visible:outline-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variation: "primary",
+      disabled: false
+    }
+  }
+);
+function InlineSelectTrigger({
+  variation = "primary",
+  disabled = false,
+  displayText,
+  isPlaceholder,
+  open = false,
+  leadingSlot,
+  className,
+  ref,
+  ...props
+}) {
+  const valueColor = variation === "secondary" ? "text-card-brand-secondary-foreground" : "text-card-primary-foreground";
+  const mutedColor = variation === "secondary" ? "text-card-brand-secondary-foreground-muted" : "text-card-primary-foreground-muted";
+  const labelColor = disabled || isPlaceholder ? mutedColor : valueColor;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      ref,
+      role: "combobox",
+      "data-slot": "inline-select-trigger",
+      "data-variation": variation,
+      disabled,
+      className: cn(inlineSelectVariants({ variation, disabled }), className),
+      ...props,
+      children: [
+        leadingSlot != null && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "inline-select-leading",
+            "aria-hidden": "true",
+            className: cn(
+              "flex items-center [&_svg:not([class*='size-'])]:size-4",
+              // The leading slot follows the caret/muted colour unless a real
+              // value is shown, then it follows the value colour (like the label).
+              labelColor
+            ),
+            children: leadingSlot
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "inline-select-value",
+            className: cn("body-03 truncate", labelColor),
+            children: displayText
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "inline-select-caret",
+            "aria-hidden": "true",
+            className: "flex items-center",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              react.CaretDownIcon,
+              {
+                weight: "fill",
+                className: cn(
+                  "size-3 transition-transform",
+                  // Caret uses the muted variation colour (Figma resting state).
+                  mutedColor,
+                  open && "rotate-180"
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function InlineSelect({
+  options,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  variation = "primary",
+  placeholder = "Select",
+  leadingSlot,
+  disabled,
+  name,
+  id: idProp,
+  className,
+  ref,
+  ...props
+}) {
+  const generatedId = React21__namespace.useId();
+  const id = idProp ?? generatedId;
+  const {
+    selected,
+    open,
+    setTriggerRef,
+    triggerProps,
+    listboxProps,
+    text,
+    isPlaceholder
+  } = useSelectListbox({
+    options,
+    // Normalize the single-select public value to the hook's array form.
+    value: valueProp,
+    defaultValue,
+    // The hook emits `string | string[]`; in single mode it is always a
+    // `string`, so narrow before handing it to the public single callback.
+    onValueChange: onValueChange ? (next) => onValueChange(Array.isArray(next) ? next[0] ?? "" : next) : void 0,
+    multiple: false,
+    disabled,
+    id,
+    ref,
+    placeholder
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InlineSelectTrigger,
+      {
+        ref: setTriggerRef,
+        id,
+        variation,
+        open,
+        displayText: text,
+        isPlaceholder,
+        leadingSlot,
+        disabled,
+        className,
+        ...triggerProps,
+        ...props
+      }
+    ),
+    name != null && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: selected[0] ?? "" }),
+    open && /* @__PURE__ */ jsxRuntime.jsx(
+      SelectListbox,
+      {
+        ...listboxProps,
+        widthMode: "auto",
+        "aria-label": props["aria-label"]
+      }
+    )
+  ] });
+}
+function Input({
+  className,
+  fieldClassName,
+  wrapperClassName,
+  variation = "field",
+  size = "lg",
+  error = false,
+  // LINE-only bottom-line toggle. Destructured OUT of `props` so it never
+  // spreads onto the native <input> (invalid DOM attribute → React warning).
+  showBottomLine = true,
+  label,
+  optional = false,
+  hint,
+  leftSlot,
+  rightSlot,
+  disabled,
+  id: idProp,
+  ref,
+  ...props
+}) {
+  const generatedId = React21__namespace.useId();
+  const id = idProp ?? generatedId;
+  const hintId = hint ? `${id}-hint` : void 0;
+  const iconStateClass = cn(
+    error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+    disabled && "text-input-foreground-muted"
+  );
+  const HintIcon = error ? react.WarningIcon : react.InfoIcon;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", wrapperClassName), children: [
+    label != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: id,
+          "data-slot": "input-label",
+          className: cn(
+            "caption-03-medium uppercase",
+            error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+            disabled && "text-input-foreground-muted"
+          ),
+          children: label
+        }
+      ),
+      optional && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "data-slot": "input-optional",
+          className: "body-04 text-input-foreground-muted",
+          children: "Optional"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-slot": "input-field",
+        "data-variation": variation,
+        "data-error": error || void 0,
+        className: cn(
+          inputVariants({ variation, size, error, showBottomLine }),
+          // Icon slots inherit the shared state colour; 16px default size.
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          iconStateClass,
+          fieldClassName
+        ),
+        children: [
+          leftSlot != null && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "input-leading",
+              "aria-hidden": "true",
+              className: "flex items-center",
+              children: leftSlot
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id,
+              "data-slot": "input",
+              disabled,
+              "aria-invalid": error || void 0,
+              "aria-describedby": hintId,
+              className: cn(
+                // Typography (Figma `body-03`) + fill the row. `min-w-0` lets the
+                // input shrink inside the flex row instead of overflowing.
+                "body-03 w-full min-w-0 bg-transparent outline-none",
+                // Typed text + caret colour (Figma `input-foreground-accent`).
+                "text-input-foreground-accent caret-input-foreground-accent",
+                // Placeholder colour (Figma `input-foreground-muted`).
+                "placeholder:text-input-foreground-muted",
+                // Disabled text goes muted; keep the not-allowed cursor.
+                "disabled:cursor-not-allowed disabled:text-input-foreground-muted",
+                className
+              ),
+              ref,
+              ...props
+            }
+          ),
+          rightSlot != null && // NOT aria-hidden: the trailing slot may host an interactive control
+          // (e.g. SearchBar's clear button) that must stay reachable by AT +
+          // keyboard, and a focusable element inside aria-hidden is an ARIA
+          // violation. Decorative bare-<svg> icons are silent to AT on their own
+          // (no role / no accessible name), so dropping aria-hidden here does not
+          // make them announced. The leading slot stays decorative (aria-hidden).
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "input-trailing", className: "flex items-center", children: rightSlot })
+        ]
+      }
+    ),
+    hint != null && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        id: hintId,
+        "data-slot": "input-hint",
+        className: cn(
+          "body-04 flex items-center gap-1",
+          error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+          disabled && "text-input-foreground-muted"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HintIcon,
+            {
+              "aria-hidden": "true",
+              weight: "regular",
+              className: "size-4 shrink-0"
+            }
+          ),
+          hint
+        ]
+      }
+    )
+  ] });
+}
+var panelVariants = classVarianceAuthority.cva([
+  "flex w-80 flex-col gap-4 rounded-md border border-card-border bg-card-background p-5"
+]);
+var panelHeaderVariants = classVarianceAuthority.cva(["flex items-start gap-4"]);
+var panelHeaderContentVariants = classVarianceAuthority.cva([
+  "flex min-w-0 flex-1 items-center gap-3"
+]);
+var panelHeaderIconVariants = classVarianceAuthority.cva([
+  "flex items-center text-card-foreground [&_svg]:size-6 [&_svg]:shrink-0"
+]);
+var panelHeaderTextVariants = classVarianceAuthority.cva(["flex min-w-0 flex-col"]);
+var panelCloseButtonVariants = classVarianceAuthority.cva([
+  "flex shrink-0 cursor-pointer items-center justify-center rounded-xs",
+  "text-card-foreground-muted transition-colors hover:text-card-foreground",
+  "[&_svg]:size-4 [&_svg]:shrink-0",
+  "outline-none focus-visible:text-card-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+]);
+var panelBodyVariants = classVarianceAuthority.cva(["text-card-foreground"]);
+var panelFooterVariants = classVarianceAuthority.cva(["flex items-start gap-2"]);
+var PanelContext = React21__namespace.createContext(null);
+function usePanelContext() {
+  return React21__namespace.useContext(PanelContext);
+}
+function PanelRoot({
+  className,
+  children,
+  ref,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}) {
+  const reactId = React21__namespace.useId();
+  const titleId = `${reactId}-title`;
+  const [hasTitle, setHasTitle] = React21__namespace.useState(false);
+  const labelledBy = hasTitle ? titleId : ariaLabelledby;
+  const hasName = Boolean(labelledBy || ariaLabel);
+  const value = { titleId, setHasTitle };
+  return /* @__PURE__ */ jsxRuntime.jsx(PanelContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: hasName ? "region" : void 0,
+      "aria-label": ariaLabel,
+      "aria-labelledby": labelledBy,
+      "data-slot": "panel",
+      className: cn(panelVariants(), className),
+      ...props,
+      children
+    }
+  ) });
+}
+function PanelHeader({
+  icon,
+  title,
+  description,
+  showClose = true,
+  onClose,
+  className,
+  ref,
+  ...props
+}) {
+  const context = usePanelContext();
+  const titleId = context?.titleId;
+  const setHasTitle = context?.setHasTitle;
+  const hasDescription = description != null;
+  React21__namespace.useEffect(() => {
+    if (!setHasTitle) return;
+    setHasTitle(true);
+    return () => setHasTitle(false);
+  }, [setHasTitle]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "panel-header",
+      className: cn(panelHeaderVariants(), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: panelHeaderContentVariants(), children: [
+          icon != null && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "panel-header-icon",
+              "aria-hidden": "true",
+              className: panelHeaderIconVariants(),
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: panelHeaderTextVariants(), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { id: titleId, className: "body-02-medium text-card-foreground", children: title }),
+            hasDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "body-03 text-card-foreground-muted", children: description })
+          ] })
+        ] }),
+        showClose && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "panel-header-close",
+            "aria-label": "Close",
+            className: panelCloseButtonVariants(),
+            onClick: () => onClose?.(),
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { weight: "regular" })
+          }
+        )
+      ]
+    }
+  );
+}
+function PanelBody({ className, children, ref, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "panel-body",
+      className: cn(panelBodyVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+function PanelFooter({ className, children, ref, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "panel-footer",
+      className: cn(panelFooterVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+var Panel = {
+  Root: PanelRoot,
+  Header: PanelHeader,
+  Body: PanelBody,
+  Footer: PanelFooter
+};
+var propertyGridCellVariants = classVarianceAuthority.cva(
+  [
+    // Layout — 40px row, single line, slots on a horizontal axis.
+    "flex h-10 min-w-0 items-center gap-1 py-3",
+    // Type — Archivo 14/20.
+    "body-03"
+  ],
+  {
+    variants: {
+      variant: {
+        title: "justify-start text-card-foreground-muted",
+        content: "justify-end text-card-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "title"
+    }
+  }
+);
+var propertyGridItemVariants = classVarianceAuthority.cva(["grid grid-cols-2"], {
+  variants: {
+    last: {
+      false: "border-b border-card-border",
+      true: ""
+    }
+  },
+  defaultVariants: {
+    last: false
+  }
+});
+function PropertyGridItem({
+  className,
+  last = false,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "property-grid-item",
+      className: cn(propertyGridItemVariants({ last }), className),
+      ref,
+      ...props,
+      children
+    }
+  );
+}
+function PropertyGridCell({
+  variant,
+  className,
+  leading,
+  trailing,
+  children,
+  ref,
+  ...props
+}) {
+  const slotClass = "flex shrink-0 items-center text-card-foreground-muted [&_svg]:size-4";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": `property-grid-${variant}`,
+      className: cn(propertyGridCellVariants({ variant }), className),
+      ref,
+      ...props,
+      children: [
+        leading != null && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": `property-grid-${variant}-leading`,
+            className: slotClass,
+            children: leading
+          }
+        ),
+        children != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children }),
+        trailing != null && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": `property-grid-${variant}-trailing`,
+            className: slotClass,
+            children: trailing
+          }
+        )
+      ]
+    }
+  );
+}
+function PropertyGridTitle(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PropertyGridCell, { variant: "title", ...props });
+}
+function PropertyGridContent(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PropertyGridCell, { variant: "content", ...props });
+}
+var radioVariants = classVarianceAuthority.cva([
+  // Circle — 20×20 (`size-5`), fully round (Figma `radius/full`), 1px border.
+  // `peer` lets the sibling indicator react to :checked / :disabled.
+  "peer size-5 shrink-0 appearance-none rounded-full border",
+  "cursor-pointer transition-colors",
+  // Default
+  "bg-background border-border",
+  // Hover (unselected) — focus keeps the DEFAULT border; only the ring signals
+  // focus (so focus doesn't visually read as hover).
+  "hover:border-border-accent",
+  // Focus ring — suppress the native ring, draw the shared `--focus` ring the
+  // same way Checkbox and ghost Button do: 2px stroke, 2px offset
+  // (`outline-solid` restores what `outline-none` zeroed).
+  "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus",
+  // Selected
+  "checked:bg-brand-primary-background checked:border-brand-primary-border",
+  "checked:hover:bg-brand-primary-accent checked:hover:border-brand-primary-border",
+  "checked:focus-visible:bg-brand-primary-accent checked:focus-visible:border-brand-primary-border",
+  // Disabled — shared neutral-muted look whether selected or not (per Figma)
+  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-border-muted",
+  "checked:disabled:bg-background checked:disabled:border-border-muted"
+]);
+function Radio({
+  className,
+  wrapperClassName,
+  onChange,
+  onCheckedChange,
+  ...props
+}) {
+  const handleChange = (event) => {
+    onChange?.(event);
+    onCheckedChange?.(event.currentTarget.checked);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("relative inline-flex shrink-0", wrapperClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "radio",
+        "data-slot": "radio",
+        className: cn(radioVariants(), className),
+        ...props,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.CircleIcon,
+      {
+        "aria-hidden": "true",
+        weight: "fill",
+        "data-slot": "radio-indicator",
+        className: cn(
+          "pointer-events-none invisible absolute inset-0 m-auto size-3",
+          "text-brand-primary-foreground",
+          "peer-checked:visible peer-disabled:text-foreground-muted"
+        )
+      }
+    )
+  ] });
+}
+function useDebouncedCallback(fn, delayMs) {
+  const fnRef = React21__namespace.useRef(fn);
+  const delayRef = React21__namespace.useRef(delayMs);
+  fnRef.current = fn;
+  delayRef.current = delayMs;
+  const timerRef = React21__namespace.useRef(null);
+  const debounced = React21__namespace.useMemo(() => {
+    const clear = () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+    const call = (...args) => {
+      clear();
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        fnRef.current(...args);
+      }, delayRef.current);
+    };
+    call.cancel = clear;
+    call.flush = (...args) => {
+      clear();
+      fnRef.current(...args);
+    };
+    return call;
+  }, []);
+  React21__namespace.useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, []);
+  return debounced;
+}
+var DEFAULT_DEBOUNCE_MS = 300;
+function SearchBar({
+  onSearch,
+  debounceMs = DEFAULT_DEBOUNCE_MS,
+  hint,
+  wrapperClassName,
+  fieldClassName,
+  className,
+  disabled,
+  value,
+  defaultValue,
+  onChange,
+  onKeyDown,
+  ref,
+  ...props
+}) {
+  const isControlled = value !== void 0;
+  const innerRef = React21__namespace.useRef(null);
+  const setInputRef = React21__namespace.useCallback(
+    (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    [ref]
+  );
+  const [hasValueState, setHasValueState] = React21__namespace.useState(
+    () => String(value ?? defaultValue ?? "").length > 0
+  );
+  const hasValue = isControlled ? String(value ?? "").length > 0 : hasValueState;
+  const debouncedSearch = useDebouncedCallback((next) => {
+    onSearch?.(next);
+  }, debounceMs);
+  const handleChange = (event) => {
+    onChange?.(event);
+    if (!isControlled) setHasValueState(event.currentTarget.value.length > 0);
+    debouncedSearch(event.currentTarget.value);
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.key === "Enter") {
+      debouncedSearch.flush(event.currentTarget.value);
+    }
+  };
+  const handleClear = () => {
+    const input = innerRef.current;
+    if (!input) return;
+    const setter = Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype,
+      "value"
+    )?.set;
+    setter?.call(input, "");
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    if (!isControlled) setHasValueState(false);
+    debouncedSearch.cancel();
+    onSearch?.("");
+    input.focus();
+  };
+  const showClear = hasValue && !disabled;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Input,
+    {
+      type: "search",
+      variation: "field",
+      size: "lg",
+      ref: setInputRef,
+      disabled,
+      hint,
+      value,
+      defaultValue,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      className: cn(
+        // Suppress the browser's native `type=search` clear affordance
+        // (WebKit/Chrome render `::-webkit-search-cancel-button`) — SearchBar
+        // provides its own clear button, so the native one would show a second
+        // "X". `hidden` (display:none) is used rather than `appearance-none`:
+        // that pseudo-element is governed by `-webkit-appearance`, which the
+        // unprefixed `appearance:none` Tailwind emits does not affect.
+        // Caller `className` is merged after and can still override.
+        "[&::-webkit-search-cancel-button]:hidden",
+        className
+      ),
+      wrapperClassName,
+      fieldClassName,
+      leftSlot: /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { weight: "regular" }),
+      rightSlot: showClear ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear search",
+          onClick: handleClear,
+          "data-slot": "search-clear",
+          className: cn(
+            // Reset native button chrome; inherit the field's icon colour.
+            "inline-flex cursor-pointer items-center justify-center rounded-xs bg-transparent p-0 text-current",
+            // Standard ADR-0010 system focus ring (this button is a momentary
+            // control — the ADR-0011 no-ring exception applies only to the
+            // text input itself, NOT to this button).
+            "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { weight: "regular", "aria-hidden": "true" })
+        }
+      ) : void 0,
+      ...props
+    }
+  );
+}
+var sidebarItemVariants = classVarianceAuthority.cva(
+  [
+    "group flex h-9 w-full items-center rounded-xs border-l-2 border-transparent px-3",
+    "no-underline transition-colors outline-none"
+  ],
+  {
+    variants: {
+      active: {
+        true: "bg-brand-background border-brand-border",
+        false: ""
+      },
+      interactive: {
+        true: [
+          "cursor-pointer",
+          // Ring only — no fill/text change on focus (see file docstring).
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus"
+        ],
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Hover fill only on a non-active, interactive item.
+      { active: false, interactive: true, class: "hover:bg-background" }
+    ],
+    defaultVariants: { active: false, interactive: false }
+  }
+);
+var sidebarItemLabelVariants = classVarianceAuthority.cva(
+  ["button-01 min-w-0 flex-1 truncate"],
+  {
+    variants: {
+      active: {
+        true: "text-brand-foreground",
+        false: "text-foreground-muted"
+      },
+      interactive: { true: "", false: "" }
+    },
+    compoundVariants: [
+      {
+        active: false,
+        interactive: true,
+        class: "group-hover:text-foreground"
+      }
+    ],
+    defaultVariants: { active: false, interactive: false }
+  }
+);
+function setRef5(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function SidebarItem({
+  active = false,
+  asChild = false,
+  href,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const interactive = asChild || href != null;
+  const rootClassName = cn(
+    sidebarItemVariants({ active, interactive }),
+    className
+  );
+  const label = (labelNode) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "sidebar-item-label",
+      className: sidebarItemLabelVariants({ active, interactive }),
+      children: labelNode
+    }
+  );
+  const dataState = active ? "active" : void 0;
+  const ariaCurrent = active ? "page" : void 0;
+  if (asChild) {
+    if (!React21__namespace.isValidElement(children)) {
+      throw new Error(
+        "SidebarItem: `asChild` requires a single React element child"
+      );
+    }
+    const child = children;
+    const childProps = child.props;
+    return React21__namespace.cloneElement(
+      child,
+      {
+        ...props,
+        ...childProps,
+        "data-slot": "sidebar-item",
+        "data-state": dataState,
+        "aria-current": ariaCurrent,
+        className: cn(
+          rootClassName,
+          childProps.className
+        ),
+        ref: (node) => {
+          setRef5(ref, node);
+          setRef5(childProps.ref, node);
+        },
+        onClick: (event) => {
+          props.onClick?.(event);
+          childProps.onClick?.(event);
+        },
+        style: {
+          ...props.style,
+          ...childProps.style
+        }
+      },
+      label(childProps.children)
+    );
+  }
+  if (href != null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        "data-slot": "sidebar-item",
+        "data-state": dataState,
+        "aria-current": ariaCurrent,
+        href,
+        className: rootClassName,
+        ref,
+        ...props,
+        children: label(children)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sidebar-item",
+      "data-state": dataState,
+      "aria-current": ariaCurrent,
+      className: rootClassName,
+      ref,
+      ...props,
+      children: label(children)
+    }
+  );
+}
+var selectableFeatureCardVariants = classVarianceAuthority.cva([
+  "group overflow-hidden rounded-md border border-border bg-card-background",
+  "has-[:checked]:border-brand-primary-border",
+  "has-[:disabled]:opacity-60"
+]);
+var selectableFeatureCardRowVariants = classVarianceAuthority.cva(
+  [
+    "flex h-16 items-center gap-3 bg-card-background px-4 py-3",
+    "cursor-pointer has-[:disabled]:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      editable: {
+        true: "group-has-[:checked]:border-b group-has-[:checked]:border-border",
+        false: ""
+      }
+    },
+    defaultVariants: { editable: false }
+  }
+);
+var selectableFeatureCardTextVariants = classVarianceAuthority.cva(
+  "flex min-w-0 flex-1 flex-col"
+);
+var selectableFeatureCardTrailingVariants = classVarianceAuthority.cva(
+  "flex shrink-0 items-center text-card-foreground-muted [&_svg]:size-6 [&_svg]:shrink-0"
+);
+var selectableFeatureCardBottomVariants = classVarianceAuthority.cva(
+  "hidden bg-card-accent p-4 group-has-[:checked]:block"
+);
+function SelectableFeatureCard({
+  title,
+  subtitle,
+  trailing,
+  variation = "basic",
+  children,
+  className,
+  ref,
+  ...radioProps
+}) {
+  const editable = variation === "editable";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "selectable-feature-card",
+      className: cn(selectableFeatureCardVariants(), className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: selectableFeatureCardRowVariants({ editable }), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Radio, { ref, ...radioProps }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              "data-slot": "selectable-feature-card-text",
+              className: selectableFeatureCardTextVariants(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "body-02-medium truncate text-card-foreground", children: title }),
+                subtitle != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "body-03 truncate text-card-foreground-muted", children: subtitle })
+              ]
+            }
+          ),
+          trailing != null && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "selectable-feature-card-trailing",
+              "aria-hidden": "true",
+              className: selectableFeatureCardTrailingVariants(),
+              children: trailing
+            }
+          )
+        ] }),
+        editable && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "selectable-feature-card-bottom",
+            className: selectableFeatureCardBottomVariants(),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+var switchVariants = classVarianceAuthority.cva([
+  // Track — 56×24 (`h-6 w-14`), fully round (Figma `radius/full`), 4px inset
+  // (`p-1` = Figma `spacing/1`). `appearance-none` strips the native checkbox
+  // box; `peer` lets the sibling thumb react to :checked / :disabled.
+  "peer inline-flex h-6 w-14 shrink-0 items-center rounded-full border p-1",
+  "appearance-none cursor-pointer transition-colors",
+  // Off — default
+  "bg-button-secondary-background border-button-secondary-border",
+  // Off — hover strengthens the border (focused keeps the default border)
+  "hover:border-button-secondary-border-accent",
+  // Focus ring — suppress the native ring, draw the shared `--focus` ring the
+  // same way Checkbox/Radio do: 2px stroke, 2px offset (`outline-solid`
+  // restores what `outline-none` zeroed). Circular via the track's rounding.
+  "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus",
+  // On — brand fill, border made transparent (kept for a constant box model)
+  "checked:bg-brand-primary-background checked:border-transparent",
+  "checked:hover:bg-brand-primary-accent",
+  // Disabled — off keeps the white track with a muted border; on drops to a
+  // neutral muted fill (per Figma). Border transparent when on, muted when off.
+  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-button-secondary-border-muted",
+  "checked:disabled:bg-button-primary-muted checked:disabled:border-transparent"
+]);
+function Switch({
+  className,
+  wrapperClassName,
+  onChange,
+  onCheckedChange,
+  ...props
+}) {
+  const handleChange = (event) => {
+    onChange?.(event);
+    onCheckedChange?.(event.currentTarget.checked);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: cn(
+        "relative inline-flex shrink-0 items-center",
+        wrapperClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            role: "switch",
+            "data-slot": "switch",
+            className: cn(switchVariants(), className),
+            ...props,
+            onChange: handleChange
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "switch-thumb",
+            className: cn(
+              "pointer-events-none absolute left-1 h-4 w-6 rounded-full transition-transform",
+              // Off — dark knob at 90% opacity (Figma `opacity/90`)
+              "bg-button-secondary-foreground opacity-90",
+              "peer-checked:translate-x-5.5 peer-checked:bg-brand-primary-foreground peer-checked:opacity-100",
+              // Disabled — muted knob whether on or off (per Figma)
+              "peer-disabled:bg-button-secondary-foreground-muted peer-disabled:opacity-100",
+              "peer-checked:peer-disabled:bg-button-primary-foreground-muted"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var tableCellVariants = classVarianceAuthority.cva(
+  [
+    // The cell is the group that drives hover/active styling of its descendants.
+    "group",
+    // Layout — 56px row, slots on a horizontal axis; overflow clipped for truncation.
+    "flex h-14 w-full items-center gap-3 overflow-hidden px-2 py-4",
+    // Brand-accent background on hover / keyboard-focus / active (self). Reset
+    // native control chrome so an asChild button/anchor styles cleanly.
+    "appearance-none bg-transparent outline-none transition-colors",
+    "hover:bg-card-brand-accent focus-visible:bg-card-brand-accent data-[state=active]:bg-card-brand-accent"
+  ],
+  {
+    variants: {
+      last: {
+        // Row divider on all but the last row; recolors on hover / focus / active.
+        false: [
+          "border-b border-card-border",
+          "hover:border-card-brand-border-accent focus-visible:border-card-brand-border-accent data-[state=active]:border-card-brand-border-accent"
+        ],
+        true: ""
+      }
+    },
+    defaultVariants: {
+      last: false
+    }
+  }
+);
+function setRef6(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function TableCell({
+  className,
+  last = false,
+  leading,
+  trailing,
+  active = false,
+  asChild = false,
+  children,
+  ref,
+  ...props
+}) {
+  const rootClassName = cn(tableCellVariants({ last }), className);
+  const dataState = active ? "active" : void 0;
+  const leadingSlot = leading != null ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "table-cell-leading",
+      className: "flex shrink-0 items-center",
+      children: leading
+    }
+  ) : null;
+  const trailingSlot = trailing != null ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "table-cell-trailing",
+      className: "flex shrink-0 items-center",
+      children: trailing
+    }
+  ) : null;
+  const middleSlot = (middle) => middle != null ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "table-cell-middle",
+      className: "flex min-w-0 flex-1 flex-col",
+      children: middle
+    }
+  ) : null;
+  if (asChild) {
+    if (!React21__namespace.isValidElement(children)) {
+      throw new Error(
+        "TableCell: `asChild` requires a single React element child"
+      );
+    }
+    const child = children;
+    const childProps = child.props;
+    return React21__namespace.cloneElement(
+      child,
+      {
+        ...props,
+        ...childProps,
+        "data-slot": "table-cell",
+        "data-state": dataState,
+        className: cn(
+          rootClassName,
+          childProps.className
+        ),
+        ref: (node) => {
+          setRef6(ref, node);
+          setRef6(childProps.ref, node);
+        }
+      },
+      leadingSlot,
+      middleSlot(childProps.children),
+      trailingSlot
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "table-cell",
+      "data-state": dataState,
+      className: rootClassName,
+      ref,
+      ...props,
+      children: [
+        leadingSlot,
+        middleSlot(children),
+        trailingSlot
+      ]
+    }
+  );
+}
+function CellText({ label, meta, className, ...props }) {
+  const hasMeta = Array.isArray(meta) && meta.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "cell-text",
+      className: cn("flex min-w-0 flex-col gap-0.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "cell-text-label",
+            className: cn(
+              "body-03 min-w-0 truncate",
+              "text-card-foreground",
+              "group-hover:text-card-brand-foreground group-focus-visible:text-card-brand-foreground group-data-[state=active]:text-card-brand-foreground"
+            ),
+            children: label
+          }
+        ),
+        hasMeta && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "cell-text-meta",
+            className: cn(
+              "flex min-w-0 items-center gap-1",
+              "body-mono-04",
+              "text-card-foreground-muted",
+              "group-hover:text-card-brand-foreground-muted group-focus-visible:text-card-brand-foreground-muted group-data-[state=active]:text-card-brand-foreground-muted"
+            ),
+            children: meta.map((segment, index) => /* @__PURE__ */ jsxRuntime.jsxs(React21__namespace.Fragment, { children: [
+              index > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "size-0.5 shrink-0 rounded-full bg-current"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: segment })
+            ] }, index))
+          }
+        )
+      ]
+    }
+  );
+}
+function TableTitle({ className, children, ref, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "table-title",
+      className: cn(
+        "flex h-8 w-full items-center overflow-hidden border-b border-card-border px-2 py-1.5",
+        className
+      ),
+      ref,
+      ...props,
+      children: children != null && /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          "data-slot": "table-title-label",
+          className: "caption-03-medium min-w-0 truncate uppercase text-card-foreground-muted",
+          children
+        }
+      )
+    }
+  );
+}
+var tabsRootVariants = classVarianceAuthority.cva(["flex flex-col"]);
+var tabsListVariants = classVarianceAuthority.cva(["inline-flex items-center"]);
+var tabsTriggerVariants = classVarianceAuthority.cva(
+  [
+    "group inline-flex cursor-pointer items-center justify-center gap-1 px-2 py-2.5",
+    "body-03-medium border-b-2 transition-colors",
+    "outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    "[&_svg]:size-4 [&_svg]:shrink-0",
+    "disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      selected: {
+        true: "border-card-brand-border-accent text-foreground-accent",
+        false: "border-transparent text-foreground"
+      },
+      disabled: {
+        true: "text-foreground-muted",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Unselected + enabled: faint underline on hover, purple text+underline
+      // while pressed (Figma hover / active states).
+      {
+        selected: false,
+        disabled: false,
+        className: "hover:border-card-brand-border active:border-card-brand-border-accent active:text-foreground-accent"
+      },
+      // Selected + disabled: the underline drops from accent to the faint token
+      // (Figma disabled-selected). Wins over the accent border from
+      // `selected:true` because compound variants are appended last.
+      {
+        selected: true,
+        disabled: true,
+        className: "border-card-brand-border"
+      }
+    ],
+    defaultVariants: {
+      selected: false,
+      disabled: false
+    }
+  }
+);
+var tabsContentVariants = classVarianceAuthority.cva([
+  "outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+]);
+var TabsContext = React21__namespace.createContext(null);
+function useTabsContext(part) {
+  const context = React21__namespace.useContext(TabsContext);
+  if (context === null) {
+    throw new Error(`${part} must be used within <Tabs.Root>`);
+  }
+  return context;
+}
+function setRef7(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function TabsRoot({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const isControlled = valueProp !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = React21__namespace.useState(defaultValue);
+  const value = isControlled ? valueProp : uncontrolledValue;
+  const select = (next) => {
+    if (!isControlled) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+  const baseId = React21__namespace.useId();
+  const getTriggerId = (tabValue) => `${baseId}-tab-${tabValue}`;
+  const getPanelId = (tabValue) => `${baseId}-panel-${tabValue}`;
+  const [triggers, setTriggers] = React21__namespace.useState([]);
+  const registerTrigger = React21__namespace.useCallback((registration) => {
+    setTriggers((prev) => {
+      const existing = prev.findIndex((t) => t.value === registration.value);
+      if (existing === -1) return [...prev, registration];
+      const next = [...prev];
+      next[existing] = registration;
+      return next;
+    });
+  }, []);
+  const unregisterTrigger = React21__namespace.useCallback((tabValue) => {
+    setTriggers((prev) => prev.filter((t) => t.value !== tabValue));
+  }, []);
+  const domOrdered = [...triggers].sort(
+    (a, b) => a.node.compareDocumentPosition(b.node) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+  );
+  const firstEnabled = domOrdered.find((t) => !t.disabled)?.value;
+  const tabStopValue = value ?? firstEnabled;
+  const onTriggerKeyDown = (event) => {
+    if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(event.key)) return;
+    const enabled = domOrdered.filter((t) => !t.disabled);
+    if (enabled.length === 0) return;
+    const currentIndex = enabled.findIndex(
+      (t) => t.node === event.currentTarget
+    );
+    if (currentIndex === -1) return;
+    event.preventDefault();
+    let nextIndex = currentIndex;
+    switch (event.key) {
+      case "ArrowRight":
+        nextIndex = (currentIndex + 1) % enabled.length;
+        break;
+      case "ArrowLeft":
+        nextIndex = (currentIndex - 1 + enabled.length) % enabled.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = enabled.length - 1;
+        break;
+    }
+    const target = enabled[nextIndex];
+    if (!target) return;
+    target.node.focus();
+    select(target.value);
+  };
+  const contextValue = {
+    value,
+    select,
+    tabStopValue,
+    registerTrigger,
+    unregisterTrigger,
+    onTriggerKeyDown,
+    getTriggerId,
+    getPanelId
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "tabs",
+      className: cn(tabsRootVariants(), className),
+      ...props,
+      children
+    }
+  ) });
+}
+function TabsList({ className, children, ref, ...props }) {
+  useTabsContext("Tabs.List");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "tablist",
+      "data-slot": "tabs-list",
+      className: cn(tabsListVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+function TabsTrigger({
+  value,
+  disabled = false,
+  className,
+  children,
+  onClick,
+  onKeyDown,
+  ref,
+  ...props
+}) {
+  const {
+    value: selectedValue,
+    select,
+    tabStopValue,
+    registerTrigger,
+    unregisterTrigger,
+    onTriggerKeyDown,
+    getTriggerId,
+    getPanelId
+  } = useTabsContext("Tabs.Trigger");
+  const selected = value === selectedValue;
+  const triggerId = getTriggerId(value);
+  const panelId = getPanelId(value);
+  const buttonRef = React21__namespace.useRef(null);
+  const setButtonRef = (node) => {
+    buttonRef.current = node;
+    setRef7(ref, node);
+  };
+  React21__namespace.useEffect(() => {
+    const node = buttonRef.current;
+    if (!node) return;
+    registerTrigger({ value, disabled, node });
+    return () => unregisterTrigger(value);
+  }, [registerTrigger, unregisterTrigger, value, disabled]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...props,
+      ref: setButtonRef,
+      type: "button",
+      role: "tab",
+      id: triggerId,
+      "data-slot": "tabs-trigger",
+      "data-state": selected ? "active" : "inactive",
+      "data-disabled": disabled || void 0,
+      "aria-selected": selected,
+      "aria-controls": selected ? panelId : void 0,
+      tabIndex: value === tabStopValue ? 0 : -1,
+      disabled,
+      className: cn(tabsTriggerVariants({ selected, disabled }), className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) select(value);
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented) onTriggerKeyDown(event);
+      },
+      children
+    }
+  );
+}
+function TabsContent({
+  value,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const {
+    value: selectedValue,
+    getTriggerId,
+    getPanelId
+  } = useTabsContext("Tabs.Content");
+  if (value !== selectedValue) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "tabpanel",
+      id: getPanelId(value),
+      "aria-labelledby": getTriggerId(value),
+      "data-slot": "tabs-content",
+      "data-state": "active",
+      tabIndex: 0,
+      className: cn(tabsContentVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+var Tabs = {
+  Root: TabsRoot,
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent
+};
+var toastVariants = classVarianceAuthority.cva(
+  "flex items-center gap-4 rounded-sm bg-card-reversed-background px-5 py-4"
+);
+var toastIconVariants = classVarianceAuthority.cva(
+  "flex shrink-0 items-center [&_svg]:size-5 [&_svg]:shrink-0",
+  {
+    variants: {
+      variation: {
+        success: "text-success-primary-foreground",
+        error: "text-destructive-primary-foreground"
+      }
+    },
+    defaultVariants: { variation: "success" }
+  }
+);
+var toastCloseVariants = classVarianceAuthority.cva([
+  "flex shrink-0 cursor-pointer items-center rounded-xs text-card-reversed-foreground-muted",
+  "transition-colors hover:text-card-reversed-foreground",
+  "[&_svg]:size-5 [&_svg]:shrink-0",
+  "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus"
+]);
+var STATUS_ICON = {
+  success: react.CheckCircleIcon,
+  error: react.XCircleIcon
+};
+function Toast({
+  variation = "success",
+  children,
+  onClose,
+  className,
+  ref,
+  ...props
+}) {
+  const StatusIcon = STATUS_ICON[variation];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "toast",
+      role: variation === "error" ? "alert" : "status",
+      className: cn(toastVariants(), className),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "toast-icon",
+              "aria-hidden": "true",
+              className: toastIconVariants({ variation }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { weight: "fill" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "body-03 min-w-0 flex-1 text-card-reversed-foreground", children })
+        ] }),
+        onClose && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "toast-close",
+            "aria-label": "Dismiss",
+            className: toastCloseVariants(),
+            onClick: onClose,
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { weight: "regular" })
+          }
+        )
+      ]
+    }
+  );
+}
+function Token({
+  value,
+  invalid = false,
+  disabled = false,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "data-slot": "token",
+      "data-invalid": invalid || void 0,
+      tabIndex: disabled ? void 0 : 0,
+      onKeyDown: disabled ? void 0 : (event) => {
+        if (event.key === "Delete" || event.key === "Backspace") {
+          event.preventDefault();
+          onRemove("keyboard");
+        }
+      },
+      className: cn(
+        // `group` so the ✕ can react to the badge's hover/focus (see below).
+        // Height is exactly 22px = 20px (`body-03` line) + 2px border, with NO
+        // vertical padding: this keeps the field a constant 40px tall
+        // (badge 22 + 8+8 field padding + 1+1 field border = 40, empty or filled).
+        // Adding `py-*` here would push the field past 40px once tokens appear.
+        "group inline-flex items-center gap-1 min-w-5 rounded-sm border px-1",
+        // Default: neutral card border + background. Invalid: destructive accent
+        // recolour (there is no `card-destructive` token — reuse `input-destructive-*`).
+        invalid ? "border-input-destructive-border bg-card-background" : "border-card-border bg-card-background",
+        // Interactive chrome (only when not disabled): hover/focus fill to
+        // `card-accent` (the DS's "stronger/hover" step up from `card-background`)
+        // and the STANDARD ADR-0010/0012 focus ring on the whole badge — the ✕
+        // itself carries no ring. `cursor-default` overrides the field's I-beam
+        // so a badge doesn't read as "type here".
+        !disabled && "cursor-default hover:bg-card-accent focus-visible:bg-card-accent outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "token-label",
+            className: cn(
+              "body-03",
+              // Disabled wins over invalid: the Figma disabled badge (561:12782) is
+              // fully muted — a disabled field is inert, so no destructive red.
+              disabled ? "text-card-foreground-muted" : invalid ? "text-input-destructive-foreground-accent" : "text-card-foreground"
+            ),
+            children: value
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove ${value}`,
+            onClick: () => onRemove("pointer"),
+            disabled,
+            tabIndex: -1,
+            "data-slot": "token-remove",
+            className: cn(
+              // Reset native button chrome.
+              "inline-flex cursor-pointer items-center justify-center rounded-xs bg-transparent p-0",
+              // Icon colour follows the badge state. Disabled wins (fully muted, no
+              // hover strengthen — the badge is inert). Valid: muted at rest,
+              // strengthens to `card-foreground` on badge hover/focus (via `group-*`).
+              // Invalid: stays destructive (a strengthen would drop the flag).
+              disabled ? "text-card-foreground-muted" : invalid ? "text-input-destructive-foreground-accent" : "text-card-foreground-muted group-hover:text-card-foreground group-focus-visible:text-card-foreground",
+              "disabled:cursor-not-allowed"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { weight: "regular", "aria-hidden": "true", className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function splitOnSeparators(raw, separators) {
+  if (separators.length === 0) return [raw];
+  const escaped = separators.map((s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("");
+  return raw.split(new RegExp(`[${escaped}]`));
+}
+function TokenInput({
+  className,
+  fieldClassName,
+  wrapperClassName,
+  value,
+  defaultValue,
+  onChange,
+  separators = [","],
+  commitOnBlur = false,
+  validate,
+  label,
+  optional = false,
+  hint,
+  error = false,
+  disabled,
+  placeholder,
+  id: idProp,
+  onKeyDown,
+  onBlur,
+  onInput,
+  ref,
+  ...props
+}) {
+  const isControlled = value !== void 0;
+  const [tokensState, setTokensState] = React21__namespace.useState(
+    () => defaultValue ?? []
+  );
+  const tokens = isControlled ? value : tokensState;
+  const innerRef = React21__namespace.useRef(null);
+  const setInputRef = React21__namespace.useCallback(
+    (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    [ref]
+  );
+  const generatedId = React21__namespace.useId();
+  const id = idProp ?? generatedId;
+  const hintId = hint ? `${id}-hint` : void 0;
+  const commitTokens = (next) => {
+    if (!isControlled) setTokensState(next);
+    onChange?.(next);
+  };
+  const addTokens = (pieces) => {
+    const next = [...tokens];
+    const seen = new Set(next.map((t) => t.toLowerCase()));
+    let changed = false;
+    for (const piece of pieces) {
+      const trimmed = piece.trim();
+      if (trimmed === "") continue;
+      const key = trimmed.toLowerCase();
+      if (seen.has(key)) continue;
+      seen.add(key);
+      next.push(trimmed);
+      changed = true;
+    }
+    if (changed) commitTokens(next);
+  };
+  const removeTokenAt = (index, origin) => {
+    commitTokens(tokens.filter((_, i) => i !== index));
+    if (origin === "keyboard") innerRef.current?.focus();
+  };
+  const handleInput = (event) => {
+    onInput?.(event);
+    const input = event.currentTarget;
+    const raw = input.value;
+    if (separators.some((sep) => raw.includes(sep))) {
+      addTokens(splitOnSeparators(raw, separators));
+      input.value = "";
+    }
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.key === "Backspace" && event.currentTarget.value === "" && tokens.length > 0) {
+      event.preventDefault();
+      removeTokenAt(tokens.length - 1);
+    }
+  };
+  const handleBlur = (event) => {
+    onBlur?.(event);
+    if (commitOnBlur) {
+      const input = event.currentTarget;
+      if (input.value.trim() !== "") {
+        addTokens([input.value]);
+        input.value = "";
+      }
+    }
+  };
+  const handleFieldMouseDown = (event) => {
+    const target = event.target;
+    if (target.closest("[data-slot=token]")) return;
+    if (target === innerRef.current) return;
+    event.preventDefault();
+    innerRef.current?.focus();
+  };
+  const iconStateClass = cn(
+    error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+    disabled && "text-input-foreground-muted"
+  );
+  const HintIcon = error ? react.WarningIcon : react.InfoIcon;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", wrapperClassName), children: [
+    label != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: id,
+          "data-slot": "input-label",
+          className: cn(
+            "caption-03-medium uppercase",
+            error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+            disabled && "text-input-foreground-muted"
+          ),
+          children: label
+        }
+      ),
+      optional && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "data-slot": "input-optional",
+          className: "body-04 text-input-foreground-muted",
+          children: "Optional"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-slot": "token-input-field",
+        "data-error": error || void 0,
+        onMouseDown: handleFieldMouseDown,
+        className: cn(
+          // Reuse Input's field styling (bg/border/rounded/focus-within/error).
+          inputVariants({ variation: "field", size: "lg", error }),
+          // Layout overrides (tailwind-merge last-wins): grow with wrapped rows,
+          // keep single-row min height, allow badges + input to wrap, uniform
+          // spacing/2 inset (overrides field-lg's px-3 py-2).
+          "h-auto min-h-10 flex-wrap gap-1 p-2",
+          // Icon slots inherit the shared state colour.
+          iconStateClass,
+          fieldClassName
+        ),
+        children: [
+          tokens.map((token, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            Token,
+            {
+              value: token,
+              invalid: validate ? !validate(token) : false,
+              disabled,
+              onRemove: (origin) => removeTokenAt(index, origin)
+            },
+            `${token}-${index}`
+          )),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id,
+              "data-slot": "token-input",
+              disabled,
+              placeholder: tokens.length === 0 ? placeholder : void 0,
+              "aria-invalid": error || void 0,
+              "aria-describedby": hintId,
+              className: cn(
+                // Typography + grow to fill remaining row width. `min-w-0` lets the
+                // input shrink; a small basis keeps it usable when tokens wrap.
+                "body-03 w-0 min-w-16 flex-1 bg-transparent outline-none",
+                "text-input-foreground-accent caret-input-foreground-accent",
+                "placeholder:text-input-foreground-muted",
+                "disabled:cursor-not-allowed disabled:text-input-foreground-muted",
+                className
+              ),
+              ref: setInputRef,
+              onInput: handleInput,
+              onKeyDown: handleKeyDown,
+              onBlur: handleBlur,
+              ...props
+            }
+          )
+        ]
+      }
+    ),
+    hint != null && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        id: hintId,
+        "data-slot": "input-hint",
+        className: cn(
+          "body-04 flex items-center gap-1",
+          error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+          disabled && "text-input-foreground-muted"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HintIcon,
+            {
+              "aria-hidden": "true",
+              weight: "regular",
+              className: "size-4 shrink-0"
+            }
+          ),
+          hint
+        ]
+      }
+    )
+  ] });
+}
+var tooltipVariants = classVarianceAuthority.cva([
+  "pointer-events-none max-w-[244px] rounded-sm bg-card-reversed-background px-1.5 py-1",
+  "body-04 text-center text-card-reversed-foreground shadow-xs"
+]);
+var TOOLTIP_OFFSET = 6;
+var VIEWPORT_MARGIN = 8;
+var OPPOSITE_SIDE = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+function sideFits(trigger, content, side, viewport) {
+  switch (side) {
+    case "top":
+      return trigger.top - TOOLTIP_OFFSET - content.height >= 0;
+    case "bottom":
+      return trigger.top + trigger.height + TOOLTIP_OFFSET + content.height <= viewport.height;
+    case "left":
+      return trigger.left - TOOLTIP_OFFSET - content.width >= 0;
+    case "right":
+      return trigger.left + trigger.width + TOOLTIP_OFFSET + content.width <= viewport.width;
+  }
+}
+function alignCoord(anchorStart, anchorSize, contentSize, align) {
+  switch (align) {
+    case "start":
+      return anchorStart;
+    case "center":
+      return anchorStart + anchorSize / 2 - contentSize / 2;
+    case "end":
+      return anchorStart + anchorSize - contentSize;
+  }
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(value, Math.max(min, max)));
+}
+function computeTooltipPosition(trigger, content, side, align, viewport) {
+  const resolvedSide = sideFits(trigger, content, side, viewport) || !sideFits(trigger, content, OPPOSITE_SIDE[side], viewport) ? side : OPPOSITE_SIDE[side];
+  const vertical = resolvedSide === "top" || resolvedSide === "bottom";
+  let top;
+  let left;
+  if (vertical) {
+    top = resolvedSide === "top" ? trigger.top - TOOLTIP_OFFSET - content.height : trigger.top + trigger.height + TOOLTIP_OFFSET;
+    left = alignCoord(trigger.left, trigger.width, content.width, align);
+    left = clamp(
+      left,
+      VIEWPORT_MARGIN,
+      viewport.width - content.width - VIEWPORT_MARGIN
+    );
+  } else {
+    left = resolvedSide === "left" ? trigger.left - TOOLTIP_OFFSET - content.width : trigger.left + trigger.width + TOOLTIP_OFFSET;
+    top = alignCoord(trigger.top, trigger.height, content.height, align);
+    top = clamp(
+      top,
+      VIEWPORT_MARGIN,
+      viewport.height - content.height - VIEWPORT_MARGIN
+    );
+  }
+  return { top, left, side: resolvedSide };
+}
+var TooltipContext = React21__namespace.createContext(null);
+function useTooltipContext(part) {
+  const context = React21__namespace.useContext(TooltipContext);
+  if (context === null) {
+    throw new Error(`${part} must be used within <Tooltip.Root>`);
+  }
+  return context;
+}
+function setRef8(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function TooltipRoot({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  delayDuration = 600,
+  side = "top",
+  align = "center",
+  disabled = false,
+  children
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React21__namespace.useState(defaultOpen);
+  const isControlled = openProp !== void 0;
+  const rawOpen = isControlled ? openProp : uncontrolledOpen;
+  const open = disabled ? false : rawOpen;
+  const reactId = React21__namespace.useId();
+  const contentId = `${reactId}-tooltip`;
+  const anchorRef = React21__namespace.useRef(null);
+  const [anchorRect, setAnchorRect] = React21__namespace.useState(null);
+  const timerRef = React21__namespace.useRef(null);
+  const setOpen = React21__namespace.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const clearTimer = React21__namespace.useCallback(() => {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  React21__namespace.useEffect(() => clearTimer, [clearTimer]);
+  const onTriggerPointerEnter = () => {
+    if (disabled) return;
+    clearTimer();
+    timerRef.current = setTimeout(() => setOpen(true), delayDuration);
+  };
+  const onTriggerPointerLeave = () => {
+    clearTimer();
+    setOpen(false);
+  };
+  const onTriggerFocus = () => {
+    if (disabled) return;
+    clearTimer();
+    setOpen(true);
+  };
+  const onTriggerBlur = () => {
+    clearTimer();
+    setOpen(false);
+  };
+  React21__namespace.useLayoutEffect(() => {
+    if (!open) {
+      setAnchorRect(null);
+      return;
+    }
+    const measure = () => {
+      const node = anchorRef.current;
+      if (node) setAnchorRect(node.getBoundingClientRect());
+    };
+    measure();
+    window.addEventListener("scroll", measure, true);
+    window.addEventListener("resize", measure);
+    return () => {
+      window.removeEventListener("scroll", measure, true);
+      window.removeEventListener("resize", measure);
+    };
+  }, [open]);
+  React21__namespace.useEffect(() => {
+    if (!open) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        clearTimer();
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [open, setOpen, clearTimer]);
+  const value = {
+    open,
+    setOpen,
+    disabled,
+    contentId,
+    side,
+    align,
+    anchorRef,
+    anchorRect,
+    onTriggerPointerEnter,
+    onTriggerPointerLeave,
+    onTriggerFocus,
+    onTriggerBlur
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipContext.Provider, { value, children });
+}
+function TooltipTrigger({
+  asChild = false,
+  className,
+  children,
+  ref,
+  onPointerEnter,
+  onPointerLeave,
+  onFocus,
+  onBlur,
+  ...props
+}) {
+  const {
+    open,
+    disabled,
+    contentId,
+    anchorRef,
+    onTriggerPointerEnter,
+    onTriggerPointerLeave,
+    onTriggerFocus,
+    onTriggerBlur
+  } = useTooltipContext("Tooltip.Trigger");
+  const describedBy = !disabled && open ? contentId : void 0;
+  const handlePointerEnter = (event) => {
+    onPointerEnter?.(event);
+    onTriggerPointerEnter();
+  };
+  const handlePointerLeave = (event) => {
+    onPointerLeave?.(event);
+    onTriggerPointerLeave();
+  };
+  const handleFocus = (event) => {
+    onFocus?.(event);
+    onTriggerFocus();
+  };
+  const handleBlur = (event) => {
+    onBlur?.(event);
+    onTriggerBlur();
+  };
+  if (asChild) {
+    if (!React21__namespace.isValidElement(children)) {
+      throw new Error(
+        "Tooltip.Trigger: `asChild` requires a single React element child"
+      );
+    }
+    const child = children;
+    const childProps = child.props;
+    const childHandlers = childProps;
+    return React21__namespace.cloneElement(
+      child,
+      {
+        ...props,
+        ...childProps,
+        "data-slot": "tooltip-trigger",
+        "aria-describedby": describedBy,
+        onPointerEnter: (event) => {
+          childHandlers.onPointerEnter?.(event);
+          onPointerEnter?.(event);
+          onTriggerPointerEnter();
+        },
+        onPointerLeave: (event) => {
+          childHandlers.onPointerLeave?.(event);
+          onPointerLeave?.(event);
+          onTriggerPointerLeave();
+        },
+        onFocus: (event) => {
+          childHandlers.onFocus?.(event);
+          onFocus?.(event);
+          onTriggerFocus();
+        },
+        onBlur: (event) => {
+          childHandlers.onBlur?.(event);
+          onBlur?.(event);
+          onTriggerBlur();
+        },
+        className: cn(className, childHandlers.className),
+        ref: (node) => {
+          anchorRef.current = node;
+          setRef8(ref, node);
+          setRef8(childHandlers.ref, node);
+        }
+      },
+      childProps.children
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...props,
+      type: props.type ?? "button",
+      "data-slot": "tooltip-trigger",
+      "aria-describedby": describedBy,
+      className,
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      ref: (node) => {
+        anchorRef.current = node;
+        setRef8(ref, node);
+      },
+      children
+    }
+  );
+}
+function TooltipContent({
+  className,
+  children,
+  style,
+  ref,
+  ...props
+}) {
+  const { open, contentId, side, align, anchorRect } = useTooltipContext("Tooltip.Content");
+  const contentRef = React21__namespace.useRef(null);
+  const [placement, setPlacement] = React21__namespace.useState(null);
+  React21__namespace.useLayoutEffect(() => {
+    if (!open || anchorRect == null) {
+      setPlacement(null);
+      return;
+    }
+    const node = contentRef.current;
+    if (!node) return;
+    const rect = node.getBoundingClientRect();
+    setPlacement(
+      computeTooltipPosition(
+        anchorRect,
+        { width: rect.width, height: rect.height },
+        side,
+        align,
+        { width: window.innerWidth, height: window.innerHeight }
+      )
+    );
+  }, [open, anchorRect, side, align]);
+  if (!open) return null;
+  const positioned = placement !== null;
+  const positionStyle = positioned ? {
+    position: "absolute",
+    top: placement.top + window.scrollY,
+    left: placement.left + window.scrollX,
+    zIndex: 50,
+    ...style
+  } : {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    visibility: "hidden",
+    zIndex: 50,
+    ...style
+  };
+  const setContentRef = (node) => {
+    contentRef.current = node;
+    setRef8(ref, node);
+  };
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ...props,
+        ref: setContentRef,
+        role: "tooltip",
+        id: contentId,
+        "data-slot": "tooltip-content",
+        "data-side": positioned ? placement.side : side,
+        "data-align": align,
+        className: cn(tooltipVariants(), className),
+        style: positionStyle,
+        children
+      }
+    ),
+    document.body
+  );
+}
+var Tooltip = {
+  Root: TooltipRoot,
+  Trigger: TooltipTrigger,
+  Content: TooltipContent
+};
+
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionRoot = AccordionRoot;
+exports.AccordionTrigger = AccordionTrigger;
+exports.BUTTON_CUT = BUTTON_CUT;
+exports.Button = Button;
+exports.CellText = CellText;
+exports.Checkbox = Checkbox;
+exports.Dialog = Dialog;
+exports.DialogBody = DialogBody;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogRoot = DialogRoot;
+exports.DialogTrigger = DialogTrigger;
+exports.FeatureCard = FeatureCard;
+exports.Filter = Filter;
+exports.FilterTrigger = FilterTrigger;
+exports.InlineSelect = InlineSelect;
+exports.InlineSelectTrigger = InlineSelectTrigger;
+exports.Input = Input;
+exports.Panel = Panel;
+exports.PanelBody = PanelBody;
+exports.PanelFooter = PanelFooter;
+exports.PanelHeader = PanelHeader;
+exports.PanelRoot = PanelRoot;
+exports.PropertyGridContent = PropertyGridContent;
+exports.PropertyGridItem = PropertyGridItem;
+exports.PropertyGridTitle = PropertyGridTitle;
+exports.Radio = Radio;
+exports.SearchBar = SearchBar;
+exports.Select = Select;
+exports.SelectListbox = SelectListbox;
+exports.SelectTrigger = SelectTrigger;
+exports.SelectableFeatureCard = SelectableFeatureCard;
+exports.SidebarItem = SidebarItem;
+exports.Switch = Switch;
+exports.TableCell = TableCell;
+exports.TableTitle = TableTitle;
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsRoot = TabsRoot;
+exports.TabsTrigger = TabsTrigger;
+exports.Toast = Toast;
+exports.TokenInput = TokenInput;
+exports.Tooltip = Tooltip;
+exports.TooltipContent = TooltipContent;
+exports.TooltipRoot = TooltipRoot;
+exports.TooltipTrigger = TooltipTrigger;
+exports.accordionContentVariants = accordionContentVariants;
+exports.accordionItemVariants = accordionItemVariants;
+exports.accordionRootVariants = accordionRootVariants;
+exports.accordionTriggerIconVariants = accordionTriggerIconVariants;
+exports.accordionTriggerTitleVariants = accordionTriggerTitleVariants;
+exports.accordionTriggerVariants = accordionTriggerVariants;
+exports.buttonVariants = buttonVariants;
+exports.checkboxVariants = checkboxVariants;
+exports.computeListboxHorizontal = computeListboxHorizontal;
+exports.computeListboxPosition = computeListboxPosition;
+exports.computeTooltipPosition = computeTooltipPosition;
+exports.dialogBodyVariants = dialogBodyVariants;
+exports.dialogCloseButtonVariants = dialogCloseButtonVariants;
+exports.dialogContentVariants = dialogContentVariants;
+exports.dialogFooterVariants = dialogFooterVariants;
+exports.dialogHeaderIconVariants = dialogHeaderIconVariants;
+exports.dialogHeaderTextVariants = dialogHeaderTextVariants;
+exports.dialogHeaderVariants = dialogHeaderVariants;
+exports.dialogOverlayVariants = dialogOverlayVariants;
+exports.featureCardCaretVariants = featureCardCaretVariants;
+exports.featureCardLeadingVariants = featureCardLeadingVariants;
+exports.featureCardTextVariants = featureCardTextVariants;
+exports.featureCardTitleRowVariants = featureCardTitleRowVariants;
+exports.featureCardTrailingVariants = featureCardTrailingVariants;
+exports.featureCardVariants = featureCardVariants;
+exports.filterCountBadgeVariants = filterCountBadgeVariants;
+exports.filterTriggerVariants = filterTriggerVariants;
+exports.getFocusableElements = getFocusableElements;
+exports.inlineSelectVariants = inlineSelectVariants;
+exports.inputVariants = inputVariants;
+exports.nextEnabledIndex = nextEnabledIndex;
+exports.panelBodyVariants = panelBodyVariants;
+exports.panelCloseButtonVariants = panelCloseButtonVariants;
+exports.panelFooterVariants = panelFooterVariants;
+exports.panelHeaderContentVariants = panelHeaderContentVariants;
+exports.panelHeaderIconVariants = panelHeaderIconVariants;
+exports.panelHeaderTextVariants = panelHeaderTextVariants;
+exports.panelHeaderVariants = panelHeaderVariants;
+exports.panelVariants = panelVariants;
+exports.propertyGridCellVariants = propertyGridCellVariants;
+exports.propertyGridItemVariants = propertyGridItemVariants;
+exports.radioVariants = radioVariants;
+exports.scrollbarVariants = scrollbarVariants;
+exports.selectListboxFooterVariants = selectListboxFooterVariants;
+exports.selectListboxPanelVariants = selectListboxPanelVariants;
+exports.selectListboxScrollVariants = selectListboxScrollVariants;
+exports.selectListboxVariants = selectListboxVariants;
+exports.selectOptionVariants = selectOptionVariants;
+exports.selectTriggerLabel = selectTriggerLabel;
+exports.selectableFeatureCardBottomVariants = selectableFeatureCardBottomVariants;
+exports.selectableFeatureCardRowVariants = selectableFeatureCardRowVariants;
+exports.selectableFeatureCardTextVariants = selectableFeatureCardTextVariants;
+exports.selectableFeatureCardTrailingVariants = selectableFeatureCardTrailingVariants;
+exports.selectableFeatureCardVariants = selectableFeatureCardVariants;
+exports.sidebarItemLabelVariants = sidebarItemLabelVariants;
+exports.sidebarItemVariants = sidebarItemVariants;
+exports.switchVariants = switchVariants;
+exports.tableCellVariants = tableCellVariants;
+exports.tabsContentVariants = tabsContentVariants;
+exports.tabsListVariants = tabsListVariants;
+exports.tabsRootVariants = tabsRootVariants;
+exports.tabsTriggerVariants = tabsTriggerVariants;
+exports.toastCloseVariants = toastCloseVariants;
+exports.toastIconVariants = toastIconVariants;
+exports.toastVariants = toastVariants;
+exports.tooltipVariants = tooltipVariants;
+exports.useCutCornerClipPath = useCutCornerClipPath;
+exports.useFocusTrap = useFocusTrap;
+exports.useSelectListbox = useSelectListbox;