@revealui/presentation 0.2.0

package/dist/client.js

@@ -0,0 +1,2951 @@
+"use client";
+import { _ as useTransition, $ as useScrollLock, a0 as useFocusTrap, a1 as useEscapeKey, a2 as useDataInteractive, a3 as Link, Y as TouchTarget, a4 as useControllableState, c as Button, a5 as useFieldDescriptionProps, a6 as useFieldErrorProps, a7 as FieldProvider, a8 as useFieldLabelProps, a9 as useToggle } from "./tooltip-oH4lAnkn.js";
+import { A, a, aa, b, B, C, d, e, f, g, h, i, D, j, k, l, E, I, m, K, n, P, R, S, o, p, q, r, s, t, u, v, w, x, y, z, F, G, H, J, L, T, M, N, O, Q, U, V, W, X, Z } from "./tooltip-oH4lAnkn.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { a as clsx } from "./Box-DDhRNK02.js";
+import { useRef, useId, useCallback, forwardRef, useEffect, useState, createContext, useContext, useMemo, Children, isValidElement, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+function Text({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "text",
+      ...props,
+      className: clsx(className, "text-base/6 text-zinc-500 sm:text-sm/6 dark:text-zinc-400")
+    }
+  );
+}
+const sizes$1 = {
+  xs: "sm:max-w-xs",
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-lg",
+  xl: "sm:max-w-xl",
+  "2xl": "sm:max-w-2xl",
+  "3xl": "sm:max-w-3xl",
+  "4xl": "sm:max-w-4xl",
+  "5xl": "sm:max-w-5xl"
+};
+function Alert({
+  size = "md",
+  className,
+  children,
+  open,
+  onClose
+}) {
+  const panelRef = useRef(null);
+  const titleId = useId();
+  const backdrop = useTransition(open);
+  const panel = useTransition(open);
+  useScrollLock(open);
+  useFocusTrap(panelRef, open);
+  useEscapeKey(onClose, open);
+  const handleBackdropClick = useCallback(
+    (e2) => {
+      if (e2.target === e2.currentTarget) {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  if (!(backdrop.mounted || panel.mounted)) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { role: "alertdialog", "aria-modal": "true", "aria-labelledby": titleId, children: [
+      backdrop.mounted && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: backdrop.nodeRef,
+          ...backdrop.transitionProps,
+          className: "fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/15 px-2 py-2 transition duration-100 focus:outline-0 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-zinc-950/50"
+        }
+      ),
+      panel.mounted && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0",
+          onClick: handleBackdropClick,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "grid min-h-full grid-rows-[1fr_auto_1fr] justify-items-center p-8 sm:grid-rows-[1fr_auto_3fr] sm:p-4",
+              onClick: handleBackdropClick,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: (node) => {
+                    panelRef.current = node;
+                    panel.nodeRef.current = node;
+                  },
+                  ...panel.transitionProps,
+                  className: clsx(
+                    className,
+                    sizes$1[size],
+                    "row-start-2 w-full rounded-2xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 sm:rounded-2xl sm:p-6 dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline",
+                    "transition duration-100 will-change-transform data-closed:opacity-0 data-enter:ease-out data-closed:data-enter:scale-95 data-leave:ease-in"
+                  ),
+                  children
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function AlertTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "text-center text-base/6 font-semibold text-balance text-zinc-950 sm:text-left sm:text-sm/6 sm:text-wrap dark:text-white"
+      )
+    }
+  );
+}
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Text, { ...props, className: clsx(className, "mt-2 text-center text-pretty sm:text-left") });
+}
+function AlertBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: clsx(className, "mt-4") });
+}
+function AlertActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "mt-6 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:mt-4 sm:flex-row sm:*:w-auto"
+      )
+    }
+  );
+}
+const colors$1 = {
+  red: "bg-red-500/15 text-red-700 group-data-hover:bg-red-500/25 dark:bg-red-500/10 dark:text-red-400 dark:group-data-hover:bg-red-500/20",
+  orange: "bg-orange-500/15 text-orange-700 group-data-hover:bg-orange-500/25 dark:bg-orange-500/10 dark:text-orange-400 dark:group-data-hover:bg-orange-500/20",
+  amber: "bg-amber-400/20 text-amber-700 group-data-hover:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400 dark:group-data-hover:bg-amber-400/15",
+  yellow: "bg-yellow-400/20 text-yellow-700 group-data-hover:bg-yellow-400/30 dark:bg-yellow-400/10 dark:text-yellow-300 dark:group-data-hover:bg-yellow-400/15",
+  lime: "bg-lime-400/20 text-lime-700 group-data-hover:bg-lime-400/30 dark:bg-lime-400/10 dark:text-lime-300 dark:group-data-hover:bg-lime-400/15",
+  green: "bg-green-500/15 text-green-700 group-data-hover:bg-green-500/25 dark:bg-green-500/10 dark:text-green-400 dark:group-data-hover:bg-green-500/20",
+  emerald: "bg-emerald-500/15 text-emerald-700 group-data-hover:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-data-hover:bg-emerald-500/20",
+  teal: "bg-teal-500/15 text-teal-700 group-data-hover:bg-teal-500/25 dark:bg-teal-500/10 dark:text-teal-300 dark:group-data-hover:bg-teal-500/20",
+  cyan: "bg-cyan-400/20 text-cyan-700 group-data-hover:bg-cyan-400/30 dark:bg-cyan-400/10 dark:text-cyan-300 dark:group-data-hover:bg-cyan-400/15",
+  sky: "bg-sky-500/15 text-sky-700 group-data-hover:bg-sky-500/25 dark:bg-sky-500/10 dark:text-sky-300 dark:group-data-hover:bg-sky-500/20",
+  blue: "bg-blue-500/15 text-blue-700 group-data-hover:bg-blue-500/25 dark:text-blue-400 dark:group-data-hover:bg-blue-500/25",
+  indigo: "bg-indigo-500/15 text-indigo-700 group-data-hover:bg-indigo-500/25 dark:text-indigo-400 dark:group-data-hover:bg-indigo-500/20",
+  violet: "bg-violet-500/15 text-violet-700 group-data-hover:bg-violet-500/25 dark:text-violet-400 dark:group-data-hover:bg-violet-500/20",
+  purple: "bg-purple-500/15 text-purple-700 group-data-hover:bg-purple-500/25 dark:text-purple-400 dark:group-data-hover:bg-purple-500/20",
+  fuchsia: "bg-fuchsia-400/15 text-fuchsia-700 group-data-hover:bg-fuchsia-400/25 dark:bg-fuchsia-400/10 dark:text-fuchsia-400 dark:group-data-hover:bg-fuchsia-400/20",
+  pink: "bg-pink-400/15 text-pink-700 group-data-hover:bg-pink-400/25 dark:bg-pink-400/10 dark:text-pink-400 dark:group-data-hover:bg-pink-400/20",
+  rose: "bg-rose-400/15 text-rose-700 group-data-hover:bg-rose-400/25 dark:bg-rose-400/10 dark:text-rose-400 dark:group-data-hover:bg-rose-400/20",
+  zinc: "bg-zinc-600/10 text-zinc-700 group-data-hover:bg-zinc-600/20 dark:bg-white/5 dark:text-zinc-400 dark:group-data-hover:bg-white/10"
+};
+function Badge({
+  color = "zinc",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline",
+        colors$1[color]
+      )
+    }
+  );
+}
+forwardRef(function BadgeButton2({
+  color = "zinc",
+  className,
+  children,
+  ...props
+}, ref) {
+  const disabled = "disabled" in props ? props.disabled : false;
+  const interactiveProps = useDataInteractive({ disabled: disabled ?? false });
+  const classes = clsx(
+    className,
+    "group relative inline-flex rounded-md focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500"
+  );
+  return typeof props.href === "string" ? /* @__PURE__ */ jsx(Link, { ...props, className: classes, ref, children: /* @__PURE__ */ jsx(TouchTarget, { children: /* @__PURE__ */ jsx(Badge, { color, children }) }) }) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...props,
+      ...interactiveProps,
+      className: classes,
+      ref,
+      children: /* @__PURE__ */ jsx(TouchTarget, { children: /* @__PURE__ */ jsx(Badge, { color, children }) })
+    }
+  );
+});
+function useClickOutside(refs, onClickOutside, enabled = true) {
+  const callbackRef = useRef(onClickOutside);
+  callbackRef.current = onClickOutside;
+  useEffect(() => {
+    if (!enabled) return;
+    function handlePointerDown(e2) {
+      const target = e2.target;
+      const refArray = Array.isArray(refs) ? refs : [refs];
+      const isOutside = refArray.every((ref) => !ref.current?.contains(target));
+      if (isOutside) {
+        callbackRef.current();
+      }
+    }
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => document.removeEventListener("pointerdown", handlePointerDown, true);
+  }, [refs, enabled]);
+}
+function computePosition(trigger, popover, anchor, gap, padding) {
+  const triggerRect = trigger.getBoundingClientRect();
+  const popoverRect = popover.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  const viewportWidth = window.innerWidth;
+  let top;
+  let left;
+  let maxHeight;
+  const isTop = anchor.startsWith("top");
+  const spaceBelow = viewportHeight - triggerRect.bottom - gap - padding;
+  const spaceAbove = triggerRect.top - gap - padding;
+  if (anchor === "selection start") {
+    top = triggerRect.top;
+    maxHeight = viewportHeight - top - padding;
+  } else if (isTop) {
+    top = triggerRect.top - popoverRect.height - gap;
+    maxHeight = spaceAbove;
+    if (top < padding && spaceBelow > spaceAbove) {
+      top = triggerRect.bottom + gap;
+      maxHeight = spaceBelow;
+    }
+  } else {
+    top = triggerRect.bottom + gap;
+    maxHeight = spaceBelow;
+    if (top + popoverRect.height > viewportHeight - padding && spaceAbove > spaceBelow) {
+      top = triggerRect.top - popoverRect.height - gap;
+      maxHeight = spaceAbove;
+    }
+  }
+  const isEnd = anchor.endsWith("end");
+  const isStart = anchor.endsWith("start");
+  if (isEnd) {
+    left = triggerRect.right - popoverRect.width;
+  } else if (isStart || anchor === "selection start") {
+    left = triggerRect.left;
+  } else {
+    left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
+  }
+  left = Math.max(padding, Math.min(left, viewportWidth - popoverRect.width - padding));
+  top = Math.max(padding, top);
+  return { top, left, maxHeight: Math.max(100, maxHeight) };
+}
+function usePopover({
+  open,
+  anchor = "bottom",
+  gap = 8,
+  padding = 4
+}) {
+  const triggerRef = useRef(null);
+  const popoverRef = useRef(null);
+  const [position, setPosition] = useState({
+    top: 0,
+    left: 0,
+    maxHeight: 300
+  });
+  const updatePosition = useCallback(() => {
+    if (!(triggerRef.current && popoverRef.current && open)) return;
+    const pos = computePosition(triggerRef.current, popoverRef.current, anchor, gap, padding);
+    setPosition(pos);
+  }, [open, anchor, gap, padding]);
+  useEffect(() => {
+    if (!open) return;
+    requestAnimationFrame(updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [open, updatePosition]);
+  return {
+    triggerRef,
+    popoverRef,
+    position,
+    popoverProps: {
+      style: {
+        position: "fixed",
+        top: position.top,
+        left: position.left,
+        maxHeight: position.maxHeight,
+        zIndex: 50
+      }
+    }
+  };
+}
+const ComboboxContext = createContext(null);
+function useComboboxContext() {
+  const ctx = useContext(ComboboxContext);
+  if (!ctx) {
+    throw new Error("Combobox compound components must be used within <Combobox>");
+  }
+  return ctx;
+}
+function Combobox({
+  options,
+  displayValue,
+  filter,
+  anchor = "bottom",
+  className,
+  placeholder,
+  autoFocus,
+  "aria-label": ariaLabel,
+  children,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  disabled = false,
+  name
+}) {
+  const [selectedValue, setSelectedValue] = useControllableState({
+    value: controlledValue,
+    defaultValue: defaultValue ?? null,
+    onChange
+  });
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const inputRef = useRef(null);
+  const controlRef = useRef(null);
+  const listboxId = useId();
+  const filteredOptions = query === "" ? options : options.filter(
+    (option) => filter ? filter(option, query) : displayValue(option)?.toLowerCase().includes(query.toLowerCase())
+  );
+  const { triggerRef, popoverRef, popoverProps } = usePopover({
+    open: isOpen,
+    anchor,
+    gap: 8,
+    padding: 16
+  });
+  useEffect(() => {
+    if (controlRef.current) {
+      triggerRef.current = controlRef.current;
+    }
+  }, [triggerRef]);
+  const { mounted, nodeRef: transitionRef, transitionProps } = useTransition(isOpen);
+  useClickOutside(
+    [controlRef, popoverRef],
+    () => {
+      if (isOpen) close();
+    },
+    isOpen
+  );
+  useEscapeKey(() => {
+    if (isOpen) close();
+  }, isOpen);
+  const open = useCallback(() => {
+    if (disabled) return;
+    setIsOpen(true);
+    setActiveIndex(-1);
+  }, [disabled]);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setQuery("");
+    setActiveIndex(-1);
+  }, []);
+  const select = useCallback(
+    (value) => {
+      setSelectedValue(value);
+      close();
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+      });
+    },
+    [setSelectedValue, close]
+  );
+  const handleInputKeyDown = useCallback(
+    (e2) => {
+      switch (e2.key) {
+        case "ArrowDown": {
+          e2.preventDefault();
+          if (!isOpen) {
+            open();
+          } else {
+            setActiveIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0);
+          }
+          break;
+        }
+        case "ArrowUp": {
+          e2.preventDefault();
+          if (!isOpen) {
+            open();
+          } else {
+            setActiveIndex((prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1);
+          }
+          break;
+        }
+        case "Home": {
+          if (isOpen) {
+            e2.preventDefault();
+            setActiveIndex(0);
+          }
+          break;
+        }
+        case "End": {
+          if (isOpen) {
+            e2.preventDefault();
+            setActiveIndex(filteredOptions.length - 1);
+          }
+          break;
+        }
+        case "Enter": {
+          e2.preventDefault();
+          if (isOpen && activeIndex >= 0 && activeIndex < filteredOptions.length) {
+            select(filteredOptions[activeIndex]);
+          }
+          break;
+        }
+        case "Tab": {
+          if (isOpen) {
+            close();
+          }
+          break;
+        }
+      }
+    },
+    [isOpen, open, close, select, activeIndex, filteredOptions]
+  );
+  useEffect(() => {
+    if (!isOpen || activeIndex < 0) return;
+    const listbox = popoverRef.current;
+    if (!listbox) return;
+    const activeOption = listbox.querySelector(`[data-combobox-option-index="${activeIndex}"]`);
+    if (activeOption) {
+      activeOption.scrollIntoView({ block: "nearest" });
+    }
+  }, [activeIndex, isOpen, popoverRef]);
+  const contextValue = {
+    selectedValue,
+    activeIndex,
+    filteredOptions,
+    select,
+    setActiveIndex
+  };
+  return /* @__PURE__ */ jsxs(ComboboxContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref: controlRef,
+        "data-slot": "control",
+        ...disabled ? { "data-disabled": "" } : {},
+        className: clsx([
+          className,
+          "relative block w-full",
+          "before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm",
+          "dark:before:hidden",
+          "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500",
+          "has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none",
+          "has-data-invalid:before:shadow-red-500/10"
+        ]),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              autoFocus,
+              "data-slot": "control",
+              role: "combobox",
+              "aria-label": ariaLabel,
+              "aria-expanded": isOpen,
+              "aria-controls": listboxId,
+              "aria-activedescendant": isOpen && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0,
+              "aria-autocomplete": "list",
+              "aria-haspopup": "listbox",
+              disabled,
+              name,
+              value: isOpen ? query : displayValue(selectedValue) ?? "",
+              onChange: (e2) => {
+                setQuery(e2.target.value);
+                if (!isOpen) open();
+                setActiveIndex(-1);
+              },
+              onFocus: () => {
+                if (!isOpen) open();
+              },
+              onKeyDown: handleInputKeyDown,
+              placeholder,
+              ...disabled ? { "data-disabled": "" } : {},
+              className: clsx([
+                className,
+                "relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)]",
+                "pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)]",
+                "text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white",
+                "border border-zinc-950/10 data-hover:border-zinc-950/20 dark:border-white/10 dark:data-hover:border-white/20",
+                "bg-transparent dark:bg-white/5",
+                "focus:outline-hidden",
+                "data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:border-red-500 dark:data-invalid:data-hover:border-red-500",
+                "data-disabled:border-zinc-950/20 dark:data-disabled:border-white/15 dark:data-disabled:bg-white/2.5 dark:data-hover:data-disabled:border-white/15",
+                "dark:scheme-dark"
+              ])
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": "Toggle options",
+              disabled,
+              onClick: () => {
+                if (isOpen) {
+                  close();
+                } else {
+                  open();
+                  inputRef.current?.focus();
+                }
+              },
+              className: "group absolute inset-y-0 right-0 flex items-center px-2",
+              ...disabled ? { "data-disabled": "" } : {},
+              children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  className: "size-5 stroke-zinc-500 group-data-disabled:stroke-zinc-600 group-data-hover:stroke-zinc-700 sm:size-4 dark:stroke-zinc-400 dark:group-data-hover:stroke-zinc-300 forced-colors:stroke-[CanvasText]",
+                  viewBox: "0 0 16 16",
+                  "aria-hidden": "true",
+                  fill: "none",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M5.75 10.75L8 13L10.25 10.75",
+                        strokeWidth: 1.5,
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M10.25 5.25L8 3L5.75 5.25",
+                        strokeWidth: 1.5,
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    mounted && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (node) => {
+            popoverRef.current = node;
+            transitionRef.current = node;
+          },
+          role: "listbox",
+          id: listboxId,
+          ...popoverProps,
+          ...transitionProps,
+          className: clsx(
+            "[--anchor-gap:--spacing(2)] [--anchor-padding:--spacing(4)] sm:data-[anchor~=start]:[--anchor-offset:-4px]",
+            "isolate min-w-[calc(var(--input-width)+8px)] scroll-py-1 rounded-xl p-1 select-none empty:invisible",
+            "outline outline-transparent focus:outline-hidden",
+            "overflow-y-scroll overscroll-contain",
+            "bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75",
+            "shadow-lg ring-1 ring-zinc-950/10 dark:ring-white/10 dark:ring-inset",
+            "transition-opacity duration-100 ease-in data-closed:data-leave:opacity-0 data-transition:pointer-events-none"
+          ),
+          style: {
+            ...popoverProps.style,
+            minWidth: controlRef.current?.offsetWidth
+          },
+          children: filteredOptions.map(
+            (option, index) => option == null ? null : (
+              // biome-ignore lint/suspicious/noArrayIndexKey: filtered options have no stable ID
+              /* @__PURE__ */ jsx(ComboboxOptionIndexProvider, { index, children: children(option) }, index)
+            )
+          )
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+const ComboboxOptionIndexContext = createContext(-1);
+function ComboboxOptionIndexProvider({
+  index,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ComboboxOptionIndexContext.Provider, { value: index, children });
+}
+function ComboboxOption({
+  children,
+  className,
+  value,
+  disabled = false
+}) {
+  const { selectedValue, activeIndex, select, setActiveIndex } = useComboboxContext();
+  const index = useContext(ComboboxOptionIndexContext);
+  const isSelected = selectedValue === value;
+  const isActive = activeIndex === index;
+  const sharedClasses = clsx(
+    "flex min-w-0 items-center",
+    "*:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 sm:*:data-[slot=icon]:size-4",
+    "*:data-[slot=icon]:text-zinc-500 group-data-focus/option:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400",
+    "forced-colors:*:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focus/option:*:data-[slot=icon]:text-[Canvas]",
+    "*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:size-5"
+  );
+  return (
+    // biome-ignore lint/a11y/useFocusableInteractive: focus managed by roving tabindex
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-disabled": disabled,
+        "data-combobox-option-index": index,
+        ...isActive ? { "data-focus": "" } : {},
+        ...isSelected ? { "data-selected": "" } : {},
+        ...disabled ? { "data-disabled": "" } : {},
+        onPointerEnter: () => {
+          if (!disabled) setActiveIndex(index);
+        },
+        onPointerLeave: () => {
+          setActiveIndex(-1);
+        },
+        onClick: () => {
+          if (!disabled) select(value);
+        },
+        className: clsx(
+          "group/option grid w-full cursor-default grid-cols-[1fr_--spacing(5)] items-baseline gap-x-2 rounded-lg py-2.5 pr-2 pl-3.5 sm:grid-cols-[1fr_--spacing(4)] sm:py-1.5 sm:pr-2 sm:pl-3",
+          "text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]",
+          "outline-hidden data-focus:bg-blue-500 data-focus:text-white",
+          "forced-color-adjust-none forced-colors:data-focus:bg-[Highlight] forced-colors:data-focus:text-[HighlightText]",
+          "data-disabled:opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: clsx(className, sharedClasses), children }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "relative col-start-2 hidden size-5 self-center stroke-current group-data-selected/option:inline sm:size-4",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("path", { d: "M4 8.5l3 3L12 4", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+function ComboboxLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      className: clsx(className, "ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0")
+    }
+  );
+}
+function ComboboxDescription({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "flex flex-1 overflow-hidden text-zinc-500 group-data-focus/option:text-white before:w-2 before:min-w-0 before:shrink dark:text-zinc-400"
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children })
+    }
+  );
+}
+function DescriptionList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "grid grid-cols-1 text-base/6 sm:grid-cols-[min(50%,--spacing(80))_auto] sm:text-sm/6"
+      )
+    }
+  );
+}
+function DescriptionTerm({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "dt",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "col-start-1 border-t border-zinc-950/5 pt-3 text-zinc-500 first:border-none sm:border-t sm:border-zinc-950/5 sm:py-3 dark:border-white/5 dark:text-zinc-400 sm:dark:border-white/5"
+      )
+    }
+  );
+}
+function DescriptionDetails({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "dd",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "pt-1 pb-3 text-zinc-950 sm:border-t sm:border-zinc-950/5 sm:py-3 sm:nth-2:border-none dark:text-white dark:sm:border-white/5"
+      )
+    }
+  );
+}
+const sizes = {
+  xs: "sm:max-w-xs",
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-lg",
+  xl: "sm:max-w-xl",
+  "2xl": "sm:max-w-2xl",
+  "3xl": "sm:max-w-3xl",
+  "4xl": "sm:max-w-4xl",
+  "5xl": "sm:max-w-5xl"
+};
+function Dialog({
+  size = "lg",
+  className,
+  children,
+  open,
+  onClose
+}) {
+  const panelRef = useRef(null);
+  const titleId = useId();
+  const backdrop = useTransition(open);
+  const panel = useTransition(open);
+  useScrollLock(open);
+  useFocusTrap(panelRef, open);
+  useEscapeKey(onClose, open);
+  const handleBackdropClick = useCallback(
+    (e2) => {
+      if (e2.target === e2.currentTarget) {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  if (!(backdrop.mounted || panel.mounted)) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [
+      backdrop.mounted && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: backdrop.nodeRef,
+          ...backdrop.transitionProps,
+          className: "fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/25 px-2 py-2 transition duration-100 focus:outline-0 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-zinc-950/50"
+        }
+      ),
+      panel.mounted && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0",
+          onClick: handleBackdropClick,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "grid min-h-full grid-rows-[1fr_auto] justify-items-center sm:grid-rows-[1fr_auto_3fr] sm:p-4",
+              onClick: handleBackdropClick,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: (node) => {
+                    panelRef.current = node;
+                    panel.nodeRef.current = node;
+                  },
+                  ...panel.transitionProps,
+                  className: clsx(
+                    className,
+                    sizes[size],
+                    "row-start-2 w-full min-w-0 rounded-t-3xl bg-white p-(--gutter) shadow-lg ring-1 ring-zinc-950/10 [--gutter:--spacing(8)] sm:mb-auto sm:rounded-2xl dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline",
+                    "transition duration-100 will-change-transform data-closed:translate-y-12 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:data-closed:translate-y-0 sm:data-closed:data-enter:scale-95"
+                  ),
+                  children
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "text-lg/6 font-semibold text-balance text-zinc-950 sm:text-base/6 dark:text-white"
+      )
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Text, { ...props, className: clsx(className, "mt-2 text-pretty") });
+}
+function DialogBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: clsx(className, "mt-6") });
+}
+function DialogActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "mt-8 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto"
+      )
+    }
+  );
+}
+function Divider({
+  soft = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "hr",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "w-full border-t",
+        soft && "border-zinc-950/5 dark:border-white/5",
+        !soft && "border-zinc-950/10 dark:border-white/10"
+      )
+    }
+  );
+}
+function useRovingTabindex({
+  itemCount,
+  initialIndex = -1,
+  orientation = "vertical",
+  loop = true,
+  onActiveChange
+}) {
+  const [activeIndex, setActiveIndexState] = useState(initialIndex);
+  const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const onActiveChangeRef = useRef(onActiveChange);
+  onActiveChangeRef.current = onActiveChange;
+  const setActiveIndex = useCallback((index) => {
+    setActiveIndexState(index);
+    onActiveChangeRef.current?.(index);
+    const el = itemRefs.current.get(index);
+    el?.focus();
+  }, []);
+  const moveFocus = useCallback(
+    (direction) => {
+      if (itemCount === 0) return;
+      let next = activeIndex + direction;
+      if (loop) {
+        if (next < 0) next = itemCount - 1;
+        else if (next >= itemCount) next = 0;
+      } else {
+        next = Math.max(0, Math.min(itemCount - 1, next));
+      }
+      const el = itemRefs.current.get(next);
+      if (el?.hasAttribute("data-disabled")) {
+        const nextNext = next + direction;
+        if (nextNext >= 0 && nextNext < itemCount) {
+          setActiveIndex(nextNext);
+          return;
+        }
+      }
+      setActiveIndex(next);
+    },
+    [activeIndex, itemCount, loop, setActiveIndex]
+  );
+  const onKeyDown = useCallback(
+    (e2) => {
+      const prevKey = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+      const nextKey = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+      switch (e2.key) {
+        case prevKey:
+          e2.preventDefault();
+          moveFocus(-1);
+          break;
+        case nextKey:
+          e2.preventDefault();
+          moveFocus(1);
+          break;
+        case "Home":
+          e2.preventDefault();
+          setActiveIndex(0);
+          break;
+        case "End":
+          e2.preventDefault();
+          setActiveIndex(itemCount - 1);
+          break;
+      }
+    },
+    [moveFocus, setActiveIndex, itemCount, orientation]
+  );
+  const getItemProps = useCallback(
+    (index) => ({
+      tabIndex: index === activeIndex ? 0 : -1,
+      "data-focus": index === activeIndex ? "" : void 0,
+      ref: (el) => {
+        if (el) {
+          itemRefs.current.set(index, el);
+        } else {
+          itemRefs.current.delete(index);
+        }
+      },
+      onPointerEnter: () => setActiveIndex(index),
+      onClick: () => setActiveIndex(index)
+    }),
+    [activeIndex, setActiveIndex]
+  );
+  return {
+    activeIndex,
+    setActiveIndex,
+    containerProps: {
+      role: orientation === "vertical" ? "listbox" : "group",
+      onKeyDown
+    },
+    getItemProps
+  };
+}
+function useTypeAhead({
+  getItemText,
+  itemCount,
+  onMatch,
+  timeout = 350
+}) {
+  const searchBuffer = useRef("");
+  const timeoutRef = useRef(void 0);
+  const onKeyDown = useCallback(
+    (e2) => {
+      if (e2.key.length !== 1 || e2.ctrlKey || e2.metaKey || e2.altKey) return;
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      searchBuffer.current += e2.key.toLowerCase();
+      timeoutRef.current = setTimeout(() => {
+        searchBuffer.current = "";
+      }, timeout);
+      const query = searchBuffer.current;
+      for (let i2 = 0; i2 < itemCount; i2++) {
+        const text = getItemText(i2).toLowerCase();
+        if (text.startsWith(query)) {
+          onMatch(i2);
+          return;
+        }
+      }
+    },
+    [getItemText, itemCount, onMatch, timeout]
+  );
+  return { onKeyDown };
+}
+const DropdownContext = createContext(null);
+function useDropdownContext() {
+  const ctx = useContext(DropdownContext);
+  if (!ctx) {
+    throw new Error("Dropdown compound components must be used within <Dropdown>");
+  }
+  return ctx;
+}
+const DropdownItemContext = createContext(null);
+function Dropdown({
+  children,
+  ...props
+}) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const close = useCallback(() => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  }, []);
+  const value = useMemo(() => ({ open, setOpen, close, triggerRef }), [open, close]);
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ...props, children }) });
+}
+function DropdownButton({
+  as,
+  className,
+  ...props
+}) {
+  const { open, setOpen, triggerRef } = useDropdownContext();
+  const interactiveProps = useDataInteractive();
+  const Component = as ?? Button;
+  const handleClick = useCallback(() => {
+    setOpen(!open);
+  }, [open, setOpen]);
+  const handleKeyDown = useCallback(
+    (e2) => {
+      if (e2.key === "ArrowDown" || e2.key === "Enter" || e2.key === " ") {
+        e2.preventDefault();
+        setOpen(true);
+      }
+    },
+    [setOpen]
+  );
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: triggerRef,
+      ...interactiveProps,
+      ...props,
+      className,
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown
+    }
+  );
+}
+function DropdownMenu({
+  anchor = "bottom",
+  className,
+  children,
+  ...props
+}) {
+  const { open, close, triggerRef } = useDropdownContext();
+  const { mounted, nodeRef, transitionProps } = useTransition(open);
+  const popover = usePopover({
+    open,
+    anchor,
+    gap: 8,
+    padding: 4
+  });
+  const menuRef = useRef(null);
+  const combinedRef = useCallback(
+    (el) => {
+      menuRef.current = el;
+      popover.popoverRef.current = el;
+      nodeRef.current = el;
+    },
+    [popover.popoverRef, nodeRef]
+  );
+  popover.triggerRef.current = triggerRef.current;
+  useClickOutside([triggerRef, menuRef], close, open);
+  useEscapeKey(close, open);
+  const itemElements = useRef([]);
+  const [itemCount, setItemCount] = useState(0);
+  const register = useCallback((el) => {
+    if (!itemElements.current.includes(el)) {
+      itemElements.current.push(el);
+      setItemCount(itemElements.current.length);
+    }
+    return itemElements.current.indexOf(el);
+  }, []);
+  const unregister = useCallback((el) => {
+    const idx = itemElements.current.indexOf(el);
+    if (idx !== -1) {
+      itemElements.current.splice(idx, 1);
+      setItemCount(itemElements.current.length);
+    }
+  }, []);
+  const roving = useRovingTabindex({
+    itemCount,
+    initialIndex: -1,
+    orientation: "vertical",
+    loop: true
+  });
+  const typeAhead = useTypeAhead({
+    getItemText: (index) => itemElements.current[index]?.textContent ?? "",
+    itemCount,
+    onMatch: (index) => roving.setActiveIndex(index)
+  });
+  const handleKeyDown = useCallback(
+    (e2) => {
+      roving.containerProps.onKeyDown(e2);
+      typeAhead.onKeyDown(e2);
+      if (e2.key === "Enter" || e2.key === " ") {
+        e2.preventDefault();
+        const activeEl = itemElements.current[roving.activeIndex];
+        if (activeEl) {
+          activeEl.click();
+        }
+      }
+    },
+    [roving, typeAhead]
+  );
+  const itemContextValue = useMemo(
+    () => ({
+      register,
+      unregister,
+      getItemProps: roving.getItemProps
+    }),
+    [register, unregister, roving.getItemProps]
+  );
+  if (!mounted) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(DropdownItemContext.Provider, { value: itemContextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: combinedRef,
+        ...transitionProps,
+        ...props,
+        role: "menu",
+        "aria-orientation": "vertical",
+        style: popover.popoverProps.style,
+        onKeyDown: handleKeyDown,
+        className: clsx(
+          className,
+          // Anchor positioning
+          "[--anchor-gap:--spacing(2)] [--anchor-padding:--spacing(1)] data-[anchor~=end]:[--anchor-offset:6px] data-[anchor~=start]:[--anchor-offset:-6px] sm:data-[anchor~=end]:[--anchor-offset:4px] sm:data-[anchor~=start]:[--anchor-offset:-4px]",
+          // Base styles
+          "isolate w-max rounded-xl p-1",
+          // Invisible border that is only visible in `forced-colors` mode for accessibility purposes
+          "outline outline-transparent focus:outline-hidden",
+          // Handle scrolling when menu won't fit in viewport
+          "overflow-y-auto",
+          // Popover background
+          "bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75",
+          // Shadows
+          "shadow-lg ring-1 ring-zinc-950/10 dark:ring-white/10 dark:ring-inset",
+          // Define grid at the menu level if subgrid is supported
+          "supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]",
+          // Transitions
+          "transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0"
+        ),
+        children
+      }
+    ) }),
+    document.body
+  );
+}
+function DropdownItem({
+  className,
+  ...props
+}) {
+  const { close } = useDropdownContext();
+  const itemCtx = useContext(DropdownItemContext);
+  const interactiveProps = useDataInteractive({
+    disabled: "disabled" in props ? props.disabled ?? false : false
+  });
+  const elRef = useRef(null);
+  const indexRef = useRef(-1);
+  const setRef = useCallback(
+    (el) => {
+      if (el && itemCtx) {
+        elRef.current = el;
+        indexRef.current = itemCtx.register(el);
+      } else if (!el && elRef.current && itemCtx) {
+        itemCtx.unregister(elRef.current);
+        elRef.current = null;
+        indexRef.current = -1;
+      }
+    },
+    [itemCtx]
+  );
+  const rovingProps = itemCtx && indexRef.current >= 0 ? itemCtx.getItemProps(indexRef.current) : {
+    tabIndex: -1,
+    "data-focus": void 0,
+    ref: () => {
+    },
+    onPointerEnter: () => {
+    },
+    onClick: () => {
+    }
+  };
+  const propsDisabled = "disabled" in props ? props.disabled : false;
+  const propsOnClick = "onClick" in props && typeof props.onClick === "function" ? props.onClick : void 0;
+  const handleClick = useCallback(
+    (e2) => {
+      if (propsDisabled) return;
+      rovingProps.onClick();
+      propsOnClick?.(e2);
+      close();
+    },
+    [close, propsDisabled, propsOnClick, rovingProps]
+  );
+  const classes = clsx(
+    className,
+    // Base styles
+    "group cursor-default rounded-lg px-3.5 py-2.5 focus:outline-hidden sm:px-3 sm:py-1.5",
+    // Text styles
+    "text-left text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]",
+    // Focus
+    "data-focus:bg-blue-500 data-focus:text-white",
+    // Disabled state
+    "data-disabled:opacity-50",
+    // Forced colors mode
+    "forced-color-adjust-none forced-colors:data-focus:bg-[Highlight] forced-colors:data-focus:text-[HighlightText] forced-colors:data-focus:*:data-[slot=icon]:text-[HighlightText]",
+    // Use subgrid when available but fallback to an explicit grid layout if not
+    "col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] items-center supports-[grid-template-columns:subgrid]:grid-cols-subgrid",
+    // Icons
+    "*:data-[slot=icon]:col-start-1 *:data-[slot=icon]:row-start-1 *:data-[slot=icon]:mr-2.5 *:data-[slot=icon]:-ml-0.5 *:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:mr-2 sm:*:data-[slot=icon]:size-4",
+    "*:data-[slot=icon]:text-zinc-500 data-focus:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400 dark:data-focus:*:data-[slot=icon]:text-white",
+    // Avatar
+    "*:data-[slot=avatar]:mr-2.5 *:data-[slot=avatar]:-ml-1 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:mr-2 sm:*:data-[slot=avatar]:size-5"
+  );
+  if (typeof props.href === "string") {
+    const { href, children: children2, ...linkProps } = props;
+    return /* @__PURE__ */ jsx(
+      Link,
+      {
+        ref: setRef,
+        role: "menuitem",
+        href,
+        ...linkProps,
+        ...interactiveProps,
+        tabIndex: rovingProps.tabIndex,
+        "data-focus": rovingProps["data-focus"],
+        onPointerEnter: rovingProps.onPointerEnter,
+        onClick: handleClick,
+        className: classes,
+        children: children2
+      }
+    );
+  }
+  const {
+    disabled,
+    children,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onClick: _onClick,
+    ...buttonProps
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: setRef,
+      role: "menuitem",
+      type: "button",
+      disabled,
+      ...buttonProps,
+      ...interactiveProps,
+      tabIndex: rovingProps.tabIndex,
+      "data-focus": rovingProps["data-focus"],
+      onPointerEnter: rovingProps.onPointerEnter,
+      onClick: handleClick,
+      className: classes,
+      children
+    }
+  );
+}
+function DropdownHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: clsx(className, "col-span-5 px-3.5 pt-2.5 pb-1 sm:px-3") });
+}
+function DropdownSection({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      ...props,
+      className: clsx(
+        className,
+        // Define grid at the section level instead of the item level if subgrid is supported
+        "col-span-full supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]"
+      )
+    }
+  );
+}
+function DropdownHeading({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "presentation",
+      ...props,
+      className: clsx(
+        className,
+        "col-span-full grid grid-cols-[1fr_auto] gap-x-12 px-3.5 pt-2 pb-1 text-sm/5 font-medium text-zinc-500 sm:px-3 sm:text-xs/5 dark:text-zinc-400"
+      )
+    }
+  );
+}
+function DropdownDivider({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "hr",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "col-span-full mx-3.5 my-1 h-px border-0 bg-zinc-950/5 sm:mx-3 dark:bg-white/10 forced-colors:bg-[CanvasText]"
+      )
+    }
+  );
+}
+function DropdownLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, "data-slot": "label", className: clsx(className, "col-start-2 row-start-1") });
+}
+function DropdownDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "description",
+      ...props,
+      className: clsx(
+        className,
+        "col-span-2 col-start-2 row-start-2 text-sm/5 text-zinc-500 group-data-focus:text-white sm:text-xs/5 dark:text-zinc-400 forced-colors:group-data-focus:text-[HighlightText]"
+      )
+    }
+  );
+}
+function DropdownShortcut({
+  keys,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("kbd", { ...props, className: clsx(className, "col-start-5 row-start-1 flex justify-self-end"), children: (Array.isArray(keys) ? keys : keys.split("")).map((char, index) => {
+    return /* @__PURE__ */ jsx(
+      "kbd",
+      {
+        className: clsx([
+          "min-w-[2ch] text-center font-sans text-zinc-400 capitalize group-data-focus:text-white forced-colors:group-data-focus:text-[HighlightText]",
+          // Make sure key names that are longer than one character (like "Tab") have extra space
+          index > 0 && char.length > 1 && "pl-1"
+        ]),
+        children: char
+      },
+      `${char}-${index}`
+    );
+  }) });
+}
+function Fieldset({
+  className,
+  disabled,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      disabled,
+      ...props,
+      className: clsx(className, "*:data-[slot=text]:mt-1 [&>*+[data-slot=control]]:mt-6")
+    }
+  );
+}
+function Legend({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "legend",
+    {
+      "data-slot": "legend",
+      ...props,
+      className: clsx(
+        className,
+        "text-base/6 font-semibold text-zinc-950 data-disabled:opacity-50 sm:text-sm/6 dark:text-white"
+      )
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "control", ...props, className: clsx(className, "space-y-8") });
+}
+function Field({
+  className,
+  disabled,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(FieldProvider, { disabled, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      "data-disabled": disabled ? "" : void 0,
+      className: clsx(
+        className,
+        "[&>[data-slot=label]+[data-slot=control]]:mt-3",
+        "[&>[data-slot=label]+[data-slot=description]]:mt-1",
+        "[&>[data-slot=description]+[data-slot=control]]:mt-3",
+        "[&>[data-slot=control]+[data-slot=description]]:mt-3",
+        "[&>[data-slot=control]+[data-slot=error]]:mt-3",
+        "*:data-[slot=label]:font-medium"
+      )
+    }
+  ) });
+}
+function Label({
+  className,
+  ...props
+}) {
+  const fieldLabelProps = useFieldLabelProps();
+  return (
+    // biome-ignore lint/a11y/noLabelWithoutControl: htmlFor provided via useFieldLabelProps hook
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        "data-slot": "label",
+        ...fieldLabelProps,
+        ...props,
+        className: clsx(
+          className,
+          "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6 dark:text-white"
+        )
+      }
+    )
+  );
+}
+function Description({
+  className,
+  ...props
+}) {
+  const fieldDescriptionProps = useFieldDescriptionProps();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "description",
+      ...fieldDescriptionProps,
+      ...props,
+      className: clsx(
+        className,
+        "text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6 dark:text-zinc-400"
+      )
+    }
+  );
+}
+function ErrorMessage({
+  className,
+  ...props
+}) {
+  const fieldErrorProps = useFieldErrorProps();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "error",
+      ...fieldErrorProps,
+      ...props,
+      className: clsx(
+        className,
+        "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6 dark:text-red-500"
+      )
+    }
+  );
+}
+function Heading({ className, level = 1, ...props }) {
+  const Element = `h${level}`;
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      ...props,
+      className: clsx(
+        className,
+        "text-2xl/8 font-semibold text-zinc-950 sm:text-xl/8 dark:text-white"
+      )
+    }
+  );
+}
+const ListboxContext = createContext(null);
+function useListboxContext() {
+  const ctx = useContext(ListboxContext);
+  if (!ctx) {
+    throw new Error("Listbox compound components must be used within <Listbox>");
+  }
+  return ctx;
+}
+function countOptions(children) {
+  let count = 0;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.type === ListboxOption) {
+      count++;
+    }
+  });
+  return count;
+}
+const OptionIndexContext = createContext(-1);
+function OptionIndexProvider({ children }) {
+  let index = 0;
+  return /* @__PURE__ */ jsx(Fragment, { children: Children.map(children, (child) => {
+    if (!isValidElement(child)) return child;
+    if (child.type === ListboxOption) {
+      const currentIndex = index++;
+      return /* @__PURE__ */ jsx(OptionIndexContext.Provider, { value: currentIndex, children: child });
+    }
+    return child;
+  }) });
+}
+function Listbox({
+  className,
+  placeholder,
+  autoFocus,
+  "aria-label": ariaLabel,
+  children: options,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  disabled = false,
+  name
+}) {
+  const [value, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue,
+    onChange
+  });
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [optionCount, setOptionCount] = useState(0);
+  const buttonId = useId();
+  const listId = useId();
+  const optionMapRef = useRef(/* @__PURE__ */ new Map());
+  const registerOption = useCallback((index, optValue, element) => {
+    optionMapRef.current.set(index, { value: optValue, element });
+  }, []);
+  useEffect(() => {
+    setOptionCount(countOptions(options));
+  }, [options]);
+  const { triggerRef, popoverRef, popoverProps } = usePopover({
+    open,
+    anchor: "selection start",
+    gap: 0,
+    padding: 16
+  });
+  const { mounted, nodeRef, transitionProps } = useTransition(open);
+  useClickOutside([triggerRef, popoverRef], () => setOpen(false), open);
+  useEscapeKey(() => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  }, open);
+  const selectActiveOption = useCallback(() => {
+    const entry = optionMapRef.current.get(activeIndex);
+    if (entry) {
+      setValue(entry.value);
+      setOpen(false);
+      triggerRef.current?.focus();
+    }
+  }, [activeIndex, setValue, triggerRef]);
+  const handleOptionsKeyDown = useCallback(
+    (e2) => {
+      switch (e2.key) {
+        case "ArrowDown": {
+          e2.preventDefault();
+          setActiveIndex((prev) => {
+            const next = prev + 1;
+            return next >= optionCount ? 0 : next;
+          });
+          break;
+        }
+        case "ArrowUp": {
+          e2.preventDefault();
+          setActiveIndex((prev) => {
+            const next = prev - 1;
+            return next < 0 ? optionCount - 1 : next;
+          });
+          break;
+        }
+        case "Home": {
+          e2.preventDefault();
+          setActiveIndex(0);
+          break;
+        }
+        case "End": {
+          e2.preventDefault();
+          setActiveIndex(optionCount - 1);
+          break;
+        }
+        case "Enter":
+        case " ": {
+          e2.preventDefault();
+          selectActiveOption();
+          break;
+        }
+      }
+    },
+    [optionCount, selectActiveOption]
+  );
+  useEffect(() => {
+    if (!open || activeIndex < 0) return;
+    const entry = optionMapRef.current.get(activeIndex);
+    entry?.element?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, open]);
+  useEffect(() => {
+    if (open) {
+      let selectedIdx = -1;
+      for (const [idx, entry] of optionMapRef.current.entries()) {
+        if (entry.value === value) {
+          selectedIdx = idx;
+          break;
+        }
+      }
+      setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
+    }
+  }, [open, value]);
+  useEffect(() => {
+    if (mounted && popoverRef.current) {
+      popoverRef.current.focus({ preventScroll: true });
+    }
+  }, [mounted, popoverRef]);
+  const selectedContent = useMemo(() => {
+    let matched = null;
+    Children.forEach(options, (child) => {
+      if (!isValidElement(child)) return;
+      if (child.type === ListboxOption && child.props.value === value) {
+        matched = child.props.children;
+      }
+    });
+    return matched;
+  }, [options, value]);
+  const ctx = useMemo(
+    () => ({
+      value,
+      setValue,
+      open,
+      setOpen,
+      disabled,
+      activeIndex,
+      setActiveIndex,
+      registerOption,
+      optionCount,
+      buttonId,
+      listId
+    }),
+    [value, setValue, open, disabled, activeIndex, registerOption, optionCount, buttonId, listId]
+  );
+  const handleButtonClick = useCallback(() => {
+    if (!disabled) {
+      setOpen((prev) => !prev);
+    }
+  }, [disabled]);
+  const handleButtonKeyDown = useCallback(
+    (e2) => {
+      if (disabled) return;
+      if (e2.key === "ArrowDown" || e2.key === "ArrowUp" || e2.key === "Enter" || e2.key === " ") {
+        e2.preventDefault();
+        setOpen(true);
+      }
+    },
+    [disabled]
+  );
+  const selectedSharedClasses = clsx(
+    "flex min-w-0 items-center",
+    "*:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 sm:*:data-[slot=icon]:size-4",
+    "*:data-[slot=icon]:text-zinc-500 group-data-focus/option:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400",
+    "forced-colors:*:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focus/option:*:data-[slot=icon]:text-[Canvas]",
+    "*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:size-5"
+  );
+  const displayContent = selectedContent != null ? /* @__PURE__ */ jsx("span", { className: selectedSharedClasses, children: selectedContent }) : placeholder ? /* @__PURE__ */ jsx("span", { className: "block truncate text-zinc-500", children: placeholder }) : null;
+  return /* @__PURE__ */ jsxs(ListboxContext.Provider, { value: ctx, children: [
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: String(value ?? "") }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        id: buttonId,
+        type: "button",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": open ? listId : void 0,
+        "aria-label": ariaLabel,
+        "aria-disabled": disabled || void 0,
+        "data-slot": "control",
+        "data-disabled": disabled ? "" : void 0,
+        "data-active": open ? "" : void 0,
+        autoFocus,
+        disabled,
+        onClick: handleButtonClick,
+        onKeyDown: handleButtonKeyDown,
+        className: clsx([
+          className,
+          "group relative block w-full",
+          "before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm",
+          "dark:before:hidden",
+          "focus:outline-hidden",
+          "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset data-focus:after:ring-2 data-focus:after:ring-blue-500",
+          "data-disabled:opacity-50 data-disabled:before:bg-zinc-950/5 data-disabled:before:shadow-none"
+        ]),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx([
+                "relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)]",
+                "min-h-11 sm:min-h-9",
+                "pr-[calc(--spacing(7)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pl-[calc(--spacing(3)-1px)]",
+                "text-left text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]",
+                "border border-zinc-950/10 group-data-active:border-zinc-950/20 group-data-hover:border-zinc-950/20 dark:border-white/10 dark:group-data-active:border-white/20 dark:group-data-hover:border-white/20",
+                "bg-transparent dark:bg-white/5",
+                "group-data-invalid:border-red-500 group-data-hover:group-data-invalid:border-red-500 dark:group-data-invalid:border-red-600 dark:data-hover:group-data-invalid:border-red-600",
+                "group-data-disabled:border-zinc-950/20 group-data-disabled:opacity-100 dark:group-data-disabled:border-white/15 dark:group-data-disabled:bg-white/2.5 dark:group-data-disabled:data-hover:border-white/15"
+              ]),
+              children: displayContent
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "size-5 stroke-zinc-500 group-data-disabled:stroke-zinc-600 sm:size-4 dark:stroke-zinc-400 forced-colors:stroke-[CanvasText]",
+              viewBox: "0 0 16 16",
+              "aria-hidden": "true",
+              fill: "none",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M5.75 10.75L8 13L10.25 10.75",
+                    strokeWidth: 1.5,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M10.25 5.25L8 3L5.75 5.25",
+                    strokeWidth: 1.5,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
+    mounted && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (node) => {
+            popoverRef.current = node;
+            nodeRef.current = node;
+          },
+          ...popoverProps,
+          ...transitionProps,
+          id: listId,
+          role: "listbox",
+          "aria-labelledby": buttonId,
+          tabIndex: -1,
+          onKeyDown: handleOptionsKeyDown,
+          className: clsx(
+            "[--anchor-offset:-1.625rem] [--anchor-padding:--spacing(4)] sm:[--anchor-offset:-1.375rem]",
+            "isolate w-max min-w-[calc(var(--button-width)+1.75rem)] scroll-py-1 rounded-xl p-1 select-none",
+            "outline outline-transparent focus:outline-hidden",
+            "overflow-y-scroll overscroll-contain",
+            "bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75",
+            "shadow-lg ring-1 ring-zinc-950/10 dark:ring-white/10 dark:ring-inset",
+            "transition-opacity duration-100 ease-in data-closed:data-leave:opacity-0 data-transition:pointer-events-none"
+          ),
+          style: {
+            ...popoverProps.style,
+            minWidth: triggerRef.current ? `${triggerRef.current.getBoundingClientRect().width + 28}px` : void 0
+          },
+          children: /* @__PURE__ */ jsx(OptionIndexProvider, { children: options })
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function ListboxOption({
+  children,
+  className,
+  value: optionValue,
+  disabled: optionDisabled = false
+}) {
+  const ctx = useListboxContext();
+  const index = useContext(OptionIndexContext);
+  const optionRef = useRef(null);
+  const isSelected = ctx.value === optionValue;
+  const isFocused = ctx.activeIndex === index;
+  useEffect(() => {
+    ctx.registerOption(index, optionValue, optionRef.current);
+  }, [index, optionValue, ctx.registerOption, ctx]);
+  const sharedClasses = clsx(
+    "flex min-w-0 items-center",
+    "*:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 sm:*:data-[slot=icon]:size-4",
+    "*:data-[slot=icon]:text-zinc-500 group-data-focus/option:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400",
+    "forced-colors:*:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focus/option:*:data-[slot=icon]:text-[Canvas]",
+    "*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:size-5"
+  );
+  const handleClick = useCallback(() => {
+    if (optionDisabled) return;
+    ctx.setValue(optionValue);
+    ctx.setOpen(false);
+  }, [optionDisabled, ctx.setValue, ctx.setOpen, optionValue, ctx]);
+  const handlePointerEnter = useCallback(() => {
+    if (!optionDisabled) {
+      ctx.setActiveIndex(index);
+    }
+  }, [optionDisabled, ctx.setActiveIndex, index, ctx]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: optionRef,
+      role: "option",
+      "aria-selected": isSelected,
+      "aria-disabled": optionDisabled || void 0,
+      "data-selected": isSelected ? "" : void 0,
+      "data-focus": isFocused ? "" : void 0,
+      "data-disabled": optionDisabled ? "" : void 0,
+      onClick: handleClick,
+      onPointerEnter: handlePointerEnter,
+      tabIndex: -1,
+      className: clsx(
+        "group/option grid cursor-default grid-cols-[--spacing(5)_1fr] items-baseline gap-x-2 rounded-lg py-2.5 pr-3.5 pl-2 sm:grid-cols-[--spacing(4)_1fr] sm:py-1.5 sm:pr-3 sm:pl-1.5",
+        "text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]",
+        "outline-hidden data-focus:bg-blue-500 data-focus:text-white",
+        "forced-color-adjust-none forced-colors:data-focus:bg-[Highlight] forced-colors:data-focus:text-[HighlightText]",
+        "data-disabled:opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "relative hidden size-5 self-center stroke-current group-data-selected/option:inline sm:size-4",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { d: "M4 8.5l3 3L12 4", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: clsx(className, sharedClasses, "col-start-2"), children })
+      ]
+    }
+  );
+}
+function ListboxLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      className: clsx(className, "ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0")
+    }
+  );
+}
+function ListboxDescription({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "flex flex-1 overflow-hidden text-zinc-500 group-data-focus/option:text-white before:w-2 before:min-w-0 before:shrink dark:text-zinc-400"
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children })
+    }
+  );
+}
+const LayoutGroupContext = createContext(null);
+function LayoutGroup({ children }) {
+  const rectsRef = useRef(/* @__PURE__ */ new Map());
+  return /* @__PURE__ */ jsx(LayoutGroupContext, { value: rectsRef, children });
+}
+const LAYOUT_EASING = "cubic-bezier(0.25, 0.8, 0.25, 1)";
+const LAYOUT_DURATION = 350;
+function useLayoutAnimation(layoutId) {
+  const ref = useRef(null);
+  const rectsCtx = useContext(LayoutGroupContext);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    const rects = rectsCtx?.current;
+    if (!(el && rects)) return;
+    const prevRect = rects.get(layoutId);
+    const currentRect = el.getBoundingClientRect();
+    rects.set(layoutId, currentRect);
+    if (prevRect) {
+      const deltaX = prevRect.left - currentRect.left;
+      const deltaY = prevRect.top - currentRect.top;
+      if (Math.abs(deltaX) > 0.5 || Math.abs(deltaY) > 0.5) {
+        el.animate(
+          [{ transform: `translate(${deltaX}px, ${deltaY}px)` }, { transform: "translate(0, 0)" }],
+          {
+            duration: LAYOUT_DURATION,
+            easing: LAYOUT_EASING,
+            fill: "none"
+          }
+        );
+      }
+    }
+    return () => {
+      if (el) {
+        rects.set(layoutId, el.getBoundingClientRect());
+      }
+    };
+  });
+  return ref;
+}
+function LayoutIndicator({ layoutId, ...props }) {
+  const ref = useLayoutAnimation(layoutId);
+  return /* @__PURE__ */ jsx("span", { ref, ...props });
+}
+function Navbar({ className, ...props }) {
+  return /* @__PURE__ */ jsx("nav", { ...props, className: clsx(className, "flex flex-1 items-center gap-4 py-2.5") });
+}
+function NavbarDivider({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      ...props,
+      className: clsx(className, "h-6 w-px bg-zinc-950/10 dark:bg-white/10")
+    }
+  );
+}
+function NavbarSection({ className, ...props }) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(LayoutGroup, { id, children: /* @__PURE__ */ jsx("div", { ...props, className: clsx(className, "flex items-center gap-3") }) });
+}
+function NavbarSpacer({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", ...props, className: clsx(className, "-ml-4 flex-1") });
+}
+const NavbarItem = forwardRef(function NavbarItem2({
+  current,
+  className,
+  children,
+  ...props
+}, ref) {
+  const disabled = "disabled" in props ? props.disabled : false;
+  const interactiveProps = useDataInteractive({ disabled: disabled ?? false });
+  const classes = clsx(
+    // Base
+    "relative flex min-w-0 items-center gap-3 rounded-lg p-2 text-left text-base/6 font-medium text-zinc-950 sm:text-sm/5",
+    // Leading icon/icon-only
+    "*:data-[slot=icon]:size-6 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:fill-zinc-500 sm:*:data-[slot=icon]:size-5",
+    // Trailing icon (down chevron or similar)
+    "*:not-nth-2:last:data-[slot=icon]:ml-auto *:not-nth-2:last:data-[slot=icon]:size-5 sm:*:not-nth-2:last:data-[slot=icon]:size-4",
+    // Avatar
+    "*:data-[slot=avatar]:-m-0.5 *:data-[slot=avatar]:size-7 *:data-[slot=avatar]:[--avatar-radius:var(--radius-md)] sm:*:data-[slot=avatar]:size-6",
+    // Hover
+    "data-hover:bg-zinc-950/5 data-hover:*:data-[slot=icon]:fill-zinc-950",
+    // Active
+    "data-active:bg-zinc-950/5 data-active:*:data-[slot=icon]:fill-zinc-950",
+    // Dark mode
+    "dark:text-white dark:*:data-[slot=icon]:fill-zinc-400",
+    "dark:data-hover:bg-white/5 dark:data-hover:*:data-[slot=icon]:fill-white",
+    "dark:data-active:bg-white/5 dark:data-active:*:data-[slot=icon]:fill-white"
+  );
+  return /* @__PURE__ */ jsxs("span", { className: clsx(className, "relative"), children: [
+    current && /* @__PURE__ */ jsx(
+      LayoutIndicator,
+      {
+        layoutId: "current-indicator",
+        className: "absolute inset-x-2 -bottom-2.5 h-0.5 rounded-full bg-zinc-950 dark:bg-white"
+      }
+    ),
+    typeof props.href === "string" ? /* @__PURE__ */ jsx(
+      Link,
+      {
+        ...props,
+        className: classes,
+        "data-current": current ? "true" : void 0,
+        ref,
+        children: /* @__PURE__ */ jsx(TouchTarget, { children })
+      }
+    ) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ...props,
+        ...interactiveProps,
+        className: clsx("cursor-default", classes),
+        "data-current": current ? "true" : void 0,
+        ref,
+        children: /* @__PURE__ */ jsx(TouchTarget, { children })
+      }
+    )
+  ] });
+});
+function NavbarLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { ...props, className: clsx(className, "truncate") });
+}
+const RadioGroupContext = createContext(null);
+function useRadioGroupContext() {
+  const ctx = useContext(RadioGroupContext);
+  if (!ctx) throw new Error("Radio must be used within a RadioGroup");
+  return ctx;
+}
+function RadioGroup({
+  className,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  disabled = false,
+  name,
+  children,
+  ...props
+}) {
+  const [value, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue: defaultValue ?? "",
+    onChange
+  });
+  const handleKeyDown = useCallback(
+    (e2) => {
+      const radios = Array.from(
+        e2.currentTarget.querySelectorAll('[role="radio"]:not([data-disabled])')
+      );
+      if (radios.length === 0) return;
+      const currentIndex = radios.indexOf(document.activeElement);
+      let nextIndex = currentIndex;
+      switch (e2.key) {
+        case "ArrowDown":
+        case "ArrowRight":
+          e2.preventDefault();
+          nextIndex = currentIndex + 1 >= radios.length ? 0 : currentIndex + 1;
+          break;
+        case "ArrowUp":
+        case "ArrowLeft":
+          e2.preventDefault();
+          nextIndex = currentIndex - 1 < 0 ? radios.length - 1 : currentIndex - 1;
+          break;
+        case "Home":
+          e2.preventDefault();
+          nextIndex = 0;
+          break;
+        case "End":
+          e2.preventDefault();
+          nextIndex = radios.length - 1;
+          break;
+        default:
+          return;
+      }
+      const nextRadio = radios[nextIndex];
+      if (!nextRadio) return;
+      nextRadio.focus();
+      const radioValue = nextRadio.getAttribute("data-value");
+      if (radioValue != null) {
+        setValue(radioValue);
+      }
+    },
+    [setValue]
+  );
+  return /* @__PURE__ */ jsx(RadioGroupContext, { value: { value, onChange: setValue, disabled, name }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "data-slot": "control",
+      onKeyDown: handleKeyDown,
+      ...props,
+      className: clsx(
+        className,
+        // Basic groups
+        "space-y-3 **:data-[slot=label]:font-normal",
+        // With descriptions
+        "has-data-[slot=description]:space-y-6 has-data-[slot=description]:**:data-[slot=label]:font-medium"
+      ),
+      children
+    }
+  ) });
+}
+function RadioField({
+  className,
+  disabled,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(FieldProvider, { disabled, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field",
+      "data-disabled": disabled ? "" : void 0,
+      ...props,
+      className: clsx(
+        className,
+        // Base layout
+        "grid grid-cols-[1.125rem_1fr] gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]",
+        // Control layout
+        "*:data-[slot=control]:col-start-1 *:data-[slot=control]:row-start-1 *:data-[slot=control]:mt-0.75 sm:*:data-[slot=control]:mt-1",
+        // Label layout
+        "*:data-[slot=label]:col-start-2 *:data-[slot=label]:row-start-1",
+        // Description layout
+        "*:data-[slot=description]:col-start-2 *:data-[slot=description]:row-start-2",
+        // With description
+        "has-data-[slot=description]:**:data-[slot=label]:font-medium"
+      )
+    }
+  ) });
+}
+const base = [
+  // Basic layout
+  "relative isolate flex size-4.75 shrink-0 rounded-full sm:size-4.25",
+  // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+  "before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-white before:shadow-sm",
+  // Background color when checked
+  "group-data-checked:before:bg-(--radio-checked-bg)",
+  // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+  "dark:before:hidden",
+  // Background color applied to control in dark mode
+  "dark:bg-white/5 dark:group-data-checked:bg-(--radio-checked-bg)",
+  // Border
+  "border border-zinc-950/15 group-data-checked:border-transparent group-data-hover:group-data-checked:border-transparent group-data-hover:border-zinc-950/30 group-data-checked:bg-(--radio-checked-border)",
+  "dark:border-white/15 dark:group-data-checked:border-white/5 dark:group-data-hover:group-data-checked:border-white/5 dark:group-data-hover:border-white/30",
+  // Inner highlight shadow
+  "after:absolute after:inset-0 after:rounded-full after:shadow-[inset_0_1px_--theme(--color-white/15%)]",
+  "dark:after:-inset-px dark:after:hidden dark:after:rounded-full dark:group-data-checked:after:block",
+  // Indicator color (light mode)
+  "[--radio-indicator:transparent] group-data-checked:[--radio-indicator:var(--radio-checked-indicator)] group-data-hover:group-data-checked:[--radio-indicator:var(--radio-checked-indicator)] group-data-hover:[--radio-indicator:var(--color-zinc-900)]/10",
+  // Indicator color (dark mode)
+  "dark:group-data-hover:group-data-checked:[--radio-indicator:var(--radio-checked-indicator)] dark:group-data-hover:[--radio-indicator:var(--color-zinc-700)]",
+  // Focus ring
+  "group-data-focus:outline group-data-focus:outline-2 group-data-focus:outline-offset-2 group-data-focus:outline-blue-500",
+  // Disabled state
+  "group-data-disabled:opacity-50",
+  "group-data-disabled:border-zinc-950/25 group-data-disabled:bg-zinc-950/5 group-data-disabled:[--radio-checked-indicator:var(--color-zinc-950)]/50 group-data-disabled:before:bg-transparent",
+  "dark:group-data-disabled:border-white/20 dark:group-data-disabled:bg-white/2.5 dark:group-data-disabled:[--radio-checked-indicator:var(--color-white)]/50 dark:group-data-checked:group-data-disabled:after:hidden"
+];
+const radioColors = {
+  "dark/zinc": [
+    "[--radio-checked-bg:var(--color-zinc-900)] [--radio-checked-border:var(--color-zinc-950)]/90 [--radio-checked-indicator:var(--color-white)]",
+    "dark:[--radio-checked-bg:var(--color-zinc-600)]"
+  ],
+  "dark/white": [
+    "[--radio-checked-bg:var(--color-zinc-900)] [--radio-checked-border:var(--color-zinc-950)]/90 [--radio-checked-indicator:var(--color-white)]",
+    "dark:[--radio-checked-bg:var(--color-white)] dark:[--radio-checked-border:var(--color-zinc-950)]/15 dark:[--radio-checked-indicator:var(--color-zinc-900)]"
+  ],
+  white: "[--radio-checked-bg:var(--color-white)] [--radio-checked-border:var(--color-zinc-950)]/15 [--radio-checked-indicator:var(--color-zinc-900)]",
+  dark: "[--radio-checked-bg:var(--color-zinc-900)] [--radio-checked-border:var(--color-zinc-950)]/90 [--radio-checked-indicator:var(--color-white)]",
+  zinc: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-zinc-600)] [--radio-checked-border:var(--color-zinc-700)]/90",
+  red: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-red-600)] [--radio-checked-border:var(--color-red-700)]/90",
+  orange: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-orange-500)] [--radio-checked-border:var(--color-orange-600)]/90",
+  amber: "[--radio-checked-bg:var(--color-amber-400)] [--radio-checked-border:var(--color-amber-500)]/80 [--radio-checked-indicator:var(--color-amber-950)]",
+  yellow: "[--radio-checked-bg:var(--color-yellow-300)] [--radio-checked-border:var(--color-yellow-400)]/80 [--radio-checked-indicator:var(--color-yellow-950)]",
+  lime: "[--radio-checked-bg:var(--color-lime-300)] [--radio-checked-border:var(--color-lime-400)]/80 [--radio-checked-indicator:var(--color-lime-950)]",
+  green: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-green-600)] [--radio-checked-border:var(--color-green-700)]/90",
+  emerald: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-emerald-600)] [--radio-checked-border:var(--color-emerald-700)]/90",
+  teal: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-teal-600)] [--radio-checked-border:var(--color-teal-700)]/90",
+  cyan: "[--radio-checked-bg:var(--color-cyan-300)] [--radio-checked-border:var(--color-cyan-400)]/80 [--radio-checked-indicator:var(--color-cyan-950)]",
+  sky: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-sky-500)] [--radio-checked-border:var(--color-sky-600)]/80",
+  blue: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-blue-600)] [--radio-checked-border:var(--color-blue-700)]/90",
+  indigo: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-indigo-500)] [--radio-checked-border:var(--color-indigo-600)]/90",
+  violet: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-violet-500)] [--radio-checked-border:var(--color-violet-600)]/90",
+  purple: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-purple-500)] [--radio-checked-border:var(--color-purple-600)]/90",
+  fuchsia: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-fuchsia-500)] [--radio-checked-border:var(--color-fuchsia-600)]/90",
+  pink: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-pink-500)] [--radio-checked-border:var(--color-pink-600)]/90",
+  rose: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-rose-500)] [--radio-checked-border:var(--color-rose-600)]/90"
+};
+function Radio({
+  color = "dark/zinc",
+  className,
+  value,
+  disabled: localDisabled,
+  ...props
+}) {
+  const group = useRadioGroupContext();
+  const disabled = localDisabled || group.disabled;
+  const checked = group.value === value;
+  const interactiveProps = useDataInteractive({ disabled });
+  const handleClick = useCallback(() => {
+    if (!disabled) {
+      group.onChange(value);
+    }
+  }, [disabled, group, value]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "radio",
+      "data-slot": "control",
+      "aria-checked": checked,
+      "data-checked": checked ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-value": value,
+      tabIndex: checked ? 0 : -1,
+      onClick: handleClick,
+      ...interactiveProps,
+      ...props,
+      className: clsx(className, "group inline-flex focus:outline-hidden"),
+      children: [
+        group.name && checked && /* @__PURE__ */ jsx("input", { type: "hidden", name: group.name, value }),
+        /* @__PURE__ */ jsx("span", { className: clsx([base, radioColors[color]]), children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              "size-full rounded-full border-[4.5px] border-transparent bg-(--radio-indicator) bg-clip-padding",
+              // Forced colors mode
+              "forced-colors:border-[Canvas] forced-colors:group-data-checked:border-[Highlight]"
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+const CloseContext = createContext(null);
+function useCloseContext() {
+  return useContext(CloseContext);
+}
+function Sidebar({ className, ...props }) {
+  return /* @__PURE__ */ jsx("nav", { ...props, className: clsx(className, "flex h-full min-h-0 flex-col") });
+}
+function SidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "flex flex-col border-b border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5"
+      )
+    }
+  );
+}
+function SidebarBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "flex flex-1 flex-col overflow-y-auto p-4 [&>[data-slot=section]+[data-slot=section]]:mt-8"
+      )
+    }
+  );
+}
+function SidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "flex flex-col border-t border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5"
+      )
+    }
+  );
+}
+function SidebarSection({ className, ...props }) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(LayoutGroup, { id, children: /* @__PURE__ */ jsx("div", { ...props, "data-slot": "section", className: clsx(className, "flex flex-col gap-0.5") }) });
+}
+function SidebarDivider({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "hr",
+    {
+      ...props,
+      className: clsx(className, "my-4 border-t border-zinc-950/5 lg:-mx-4 dark:border-white/5")
+    }
+  );
+}
+function SidebarSpacer({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", ...props, className: clsx(className, "mt-8 flex-1") });
+}
+function SidebarHeading({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "mb-1 px-2 text-xs/6 font-medium text-zinc-500 dark:text-zinc-400"
+      )
+    }
+  );
+}
+const SidebarItem = forwardRef(function SidebarItem2({
+  current,
+  className,
+  children,
+  ...props
+}, ref) {
+  const disabled = "disabled" in props ? props.disabled : false;
+  const interactiveProps = useDataInteractive({ disabled: disabled ?? false });
+  const closeFn = useCloseContext();
+  const propsOnClick = "onClick" in props ? props.onClick : void 0;
+  const handleLinkClick = useCallback(
+    (e2) => {
+      propsOnClick?.(e2);
+      closeFn?.();
+    },
+    [propsOnClick, closeFn]
+  );
+  const classes = clsx(
+    // Base
+    "flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-base/6 font-medium text-zinc-950 sm:py-2 sm:text-sm/5",
+    // Leading icon/icon-only
+    "*:data-[slot=icon]:size-6 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:fill-zinc-500 sm:*:data-[slot=icon]:size-5",
+    // Trailing icon (down chevron or similar)
+    "*:last:data-[slot=icon]:ml-auto *:last:data-[slot=icon]:size-5 sm:*:last:data-[slot=icon]:size-4",
+    // Avatar
+    "*:data-[slot=avatar]:-m-0.5 *:data-[slot=avatar]:size-7 sm:*:data-[slot=avatar]:size-6",
+    // Hover
+    "data-hover:bg-zinc-950/5 data-hover:*:data-[slot=icon]:fill-zinc-950",
+    // Active
+    "data-active:bg-zinc-950/5 data-active:*:data-[slot=icon]:fill-zinc-950",
+    // Current
+    "data-current:*:data-[slot=icon]:fill-zinc-950",
+    // Dark mode
+    "dark:text-white dark:*:data-[slot=icon]:fill-zinc-400",
+    "dark:data-hover:bg-white/5 dark:data-hover:*:data-[slot=icon]:fill-white",
+    "dark:data-active:bg-white/5 dark:data-active:*:data-[slot=icon]:fill-white",
+    "dark:data-current:*:data-[slot=icon]:fill-white"
+  );
+  return /* @__PURE__ */ jsxs("span", { className: clsx(className, "relative"), children: [
+    current && /* @__PURE__ */ jsx(
+      LayoutIndicator,
+      {
+        layoutId: "current-indicator",
+        className: "absolute inset-y-2 -left-4 w-0.5 rounded-full bg-zinc-950 dark:bg-white"
+      }
+    ),
+    typeof props.href === "string" ? /* @__PURE__ */ jsx(
+      Link,
+      {
+        ...props,
+        className: classes,
+        "data-current": current ? "true" : void 0,
+        ref,
+        onClick: handleLinkClick,
+        children: /* @__PURE__ */ jsx(TouchTarget, { children })
+      }
+    ) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ...props,
+        ...interactiveProps,
+        className: clsx("cursor-default", classes),
+        "data-current": current ? "true" : void 0,
+        ref,
+        children: /* @__PURE__ */ jsx(TouchTarget, { children })
+      }
+    )
+  ] });
+});
+function SidebarLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { ...props, className: clsx(className, "truncate") });
+}
+function OpenMenuIcon$1() {
+  return /* @__PURE__ */ jsx("svg", { "data-slot": "icon", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 6.75C2 6.33579 2.33579 6 2.75 6H17.25C17.6642 6 18 6.33579 18 6.75C18 7.16421 17.6642 7.5 17.25 7.5H2.75C2.33579 7.5 2 7.16421 2 6.75ZM2 13.25C2 12.8358 2.33579 12.5 2.75 12.5H17.25C17.6642 12.5 18 12.8358 18 13.25C18 13.6642 17.6642 14 17.25 14H2.75C2.33579 14 2 13.6642 2 13.25Z" }) });
+}
+function CloseMenuIcon$1() {
+  return /* @__PURE__ */ jsx("svg", { "data-slot": "icon", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) });
+}
+function MobileSidebar$1({
+  open,
+  close,
+  children
+}) {
+  const panelRef = useRef(null);
+  const backdrop = useTransition(open);
+  const panel = useTransition(open);
+  useScrollLock(open);
+  useFocusTrap(panelRef, open);
+  useEscapeKey(close, open);
+  const handleBackdropClick = useCallback(
+    (e2) => {
+      if (e2.target === e2.currentTarget) {
+        close();
+      }
+    },
+    [close]
+  );
+  if (!(backdrop.mounted || panel.mounted)) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(CloseContext.Provider, { value: close, children: /* @__PURE__ */ jsxs("div", { role: "dialog", "aria-modal": "true", className: "lg:hidden", children: [
+      backdrop.mounted && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: backdrop.nodeRef,
+          ...backdrop.transitionProps,
+          onClick: handleBackdropClick,
+          className: "fixed inset-0 bg-black/30 transition data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+        }
+      ),
+      panel.mounted && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (node) => {
+            panelRef.current = node;
+            panel.nodeRef.current = node;
+          },
+          ...panel.transitionProps,
+          className: "fixed inset-y-0 w-full max-w-80 p-2 transition duration-300 ease-in-out data-closed:-translate-x-full",
+          children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col rounded-lg bg-white shadow-xs ring-1 ring-zinc-950/5 dark:bg-zinc-900 dark:ring-white/10", children: [
+            /* @__PURE__ */ jsx("div", { className: "-mb-3 px-4 pt-3", children: /* @__PURE__ */ jsx(NavbarItem, { onClick: close, "aria-label": "Close navigation", children: /* @__PURE__ */ jsx(CloseMenuIcon$1, {}) }) }),
+            children
+          ] })
+        }
+      )
+    ] }) }),
+    document.body
+  );
+}
+function SidebarLayout({
+  navbar,
+  sidebar,
+  children
+}) {
+  const [showSidebar, setShowSidebar] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "relative isolate flex min-h-svh w-full bg-white max-lg:flex-col lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950", children: [
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-y-0 left-0 w-64 max-lg:hidden", children: sidebar }),
+    /* @__PURE__ */ jsx(MobileSidebar$1, { open: showSidebar, close: () => setShowSidebar(false), children: sidebar }),
+    /* @__PURE__ */ jsxs("header", { className: "flex items-center px-4 lg:hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "py-2.5", children: /* @__PURE__ */ jsx(NavbarItem, { onClick: () => setShowSidebar(true), "aria-label": "Open navigation", children: /* @__PURE__ */ jsx(OpenMenuIcon$1, {}) }) }),
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: navbar })
+    ] }),
+    /* @__PURE__ */ jsx("main", { className: "flex flex-1 flex-col pb-2 lg:min-w-0 lg:pt-2 lg:pr-2 lg:pl-64", children: /* @__PURE__ */ jsx("div", { className: "grow p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-xs lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-6xl", children }) }) })
+  ] });
+}
+function OpenMenuIcon() {
+  return /* @__PURE__ */ jsx("svg", { "data-slot": "icon", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 6.75C2 6.33579 2.33579 6 2.75 6H17.25C17.6642 6 18 6.33579 18 6.75C18 7.16421 17.6642 7.5 17.25 7.5H2.75C2.33579 7.5 2 7.16421 2 6.75ZM2 13.25C2 12.8358 2.33579 12.5 2.75 12.5H17.25C17.6642 12.5 18 12.8358 18 13.25C18 13.6642 17.6642 14 17.25 14H2.75C2.33579 14 2 13.6642 2 13.25Z" }) });
+}
+function CloseMenuIcon() {
+  return /* @__PURE__ */ jsx("svg", { "data-slot": "icon", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) });
+}
+function MobileSidebar({
+  open,
+  close,
+  children
+}) {
+  const panelRef = useRef(null);
+  const backdrop = useTransition(open);
+  const panel = useTransition(open);
+  useScrollLock(open);
+  useFocusTrap(panelRef, open);
+  useEscapeKey(close, open);
+  const handleBackdropClick = useCallback(
+    (e2) => {
+      if (e2.target === e2.currentTarget) {
+        close();
+      }
+    },
+    [close]
+  );
+  if (!(backdrop.mounted || panel.mounted)) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(CloseContext.Provider, { value: close, children: /* @__PURE__ */ jsxs("div", { role: "dialog", "aria-modal": "true", className: "lg:hidden", children: [
+      backdrop.mounted && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: backdrop.nodeRef,
+          ...backdrop.transitionProps,
+          onClick: handleBackdropClick,
+          className: "fixed inset-0 bg-black/30 transition data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+        }
+      ),
+      panel.mounted && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (node) => {
+            panelRef.current = node;
+            panel.nodeRef.current = node;
+          },
+          ...panel.transitionProps,
+          className: "fixed inset-y-0 w-full max-w-80 p-2 transition duration-300 ease-in-out data-closed:-translate-x-full",
+          children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col rounded-lg bg-white shadow-xs ring-1 ring-zinc-950/5 dark:bg-zinc-900 dark:ring-white/10", children: [
+            /* @__PURE__ */ jsx("div", { className: "-mb-3 px-4 pt-3", children: /* @__PURE__ */ jsx(NavbarItem, { onClick: close, "aria-label": "Close navigation", children: /* @__PURE__ */ jsx(CloseMenuIcon, {}) }) }),
+            children
+          ] })
+        }
+      )
+    ] }) }),
+    document.body
+  );
+}
+function StackedLayout({
+  navbar,
+  sidebar,
+  children
+}) {
+  const [showSidebar, setShowSidebar] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "relative isolate flex min-h-svh w-full flex-col bg-white lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950", children: [
+    /* @__PURE__ */ jsx(MobileSidebar, { open: showSidebar, close: () => setShowSidebar(false), children: sidebar }),
+    /* @__PURE__ */ jsxs("header", { className: "flex items-center px-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "py-2.5 lg:hidden", children: /* @__PURE__ */ jsx(NavbarItem, { onClick: () => setShowSidebar(true), "aria-label": "Open navigation", children: /* @__PURE__ */ jsx(OpenMenuIcon, {}) }) }),
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: navbar })
+    ] }),
+    /* @__PURE__ */ jsx("main", { className: "flex flex-1 flex-col pb-2 lg:px-2", children: /* @__PURE__ */ jsx("div", { className: "grow p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-xs lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-6xl", children }) }) })
+  ] });
+}
+function SwitchGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "control",
+      ...props,
+      className: clsx(
+        className,
+        // Basic groups
+        "space-y-3 **:data-[slot=label]:font-normal",
+        // With descriptions
+        "has-data-[slot=description]:space-y-6 has-data-[slot=description]:**:data-[slot=label]:font-medium"
+      )
+    }
+  );
+}
+function SwitchField({
+  className,
+  disabled,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(FieldProvider, { disabled, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field",
+      "data-disabled": disabled ? "" : void 0,
+      ...props,
+      className: clsx(
+        className,
+        // Base layout
+        "grid grid-cols-[1fr_auto] gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto]",
+        // Control layout
+        "*:data-[slot=control]:col-start-2 *:data-[slot=control]:self-start sm:*:data-[slot=control]:mt-0.5",
+        // Label layout
+        "*:data-[slot=label]:col-start-1 *:data-[slot=label]:row-start-1",
+        // Description layout
+        "*:data-[slot=description]:col-start-1 *:data-[slot=description]:row-start-2",
+        // With description
+        "has-data-[slot=description]:**:data-[slot=label]:font-medium"
+      )
+    }
+  ) });
+}
+const colors = {
+  "dark/zinc": [
+    "[--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:var(--color-white)]/25",
+    "[--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white] dark:[--switch-ring:var(--color-zinc-700)]/90"
+  ],
+  "dark/white": [
+    "[--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:var(--color-white)]",
+    "[--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white] dark:[--switch-ring:transparent] dark:[--switch:var(--color-zinc-900)]"
+  ],
+  dark: [
+    "[--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] dark:[--switch-bg-ring:var(--color-white)]/15",
+    "[--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white]"
+  ],
+  zinc: [
+    "[--switch-bg-ring:var(--color-zinc-700)]/90 [--switch-bg:var(--color-zinc-600)] dark:[--switch-bg-ring:transparent]",
+    "[--switch-shadow:var(--color-black)]/10 [--switch:white] [--switch-ring:var(--color-zinc-700)]/90"
+  ],
+  white: [
+    "[--switch-bg-ring:var(--color-black)]/15 [--switch-bg:white] dark:[--switch-bg-ring:transparent]",
+    "[--switch-shadow:var(--color-black)]/10 [--switch-ring:transparent] [--switch:var(--color-zinc-950)]"
+  ],
+  red: [
+    "[--switch-bg-ring:var(--color-red-700)]/90 [--switch-bg:var(--color-red-600)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-red-700)]/90 [--switch-shadow:var(--color-red-900)]/20"
+  ],
+  orange: [
+    "[--switch-bg-ring:var(--color-orange-600)]/90 [--switch-bg:var(--color-orange-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-orange-600)]/90 [--switch-shadow:var(--color-orange-900)]/20"
+  ],
+  amber: [
+    "[--switch-bg-ring:var(--color-amber-500)]/80 [--switch-bg:var(--color-amber-400)] dark:[--switch-bg-ring:transparent]",
+    "[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:var(--color-amber-950)]"
+  ],
+  yellow: [
+    "[--switch-bg-ring:var(--color-yellow-400)]/80 [--switch-bg:var(--color-yellow-300)] dark:[--switch-bg-ring:transparent]",
+    "[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:var(--color-yellow-950)]"
+  ],
+  lime: [
+    "[--switch-bg-ring:var(--color-lime-400)]/80 [--switch-bg:var(--color-lime-300)] dark:[--switch-bg-ring:transparent]",
+    "[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:var(--color-lime-950)]"
+  ],
+  green: [
+    "[--switch-bg-ring:var(--color-green-700)]/90 [--switch-bg:var(--color-green-600)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-green-700)]/90 [--switch-shadow:var(--color-green-900)]/20"
+  ],
+  emerald: [
+    "[--switch-bg-ring:var(--color-emerald-600)]/90 [--switch-bg:var(--color-emerald-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-emerald-600)]/90 [--switch-shadow:var(--color-emerald-900)]/20"
+  ],
+  teal: [
+    "[--switch-bg-ring:var(--color-teal-700)]/90 [--switch-bg:var(--color-teal-600)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-teal-700)]/90 [--switch-shadow:var(--color-teal-900)]/20"
+  ],
+  cyan: [
+    "[--switch-bg-ring:var(--color-cyan-400)]/80 [--switch-bg:var(--color-cyan-300)] dark:[--switch-bg-ring:transparent]",
+    "[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:var(--color-cyan-950)]"
+  ],
+  sky: [
+    "[--switch-bg-ring:var(--color-sky-600)]/80 [--switch-bg:var(--color-sky-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-sky-600)]/80 [--switch-shadow:var(--color-sky-900)]/20"
+  ],
+  blue: [
+    "[--switch-bg-ring:var(--color-blue-700)]/90 [--switch-bg:var(--color-blue-600)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-blue-700)]/90 [--switch-shadow:var(--color-blue-900)]/20"
+  ],
+  indigo: [
+    "[--switch-bg-ring:var(--color-indigo-600)]/90 [--switch-bg:var(--color-indigo-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-indigo-600)]/90 [--switch-shadow:var(--color-indigo-900)]/20"
+  ],
+  violet: [
+    "[--switch-bg-ring:var(--color-violet-600)]/90 [--switch-bg:var(--color-violet-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-violet-600)]/90 [--switch-shadow:var(--color-violet-900)]/20"
+  ],
+  purple: [
+    "[--switch-bg-ring:var(--color-purple-600)]/90 [--switch-bg:var(--color-purple-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-purple-600)]/90 [--switch-shadow:var(--color-purple-900)]/20"
+  ],
+  fuchsia: [
+    "[--switch-bg-ring:var(--color-fuchsia-600)]/90 [--switch-bg:var(--color-fuchsia-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-fuchsia-600)]/90 [--switch-shadow:var(--color-fuchsia-900)]/20"
+  ],
+  pink: [
+    "[--switch-bg-ring:var(--color-pink-600)]/90 [--switch-bg:var(--color-pink-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-pink-600)]/90 [--switch-shadow:var(--color-pink-900)]/20"
+  ],
+  rose: [
+    "[--switch-bg-ring:var(--color-rose-600)]/90 [--switch-bg:var(--color-rose-500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:var(--color-rose-600)]/90 [--switch-shadow:var(--color-rose-900)]/20"
+  ]
+};
+function Switch({
+  color = "dark/zinc",
+  className,
+  checked: controlledChecked,
+  defaultChecked,
+  onChange,
+  disabled,
+  name,
+  value,
+  ...props
+}) {
+  const { checked, toggleProps } = useToggle({
+    checked: controlledChecked,
+    defaultChecked,
+    onChange,
+    disabled
+  });
+  const interactiveProps = useDataInteractive({ disabled });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "data-slot": "control",
+      "aria-checked": checked,
+      "data-checked": checked ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      disabled,
+      onClick: toggleProps.onClick,
+      onKeyDown: toggleProps.onKeyDown,
+      ...interactiveProps,
+      ...props,
+      className: clsx(
+        className,
+        // Base styles
+        "group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8",
+        // Transitions
+        "transition duration-0 ease-in-out data-changing:duration-200",
+        // Outline and background color in forced-colors mode so switch is still visible
+        "forced-colors:outline forced-colors:[--switch-bg:Highlight] dark:forced-colors:[--switch-bg:Highlight]",
+        // Unchecked
+        "bg-zinc-200 ring-1 ring-black/5 ring-inset dark:bg-white/5 dark:ring-white/15",
+        // Checked
+        "data-checked:bg-(--switch-bg) data-checked:ring-(--switch-bg-ring) dark:data-checked:bg-(--switch-bg) dark:data-checked:ring-(--switch-bg-ring)",
+        // Focus
+        "focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500",
+        // Hover
+        "data-hover:ring-black/15 data-hover:data-checked:ring-(--switch-bg-ring)",
+        "dark:data-hover:ring-white/25 dark:data-hover:data-checked:ring-(--switch-bg-ring)",
+        // Disabled
+        "data-disabled:bg-zinc-200 data-disabled:opacity-50 data-disabled:data-checked:bg-zinc-200 data-disabled:data-checked:ring-black/5",
+        "dark:data-disabled:bg-white/15 dark:data-disabled:data-checked:bg-white/15 dark:data-disabled:data-checked:ring-white/15",
+        // Color specific styles
+        colors[color]
+      ),
+      children: [
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: checked ? value ?? "on" : "" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: clsx(
+              // Basic layout
+              "pointer-events-none relative inline-block size-4.5 rounded-full sm:size-3.5",
+              // Transition
+              "translate-x-0 transition duration-200 ease-in-out",
+              // Invisible border so the switch is still visible in forced-colors mode
+              "border border-transparent",
+              // Unchecked
+              "bg-white shadow-sm ring-1 ring-black/5",
+              // Checked
+              "group-data-checked:bg-(--switch) group-data-checked:shadow-(--switch-shadow) group-data-checked:ring-(--switch-ring)",
+              "group-data-checked:translate-x-4 sm:group-data-checked:translate-x-3",
+              // Disabled
+              "group-data-checked:group-data-disabled:bg-white group-data-checked:group-data-disabled:shadow-sm group-data-checked:group-data-disabled:ring-black/5"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+const TableContext = createContext({
+  bleed: false,
+  dense: false,
+  grid: false,
+  striped: false
+});
+function Table({
+  bleed = false,
+  dense = false,
+  grid = false,
+  striped = false,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TableContext.Provider,
+    {
+      value: { bleed, dense, grid, striped },
+      children: /* @__PURE__ */ jsx("div", { className: "flow-root", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...props,
+          className: clsx(className, "-mx-(--gutter) overflow-x-auto whitespace-nowrap"),
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx("inline-block min-w-full align-middle", !bleed && "sm:px-(--gutter)"),
+              children: /* @__PURE__ */ jsx("table", { className: "min-w-full text-left text-sm/6 text-zinc-950 dark:text-white", children })
+            }
+          )
+        }
+      ) })
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx("thead", { ...props, className: clsx(className, "text-zinc-500 dark:text-zinc-400") });
+}
+function TableBody(props) {
+  return /* @__PURE__ */ jsx("tbody", { ...props });
+}
+const TableRowContext = createContext({
+  href: void 0,
+  target: void 0,
+  title: void 0
+});
+function TableRow({
+  href,
+  target,
+  title,
+  className,
+  ...props
+}) {
+  const { striped } = useContext(TableContext);
+  return /* @__PURE__ */ jsx(
+    TableRowContext.Provider,
+    {
+      value: { href, target, title },
+      children: /* @__PURE__ */ jsx(
+        "tr",
+        {
+          ...props,
+          className: clsx(
+            className,
+            href && "has-[[data-row-link][data-focus]]:outline-2 has-[[data-row-link][data-focus]]:-outline-offset-2 has-[[data-row-link][data-focus]]:outline-blue-500 dark:focus-within:bg-white/2.5",
+            striped && "even:bg-zinc-950/2.5 dark:even:bg-white/2.5",
+            href && striped && "hover:bg-zinc-950/5 dark:hover:bg-white/5",
+            href && !striped && "hover:bg-zinc-950/2.5 dark:hover:bg-white/2.5"
+          )
+        }
+      )
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  const { bleed, grid } = useContext(TableContext);
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      ...props,
+      className: clsx(
+        className,
+        "border-b border-b-zinc-950/10 px-4 py-2 font-medium first:pl-(--gutter,--spacing(2)) last:pr-(--gutter,--spacing(2)) dark:border-b-white/10",
+        grid && "border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5",
+        !bleed && "sm:first:pl-1 sm:last:pr-1"
+      )
+    }
+  );
+}
+function TableCell({ className, children, ...props }) {
+  const { bleed, dense, grid, striped } = useContext(TableContext);
+  const { href, target, title } = useContext(TableRowContext);
+  const [cellRef, setCellRef] = useState(null);
+  return /* @__PURE__ */ jsxs(
+    "td",
+    {
+      ref: href ? setCellRef : void 0,
+      ...props,
+      className: clsx(
+        className,
+        "relative px-4 first:pl-(--gutter,--spacing(2)) last:pr-(--gutter,--spacing(2))",
+        !striped && "border-b border-zinc-950/5 dark:border-white/5",
+        grid && "border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5",
+        dense ? "py-2.5" : "py-4",
+        !bleed && "sm:first:pl-1 sm:last:pr-1"
+      ),
+      children: [
+        href && /* @__PURE__ */ jsx(
+          Link,
+          {
+            "data-row-link": true,
+            href,
+            target,
+            "aria-label": title,
+            tabIndex: cellRef?.previousElementSibling === null ? 0 : -1,
+            className: "absolute inset-0 focus:outline-hidden"
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+export {
+  A as Accordion,
+  a as AccordionItem,
+  Alert,
+  AlertActions,
+  AlertBody,
+  AlertDescription,
+  AlertTitle,
+  aa as Avatar,
+  b as AvatarGroup,
+  Badge,
+  B as Breadcrumb,
+  Button,
+  C as Callout,
+  d as Checkbox,
+  e as CheckboxCVA,
+  f as CheckboxField,
+  g as CheckboxGroup,
+  h as CheckboxIndicator,
+  i as CodeBlock,
+  Combobox,
+  ComboboxDescription,
+  ComboboxLabel,
+  ComboboxOption,
+  Description,
+  DescriptionDetails,
+  DescriptionList,
+  DescriptionTerm,
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogDescription,
+  DialogTitle,
+  Divider,
+  D as Drawer,
+  j as DrawerBody,
+  k as DrawerFooter,
+  l as DrawerHeader,
+  Dropdown,
+  DropdownButton,
+  DropdownDescription,
+  DropdownDivider,
+  DropdownHeader,
+  DropdownHeading,
+  DropdownItem,
+  DropdownLabel,
+  DropdownMenu,
+  DropdownSection,
+  DropdownShortcut,
+  E as EmptyState,
+  ErrorMessage,
+  Field,
+  FieldGroup,
+  Fieldset,
+  Label as FieldsetLabel,
+  Heading,
+  I as Input,
+  m as InputGroup,
+  K as Kbd,
+  n as KbdShortcut,
+  Legend,
+  Link,
+  Listbox,
+  ListboxDescription,
+  ListboxLabel,
+  ListboxOption,
+  Navbar,
+  NavbarDivider,
+  NavbarItem,
+  NavbarLabel,
+  NavbarSection,
+  NavbarSpacer,
+  P as Progress,
+  Radio,
+  RadioField,
+  RadioGroup,
+  R as Rating,
+  S as Select,
+  o as SelectCVA,
+  p as SelectContent,
+  q as SelectGroup,
+  r as SelectItem,
+  s as SelectLabel,
+  t as SelectScrollDownButton,
+  u as SelectScrollUpButton,
+  v as SelectSeparator,
+  w as SelectTrigger,
+  x as SelectValue,
+  Sidebar,
+  SidebarBody,
+  SidebarDivider,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarHeading,
+  SidebarItem,
+  SidebarLabel,
+  SidebarLayout,
+  SidebarSection,
+  SidebarSpacer,
+  y as Skeleton,
+  z as SkeletonCard,
+  F as SkeletonText,
+  G as Slider,
+  StackedLayout,
+  H as Stat,
+  J as StatGroup,
+  L as Stepper,
+  Switch,
+  SwitchField,
+  SwitchGroup,
+  T as Tab,
+  M as TabList,
+  N as TabPanel,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  O as Tabs,
+  Text,
+  Q as Textarea,
+  U as Timeline,
+  V as TimelineItem,
+  W as ToastProvider,
+  X as Tooltip,
+  TouchTarget,
+  Z as useToast
+};
+//# sourceMappingURL=client.js.map