@luxfi/ui 7.3.2 → 7.4.2

package/dist/index.js

@@ -1,47 +1,1273 @@
 "use client";
-import { createGui, styled, View, Text } from '@hanzogui/core';
+import { createGui, styled, View, Sheet, Avatar as Avatar$1, TooltipGroup, Tooltip as Tooltip$1, Checkbox, Dialog, H3, H2, H1, Input as Input$1, Popover, Progress as Progress$1, RadioGroup, Separator, Slider as Slider$1, Switch, TextArea, Text, GuiProvider } from '@hanzo/gui';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import * as React33 from 'react';
+import React33__default from 'react';
+import { defaultConfig } from '@hanzogui/config/v5';
+import { animations } from '@hanzogui/config/v5-css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { Check, ChevronRight, ChevronsUpDown, Folder, LogOut, User, Settings, Menu, Building2 } from 'lucide-react';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import * as React29 from 'react';
-import React29__default from 'react';
-import * as RadixAvatar from '@radix-ui/react-avatar';
-import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzogui/tooltip';
 import { useClickAway, useDebounce } from '@uidotdev/usehooks';
-import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { Dialog } from '@hanzogui/dialog';
-import * as RadixDialog from '@radix-ui/react-dialog';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { debounce, throttle } from 'es-toolkit';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { LuCheck, LuChevronRight } from 'react-icons/lu';
-import { Popover } from '@hanzogui/popover';
-import * as RadixProgress from '@radix-ui/react-progress';
-import * as RadixRadioGroup from '@radix-ui/react-radio-group';
 import * as RadixSelect from '@radix-ui/react-select';
-import * as RadixSlider from '@radix-ui/react-slider';
-import * as RadixSwitch from '@radix-ui/react-switch';
 import * as RadixTabs from '@radix-ui/react-tabs';
 import { toast, Toaster as Toaster$1 } from 'sonner';
 
 // src/provider.tsx
-if (typeof window !== "undefined") {
-  createGui({ settings: { autocompleteSpecificTokens: "except-special" } });
+
+// src/white-label.ts
+var LUX_BRAND = {
+  lux: "#7000FF",
+  zoo: "#6C5EFB",
+  hanzo: "#EA580C",
+  pars: "#1C3879",
+  // bootno.de is its own white label with its own IdP (id.bootno.de) — accent
+  // taken from the bootnode console's own brand default, not invented here.
+  bootnode: "#3B82F6"
+};
+var PARS_GOLD = "#C8A45C";
+var ORGS = {
+  lux: {
+    org: "lux",
+    name: "Lux",
+    domain: "lux.network",
+    iamDomain: "lux.id",
+    accent: LUX_BRAND.lux,
+    accentForeground: "#FFFFFF"
+  },
+  zoo: {
+    org: "zoo",
+    name: "Zoo",
+    domain: "zoo.ngo",
+    // Zoo's IdP is `id.zoo.network`, not a `zoo.id` apex — the one row in this
+    // table where the issuer is not `<org>.id`, and the one every hand-rolled
+    // per-app branding map got wrong.
+    iamDomain: "id.zoo.network",
+    accent: LUX_BRAND.zoo,
+    accentForeground: "#FFFFFF"
+  },
+  bootnode: {
+    org: "bootnode",
+    name: "Bootnode",
+    domain: "bootno.de",
+    iamDomain: "id.bootno.de",
+    accent: LUX_BRAND.lux,
+    accentForeground: "#FFFFFF"
+  },
+  hanzo: {
+    org: "hanzo",
+    name: "Hanzo",
+    domain: "hanzo.ai",
+    iamDomain: "hanzo.id",
+    accent: LUX_BRAND.hanzo,
+    accentForeground: "#FFFFFF"
+  },
+  pars: {
+    org: "pars",
+    name: "Pars",
+    domain: "pars.id",
+    iamDomain: "pars.id",
+    accent: LUX_BRAND.pars,
+    accentForeground: PARS_GOLD
+  }
+};
+var DOMAIN_ORG = [
+  ["lux.network", "lux"],
+  ["lux.cloud", "lux"],
+  ["lux.id", "lux"],
+  ["lux.finance", "lux"],
+  ["zoo.ngo", "zoo"],
+  ["zoo.network", "zoo"],
+  ["zoo.cloud", "zoo"],
+  ["zoo.id", "zoo"],
+  ["hanzo.ai", "hanzo"],
+  ["hanzo.cloud", "hanzo"],
+  ["hanzo.id", "hanzo"],
+  ["pars.id", "pars"],
+  ["parsdao.org", "pars"],
+  ["bootno.de", "bootnode", "platform"]
+];
+var DEFAULT_ORG = "lux";
+function normalizeHost(host) {
+  const noPort = host.trim().toLowerCase().split(":")[0] ?? "";
+  return noPort.replace(/\.$/, "");
+}
+function isUnder(host, domain) {
+  return host === domain || host.endsWith(`.${domain}`);
+}
+function matchDomain(host) {
+  let best;
+  for (const entry of DOMAIN_ORG) {
+    if (isUnder(host, entry[0]) && (!best || entry[0].length > best[0].length)) {
+      best = entry;
+    }
+  }
+  return best;
+}
+function appSlug(host, domain, apexApp) {
+  const sub = host === domain ? "" : host.slice(0, -(domain.length + 1));
+  const leftmost = sub.split(".")[0] ?? "";
+  if (leftmost && leftmost !== "www") return leftmost;
+  if (apexApp) return apexApp;
+  const label = domain.split(".")[0] ?? "";
+  const tld = domain.split(".").slice(1).join(".");
+  return tld.split(".")[0] || label;
+}
+function isLocal(host) {
+  return host === "localhost" || host.endsWith(".localhost") || host === "127.0.0.1" || host === "0.0.0.0" || host === "[::1]" || host.endsWith(".local");
+}
+function resolveWhiteLabel(host) {
+  const h = normalizeHost(host ?? "");
+  const match = h ? matchDomain(h) : void 0;
+  const org = match ? match[1] : DEFAULT_ORG;
+  const identity = ORGS[org];
+  const app = match ? appSlug(h, match[0], match[2]) : h && isLocal(h) ? "local" : "app";
+  return {
+    ...identity,
+    host: h,
+    app,
+    theme: `dark_${org}`,
+    issuer: `https://${identity.iamDomain}`,
+    clientId: `${org}-${app}`
+  };
+}
+function currentHost() {
+  return typeof window === "undefined" ? "" : window.location.host;
 }
+function orgIdentity(org) {
+  return ORGS[org];
+}
+
+// src/lux.config.ts
+var TRUE_BLACK = "#000000";
+var darkBase = {
+  ...defaultConfig.themes.dark,
+  background: TRUE_BLACK,
+  backgroundHover: "#0A0A0A",
+  backgroundPress: "#141414",
+  backgroundFocus: "#0A0A0A"
+};
+var brandTheme = (accent, extra = {}) => ({
+  ...darkBase,
+  accentBackground: accent,
+  accentColor: "#FFFFFF",
+  borderColorHover: accent,
+  colorHover: accent,
+  ...extra
+});
+var luxThemes = {
+  dark: darkBase,
+  dark_lux: brandTheme(LUX_BRAND.lux),
+  dark_zoo: brandTheme(LUX_BRAND.zoo),
+  dark_hanzo: brandTheme(LUX_BRAND.hanzo),
+  dark_pars: brandTheme(LUX_BRAND.pars, { accentColor: PARS_GOLD }),
+  dark_bootnode: brandTheme(LUX_BRAND.bootnode)
+};
+var config = createGui({
+  ...defaultConfig,
+  animations,
+  settings: {
+    ...defaultConfig.settings,
+    onlyAllowShorthands: false
+  },
+  themes: {
+    ...defaultConfig.themes,
+    ...luxThemes
+  }
+});
+var lux_config_default = config;
 var defaultQueryClient = new QueryClient({
   defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1, staleTime: 3e4 } }
 });
-var AppProvider = ({ children, queryClient }) => {
-  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient ?? defaultQueryClient, children });
+var FONT_BODY_RESET_ID = "lux-ui-font-body-reset";
+var FONT_BODY_RESET_CSS = "body .font_body{line-height:1.5}";
+var useFontBodyReset = () => {
+  React33__default.useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    if (document.getElementById(FONT_BODY_RESET_ID)) return;
+    const style = document.createElement("style");
+    style.id = FONT_BODY_RESET_ID;
+    style.textContent = FONT_BODY_RESET_CSS;
+    document.head.appendChild(style);
+  }, []);
+};
+var WhiteLabelContext = React33__default.createContext(resolveWhiteLabel(""));
+var useWhiteLabel = () => React33__default.useContext(WhiteLabelContext);
+var useHostWhiteLabel = (host) => {
+  const [resolvedHost, setResolvedHost] = React33__default.useState(host ?? "");
+  React33__default.useEffect(() => {
+    if (host !== void 0) return;
+    const browserHost = currentHost();
+    if (browserHost) setResolvedHost(browserHost);
+  }, [host]);
+  return React33__default.useMemo(() => resolveWhiteLabel(resolvedHost), [resolvedHost]);
+};
+var AppProvider = ({
+  children,
+  queryClient,
+  host,
+  defaultTheme
+}) => {
+  useFontBodyReset();
+  const whiteLabel = useHostWhiteLabel(host);
+  const theme = defaultTheme ?? whiteLabel.theme;
+  return /* @__PURE__ */ jsx(WhiteLabelContext.Provider, { value: whiteLabel, children: /* @__PURE__ */ jsx(GuiProvider, { config: lux_config_default, defaultTheme: theme, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient ?? defaultQueryClient, children }) }) });
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var NARROW_PX = 640;
+var TOUCH_PX = 1024;
+function useBelow(px) {
+  const [below, setBelow] = React33.useState(false);
+  React33.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
+    const apply = () => setBelow(mql.matches);
+    apply();
+    mql.addEventListener("change", apply);
+    return () => mql.removeEventListener("change", apply);
+  }, [px]);
+  return below;
+}
+var useIsNarrow = () => useBelow(NARROW_PX);
+var useIsTouch = () => useBelow(TOUCH_PX);
+
+// src/iam.ts
+var IamError = class extends Error {
+  constructor(message, status, unauthenticated) {
+    super(message);
+    this.name = "IamError";
+    this.status = status;
+    this.unauthenticated = unauthenticated;
+  }
+};
+var SIGNED_OUT = /please sign in|authentication required|unauthorized/i;
+function isSignedOut(status, msg) {
+  return status === 401 || status === 403 || SIGNED_OUT.test(msg);
+}
+function iamBase(host) {
+  const wl = typeof host === "object" && host !== null ? host : resolveWhiteLabel(host);
+  return `${wl.issuer}/v1/iam`;
+}
+async function read(call, verb, params) {
+  const url = new URL(`${call.base}/${verb}`);
+  for (const [k, v] of Object.entries(params)) url.searchParams.set(k, String(v));
+  let res;
+  try {
+    res = await fetch(url.toString(), {
+      method: "GET",
+      // The bearer is the whole credential. IAM does not allow credentialed
+      // CORS, so sending cookies would only get the response blocked.
+      headers: call.token ? { Authorization: `Bearer ${call.token}` } : {},
+      signal: call.signal
+    });
+  } catch (e) {
+    throw new IamError(e instanceof Error ? e.message : "IAM unreachable", 0, false);
+  }
+  const body = await res.json().catch(() => ({}));
+  const msg = typeof body.msg === "string" ? body.msg : "";
+  if (!res.ok || body.status === "error") {
+    throw new IamError(msg || `IAM ${verb} failed (${res.status})`, res.status, isSignedOut(res.status, msg));
+  }
+  return body.data;
+}
+var IAM_PAGE_SIZE = 20;
+var iam = {
+  /** The signed-in principal, or null when there is no session. */
+  async account(call) {
+    try {
+      const data = await read(call, "get-account", {});
+      return data && data.name ? data : null;
+    } catch (e) {
+      if (e instanceof IamError && e.unauthenticated) return null;
+      throw e;
+    }
+  },
+  /**
+   * One page of the orgs the principal can see. IAM scopes the read to the
+   * caller's authority, so a normal member gets their own org and a super
+   * admin gets the tenant list — the page never has to decide.
+   */
+  async organizations(call, page = 0, query = "", pageSize = IAM_PAGE_SIZE) {
+    const params = {
+      owner: "admin",
+      // IAM orgs live under the reserved `admin` owner
+      p: page + 1,
+      // the backend page is 1-based
+      pageSize,
+      sortField: "name",
+      sortOrder: "ascending"
+    };
+    const q = query.trim();
+    if (q) {
+      params.field = "name";
+      params.value = q;
+    }
+    return await read(call, "get-organizations", params) ?? [];
+  },
+  /** One organization by name. */
+  async organization(call, name) {
+    return await read(call, "get-organization", { id: `admin/${name}` }) ?? null;
+  },
+  /** Members of an organization. */
+  async users(call, org) {
+    return await read(call, "get-users", { owner: org }) ?? [];
+  },
+  /** The organization's projects — IAM keys this read by `organization`. */
+  async projects(call, org) {
+    return await read(call, "get-organization-projects", { organization: org }) ?? [];
+  }
+};
+var IAM_TOKEN_KEY = "hanzo_iam_access_token";
+function storedToken() {
+  if (typeof window === "undefined") return null;
+  for (const store of [window.sessionStorage, window.localStorage]) {
+    try {
+      const t = store.getItem(IAM_TOKEN_KEY);
+      if (t) return t;
+    } catch {
+    }
+  }
+  return null;
+}
+function clearStoredTokens() {
+  if (typeof window === "undefined") return;
+  for (const store of [window.sessionStorage, window.localStorage]) {
+    try {
+      for (const k of ["access_token", "refresh_token", "id_token", "expires_at"]) {
+        store.removeItem(`hanzo_iam_${k}`);
+      }
+    } catch {
+    }
+  }
+}
+var defaultAuth = {};
+var scopeKey = (host, kind) => `lux-ui:${kind}:${host}`;
+function readScope(host, kind) {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage.getItem(scopeKey(host, kind));
+  } catch {
+    return null;
+  }
+}
+function writeScope(host, kind, value) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(scopeKey(host, kind), value);
+  } catch {
+  }
+}
+var IdentityContext = React33.createContext(null);
+var IdentityProvider = ({
+  children,
+  auth = defaultAuth,
+  loginPath = "/login"
+}) => {
+  const whiteLabel = useWhiteLabel();
+  const base = React33.useMemo(() => iamBase(whiteLabel), [whiteLabel]);
+  const [status, setStatus] = React33.useState("loading");
+  const [account, setAccount] = React33.useState(null);
+  const [orgs, setOrgs] = React33.useState([]);
+  const [projects, setProjects] = React33.useState([]);
+  const [error, setError] = React33.useState(null);
+  const [orgName, setOrgName] = React33.useState(null);
+  const [projectName, setProjectName] = React33.useState(null);
+  const [epoch, setEpoch] = React33.useState(0);
+  React33.useEffect(() => {
+    const ac = new AbortController();
+    let live = true;
+    void (async () => {
+      const token = await (auth.token ?? storedToken)();
+      if (!live) return;
+      if (!token) {
+        setStatus("anonymous");
+        setAccount(null);
+        setOrgs([]);
+        return;
+      }
+      const call = { base, token, signal: ac.signal };
+      try {
+        const me = await iam.account(call);
+        if (!live) return;
+        if (!me) {
+          setStatus("anonymous");
+          setAccount(null);
+          setOrgs([]);
+          return;
+        }
+        setAccount(me);
+        const rows = await iam.organizations(call).catch((e) => {
+          if (e instanceof IamError && !e.unauthenticated) return [{ owner: "admin", name: me.owner }];
+          throw e;
+        });
+        if (!live) return;
+        setOrgs(rows);
+        setStatus("ready");
+        setError(null);
+      } catch (e) {
+        if (!live || ac.signal.aborted) return;
+        if (e instanceof IamError && e.unauthenticated) {
+          setStatus("anonymous");
+          setAccount(null);
+          setOrgs([]);
+          return;
+        }
+        setStatus("error");
+        setError(e instanceof Error ? e.message : "Could not reach IAM.");
+      }
+    })();
+    return () => {
+      live = false;
+      ac.abort();
+    };
+  }, [base, auth, epoch]);
+  const org = React33.useMemo(() => {
+    if (orgs.length === 0) return null;
+    const saved = orgName ?? readScope(whiteLabel.host, "org");
+    return orgs.find((o) => o.name === saved) ?? orgs.find((o) => o.name === account?.owner) ?? orgs[0];
+  }, [orgs, orgName, account, whiteLabel.host]);
+  React33.useEffect(() => {
+    if (!org) {
+      setProjects([]);
+      return;
+    }
+    const ac = new AbortController();
+    let live = true;
+    void (async () => {
+      const token = await (auth.token ?? storedToken)();
+      if (!live || !token) return;
+      const rows = await iam.projects({ base, token, signal: ac.signal }, org.name).catch(() => []);
+      if (live) setProjects(rows);
+    })();
+    return () => {
+      live = false;
+      ac.abort();
+    };
+  }, [base, auth, org, epoch]);
+  const project = React33.useMemo(() => {
+    if (projects.length === 0) return null;
+    const saved = projectName ?? readScope(whiteLabel.host, "project");
+    return projects.find((p) => p.name === saved) ?? projects.find((p) => p.isDefault) ?? projects[0];
+  }, [projects, projectName, whiteLabel.host]);
+  const value = React33.useMemo(() => ({
+    status,
+    account,
+    orgs,
+    org,
+    projects,
+    project,
+    error,
+    whiteLabel,
+    setOrg: (name) => {
+      writeScope(whiteLabel.host, "org", name);
+      setOrgName(name);
+      setProjectName(null);
+    },
+    setProject: (name) => {
+      writeScope(whiteLabel.host, "project", name);
+      setProjectName(name);
+    },
+    signIn: () => {
+      if (auth.signIn) return auth.signIn();
+      if (typeof window !== "undefined") window.location.assign(loginPath);
+    },
+    signOut: () => {
+      if (auth.signOut) return auth.signOut();
+      clearStoredTokens();
+      if (typeof window !== "undefined") window.location.assign(loginPath);
+    },
+    reload: () => setEpoch((n) => n + 1)
+  }), [status, account, orgs, org, projects, project, error, whiteLabel, auth, loginPath]);
+  return /* @__PURE__ */ jsx(IdentityContext.Provider, { value, children });
+};
+function useIdentity() {
+  const ctx = React33.useContext(IdentityContext);
+  const whiteLabel = useWhiteLabel();
+  const fallback = React33.useMemo(() => ({
+    status: "anonymous",
+    account: null,
+    orgs: [],
+    org: null,
+    projects: [],
+    project: null,
+    error: null,
+    whiteLabel,
+    setOrg: () => void 0,
+    setProject: () => void 0,
+    signIn: () => {
+      if (typeof window !== "undefined") window.location.assign("/login");
+    },
+    signOut: () => void 0,
+    reload: () => void 0
+  }), [whiteLabel]);
+  return ctx ?? fallback;
+}
+var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
+var CloseButtonFrame = styled(View, {
+  name: "LuxCloseButton",
+  render: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close" }),
+  role: "button",
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 20,
+  height: 20,
+  minWidth: 0,
+  flexShrink: 1,
+  padding: 0,
+  borderRadius: 4,
+  borderWidth: 0,
+  overflow: "hidden",
+  backgroundColor: "transparent",
+  hoverStyle: {
+    backgroundColor: "transparent"
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.4,
+        pointerEvents: "none"
+      }
+    }
+  }
+});
+var CLOSE_BUTTON_CLASSES = [
+  "text-[var(--closeButton-fg,currentColor)]",
+  "hover:text-[var(--hover-color,currentColor)]",
+  "disabled:opacity-40"
+].join(" ");
+var CloseButton = React33.forwardRef(function CloseButton2(props, ref) {
+  const { variant: _variant, size: _size, className, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    CloseButtonFrame,
+    {
+      ref,
+      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "size-5",
+          viewBox: "0 0 20 20",
+          fill: "none",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: CLOSE_ICON_PATH,
+              fill: "currentColor"
+            }
+          )
+        }
+      )
+    }
+  );
+});
+var DrawerPlacementContext = React33.createContext("right");
+var DrawerSizeContext = React33.createContext("md");
+var DrawerStateContext = React33.createContext({
+  open: false,
+  setOpen: () => {
+  },
+  modal: true
+});
+var DrawerRoot = (props) => {
+  const {
+    children,
+    open,
+    defaultOpen,
+    onOpenChange,
+    placement = "right",
+    modal = true,
+    size = "md"
+  } = props;
+  const [uncontrolled, setUncontrolled] = React33.useState(defaultOpen ?? false);
+  const isControlled = open !== void 0;
+  const isOpen = isControlled ? open : uncontrolled;
+  const setOpen = React33.useCallback((nextOpen) => {
+    if (!isControlled) setUncontrolled(nextOpen);
+    onOpenChange?.({ open: nextOpen });
+  }, [isControlled, onOpenChange]);
+  const state = React33.useMemo(
+    () => ({ open: isOpen, setOpen, modal }),
+    [isOpen, setOpen, modal]
+  );
+  return /* @__PURE__ */ jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(DrawerStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(
+    RadixDialog.Root,
+    {
+      open: isOpen,
+      onOpenChange: setOpen,
+      modal,
+      children
+    }
+  ) }) }) });
+};
+var PLACEMENT_CLASSES = {
+  right: [
+    "inset-y-0 right-0",
+    "data-[state=open]:animate-in data-[state=open]:slide-in-from-right",
+    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right"
+  ].join(" "),
+  left: [
+    "inset-y-0 left-0",
+    "data-[state=open]:animate-in data-[state=open]:slide-in-from-left",
+    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left"
+  ].join(" "),
+  top: [
+    "inset-x-0 top-0",
+    "data-[state=open]:animate-in data-[state=open]:slide-in-from-top",
+    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top"
+  ].join(" "),
+  bottom: [
+    "inset-x-0 bottom-0",
+    "data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom",
+    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom"
+  ].join(" ")
+};
+var SIZE_CLASSES = {
+  right: { xs: "w-60", sm: "w-80", md: "w-96", lg: "w-[480px]", xl: "w-[640px]", full: "w-screen" },
+  left: { xs: "w-60", sm: "w-80", md: "w-96", lg: "w-[480px]", xl: "w-[640px]", full: "w-screen" },
+  top: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" },
+  bottom: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" }
+};
+var DrawerContent = React33.forwardRef(
+  function DrawerContent2(props, ref) {
+    const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
+    const placement = React33.useContext(DrawerPlacementContext);
+    const size = React33.useContext(DrawerSizeContext);
+    const { open, setOpen, modal } = React33.useContext(DrawerStateContext);
+    const isNarrow = useIsNarrow();
+    if (isNarrow) {
+      return /* @__PURE__ */ jsxs(
+        Sheet,
+        {
+          open,
+          onOpenChange: setOpen,
+          modal,
+          dismissOnSnapToBottom: true,
+          snapPointsMode: "percent",
+          snapPoints: [88],
+          transition: "medium",
+          children: [
+            backdrop && /* @__PURE__ */ jsx(
+              Sheet.Overlay,
+              {
+                transition: "lazy",
+                enterStyle: { opacity: 0 },
+                exitStyle: { opacity: 0 },
+                className: "bg-black/50"
+              }
+            ),
+            /* @__PURE__ */ jsx(Sheet.Handle, {}),
+            /* @__PURE__ */ jsx(
+              Sheet.Frame,
+              {
+                unstyled: true,
+                className: cn(
+                  "flex flex-col rounded-t-2xl bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)]",
+                  className
+                ),
+                ...rest,
+                children
+              }
+            )
+          ]
+        }
+      );
+    }
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      backdrop && /* @__PURE__ */ jsx(
+        RadixDialog.Overlay,
+        {
+          className: cn(
+            "fixed inset-0 z-50 bg-black/50",
+            "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        RadixDialog.Content,
+        {
+          ref,
+          className: cn(
+            "fixed z-50 flex flex-col bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)] duration-300",
+            PLACEMENT_CLASSES[placement] ?? PLACEMENT_CLASSES.right,
+            SIZE_CLASSES[placement]?.[size] ?? SIZE_CLASSES.right?.md,
+            className
+          ),
+          ...rest,
+          children
+        }
+      )
+    ] });
+    if (portalled) {
+      return /* @__PURE__ */ jsx(RadixDialog.Portal, { container: portalRef?.current ?? void 0, children: content });
+    }
+    return content;
+  }
+);
+var DrawerCloseTrigger = React33.forwardRef(function DrawerCloseTrigger2(props, ref) {
+  return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+    CloseButton,
+    {
+      ref,
+      className: cn("absolute top-7 right-5", props.className),
+      ...props
+    }
+  ) });
+});
+var DrawerTrigger = (props) => {
+  const { asChild = true, ...rest } = props;
+  return /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild, ...rest });
+};
+var DrawerHeader = React33.forwardRef(
+  function DrawerHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5 p-6 pb-0", className), ...props });
+  }
+);
+var DrawerBody = React33.forwardRef(
+  function DrawerBody2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 overflow-auto p-6", className), ...props });
+  }
+);
+var DrawerFooter = React33.forwardRef(
+  function DrawerFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-6 pt-0", className), ...props });
+  }
+);
+var DrawerTitle = RadixDialog.Title;
+var DrawerDescription = RadixDialog.Description;
+var DrawerActionTrigger = RadixDialog.Close;
+function parsePlacement(placement) {
+  if (!placement) {
+    return { side: "bottom", align: "start" };
+  }
+  const parts = placement.split("-");
+  const side = parts[0] ?? "bottom";
+  const alignPart = parts[1];
+  let align = "center";
+  if (alignPart === "start") {
+    align = "start";
+  } else if (alignPart === "end") {
+    align = "end";
+  }
+  return { side, align };
+}
+var PositioningContext = React33.createContext({
+  side: "bottom",
+  align: "start",
+  sideOffset: 4,
+  alignOffset: 0
+});
+var MenuRoot = (props) => {
+  const {
+    children,
+    open,
+    defaultOpen,
+    onOpenChange,
+    positioning,
+    modal = true,
+    // lazyMount / unmountOnExit have no direct Radix equivalent; Radix handles
+    // mount/unmount automatically.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    lazyMount: _lazyMount,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    unmountOnExit: _unmountOnExit
+  } = props;
+  const mergedPositioning = {
+    placement: "bottom-start",
+    ...positioning,
+    offset: {
+      mainAxis: 4,
+      ...positioning?.offset
+    }
+  };
+  const { side, align } = parsePlacement(mergedPositioning.placement);
+  const positioningValue = React33.useMemo(() => ({
+    side,
+    align,
+    sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
+    alignOffset: mergedPositioning.offset?.crossAxis ?? 0
+  }), [side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis]);
+  const handleOpenChange = React33.useCallback((isOpen) => {
+    onOpenChange?.({ open: isOpen });
+  }, [onOpenChange]);
+  return /* @__PURE__ */ jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsx(
+    DropdownMenu.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: handleOpenChange,
+      modal,
+      children
+    }
+  ) });
+};
+var MenuTrigger = React33.forwardRef(function MenuTrigger2(props, ref) {
+  const { asChild = false, ...rest } = props;
+  return /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild, ref, ...rest });
+});
+var MenuContent = React33.forwardRef(function MenuContent2(props, ref) {
+  const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
+  const positioning = React33.useContext(PositioningContext);
+  const mergedStyle = {
+    ...style,
+    ...zIndex !== void 0 ? { zIndex: typeof zIndex === "string" ? `var(--z-index-${zIndex}, ${zIndex})` : zIndex } : {},
+    ...minW !== void 0 ? { minWidth: minW } : {}
+  };
+  const content = /* @__PURE__ */ jsx(
+    DropdownMenu.Content,
+    {
+      ref,
+      side: positioning.side,
+      align: positioning.align,
+      sideOffset: positioning.sideOffset,
+      alignOffset: positioning.alignOffset,
+      className: cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-lg p-1",
+        "border border-[var(--color-popover-border,var(--color-border-divider))]",
+        "bg-[var(--color-popover-bg,var(--color-dialog-bg))]",
+        "shadow-[0_4px_12px_var(--color-popover-shadow)]",
+        "outline-none",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      ),
+      style: Object.keys(mergedStyle).length > 0 ? mergedStyle : void 0,
+      ...rest
+    }
+  );
+  if (!portalled) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalRef?.current ?? void 0, children: content });
+});
+var MenuItem = React33.forwardRef(function MenuItem2(props, ref) {
+  const { className, value: _value, asChild, closeOnSelect: _closeOnSelect, disabled, children, onClick, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.Item,
+    {
+      ref,
+      asChild,
+      disabled,
+      onClick,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm",
+        "outline-none transition-colors",
+        "text-[var(--color-text-primary,inherit)]",
+        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var MenuItemText = React33.forwardRef(function MenuItemText2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx("span", { ref, className: cn("flex-1", className), ...rest });
+});
+React33.forwardRef(function MenuItemCommand2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      ...rest
+    }
+  );
+});
+var MenuSeparator = React33.forwardRef(function MenuSeparator2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.Separator,
+    {
+      ref,
+      className: cn("-mx-1 my-1 h-px bg-[var(--color-border-divider)]", className),
+      ...rest
+    }
+  );
+});
+var MenuItemGroup = React33.forwardRef(function MenuItemGroup2(props, ref) {
+  const { title, children, className, ...rest } = props;
+  return /* @__PURE__ */ jsxs(DropdownMenu.Group, { ref, className, ...rest, children: [
+    title && /* @__PURE__ */ jsx(DropdownMenu.Label, { className: "px-2 py-1.5 text-xs font-semibold select-none opacity-60", children: title }),
+    children
+  ] });
+});
+var MenuArrow = React33.forwardRef(function MenuArrow2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.Arrow,
+    {
+      ref,
+      className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
+      ...rest
+    }
+  );
+});
+var MenuCheckboxItem = React33.forwardRef(function MenuCheckboxItem2(props, ref) {
+  const { className, children, checked, onCheckedChange, onClick, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu.CheckboxItem,
+    {
+      ref,
+      checked,
+      onCheckedChange,
+      onClick,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
+        "outline-none transition-colors",
+        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+        children
+      ]
+    }
+  );
+});
+var MenuRadioItemGroup = React33.forwardRef(function MenuRadioItemGroup2(props, ref) {
+  const { value, onValueChange, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.RadioGroup,
+    {
+      ref,
+      value,
+      onValueChange,
+      ...rest
+    }
+  );
+});
+var MenuRadioItem = React33.forwardRef(function MenuRadioItem2(props, ref) {
+  const { className, children, value, onClick, ...rest } = props;
+  const { value: _v, ...radixRest } = rest;
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu.RadioItem,
+    {
+      ref,
+      value,
+      onClick,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
+        "outline-none transition-colors",
+        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  );
+});
+React33.forwardRef(function MenuContextTrigger2(props, ref) {
+  const { asChild: _asChild, ...rest } = props;
+  return /* @__PURE__ */ jsx("span", { ref, ...rest });
+});
+var MenuTriggerItem = React33.forwardRef(function MenuTriggerItem2(props, ref) {
+  const { startIcon, children, className, ...rest } = props;
+  return /* @__PURE__ */ jsx(DropdownMenu.Sub, { children: /* @__PURE__ */ jsxs(
+    DropdownMenu.SubTrigger,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm",
+        "outline-none transition-colors",
+        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
+        className
+      ),
+      ...rest,
+      children: [
+        startIcon,
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+      ]
+    }
+  ) });
+});
+function initials(label) {
+  return label.split(/[\s._-]+/).filter(Boolean).map((w) => w[0]).join("").slice(0, 2).toUpperCase();
+}
+var Monogram = ({ label, logo }) => logo ? /* @__PURE__ */ jsx("img", { src: logo, alt: "", className: "h-5 w-5 shrink-0 rounded object-contain" }) : /* @__PURE__ */ jsx(
+  "span",
+  {
+    "aria-hidden": "true",
+    className: "flex h-5 w-5 shrink-0 items-center justify-center rounded bg-[rgba(127,127,127,0.22)] text-[10px] font-bold",
+    children: initials(label)
+  }
+);
+var Row = ({ item, onDone, menu }) => {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon,
+    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
+    item.hint ? /* @__PURE__ */ jsx("span", { className: "text-xs opacity-60", children: item.hint }) : null,
+    item.selected ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }) : null
+  ] });
+  const className = cn(
+    "flex w-full cursor-pointer select-none items-center gap-2.5 rounded-md px-2 py-2 text-left text-sm",
+    "hover:bg-[rgba(127,127,127,0.14)]",
+    item.danger && "text-[var(--color-text-error,#e5484d)]"
+  );
+  const activate = () => {
+    onDone();
+    item.onSelect?.();
+  };
+  const shared = {
+    "data-testid": `chrome-item-${item.id}`,
+    "aria-current": item.selected ? "true" : void 0,
+    className
+  };
+  const control = item.href ? /* @__PURE__ */ jsx("a", { href: item.href, ...shared, onClick: onDone, children: body }) : /* @__PURE__ */ jsx("button", { type: "button", ...shared, onClick: activate, children: body });
+  return menu ? /* @__PURE__ */ jsx(MenuItem, { value: item.id, asChild: true, children: control }) : control;
+};
+var Switcher = ({
+  title,
+  label,
+  icon,
+  items,
+  footer = [],
+  status = "ready",
+  empty = "Nothing here yet.",
+  onSignIn,
+  signInLabel = "Sign in",
+  error,
+  align = "start",
+  testId
+}) => {
+  const [open, setOpen] = React33.useState(false);
+  const narrow = useIsNarrow();
+  const close = React33.useCallback(() => setOpen(false), []);
+  const message = status === "loading" ? "Loading\u2026" : status === "error" ? error ?? "Could not reach IAM." : status === "anonymous" ? null : items.length === 0 ? empty : null;
+  const rows = status === "anonymous" && onSignIn ? [{ id: "sign-in", label: signInLabel, icon: /* @__PURE__ */ jsx(User, { "aria-hidden": "true", className: "h-4 w-4" }), onSelect: onSignIn }] : status === "ready" ? items : [];
+  const panel = (menu) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "px-2 pb-1 pt-1 text-[11px] font-semibold uppercase tracking-wide opacity-55", children: title }),
+    message ? /* @__PURE__ */ jsx("div", { "data-testid": "chrome-message", className: "px-2 py-2 text-sm opacity-70", children: message }) : null,
+    rows.map((item) => /* @__PURE__ */ jsx(Row, { item, onDone: close, menu }, item.id)),
+    footer.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      menu ? /* @__PURE__ */ jsx(MenuSeparator, { className: "my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]" }) : /* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]" }),
+      footer.map((item) => /* @__PURE__ */ jsx(Row, { item, onDone: close, menu }, item.id))
+    ] }) : null
+  ] });
+  const trigger = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-testid": testId,
+      "aria-label": title,
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      className: cn(
+        "flex max-w-[14rem] items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium",
+        "hover:bg-[rgba(127,127,127,0.14)]"
+      ),
+      children: [
+        icon,
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+        /* @__PURE__ */ jsx(ChevronsUpDown, { "aria-hidden": "true", className: "h-3.5 w-3.5 shrink-0 opacity-60" })
+      ]
+    }
+  );
+  if (narrow) {
+    return /* @__PURE__ */ jsxs(DrawerRoot, { open, onOpenChange: (d) => setOpen(d.open), placement: "bottom", size: "md", children: [
+      React33.cloneElement(trigger, { onClick: () => setOpen(true) }),
+      /* @__PURE__ */ jsxs(DrawerContent, { "data-testid": testId ? `${testId}-panel` : void 0, children: [
+        /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: title }) }),
+        /* @__PURE__ */ jsx(DrawerBody, { children: panel(false) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    MenuRoot,
+    {
+      open,
+      onOpenChange: (d) => setOpen(d.open),
+      positioning: { placement: align === "end" ? "bottom-end" : "bottom-start" },
+      children: [
+        /* @__PURE__ */ jsx(MenuTrigger, { asChild: true, children: trigger }),
+        /* @__PURE__ */ jsx(MenuContent, { minW: "16rem", "data-testid": testId ? `${testId}-panel` : void 0, children: panel(true) })
+      ]
+    }
+  );
+};
+var OrgSwitcher = () => {
+  const id = useIdentity();
+  return /* @__PURE__ */ jsx(
+    Switcher,
+    {
+      testId: "org-switcher",
+      title: "Organization",
+      label: id.org?.displayName || id.org?.name || id.whiteLabel.name,
+      icon: /* @__PURE__ */ jsx(Monogram, { label: id.org?.displayName || id.org?.name || id.whiteLabel.name, logo: id.org?.logo }),
+      status: id.status,
+      error: id.error,
+      empty: "No organizations for this account.",
+      onSignIn: id.signIn,
+      signInLabel: `Sign in with ${id.whiteLabel.iamDomain}`,
+      items: id.orgs.map((o) => ({
+        id: o.name,
+        label: o.displayName || o.name,
+        icon: /* @__PURE__ */ jsx(Monogram, { label: o.displayName || o.name, logo: o.logo }),
+        selected: o.name === id.org?.name,
+        onSelect: () => id.setOrg(o.name)
+      }))
+    }
+  );
+};
+var ProjectSwitcher = () => {
+  const id = useIdentity();
+  if (id.status === "ready" && id.projects.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    Switcher,
+    {
+      testId: "project-switcher",
+      title: "Project",
+      label: id.project?.displayName || id.project?.name || "Project",
+      icon: /* @__PURE__ */ jsx(Folder, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+      status: id.status,
+      error: id.error,
+      empty: "No projects in this organization.",
+      onSignIn: id.signIn,
+      items: id.projects.map((p) => ({
+        id: p.name,
+        label: p.displayName || p.name,
+        icon: /* @__PURE__ */ jsx(Folder, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+        selected: p.name === id.project?.name,
+        onSelect: () => id.setProject(p.name)
+      }))
+    }
+  );
+};
+var UserMenu = ({ items = [] }) => {
+  const id = useIdentity();
+  const who = id.account?.displayName || id.account?.email || id.account?.name || "Account";
+  return /* @__PURE__ */ jsx(
+    Switcher,
+    {
+      testId: "user-menu",
+      align: "end",
+      title: id.status === "ready" ? who : "Account",
+      label: id.status === "ready" ? who : "Sign in",
+      icon: id.status === "ready" ? /* @__PURE__ */ jsx(Monogram, { label: who, logo: id.account?.avatar }) : /* @__PURE__ */ jsx(User, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+      status: id.status,
+      error: id.error,
+      onSignIn: id.signIn,
+      signInLabel: `Sign in with ${id.whiteLabel.iamDomain}`,
+      items: [
+        { id: "account", label: id.account?.email || who, icon: /* @__PURE__ */ jsx(User, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }) },
+        ...items
+      ],
+      footer: id.status === "ready" ? [{ id: "sign-out", label: "Sign out", danger: true, icon: /* @__PURE__ */ jsx(LogOut, { "aria-hidden": "true", className: "h-4 w-4" }), onSelect: id.signOut }] : []
+    }
+  );
+};
+var SettingsMenu = ({ items = [], href = "/settings" }) => /* @__PURE__ */ jsx(
+  Switcher,
+  {
+    testId: "settings-menu",
+    align: "end",
+    title: "Settings",
+    label: "Settings",
+    icon: /* @__PURE__ */ jsx(Settings, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+    items,
+    empty: "No settings on this surface.",
+    footer: [{ id: "all-settings", label: "All settings", href, icon: /* @__PURE__ */ jsx(Settings, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }) }]
+  }
+);
+var AppNav = ({
+  brand,
+  home = "/",
+  links = [],
+  org = true,
+  project = false,
+  settings,
+  userItems,
+  children
+}) => {
+  const id = useIdentity();
+  const narrow = useIsNarrow();
+  const [menu, setMenu] = React33.useState(false);
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      "data-testid": "app-nav",
+      className: "sticky top-0 z-50 border-b border-[var(--color-border-divider,rgba(127,127,127,0.25))] bg-[var(--color-bg-body,inherit)]",
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-14 max-w-7xl items-center gap-2 px-4", children: [
+        narrow && links.length > 0 ? /* @__PURE__ */ jsxs(DrawerRoot, { open: menu, onOpenChange: (d) => setMenu(d.open), placement: "bottom", size: "md", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Menu",
+              "data-testid": "nav-menu",
+              className: "rounded-md p-2 hover:bg-[rgba(127,127,127,0.14)]",
+              onClick: () => setMenu(true),
+              children: /* @__PURE__ */ jsx(Menu, { "aria-hidden": "true", className: "h-5 w-5" })
+            }
+          ),
+          /* @__PURE__ */ jsxs(DrawerContent, { "data-testid": "nav-menu-panel", children: [
+            /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: "Menu" }) }),
+            /* @__PURE__ */ jsx(DrawerBody, { children: links.map((l) => /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: l.href,
+                onClick: () => setMenu(false),
+                "aria-current": l.active ? "page" : void 0,
+                className: "block rounded-md px-2 py-2.5 text-sm hover:bg-[rgba(127,127,127,0.14)]",
+                children: l.label
+              },
+              l.href
+            )) })
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsx("a", { href: home, className: "flex items-center gap-2 font-semibold tracking-tight", children: brand ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Building2, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+          id.whiteLabel.name
+        ] }) }),
+        org ? /* @__PURE__ */ jsx(OrgSwitcher, {}) : null,
+        project ? /* @__PURE__ */ jsx(ProjectSwitcher, {}) : null,
+        !narrow && links.length > 0 ? /* @__PURE__ */ jsx("nav", { className: "flex items-center gap-1", children: links.map((l) => /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: l.href,
+            "aria-current": l.active ? "page" : void 0,
+            className: cn(
+              "rounded-md px-3 py-1.5 text-sm font-medium",
+              l.active ? "bg-[rgba(127,127,127,0.14)]" : "opacity-75 hover:opacity-100"
+            ),
+            children: l.label
+          },
+          l.href
+        )) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-end gap-1", children: [
+          children,
+          settings ? /* @__PURE__ */ jsx(SettingsMenu, { items: settings }) : null,
+          /* @__PURE__ */ jsx(UserMenu, { items: userItems })
+        ] })
+      ] })
+    }
+  );
 };
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var IndicatorIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var AccordionRoot = React29.forwardRef(
+var AccordionRoot = React33.forwardRef(
   function AccordionRoot2(props, ref) {
     const {
       multiple: _multiple,
@@ -60,7 +1286,7 @@ var AccordionRoot = React29.forwardRef(
       borderRadius: _borderRadius,
       ...rest
     } = props;
-    const handleValueChange = React29.useCallback(
+    const handleValueChange = React33.useCallback(
       (next) => {
         onValueChange?.({ value: next });
       },
@@ -88,7 +1314,7 @@ var AccordionRoot = React29.forwardRef(
     );
   }
 );
-var AccordionItem = React29.forwardRef(
+var AccordionItem = React33.forwardRef(
   function AccordionItem2(props, ref) {
     const { className, as: _as, _first, _last, display: _display, ...rest } = props;
     return /* @__PURE__ */ jsx(
@@ -104,7 +1330,7 @@ var AccordionItem = React29.forwardRef(
     );
   }
 );
-var AccordionItemTrigger = React29.forwardRef(function AccordionItemTrigger2(props, ref) {
+var AccordionItemTrigger = React33.forwardRef(function AccordionItemTrigger2(props, ref) {
   const {
     children,
     indicatorPlacement: indicatorPlacementProp,
@@ -169,7 +1395,7 @@ var AccordionItemTrigger = React29.forwardRef(function AccordionItemTrigger2(pro
     }
   ) }) });
 });
-var AccordionItemContent = React29.forwardRef(function AccordionItemContent2(props, ref) {
+var AccordionItemContent = React33.forwardRef(function AccordionItemContent2(props, ref) {
   const { className, children, pb: _pb, pr: _pr, pl: _pl, w: _w, display: _display, flexDir: _flexDir, rowGap: _rowGap, ...rest } = props;
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Content,
@@ -187,11 +1413,11 @@ var AccordionItemContent = React29.forwardRef(function AccordionItemContent2(pro
   );
 });
 function useAccordion(items) {
-  const [value, setValue] = React29.useState([]);
-  const onValueChange = React29.useCallback(({ value: value2 }) => {
+  const [value, setValue] = React33.useState([]);
+  const onValueChange = React33.useCallback(({ value: value2 }) => {
     setValue(value2);
   }, []);
-  const scrollToItemFromUrl = React29.useCallback(() => {
+  const scrollToItemFromUrl = React33.useCallback(() => {
     const hash = window.location.hash.replace("#", "");
     if (!hash) {
       return;
@@ -205,7 +1431,7 @@ function useAccordion(items) {
       setValue([itemToScroll.id]);
     }
   }, [items]);
-  return React29.useMemo(() => {
+  return React33.useMemo(() => {
     return {
       value,
       onValueChange,
@@ -213,68 +1439,6 @@ function useAccordion(items) {
     };
   }, [value, onValueChange, scrollToItemFromUrl]);
 }
-var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
-var CloseButtonFrame = styled(View, {
-  name: "LuxCloseButton",
-  render: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close" }),
-  role: "button",
-  cursor: "pointer",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: 20,
-  height: 20,
-  minWidth: 0,
-  flexShrink: 1,
-  padding: 0,
-  borderRadius: 4,
-  borderWidth: 0,
-  overflow: "hidden",
-  backgroundColor: "transparent",
-  hoverStyle: {
-    backgroundColor: "transparent"
-  },
-  variants: {
-    disabled: {
-      true: {
-        opacity: 0.4,
-        pointerEvents: "none"
-      }
-    }
-  }
-});
-var CLOSE_BUTTON_CLASSES = [
-  "text-[var(--closeButton-fg,currentColor)]",
-  "hover:text-[var(--hover-color,currentColor)]",
-  "disabled:opacity-40"
-].join(" ");
-var CloseButton = React29.forwardRef(function CloseButton2(props, ref) {
-  const { variant: _variant, size: _size, className, children, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    CloseButtonFrame,
-    {
-      ref,
-      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
-      ...rest,
-      children: children ?? /* @__PURE__ */ jsx(
-        "svg",
-        {
-          className: "size-5",
-          viewBox: "0 0 20 20",
-          fill: "none",
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: CLOSE_ICON_PATH,
-              fill: "currentColor"
-            }
-          )
-        }
-      )
-    }
-  );
-});
 var SHIM_PROPS = [
   "w",
   "h",
@@ -395,7 +1559,7 @@ var SKELETON_CLASSES = [
   "bg-[length:200%_100%]"
 ].join(" ");
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
-var Skeleton = React29.forwardRef(
+var Skeleton = React33.forwardRef(
   function Skeleton2(props, ref) {
     const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
     const shimStyle = shimToStyle(props);
@@ -404,10 +1568,10 @@ var Skeleton = React29.forwardRef(
     const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
     const htmlRest = stripShims(allRest);
     if (!loading) {
-      if (asChild && React29.isValidElement(children)) return children;
+      if (asChild && React33.isValidElement(children)) return children;
       return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
     }
-    if (asChild && React29.isValidElement(children)) {
+    if (asChild && React33.isValidElement(children)) {
       return /* @__PURE__ */ jsx(
         Component,
         {
@@ -433,7 +1597,7 @@ var Skeleton = React29.forwardRef(
     );
   }
 );
-var SkeletonCircle = React29.forwardRef(
+var SkeletonCircle = React33.forwardRef(
   function SkeletonCircle2(props, ref) {
     const { size = 40, loading = true, className, ...rest } = props;
     const dimension = typeof size === "number" ? `${size}px` : size;
@@ -449,7 +1613,7 @@ var SkeletonCircle = React29.forwardRef(
     );
   }
 );
-var SkeletonText = React29.forwardRef(
+var SkeletonText = React33.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
     return /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
@@ -471,7 +1635,7 @@ var STATUS_CLASSES = {
   success: "bg-[var(--color-alert-bg-success)]",
   error: "bg-[var(--color-alert-bg-error)]"
 };
-var SIZE_CLASSES = {
+var SIZE_CLASSES2 = {
   sm: "gap-2 px-2 py-2 text-xs",
   md: "gap-2 px-3 py-2 text-base"
 };
@@ -479,7 +1643,7 @@ var INDICATOR_SIZE_CLASSES = {
   sm: "w-5 h-5 my-0",
   md: "w-5 h-5 my-[2px]"
 };
-var Alert = React29.forwardRef(
+var Alert = React33.forwardRef(
   function Alert2(props, ref) {
     const {
       title,
@@ -504,7 +1668,7 @@ var Alert = React29.forwardRef(
     if (_mb !== void 0) shimStyle.marginBottom = typeof _mb === "number" ? `${_mb * 4}px` : _mb;
     if (_mt !== void 0) shimStyle.marginTop = typeof _mt === "number" ? `${_mt * 4}px` : _mt;
     const alertStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
-    const [isOpen, setIsOpen] = React29.useState(true);
+    const [isOpen, setIsOpen] = React33.useState(true);
     const resolvedSize = size ?? "md";
     const defaultIcon = /* @__PURE__ */ jsx(IndicatorIcon2, { className: "w-5 h-5" });
     const iconElement = (() => {
@@ -519,7 +1683,7 @@ var Alert = React29.forwardRef(
         INDICATOR_SIZE_CLASSES[resolvedSize]
       ), children: icon || defaultIcon });
     })();
-    const handleClose = React29.useCallback(() => {
+    const handleClose = React33.useCallback(() => {
       setIsOpen(false);
       onClose?.();
     }, [onClose]);
@@ -550,7 +1714,7 @@ var Alert = React29.forwardRef(
       "div",
       {
         ref,
-        className: cn(ALERT_BASE, STATUS_CLASSES[status], SIZE_CLASSES[resolvedSize], className),
+        className: cn(ALERT_BASE, STATUS_CLASSES[status], SIZE_CLASSES2[resolvedSize], className),
         style: alertStyle,
         ...alertRest,
         children: [
@@ -580,7 +1744,7 @@ var Alert = React29.forwardRef(
     ) });
   }
 );
-var SIZE_CLASSES2 = {
+var SIZE_CLASSES3 = {
   xs: "h-6 w-6 text-[10px]",
   sm: "h-8 w-8 text-xs",
   md: "h-10 w-10 text-sm",
@@ -595,11 +1759,11 @@ var VARIANT_CLASSES = {
 };
 var DEFAULT_SIZE = "md";
 var DEFAULT_VARIANT = "subtle";
-var AvatarGroupContext = React29.createContext({});
+var AvatarGroupContext = React33.createContext({});
 function useAvatarGroupContext() {
-  return React29.useContext(AvatarGroupContext);
+  return React33.useContext(AvatarGroupContext);
 }
-var Avatar = React29.forwardRef(
+var Avatar = React33.forwardRef(
   function Avatar2(props, ref) {
     const group = useAvatarGroupContext();
     const {
@@ -620,12 +1784,13 @@ var Avatar = React29.forwardRef(
     const variant = variantProp ?? group.variant ?? DEFAULT_VARIANT;
     const isBorderless = borderless ?? group.borderless ?? false;
     return /* @__PURE__ */ jsxs(
-      RadixAvatar.Root,
+      Avatar$1,
       {
         ref,
+        unstyled: true,
         className: cn(
           "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle",
-          SIZE_CLASSES2[size],
+          SIZE_CLASSES3[size],
           VARIANT_CLASSES[variant],
           !isBorderless && "ring-2 ring-white dark:ring-gray-900",
           className
@@ -633,8 +1798,8 @@ var Avatar = React29.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsx(AvatarFallback, { name, icon, children: fallback }),
-          /* @__PURE__ */ jsx(
-            RadixAvatar.Image,
+          src != null && /* @__PURE__ */ jsx(
+            Avatar$1.Image,
             {
               className: "h-full w-full rounded-[inherit] object-cover",
               src,
@@ -649,13 +1814,14 @@ var Avatar = React29.forwardRef(
     );
   }
 );
-var AvatarFallback = React29.forwardRef(
+var AvatarFallback = React33.forwardRef(
   function AvatarFallback2(props, ref) {
     const { name, icon, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxs(
-      RadixAvatar.Fallback,
+      Avatar$1.Fallback,
       {
         ref,
+        unstyled: true,
         className: cn(
           "flex h-full w-full items-center justify-center font-medium",
           className
@@ -676,10 +1842,10 @@ function getInitials(name) {
   const lastName = names.length > 1 ? names[names.length - 1] : "";
   return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0);
 }
-var AvatarGroup = React29.forwardRef(
+var AvatarGroup = React33.forwardRef(
   function AvatarGroup2(props, ref) {
     const { size, variant, borderless, className, ...rest } = props;
-    const contextValue = React29.useMemo(
+    const contextValue = React33.useMemo(
       () => ({ size, variant, borderless }),
       [size, variant, borderless]
     );
@@ -693,26 +1859,11 @@ var AvatarGroup = React29.forwardRef(
     ) });
   }
 );
-var LG_BREAKPOINT = 1024;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React29.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.innerWidth < LG_BREAKPOINT;
-  });
-  React29.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
-    const handler = (e) => setIsMobile(e.matches);
-    setIsMobile(mql.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-  return isMobile;
-}
 function mapPlacement(p) {
   if (!p) return void 0;
   return p;
 }
-var Tooltip = React29.forwardRef(
+var Tooltip = React33.forwardRef(
   function Tooltip2(props, ref) {
     const {
       showArrow: showArrowProp,
@@ -731,28 +1882,28 @@ var Tooltip = React29.forwardRef(
       interactive,
       positioning
     } = props;
-    const [open, setOpen] = React29.useState(defaultOpen);
-    const timeoutRef = React29.useRef(null);
-    const isMobile = useIsMobile();
-    const handleOpenChange = React29.useCallback((nextOpen) => {
+    const [open, setOpen] = React33.useState(defaultOpen);
+    const timeoutRef = React33.useRef(null);
+    const isMobile = useIsTouch();
+    const handleOpenChange = React33.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.({ open: nextOpen });
     }, [onOpenChange]);
-    const handleOpenChangeManual = React29.useCallback((nextOpen) => {
+    const handleOpenChangeManual = React33.useCallback((nextOpen) => {
       timeoutRef.current && window.clearTimeout(timeoutRef.current);
       timeoutRef.current = window.setTimeout(() => {
         setOpen(nextOpen);
         onOpenChange?.({ open: nextOpen });
       }, nextOpen ? openDelay : closeDelay);
     }, [closeDelay, openDelay, onOpenChange]);
-    const handleClickAway = React29.useCallback(() => {
+    const handleClickAway = React33.useCallback(() => {
       handleOpenChangeManual(false);
     }, [handleOpenChangeManual]);
     const triggerRef = useClickAway(handleClickAway);
-    const handleTriggerClick = React29.useCallback(() => {
+    const handleTriggerClick = React33.useCallback(() => {
       handleOpenChangeManual(!open);
     }, [handleOpenChangeManual, open]);
-    const handleContentClick = React29.useCallback((event) => {
+    const handleContentClick = React33.useCallback((event) => {
       event.stopPropagation();
       if (interactive) {
         const closestLink = event.target?.closest("a");
@@ -761,7 +1912,7 @@ var Tooltip = React29.forwardRef(
         }
       }
     }, [interactive, handleOpenChangeManual]);
-    React29.useEffect(() => {
+    React33.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -833,7 +1984,7 @@ function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
 var BASE_CLASSES = "inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text";
-var SIZE_CLASSES3 = {
+var SIZE_CLASSES4 = {
   sm: "text-xs p-1 h-[18px] min-h-[18px]",
   md: "text-sm px-1 py-0.5 min-h-6",
   lg: "text-sm px-2 py-1 min-h-7 font-semibold"
@@ -863,7 +2014,7 @@ var COLOR_PALETTE_CLASSES = {
   bright_pink: "bg-badge-bright-pink-bg text-badge-bright-pink-fg"
 };
 var S2 = 4;
-var Badge = React29__default.forwardRef(
+var Badge = React33__default.forwardRef(
   function Badge2(props, ref) {
     const {
       loading,
@@ -903,7 +2054,7 @@ var Badge = React29__default.forwardRef(
         ref,
         className: cn(
           BASE_CLASSES,
-          SIZE_CLASSES3[size],
+          SIZE_CLASSES4[size],
           COLOR_PALETTE_CLASSES[colorPalette],
           className
         ),
@@ -1112,7 +2263,7 @@ function buildShimStyle(props) {
   if (props.borderTopRightRadius !== void 0) s.borderTopRightRadius = typeof props.borderTopRightRadius === "number" ? `${props.borderTopRightRadius}px` : props.borderTopRightRadius;
   return Object.keys(s).length > 0 ? s : void 0;
 }
-var Button = React29.forwardRef(
+var Button = React33.forwardRef(
   function Button2(props, ref) {
     const {
       className,
@@ -1203,7 +2354,7 @@ var Button = React29.forwardRef(
     return button;
   }
 );
-var SIZE_CLASSES4 = {
+var SIZE_CLASSES5 = {
   "2xs": "px-2 h-5 min-w-5 text-xs rounded-sm gap-1",
   xs: "px-2 h-6 min-w-6 text-sm rounded-sm gap-1",
   sm: "px-3 h-8 min-w-8 text-sm rounded-md gap-1",
@@ -1212,9 +2363,9 @@ var SIZE_CLASSES4 = {
 function buttonVariants(opts) {
   const v = opts?.variant ?? "solid";
   const s = opts?.size ?? "md";
-  return [BASE_CLASSES2, VARIANT_CLASSES2[v] ?? "", SIZE_CLASSES4[s] ?? ""].filter(Boolean).join(" ");
+  return [BASE_CLASSES2, VARIANT_CLASSES2[v] ?? "", SIZE_CLASSES5[s] ?? ""].filter(Boolean).join(" ");
 }
-var ButtonGroup = React29.forwardRef(
+var ButtonGroup = React33.forwardRef(
   function ButtonGroup2(props, ref) {
     const { className, ...rest } = props;
     return /* @__PURE__ */ jsx(
@@ -1228,7 +2379,7 @@ var ButtonGroup = React29.forwardRef(
     );
   }
 );
-var ButtonGroupRadio = React29.forwardRef(
+var ButtonGroupRadio = React33.forwardRef(
   function ButtonGroupRadio2(props, ref) {
     const {
       children,
@@ -1240,24 +2391,24 @@ var ButtonGroupRadio = React29.forwardRef(
       className,
       ...rest
     } = props;
-    const firstChildValue = React29.useMemo(() => {
+    const firstChildValue = React33.useMemo(() => {
       const firstChild = Array.isArray(children) ? children[0] : void 0;
       return typeof firstChild?.props.value === "string" ? firstChild.props.value : void 0;
     }, [children]);
-    const [value, setValue] = React29.useState(defaultValue ?? firstChildValue);
-    const handleItemClick = React29.useCallback((event) => {
+    const [value, setValue] = React33.useState(defaultValue ?? firstChildValue);
+    const handleItemClick = React33.useCallback((event) => {
       const v = event.currentTarget.value;
       setValue(v);
       onChange?.(v);
     }, [onChange]);
-    const clonedChildren = React29.Children.map(children, (child) => {
-      return React29.cloneElement(child, {
+    const clonedChildren = React33.Children.map(children, (child) => {
+      return React33.cloneElement(child, {
         onClick: handleItemClick,
         selected: value === child.props.value,
         variant
       });
     });
-    const childrenLength = React29.Children.count(children);
+    const childrenLength = React33.Children.count(children);
     return /* @__PURE__ */ jsx(Skeleton, { loading, children: /* @__PURE__ */ jsx(
       "div",
       {
@@ -1277,11 +2428,11 @@ var ButtonGroupRadio = React29.forwardRef(
 );
 var NOOP = () => {
 };
-var CheckboxGroupContext = React29.createContext(null);
+var CheckboxGroupContext = React33.createContext(null);
 function useCheckboxGroupContext() {
-  return React29.useContext(CheckboxGroupContext);
+  return React33.useContext(CheckboxGroupContext);
 }
-var CheckboxGroupBase = React29.forwardRef(
+var CheckboxGroupBase = React33.forwardRef(
   function CheckboxGroup(props, ref) {
     const {
       children,
@@ -1293,10 +2444,10 @@ var CheckboxGroupBase = React29.forwardRef(
       className,
       ...rest
     } = props;
-    const [uncontrolledValue, setUncontrolledValue] = React29.useState(defaultValue ?? []);
+    const [uncontrolledValue, setUncontrolledValue] = React33.useState(defaultValue ?? []);
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : uncontrolledValue;
-    const toggle = React29.useCallback(
+    const toggle = React33.useCallback(
       (itemValue) => {
         const next = value.includes(itemValue) ? value.filter((v) => v !== itemValue) : [...value, itemValue];
         if (!isControlled) {
@@ -1306,12 +2457,12 @@ var CheckboxGroupBase = React29.forwardRef(
       },
       [value, isControlled, onValueChange]
     );
-    React29.useEffect(() => {
+    React33.useEffect(() => {
       if (isControlled) {
         setUncontrolledValue(controlledValue);
       }
     }, [isControlled, controlledValue]);
-    const ctx = React29.useMemo(() => ({ value, toggle }), [value, toggle]);
+    const ctx = React33.useMemo(() => ({ value, toggle }), [value, toggle]);
     return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
       "div",
       {
@@ -1329,7 +2480,7 @@ var CheckboxGroupBase = React29.forwardRef(
   }
 );
 var CheckboxGroup2 = CheckboxGroupBase;
-var SIZE_CLASSES5 = {
+var SIZE_CLASSES6 = {
   sm: {
     root: "gap-1.5",
     control: "h-3.5 w-3.5 rounded-sm",
@@ -1369,8 +2520,8 @@ var IndeterminateIcon = ({ className }) => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("path", { d: "M0 0H12V2H0V0Z", fill: "currentColor" })
   }
 );
-var CheckboxBase = React29.forwardRef(
-  function Checkbox(props, ref) {
+var CheckboxBase = React33.forwardRef(
+  function Checkbox$1(props, ref) {
     const {
       icon,
       children,
@@ -1390,8 +2541,8 @@ var CheckboxBase = React29.forwardRef(
       ...rest
     } = props;
     const group = useCheckboxGroupContext();
-    const hiddenInputRef = React29.useRef(null);
-    const setHiddenInputRef = React29.useCallback(
+    const hiddenInputRef = React33.useRef(null);
+    const setHiddenInputRef = React33.useCallback(
       (node) => {
         hiddenInputRef.current = node;
         if (typeof ref === "function") {
@@ -1404,7 +2555,7 @@ var CheckboxBase = React29.forwardRef(
     );
     const isInGroup = group !== null && value !== void 0;
     const groupChecked = isInGroup ? group.value.includes(value) : void 0;
-    const [internalChecked, setInternalChecked] = React29.useState(
+    const [internalChecked, setInternalChecked] = React33.useState(
       defaultChecked ?? false
     );
     const isControlled = checkedProp !== void 0 || isInGroup;
@@ -1416,7 +2567,7 @@ var CheckboxBase = React29.forwardRef(
     } else {
       checkedState = internalChecked;
     }
-    const handleCheckedChange = React29.useCallback(
+    const handleCheckedChange = React33.useCallback(
       (nextChecked) => {
         if (readOnly) return;
         if (!isControlled) {
@@ -1439,7 +2590,7 @@ var CheckboxBase = React29.forwardRef(
       },
       [readOnly, isControlled, isInGroup, group, value, onCheckedChange, onChange]
     );
-    const sizeClasses2 = SIZE_CLASSES5[size];
+    const sizeClasses2 = SIZE_CLASSES6[size];
     return /* @__PURE__ */ jsxs(
       "label",
       {
@@ -1457,8 +2608,9 @@ var CheckboxBase = React29.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsx(
-            RadixCheckbox.Root,
+            Checkbox,
             {
+              unstyled: true,
               checked: checkedState,
               onCheckedChange: handleCheckedChange,
               disabled: disabled || readOnly,
@@ -1476,7 +2628,7 @@ var CheckboxBase = React29.forwardRef(
                 "transition-colors duration-150",
                 sizeClasses2.control
               ),
-              children: icon ?? /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: cn("flex items-center justify-center", sizeClasses2.icon), children: checkedState === "indeterminate" ? /* @__PURE__ */ jsx(IndeterminateIcon, { className: sizeClasses2.icon }) : /* @__PURE__ */ jsx(CheckIcon, { className: sizeClasses2.icon }) })
+              children: icon ?? /* @__PURE__ */ jsx(Checkbox.Indicator, { className: cn("flex items-center justify-center", sizeClasses2.icon), children: checkedState === "indeterminate" ? /* @__PURE__ */ jsx(IndeterminateIcon, { className: sizeClasses2.icon }) : /* @__PURE__ */ jsx(CheckIcon, { className: sizeClasses2.icon }) })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -1580,7 +2732,7 @@ function resolveSpacing(v) {
   }
   return void 0;
 }
-var Link = React29__default.forwardRef(
+var Link = React33__default.forwardRef(
   function Link2(props, ref) {
     const {
       external,
@@ -1669,7 +2821,7 @@ var Link = React29__default.forwardRef(
     ) });
   }
 );
-var LinkBox = React29__default.forwardRef(
+var LinkBox = React33__default.forwardRef(
   function LinkBox2(props, ref) {
     const { className, ...rest } = props;
     return /* @__PURE__ */ jsx(
@@ -1682,7 +2834,7 @@ var LinkBox = React29__default.forwardRef(
     );
   }
 );
-var LinkOverlay = React29__default.forwardRef(
+var LinkOverlay = React33__default.forwardRef(
   function LinkOverlay2(props, ref) {
     const {
       children,
@@ -1763,8 +2915,8 @@ var LinkOverlay = React29__default.forwardRef(
   }
 );
 function useUpdateEffect(effect, deps) {
-  const isFirstMount = React29__default.useRef(true);
-  React29__default.useEffect(() => {
+  const isFirstMount = React33__default.useRef(true);
+  React33__default.useEffect(() => {
     if (isFirstMount.current) {
       isFirstMount.current = false;
       return;
@@ -1781,8 +2933,8 @@ function scrollToElement(id) {
 var CUT_ID = "CollapsibleDetails";
 var CollapsibleDetails = (props) => {
   const { children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false, text: textProp, loading, noScroll, ...rest } = props;
-  const [isExpanded, setIsExpanded] = React29__default.useState(isExpandedProp);
-  const handleClick = React29__default.useCallback((event) => {
+  const [isExpanded, setIsExpanded] = React33__default.useState(isExpandedProp);
+  const handleClick = React33__default.useCallback((event) => {
     setIsExpanded((flag) => !flag);
     if (!noScroll) {
       scrollToElement(id);
@@ -1813,11 +2965,11 @@ var CollapsibleDetails = (props) => {
 var CollapsibleList = (props) => {
   const CUT_LENGTH = 3;
   const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, text: textProp, defaultExpanded = false, className, ...rest } = props;
-  const [isExpanded, setIsExpanded] = React29__default.useState(defaultExpanded);
-  React29__default.useEffect(() => {
+  const [isExpanded, setIsExpanded] = React33__default.useState(defaultExpanded);
+  React33__default.useEffect(() => {
     setIsExpanded(defaultExpanded);
   }, [defaultExpanded]);
-  const handleToggle = React29__default.useCallback(() => {
+  const handleToggle = React33__default.useCallback(() => {
     setIsExpanded((flag) => !flag);
   }, []);
   const text = isExpanded ? textProp?.[1] ?? "Hide" : textProp?.[0] ?? "Show all";
@@ -1834,10 +2986,10 @@ var CollapsibleList = (props) => {
     ) })
   ] }) });
 };
-var ColorModeContext = React29.createContext(void 0);
+var ColorModeContext = React33.createContext(void 0);
 function ColorModeProvider(props) {
   const { children, defaultTheme = "light", value: controlledValue, onValueChange } = props;
-  const [internalMode, setInternalMode] = React29.useState(() => {
+  const [internalMode, setInternalMode] = React33.useState(() => {
     if (controlledValue === "dark" || controlledValue === "light") {
       return controlledValue;
     }
@@ -1847,7 +2999,7 @@ function ColorModeProvider(props) {
     return defaultTheme === "dark" ? "dark" : "light";
   });
   const colorMode = controlledValue === "dark" || controlledValue === "light" ? controlledValue : internalMode;
-  const setColorMode = React29.useCallback((mode) => {
+  const setColorMode = React33.useCallback((mode) => {
     const resolved = mode === "dark" ? "dark" : "light";
     setInternalMode(resolved);
     onValueChange?.(resolved);
@@ -1856,19 +3008,19 @@ function ColorModeProvider(props) {
       document.documentElement.classList.toggle("light", resolved === "light");
     }
   }, [onValueChange]);
-  const toggleColorMode = React29.useCallback(() => {
+  const toggleColorMode = React33.useCallback(() => {
     setColorMode(colorMode === "dark" ? "light" : "dark");
   }, [colorMode, setColorMode]);
-  const ctx = React29.useMemo(
+  const ctx = React33.useMemo(
     () => ({ colorMode, setColorMode, toggleColorMode }),
     [colorMode, setColorMode, toggleColorMode]
   );
   return /* @__PURE__ */ jsx(ColorModeContext.Provider, { value: ctx, children });
 }
 function useColorMode() {
-  const ctx = React29.useContext(ColorModeContext);
+  const ctx = React33.useContext(ColorModeContext);
   if (!ctx) {
-    const [mode, setMode] = React29.useState(() => {
+    const [mode, setMode] = React33.useState(() => {
       if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
         return "dark";
       }
@@ -1912,9 +3064,9 @@ function BackToButton({ onClick }) {
     }
   );
 }
-var DialogSizeContext = React29.createContext({ size: "md" });
+var DialogSizeContext = React33.createContext({ size: "md" });
 function useDialogSizeContext() {
-  return React29.useContext(DialogSizeContext);
+  return React33.useContext(DialogSizeContext);
 }
 var CONTENT_SIZE_MAP = {
   sm: "max-w-[400px]",
@@ -1946,13 +3098,13 @@ var DialogRoot = ({
   modal = true
   // motionPreset is intentionally unused -- kept for API compat
 }) => {
-  const handleOpenChange = React29.useCallback(
+  const handleOpenChange = React33.useCallback(
     (nextOpen) => {
       onOpenChange?.({ open: nextOpen });
     },
     [onOpenChange]
   );
-  const ctx = React29.useMemo(() => ({ size }), [size]);
+  const ctx = React33.useMemo(() => ({ size }), [size]);
   return /* @__PURE__ */ jsx(DialogSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
     Dialog,
     {
@@ -1964,7 +3116,7 @@ var DialogRoot = ({
     }
   ) });
 };
-var DialogContent = React29.forwardRef(function DialogContent2(props, ref) {
+var DialogContent = React33.forwardRef(function DialogContent2(props, ref) {
   const {
     children,
     portalled: _portalled = true,
@@ -2021,11 +3173,11 @@ var DialogContent = React29.forwardRef(function DialogContent2(props, ref) {
     )
   ] });
 });
-var DialogCloseTrigger = React29.forwardRef(function DialogCloseTrigger2(props, ref) {
+var DialogCloseTrigger = React33.forwardRef(function DialogCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
 });
-var DialogHeader = React29.forwardRef(function DialogHeader2(props, ref) {
+var DialogHeader = React33.forwardRef(function DialogHeader2(props, ref) {
   const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
   const startElement = startElementProp ?? (onBackToClick ? /* @__PURE__ */ jsx(BackToButton, { onClick: onBackToClick }) : void 0);
   return /* @__PURE__ */ jsxs(
@@ -2055,7 +3207,7 @@ var DialogHeader = React29.forwardRef(function DialogHeader2(props, ref) {
     }
   );
 });
-var DialogBody = React29.forwardRef(function DialogBody2({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
+var DialogBody = React33.forwardRef(function DialogBody2({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
   const bodyStyle = {
     ...styleProp,
     ...pt !== void 0 ? { paddingTop: typeof pt === "number" ? `${pt * 4}px` : pt } : {},
@@ -2072,7 +3224,7 @@ var DialogBody = React29.forwardRef(function DialogBody2({ className, pt, displa
     }
   );
 });
-var DialogFooter = React29.forwardRef(function DialogFooter2({ className, ...props }, ref) {
+var DialogFooter = React33.forwardRef(function DialogFooter2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -2087,135 +3239,12 @@ var DialogTitle = Dialog.Title;
 var DialogDescription = Dialog.Description;
 var DialogTrigger = Dialog.Trigger;
 var DialogActionTrigger = Dialog.Close;
-var DrawerPlacementContext = React29.createContext("right");
-var DrawerSizeContext = React29.createContext("md");
-var DrawerRoot = (props) => {
-  const {
-    children,
-    open,
-    defaultOpen,
-    onOpenChange,
-    placement = "right",
-    modal = true,
-    size = "md"
-  } = props;
-  const handleOpenChange = React29.useCallback((nextOpen) => {
-    onOpenChange?.({ open: nextOpen });
-  }, [onOpenChange]);
-  return /* @__PURE__ */ jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
-    RadixDialog.Root,
-    {
-      open,
-      defaultOpen,
-      onOpenChange: handleOpenChange,
-      modal,
-      children
-    }
-  ) }) });
-};
-var PLACEMENT_CLASSES = {
-  right: [
-    "inset-y-0 right-0",
-    "data-[state=open]:animate-in data-[state=open]:slide-in-from-right",
-    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right"
-  ].join(" "),
-  left: [
-    "inset-y-0 left-0",
-    "data-[state=open]:animate-in data-[state=open]:slide-in-from-left",
-    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left"
-  ].join(" "),
-  top: [
-    "inset-x-0 top-0",
-    "data-[state=open]:animate-in data-[state=open]:slide-in-from-top",
-    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top"
-  ].join(" "),
-  bottom: [
-    "inset-x-0 bottom-0",
-    "data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom",
-    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom"
-  ].join(" ")
-};
-var SIZE_CLASSES6 = {
-  right: { xs: "w-60", sm: "w-80", md: "w-96", lg: "w-[480px]", xl: "w-[640px]", full: "w-screen" },
-  left: { xs: "w-60", sm: "w-80", md: "w-96", lg: "w-[480px]", xl: "w-[640px]", full: "w-screen" },
-  top: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" },
-  bottom: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" }
-};
-var DrawerContent = React29.forwardRef(
-  function DrawerContent2(props, ref) {
-    const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
-    const placement = React29.useContext(DrawerPlacementContext);
-    const size = React29.useContext(DrawerSizeContext);
-    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      backdrop && /* @__PURE__ */ jsx(
-        RadixDialog.Overlay,
-        {
-          className: cn(
-            "fixed inset-0 z-50 bg-black/50",
-            "data-[state=open]:animate-in data-[state=open]:fade-in-0",
-            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        RadixDialog.Content,
-        {
-          ref,
-          className: cn(
-            "fixed z-50 flex flex-col bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)] duration-300",
-            PLACEMENT_CLASSES[placement] ?? PLACEMENT_CLASSES.right,
-            SIZE_CLASSES6[placement]?.[size] ?? SIZE_CLASSES6.right?.md,
-            className
-          ),
-          ...rest,
-          children
-        }
-      )
-    ] });
-    if (portalled) {
-      return /* @__PURE__ */ jsx(RadixDialog.Portal, { container: portalRef?.current ?? void 0, children: content });
-    }
-    return content;
-  }
-);
-var DrawerCloseTrigger = React29.forwardRef(function DrawerCloseTrigger2(props, ref) {
-  return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
-    CloseButton,
-    {
-      ref,
-      className: cn("absolute top-7 right-5", props.className),
-      ...props
-    }
-  ) });
-});
-var DrawerTrigger = (props) => {
-  const { asChild = true, ...rest } = props;
-  return /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild, ...rest });
-};
-var DrawerHeader = React29.forwardRef(
-  function DrawerHeader2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5 p-6 pb-0", className), ...props });
-  }
-);
-var DrawerBody = React29.forwardRef(
-  function DrawerBody2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 overflow-auto p-6", className), ...props });
-  }
-);
-var DrawerFooter = React29.forwardRef(
-  function DrawerFooter2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-6 pt-0", className), ...props });
-  }
-);
-var DrawerTitle = RadixDialog.Title;
-var DrawerDescription = RadixDialog.Description;
-var DrawerActionTrigger = RadixDialog.Close;
 var apos = "\u2019";
 function upperFirst(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 var ICONS = {};
-var EmptyState = React29.forwardRef(
+var EmptyState = React33.forwardRef(
   function EmptyState2(props, ref) {
     const { title, description, term, type = "query", icon, children, className, ...rest } = props;
     const titleContent = (() => {
@@ -2275,7 +3304,7 @@ function getComponentDisplayName(type) {
   if ("displayName" in type) return type.displayName;
   return void 0;
 }
-var Field = React29.forwardRef(
+var Field = React33.forwardRef(
   function Field2(props, ref) {
     const {
       label,
@@ -2327,14 +3356,14 @@ var Field = React29.forwardRef(
         }
       );
       const helperTextElement = helperText ? /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }) : null;
-      const child2 = React29.Children.only(children);
+      const child2 = React33.Children.only(children);
       const isInputGroup = getComponentDisplayName(child2.type) === "InputGroup";
       if (isInputGroup) {
-        const inputElement2 = React29.cloneElement(
-          React29.Children.only(child2.props.children),
+        const inputElement2 = React33.cloneElement(
+          React33.Children.only(child2.props.children),
           injectedProps2
         );
-        const groupInputElement = React29.cloneElement(
+        const groupInputElement = React33.cloneElement(
           child2,
           {},
           inputElement2,
@@ -2357,7 +3386,7 @@ var Field = React29.forwardRef(
           }
         );
       }
-      const inputElement = React29.cloneElement(child2, injectedProps2);
+      const inputElement = React33.cloneElement(child2, injectedProps2);
       return /* @__PURE__ */ jsxs(
         "div",
         {
@@ -2379,8 +3408,8 @@ var Field = React29.forwardRef(
     const injectedProps = {
       size
     };
-    const child = React29.Children.only(children);
-    const clonedChild = React29.cloneElement(child, injectedProps);
+    const child = React33.Children.only(children);
+    const clonedChild = React33.cloneElement(child, injectedProps);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -2416,22 +3445,23 @@ var Field = React29.forwardRef(
     );
   }
 );
-var LEVEL_TAG = { "1": "h1", "2": "h2", "3": "h3" };
+var LEVEL_TAG = { "1": H1, "2": H2, "3": H3 };
 var LEVEL_CLASSES = {
   "1": "text-[18px] leading-[24px] font-medium lg:text-[32px] lg:leading-[40px] lg:tracking-[-0.5px]",
   "2": "text-[16px] leading-[24px] font-medium lg:text-[24px] lg:leading-[32px]",
   "3": "text-[14px] leading-[20px] font-semibold lg:text-[18px] lg:leading-[24px] lg:font-medium"
 };
 var BASE_CLASSES4 = "font-heading text-heading";
-var Heading = React29__default.forwardRef(
+var Heading = React33__default.forwardRef(
   function Heading2({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
-    const Tag3 = level ? LEVEL_TAG[level] : "h2";
+    const Tag3 = level ? LEVEL_TAG[level] : H2;
     const levelClasses = level ? LEVEL_CLASSES[level] : void 0;
     const mergedStyle = mb !== void 0 ? { ...styleProp, marginBottom: typeof mb === "number" ? `${mb * 4}px` : mb } : styleProp;
     return /* @__PURE__ */ jsx(
       Tag3,
       {
         ref,
+        unstyled: true,
         className: cn(BASE_CLASSES4, levelClasses, className),
         style: mergedStyle,
         ...rest
@@ -2509,7 +3539,7 @@ var ICON_SIZE_CLASSES = {
   md: "[&_svg]:size-5"
 };
 var SP2 = 4;
-var IconButton = React29.forwardRef(
+var IconButton = React33.forwardRef(
   function IconButton2(props, ref) {
     const {
       size,
@@ -2560,7 +3590,7 @@ var IconButton = React29.forwardRef(
         ref,
         size,
         disabled: !loadingSkeleton && (loading || disabled) || void 0,
-        render: _as ? React29.createElement(_as) : void 0,
+        render: _as ? React33.createElement(_as) : void 0,
         className: combinedClassName,
         style: mergedStyle,
         ...expanded ? { "data-expanded": true } : {},
@@ -2731,31 +3761,31 @@ function extractStyleProps(props) {
   }
   return { styleProps, rest };
 }
-var Image2 = React29__default.forwardRef(
-  function Image3(props, ref) {
+var Image = React33__default.forwardRef(
+  function Image2(props, ref) {
     const { fallback, src, onLoad, onError, skeletonWidth, skeletonHeight, alt, className, style: styleProp, ...allRest } = props;
     const { styleProps, rest: extraProps } = extractStyleProps(allRest);
-    const [loading, setLoading] = React29__default.useState(true);
-    const [error, setError] = React29__default.useState(false);
-    const handleLoadError = React29__default.useCallback((event) => {
+    const [loading, setLoading] = React33__default.useState(true);
+    const [error, setError] = React33__default.useState(false);
+    const handleLoadError = React33__default.useCallback((event) => {
       setError(true);
       setLoading(false);
       onError?.(event);
     }, [onError]);
-    const handleLoadSuccess = React29__default.useCallback((event) => {
+    const handleLoadSuccess = React33__default.useCallback((event) => {
       setLoading(false);
       onLoad?.(event);
     }, [onLoad]);
     const passthroughProps = allRest;
     if (!src && fallback) {
-      if (React29__default.isValidElement(fallback)) {
-        return React29__default.cloneElement(fallback, passthroughProps);
+      if (React33__default.isValidElement(fallback)) {
+        return React33__default.cloneElement(fallback, passthroughProps);
       }
       return fallback;
     }
     if (error) {
-      if (React29__default.isValidElement(fallback)) {
-        return React29__default.cloneElement(fallback, passthroughProps);
+      if (React33__default.isValidElement(fallback)) {
+        return React33__default.cloneElement(fallback, passthroughProps);
       }
       return fallback;
     }
@@ -2811,14 +3841,23 @@ var INPUT_VARIANT_CLASSES = {
   filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
   unstyled: "border-0 bg-transparent p-0 h-auto"
 };
-var Input = React29__default.forwardRef(
-  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
+var Input = React33__default.forwardRef(
+  ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React33__default.useCallback(
+      (event) => {
+        onChange?.(event);
+        onChangeText?.(event.target.value);
+      },
+      [onChange, onChangeText]
+    );
     return /* @__PURE__ */ jsx(
-      "input",
+      Input$1,
       {
         ref,
+        unstyled: true,
         className: cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className),
-        ...rest
+        ...rest,
+        onChange: handleChange
       }
     );
   }
@@ -2829,7 +3868,7 @@ function getComponentDisplayName2(type) {
   if ("displayName" in type) return type.displayName;
   return void 0;
 }
-var InputGroup = React29.forwardRef(
+var InputGroup = React33.forwardRef(
   function InputGroup2(props, ref) {
     const {
       startElement,
@@ -2842,11 +3881,11 @@ var InputGroup = React29.forwardRef(
       className,
       ...rest
     } = props;
-    const startElementRef = React29.useRef(null);
-    const endElementRef = React29.useRef(null);
-    const groupRef = React29.useRef(null);
-    const [inlinePaddings, setInlinePaddings] = React29.useState();
-    const calculateInlinePaddings = React29.useCallback(() => {
+    const startElementRef = React33.useRef(null);
+    const endElementRef = React33.useRef(null);
+    const groupRef = React33.useRef(null);
+    const [inlinePaddings, setInlinePaddings] = React33.useState();
+    const calculateInlinePaddings = React33.useCallback(() => {
       const startWidth = startElementRef.current?.getBoundingClientRect().width ?? 0;
       const endWidth = endElementRef.current?.getBoundingClientRect().width ?? 0;
       setInlinePaddings({
@@ -2854,7 +3893,7 @@ var InputGroup = React29.forwardRef(
         end: endWidth
       });
     }, []);
-    React29.useEffect(() => {
+    React33.useEffect(() => {
       if (!groupRef.current) return;
       let timeoutId;
       const intersectionObserver = new IntersectionObserver(
@@ -2874,7 +3913,7 @@ var InputGroup = React29.forwardRef(
         }
       };
     }, [calculateInlinePaddings]);
-    React29.useEffect(() => {
+    React33.useEffect(() => {
       calculateInlinePaddings();
       const resizeHandler = debounce(calculateInlinePaddings, 300);
       const resizeObserver = new ResizeObserver(resizeHandler);
@@ -2885,7 +3924,7 @@ var InputGroup = React29.forwardRef(
         resizeObserver.disconnect();
       };
     }, [calculateInlinePaddings]);
-    const combinedRef = React29.useCallback((node) => {
+    const combinedRef = React33.useCallback((node) => {
       groupRef.current = node;
       if (typeof ref === "function") {
         ref(node);
@@ -2914,11 +3953,11 @@ var InputGroup = React29.forwardRef(
               children: startElement
             }
           ),
-          React29.Children.map(children, (child) => {
+          React33.Children.map(children, (child) => {
             if (getComponentDisplayName2(child.type) !== "FieldInput") {
               return child;
             }
-            return React29.cloneElement(child, {
+            return React33.cloneElement(child, {
               ...startElement && { ps: startOffset ?? (inlinePaddings?.start ? `${inlinePaddings.start}px` : void 0) },
               ...endElement && { pe: endOffset ?? (inlinePaddings?.end ? `${inlinePaddings.end}px` : void 0) },
               // hide input value and placeholder for the first render
@@ -2944,262 +3983,6 @@ var InputGroup = React29.forwardRef(
   }
 );
 InputGroup.displayName = "InputGroup";
-function parsePlacement(placement) {
-  if (!placement) {
-    return { side: "bottom", align: "start" };
-  }
-  const parts = placement.split("-");
-  const side = parts[0] ?? "bottom";
-  const alignPart = parts[1];
-  let align = "center";
-  if (alignPart === "start") {
-    align = "start";
-  } else if (alignPart === "end") {
-    align = "end";
-  }
-  return { side, align };
-}
-var PositioningContext = React29.createContext({
-  side: "bottom",
-  align: "start",
-  sideOffset: 4,
-  alignOffset: 0
-});
-var MenuRoot = (props) => {
-  const {
-    children,
-    open,
-    defaultOpen,
-    onOpenChange,
-    positioning,
-    modal = true,
-    // lazyMount / unmountOnExit have no direct Radix equivalent; Radix handles
-    // mount/unmount automatically.
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    lazyMount: _lazyMount,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    unmountOnExit: _unmountOnExit
-  } = props;
-  const mergedPositioning = {
-    placement: "bottom-start",
-    ...positioning,
-    offset: {
-      mainAxis: 4,
-      ...positioning?.offset
-    }
-  };
-  const { side, align } = parsePlacement(mergedPositioning.placement);
-  const positioningValue = React29.useMemo(() => ({
-    side,
-    align,
-    sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
-    alignOffset: mergedPositioning.offset?.crossAxis ?? 0
-  }), [side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis]);
-  const handleOpenChange = React29.useCallback((isOpen) => {
-    onOpenChange?.({ open: isOpen });
-  }, [onOpenChange]);
-  return /* @__PURE__ */ jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsx(
-    DropdownMenu.Root,
-    {
-      open,
-      defaultOpen,
-      onOpenChange: handleOpenChange,
-      modal,
-      children
-    }
-  ) });
-};
-var MenuTrigger = React29.forwardRef(function MenuTrigger2(props, ref) {
-  const { asChild = false, ...rest } = props;
-  return /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild, ref, ...rest });
-});
-var MenuContent = React29.forwardRef(function MenuContent2(props, ref) {
-  const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
-  const positioning = React29.useContext(PositioningContext);
-  const mergedStyle = {
-    ...style,
-    ...zIndex !== void 0 ? { zIndex: typeof zIndex === "string" ? `var(--z-index-${zIndex}, ${zIndex})` : zIndex } : {},
-    ...minW !== void 0 ? { minWidth: minW } : {}
-  };
-  const content = /* @__PURE__ */ jsx(
-    DropdownMenu.Content,
-    {
-      ref,
-      side: positioning.side,
-      align: positioning.align,
-      sideOffset: positioning.sideOffset,
-      alignOffset: positioning.alignOffset,
-      className: cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-lg p-1",
-        "border border-[var(--color-popover-border,var(--color-border-divider))]",
-        "bg-[var(--color-popover-bg,var(--color-dialog-bg))]",
-        "shadow-[0_4px_12px_var(--color-popover-shadow)]",
-        "outline-none",
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      ),
-      style: Object.keys(mergedStyle).length > 0 ? mergedStyle : void 0,
-      ...rest
-    }
-  );
-  if (!portalled) {
-    return content;
-  }
-  return /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalRef?.current ?? void 0, children: content });
-});
-var MenuItem = React29.forwardRef(function MenuItem2(props, ref) {
-  const { className, value: _value, asChild, closeOnSelect: _closeOnSelect, disabled, children, onClick, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    DropdownMenu.Item,
-    {
-      ref,
-      asChild,
-      disabled,
-      onClick,
-      className: cn(
-        "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm",
-        "outline-none transition-colors",
-        "text-[var(--color-text-primary,inherit)]",
-        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
-        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className
-      ),
-      ...rest,
-      children
-    }
-  );
-});
-var MenuItemText = React29.forwardRef(function MenuItemText2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx("span", { ref, className: cn("flex-1", className), ...rest });
-});
-React29.forwardRef(function MenuItemCommand2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ref,
-      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
-      ...rest
-    }
-  );
-});
-var MenuSeparator = React29.forwardRef(function MenuSeparator2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    DropdownMenu.Separator,
-    {
-      ref,
-      className: cn("-mx-1 my-1 h-px bg-[var(--color-border-divider)]", className),
-      ...rest
-    }
-  );
-});
-var MenuItemGroup = React29.forwardRef(function MenuItemGroup2(props, ref) {
-  const { title, children, className, ...rest } = props;
-  return /* @__PURE__ */ jsxs(DropdownMenu.Group, { ref, className, ...rest, children: [
-    title && /* @__PURE__ */ jsx(DropdownMenu.Label, { className: "px-2 py-1.5 text-xs font-semibold select-none opacity-60", children: title }),
-    children
-  ] });
-});
-var MenuArrow = React29.forwardRef(function MenuArrow2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    DropdownMenu.Arrow,
-    {
-      ref,
-      className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
-      ...rest
-    }
-  );
-});
-var MenuCheckboxItem = React29.forwardRef(function MenuCheckboxItem2(props, ref) {
-  const { className, children, checked, onCheckedChange, onClick, ...rest } = props;
-  return /* @__PURE__ */ jsxs(
-    DropdownMenu.CheckboxItem,
-    {
-      ref,
-      checked,
-      onCheckedChange,
-      onClick,
-      className: cn(
-        "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
-        "outline-none transition-colors",
-        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
-        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className
-      ),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(LuCheck, { className: "h-4 w-4" }) }) }),
-        children
-      ]
-    }
-  );
-});
-var MenuRadioItemGroup = React29.forwardRef(function MenuRadioItemGroup2(props, ref) {
-  const { value, onValueChange, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    DropdownMenu.RadioGroup,
-    {
-      ref,
-      value,
-      onValueChange,
-      ...rest
-    }
-  );
-});
-var MenuRadioItem = React29.forwardRef(function MenuRadioItem2(props, ref) {
-  const { className, children, value, onClick, ...rest } = props;
-  const { value: _v, ...radixRest } = rest;
-  return /* @__PURE__ */ jsxs(
-    DropdownMenu.RadioItem,
-    {
-      ref,
-      value,
-      onClick,
-      className: cn(
-        "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
-        "outline-none transition-colors",
-        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
-        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(LuCheck, { className: "h-4 w-4" }) }) }),
-        /* @__PURE__ */ jsx("span", { children })
-      ]
-    }
-  );
-});
-React29.forwardRef(function MenuContextTrigger2(props, ref) {
-  const { asChild: _asChild, ...rest } = props;
-  return /* @__PURE__ */ jsx("span", { ref, ...rest });
-});
-var MenuTriggerItem = React29.forwardRef(function MenuTriggerItem2(props, ref) {
-  const { startIcon, children, className, ...rest } = props;
-  return /* @__PURE__ */ jsx(DropdownMenu.Sub, { children: /* @__PURE__ */ jsxs(
-    DropdownMenu.SubTrigger,
-    {
-      ref,
-      className: cn(
-        "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm",
-        "outline-none transition-colors",
-        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
-        className
-      ),
-      ...rest,
-      children: [
-        startIcon,
-        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
-        /* @__PURE__ */ jsx(LuChevronRight, { className: "h-4 w-4" })
-      ]
-    }
-  ) });
-});
 var INPUT_BASE2 = [
   "w-10 h-10",
   "text-center text-sm font-medium",
@@ -3214,7 +3997,7 @@ var INPUT_BASE2 = [
 ].join(" ");
 var INPUT_FILLED = "border-[var(--color-input-border)]";
 var INPUT_INVALID = "border-[var(--color-border-error)] hover:border-[var(--color-border-error)]";
-var PinInput = React29.forwardRef(
+var PinInput = React33.forwardRef(
   function PinInput2(props, ref) {
     const {
       count = 6,
@@ -3232,12 +4015,12 @@ var PinInput = React29.forwardRef(
       bgColor,
       className
     } = props;
-    const inputRefs = React29.useRef([]);
-    const values = React29.useMemo(
+    const inputRefs = React33.useRef([]);
+    const values = React33.useMemo(
       () => controlledValue ?? Array.from({ length: count }).fill(""),
       [controlledValue, count]
     );
-    const updateValue = React29.useCallback((index, char) => {
+    const updateValue = React33.useCallback((index, char) => {
       const next = [...values];
       next[index] = char;
       onValueChange?.({ value: next });
@@ -3245,11 +4028,11 @@ var PinInput = React29.forwardRef(
         onValueComplete?.({ value: next });
       }
     }, [values, onValueChange, onValueComplete]);
-    const focusInput = React29.useCallback((index) => {
+    const focusInput = React33.useCallback((index) => {
       const clamped = Math.max(0, Math.min(index, count - 1));
       inputRefs.current[clamped]?.focus();
     }, [count]);
-    const handleInput = React29.useCallback((index, e) => {
+    const handleInput = React33.useCallback((index, e) => {
       const target = e.currentTarget;
       const char = target.value.slice(-1);
       updateValue(index, char);
@@ -3257,7 +4040,7 @@ var PinInput = React29.forwardRef(
         focusInput(index + 1);
       }
     }, [count, updateValue, focusInput]);
-    const handleKeyDown = React29.useCallback((index, e) => {
+    const handleKeyDown = React33.useCallback((index, e) => {
       if (e.key === "Backspace") {
         if (values[index]) {
           updateValue(index, "");
@@ -3274,7 +4057,7 @@ var PinInput = React29.forwardRef(
         e.preventDefault();
       }
     }, [count, values, updateValue, focusInput]);
-    const handlePaste = React29.useCallback((e) => {
+    const handlePaste = React33.useCallback((e) => {
       e.preventDefault();
       const pasted = e.clipboardData.getData("text/plain").trim();
       if (!pasted) {
@@ -3291,18 +4074,18 @@ var PinInput = React29.forwardRef(
       }
       focusInput(Math.min(chars.length, count - 1));
     }, [count, values, onValueChange, onValueComplete, focusInput]);
-    const handleFocus = React29.useCallback((e) => {
+    const handleFocus = React33.useCallback((e) => {
       e.currentTarget.select();
     }, []);
-    const handleNoop = React29.useCallback(() => {
+    const handleNoop = React33.useCallback(() => {
     }, []);
-    const setInputRef = React29.useCallback((index) => (el) => {
+    const setInputRef = React33.useCallback((index) => (el) => {
       inputRefs.current[index] = el;
     }, []);
-    const onInputAtIndex = React29.useCallback((index) => (e) => {
+    const onInputAtIndex = React33.useCallback((index) => (e) => {
       handleInput(index, e);
     }, [handleInput]);
-    const onKeyDownAtIndex = React29.useCallback((index) => (e) => {
+    const onKeyDownAtIndex = React33.useCallback((index) => (e) => {
       handleKeyDown(index, e);
     }, [handleKeyDown]);
     const bgStyle = bgColor ? { backgroundColor: `var(--color-${bgColor.replace(/\./g, "-")})` } : void 0;
@@ -3363,7 +4146,7 @@ function parsePlacement2(placement) {
   }
   return { side, align };
 }
-var PositioningContext2 = React29.createContext({
+var PositioningContext2 = React33.createContext({
   side: "bottom",
   align: "start",
   sideOffset: 4,
@@ -3397,7 +4180,7 @@ var PopoverRoot = (props) => {
     }
   };
   const { side, align } = parsePlacement2(mergedPositioning.placement);
-  const positioningValue = React29.useMemo(() => ({
+  const positioningValue = React33.useMemo(() => ({
     side,
     align,
     sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
@@ -3414,7 +4197,7 @@ var PopoverRoot = (props) => {
     autoFocus,
     closeOnInteractOutside
   ]);
-  const handleOpenChange = React29.useCallback((isOpen) => {
+  const handleOpenChange = React33.useCallback((isOpen) => {
     onOpenChange?.({ open: isOpen });
   }, [onOpenChange]);
   const placement = mergedPositioning.placement ?? "bottom-start";
@@ -3432,11 +4215,11 @@ var PopoverRoot = (props) => {
     }
   ) });
 };
-var PopoverTrigger = React29.forwardRef(function PopoverTrigger2(props, ref) {
+var PopoverTrigger = React33.forwardRef(function PopoverTrigger2(props, ref) {
   const { asChild = true, ...rest } = props;
   return /* @__PURE__ */ jsx(Popover.Trigger, { asChild: asChild ? "except-style" : void 0, ref, ...rest });
 });
-var PopoverContent = React29.forwardRef(function PopoverContent2(props, ref) {
+var PopoverContent = React33.forwardRef(function PopoverContent2(props, ref) {
   const { portalled = true, portalRef: _portalRef, className, w, minW, maxW, paddingTop, style: styleProp, ...rest } = props;
   const resolvedW = typeof w === "object" ? w.base ?? w.lg : w;
   const contentStyle = {
@@ -3467,7 +4250,7 @@ var PopoverContent = React29.forwardRef(function PopoverContent2(props, ref) {
     }
   );
 });
-var PopoverArrow = React29.forwardRef(function PopoverArrow2(props, ref) {
+var PopoverArrow = React33.forwardRef(function PopoverArrow2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
     Popover.Arrow,
@@ -3479,7 +4262,7 @@ var PopoverArrow = React29.forwardRef(function PopoverArrow2(props, ref) {
     }
   );
 });
-var PopoverCloseTrigger = React29.forwardRef(function PopoverCloseTrigger2(props, ref) {
+var PopoverCloseTrigger = React33.forwardRef(function PopoverCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
     Popover.Close,
@@ -3493,14 +4276,14 @@ var PopoverCloseTrigger = React29.forwardRef(function PopoverCloseTrigger2(props
     }
   );
 });
-var PopoverCloseTriggerWrapper = React29.forwardRef(function PopoverCloseTriggerWrapper2(props, ref) {
+var PopoverCloseTriggerWrapper = React33.forwardRef(function PopoverCloseTriggerWrapper2(props, ref) {
   const { disabled, children, ...rest } = props;
   if (disabled) {
     return children;
   }
   return /* @__PURE__ */ jsx(Popover.Close, { ref, ...rest, asChild: true, children });
 });
-var PopoverBody = React29.forwardRef(function PopoverBody2(props, ref) {
+var PopoverBody = React33.forwardRef(function PopoverBody2(props, ref) {
   const {
     className,
     style: styleProp,
@@ -3538,7 +4321,7 @@ var PopoverBody = React29.forwardRef(function PopoverBody2(props, ref) {
     }
   );
 });
-var PopoverHeader = React29.forwardRef(function PopoverHeader2(props, ref) {
+var PopoverHeader = React33.forwardRef(function PopoverHeader2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "div",
@@ -3549,7 +4332,7 @@ var PopoverHeader = React29.forwardRef(function PopoverHeader2(props, ref) {
     }
   );
 });
-var PopoverFooter = React29.forwardRef(function PopoverFooter2(props, ref) {
+var PopoverFooter = React33.forwardRef(function PopoverFooter2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "div",
@@ -3560,7 +4343,7 @@ var PopoverFooter = React29.forwardRef(function PopoverFooter2(props, ref) {
     }
   );
 });
-var PopoverTitle = React29.forwardRef(function PopoverTitle2(props, ref) {
+var PopoverTitle = React33.forwardRef(function PopoverTitle2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "h3",
@@ -3571,7 +4354,7 @@ var PopoverTitle = React29.forwardRef(function PopoverTitle2(props, ref) {
     }
   );
 });
-var PopoverDescription = React29.forwardRef(function PopoverDescription2(props, ref) {
+var PopoverDescription = React33.forwardRef(function PopoverDescription2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "p",
@@ -3593,7 +4376,7 @@ function normalizeValue(value, min, max) {
   if (max <= min) return 0;
   return Math.round((value - min) / (max - min) * 100);
 }
-var Progress = React29.forwardRef(
+var Progress = React33.forwardRef(
   function Progress2(props, ref) {
     const {
       value,
@@ -3633,10 +4416,11 @@ var Progress = React29.forwardRef(
         style: rootStyle,
         ...rest,
         children: /* @__PURE__ */ jsx(
-          RadixProgress.Root,
+          Progress$1,
           {
             value: percent,
             max: 100,
+            unstyled: true,
             className: cn(
               "w-full overflow-hidden rounded-full",
               "bg-[var(--color-progress-track)]",
@@ -3645,14 +4429,15 @@ var Progress = React29.forwardRef(
             ),
             style: trackStyle,
             children: /* @__PURE__ */ jsx(
-              RadixProgress.Indicator,
+              Progress$1.Indicator,
               {
+                unstyled: true,
+                transition: "slow",
                 className: cn(
-                  "h-full rounded-full transition-transform duration-500 ease-out",
+                  "h-full rounded-full",
                   !color && "bg-[var(--color-progress-indicator)]"
                 ),
                 style: {
-                  width: `${percent}%`,
                   ...color && { backgroundColor: `var(--color-${color.replace(".", "-")}, ${color})` }
                 }
               }
@@ -3670,12 +4455,12 @@ var SIZE_MAP = {
   lg: { size: 48, thickness: 7, textClass: "text-sm" },
   xl: { size: 64, thickness: 8, textClass: "text-sm" }
 };
-var Ctx = React29.createContext({
+var Ctx = React33.createContext({
   value: 0,
   size: "md",
   colorPalette: "blue"
 });
-var ProgressCircleRoot = React29.forwardRef(function ProgressCircleRoot2(props, ref) {
+var ProgressCircleRoot = React33.forwardRef(function ProgressCircleRoot2(props, ref) {
   const {
     value = 0,
     size = "md",
@@ -3684,7 +4469,7 @@ var ProgressCircleRoot = React29.forwardRef(function ProgressCircleRoot2(props,
     children,
     ...rest
   } = props;
-  const ctx = React29.useMemo(
+  const ctx = React33.useMemo(
     () => ({ value: value ?? null, size, colorPalette }),
     [value, size, colorPalette]
   );
@@ -3702,9 +4487,9 @@ var ProgressCircleRoot = React29.forwardRef(function ProgressCircleRoot2(props,
     }
   ) });
 });
-var ProgressCircleRing = React29.forwardRef(function ProgressCircleRing2(props, ref) {
+var ProgressCircleRing = React33.forwardRef(function ProgressCircleRing2(props, ref) {
   const { trackColor, cap, color, className, ...rest } = props;
-  const { value, size: sizeKey } = React29.useContext(Ctx);
+  const { value, size: sizeKey } = React33.useContext(Ctx);
   const { size, thickness } = SIZE_MAP[sizeKey];
   const radius = size / 2 - thickness / 2;
   const circumference = 2 * Math.PI * radius;
@@ -3759,9 +4544,9 @@ var ProgressCircleRing = React29.forwardRef(function ProgressCircleRing2(props,
     }
   );
 });
-var ProgressCircleValueText = React29.forwardRef(function ProgressCircleValueText2(props, ref) {
+var ProgressCircleValueText = React33.forwardRef(function ProgressCircleValueText2(props, ref) {
   const { className, children, ...rest } = props;
-  const { value, size: sizeKey } = React29.useContext(Ctx);
+  const { value, size: sizeKey } = React33.useContext(Ctx);
   const { textClass } = SIZE_MAP[sizeKey];
   return /* @__PURE__ */ jsx(
     "div",
@@ -3805,8 +4590,8 @@ var SIZE_CLASSES8 = {
     label: "text-base"
   }
 };
-var RadioSizeContext = React29.createContext("md");
-var RadioGroupBase = React29.forwardRef(
+var RadioSizeContext = React33.createContext("md");
+var RadioGroupBase = React33.forwardRef(
   function RadioGroup2(props, ref) {
     const {
       children,
@@ -3815,7 +4600,8 @@ var RadioGroupBase = React29.forwardRef(
       disabled = false,
       readOnly = false,
       orientation = "vertical",
-      loop = true,
+      // `loop` was a Radix-only knob; gui's roving focus always wraps.
+      loop: _loop = true,
       defaultValue,
       value,
       onValueChange,
@@ -3823,7 +4609,7 @@ var RadioGroupBase = React29.forwardRef(
       className,
       ...rest
     } = props;
-    const handleValueChange = React29.useCallback(
+    const handleValueChange = React33.useCallback(
       (nextValue) => {
         if (readOnly) return;
         onValueChange?.({ value: nextValue });
@@ -3831,14 +4617,14 @@ var RadioGroupBase = React29.forwardRef(
       [readOnly, onValueChange]
     );
     return /* @__PURE__ */ jsx(RadioSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
-      RadixRadioGroup.Root,
+      RadioGroup,
       {
         ref,
+        unstyled: true,
         name,
         required,
         disabled: disabled || readOnly,
         orientation,
-        loop,
         defaultValue,
         value: value ?? void 0,
         onValueChange: handleValueChange,
@@ -3856,10 +4642,10 @@ var RadioGroupBase = React29.forwardRef(
 var RadioGroup3 = RadioGroupBase;
 var NOOP2 = () => {
 };
-var RadioBase = React29.forwardRef(
+var RadioBase = React33.forwardRef(
   function Radio(props, ref) {
     const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
-    const size = React29.useContext(RadioSizeContext);
+    const size = React33.useContext(RadioSizeContext);
     const sizeClasses2 = SIZE_CLASSES8[size];
     return /* @__PURE__ */ jsxs(
       "label",
@@ -3875,8 +4661,9 @@ var RadioBase = React29.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsx(
-            RadixRadioGroup.Item,
+            RadioGroup.Item,
             {
+              unstyled: true,
               value,
               disabled,
               className: cn(
@@ -3888,8 +4675,9 @@ var RadioBase = React29.forwardRef(
                 sizeClasses2.control
               ),
               children: /* @__PURE__ */ jsx(
-                RadixRadioGroup.Indicator,
+                RadioGroup.Indicator,
                 {
+                  unstyled: true,
                   className: cn(
                     "block rounded-full bg-gray-800 dark:bg-white",
                     sizeClasses2.indicator
@@ -3921,23 +4709,23 @@ var RadioBase = React29.forwardRef(
 var Radio2 = RadioBase;
 var StarFilledIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
 var StarOutlineIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z", strokeWidth: "1.5" }) });
-var Rating = React29.forwardRef(
+var Rating = React33.forwardRef(
   function Rating2(props, ref) {
     const { count = 5, label: labelProp, defaultValue = 0, onValueChange, readOnly, className, ...rest } = props;
-    const [value, setValue] = React29.useState(defaultValue);
-    const [hoveredIndex, setHoveredIndex] = React29.useState(-1);
+    const [value, setValue] = React33.useState(defaultValue);
+    const [hoveredIndex, setHoveredIndex] = React33.useState(-1);
     const highlightedIndex = hoveredIndex >= 0 && !readOnly ? hoveredIndex + 1 : value;
     const label = Array.isArray(labelProp) ? labelProp[highlightedIndex - 1] : labelProp;
-    const handleClick = React29.useCallback((index) => () => {
+    const handleClick = React33.useCallback((index) => () => {
       if (readOnly) return;
       setValue(index);
       onValueChange?.({ value: index });
     }, [readOnly, onValueChange]);
-    const handleMouseEnter = React29.useCallback((index) => () => {
+    const handleMouseEnter = React33.useCallback((index) => () => {
       if (readOnly) return;
       setHoveredIndex(index);
     }, [readOnly]);
-    const handleMouseLeave = React29.useCallback(() => {
+    const handleMouseLeave = React33.useCallback(() => {
       setHoveredIndex(-1);
     }, []);
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("inline-flex items-center gap-1", className), ...rest, children: [
@@ -3965,14 +4753,14 @@ var Rating = React29.forwardRef(
     ] });
   }
 );
-function createListCollection(config) {
-  return { items: config.items };
+function createListCollection(config2) {
+  return { items: config2.items };
 }
 var ArrowIcon2 = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var CheckIcon2 = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M16.667 5L7.5 14.167 3.333 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function FilterInput({ placeholder, initialValue = "", onChange }) {
-  const [value, setValue] = React29.useState(initialValue);
-  const handleChange = React29.useCallback((e) => {
+  const [value, setValue] = React33.useState(initialValue);
+  const handleChange = React33.useCallback((e) => {
     setValue(e.target.value);
     onChange?.(e.target.value);
   }, [onChange]);
@@ -3991,15 +4779,15 @@ function FilterInput({ placeholder, initialValue = "", onChange }) {
     }
   );
 }
-var SelectInternalContext = React29.createContext(null);
+var SelectInternalContext = React33.createContext(null);
 function useSelectInternalContext() {
-  const ctx = React29.useContext(SelectInternalContext);
+  const ctx = React33.useContext(SelectInternalContext);
   if (!ctx) {
     throw new Error("Select compound components must be rendered inside <SelectRoot>");
   }
   return ctx;
 }
-var SelectRoot = React29.forwardRef(
+var SelectRoot = React33.forwardRef(
   function SelectRoot2(props, ref) {
     const {
       children,
@@ -4030,21 +4818,21 @@ var SelectRoot = React29.forwardRef(
       hideFrom: _hideFrom
     } = props;
     const collection = collectionProp ?? createListCollection({ items: [] });
-    const [internalValue, setInternalValue] = React29.useState(defaultValueArr ?? []);
+    const [internalValue, setInternalValue] = React33.useState(defaultValueArr ?? []);
     const currentValue = valueProp ?? internalValue;
-    const selectedItems = React29.useMemo(() => {
+    const selectedItems = React33.useMemo(() => {
       return currentValue.map((v) => collection.items.find((item) => item.value === v)).filter(Boolean);
     }, [currentValue, collection.items]);
-    const [open, setOpen] = React29.useState(defaultOpen ?? false);
+    const [open, setOpen] = React33.useState(defaultOpen ?? false);
     const isOpen = openProp ?? open;
-    const handleOpenChange = React29.useCallback((nextOpen) => {
+    const handleOpenChange = React33.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.(nextOpen);
       if (!nextOpen) {
         onInteractOutside?.();
       }
     }, [onOpenChange, onInteractOutside]);
-    const handleRadixValueChange = React29.useCallback((radixValue) => {
+    const handleRadixValueChange = React33.useCallback((radixValue) => {
       const nextArr = [radixValue];
       if (!valueProp) {
         setInternalValue(nextArr);
@@ -4052,7 +4840,7 @@ var SelectRoot = React29.forwardRef(
       const items = collection.items.filter((item) => nextArr.includes(item.value));
       onValueChangeProp?.({ value: nextArr, items });
     }, [valueProp, collection.items, onValueChangeProp]);
-    const ctxValue = React29.useMemo(() => ({
+    const ctxValue = React33.useMemo(() => ({
       value: currentValue,
       selectedItems,
       collection,
@@ -4072,7 +4860,7 @@ var SelectRoot = React29.forwardRef(
       if (typeof v === "string") return v;
       return v.base ?? v.lg ?? Object.values(v)[0];
     };
-    const inlineStyle = React29.useMemo(() => {
+    const inlineStyle = React33.useMemo(() => {
       const s = { ...style };
       const rw = resolveVal(w);
       if (rw) s.width = rw;
@@ -4110,7 +4898,7 @@ var SelectRoot = React29.forwardRef(
     ) });
   }
 );
-var SelectControl = React29.forwardRef(
+var SelectControl = React33.forwardRef(
   function SelectControl2(props, ref) {
     const { children, noIndicator, triggerProps, loading, defaultValue } = props;
     const ctx = useSelectInternalContext();
@@ -4147,11 +4935,11 @@ var SelectControl = React29.forwardRef(
     return trigger;
   }
 );
-var SelectClearTrigger = React29.forwardRef(
+var SelectClearTrigger = React33.forwardRef(
   function SelectClearTrigger2(props, ref) {
     const { className, ...rest } = props;
     const ctx = useSelectInternalContext();
-    const handleClick = React29.useCallback(() => {
+    const handleClick = React33.useCallback(() => {
       ctx.onValueChange({ value: [], items: [] });
     }, [ctx]);
     return /* @__PURE__ */ jsx(
@@ -4168,7 +4956,7 @@ var SelectClearTrigger = React29.forwardRef(
     );
   }
 );
-var SelectContent = React29.forwardRef(
+var SelectContent = React33.forwardRef(
   function SelectContent2(props, ref) {
     const { portalled = true, portalRef, children, className, ...rest } = props;
     const content = /* @__PURE__ */ jsx(
@@ -4195,7 +4983,7 @@ var SelectContent = React29.forwardRef(
     return content;
   }
 );
-var SelectItem = React29.forwardRef(
+var SelectItem = React33.forwardRef(
   function SelectItem2(props, ref) {
     const { item, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxs(
@@ -4223,7 +5011,7 @@ var SelectItem = React29.forwardRef(
     );
   }
 );
-var SelectValueText = React29.forwardRef(
+var SelectValueText = React33.forwardRef(
   function SelectValueText2(props, ref) {
     const { children, size, required, invalid, errorText, mode, className, style, placeholder: placeholderProp, ...rest } = props;
     const ctx = useSelectInternalContext();
@@ -4279,7 +5067,7 @@ var SelectValueText = React29.forwardRef(
     );
   }
 );
-var SelectItemGroup = React29.forwardRef(
+var SelectItemGroup = React33.forwardRef(
   function SelectItemGroup2(props, ref) {
     const { children, label, className, ...rest } = props;
     return /* @__PURE__ */ jsxs(RadixSelect.Group, { ref, className: cn("py-1", className), ...rest, children: [
@@ -4290,7 +5078,7 @@ var SelectItemGroup = React29.forwardRef(
 );
 var SelectLabel = RadixSelect.Label;
 var SelectItemText = RadixSelect.ItemText;
-var Select = React29.forwardRef((props, ref) => {
+var Select = React33.forwardRef((props, ref) => {
   const { collection, placeholder, portalled = true, loading, errorText, contentProps, contentHeader, itemFilter, mode, ...rest } = props;
   return /* @__PURE__ */ jsxs(
     SelectRoot,
@@ -4312,7 +5100,7 @@ var Select = React29.forwardRef((props, ref) => {
         ) }),
         /* @__PURE__ */ jsxs(SelectContent, { portalled, ...contentProps, children: [
           contentHeader,
-          collection.items.filter(itemFilter ?? (() => true)).map((item) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
+          collection.items.filter(itemFilter ?? (() => true)).map((item) => /* @__PURE__ */ jsxs(React33.Fragment, { children: [
             /* @__PURE__ */ jsx(SelectItem, { item, children: item.renderLabel ? item.renderLabel("item") : item.label }),
             item.afterElement
           ] }, item.value))
@@ -4321,19 +5109,19 @@ var Select = React29.forwardRef((props, ref) => {
     }
   );
 });
-var SelectAsync = React29.forwardRef((props, ref) => {
+var SelectAsync = React33.forwardRef((props, ref) => {
   const { placeholder, portalled = true, loading, loadOptions, extraControls, onValueChange, errorText, mode, contentHeader, ...rest } = props;
-  const [collection, setCollection] = React29.useState(createListCollection({ items: [] }));
-  const [inputValue, setInputValue] = React29.useState("");
-  const [value, setValue] = React29.useState([]);
+  const [collection, setCollection] = React33.useState(createListCollection({ items: [] }));
+  const [inputValue, setInputValue] = React33.useState("");
+  const [value, setValue] = React33.useState([]);
   const debouncedInputValue = useDebounce(inputValue, 300);
-  React29.useEffect(() => {
+  React33.useEffect(() => {
     loadOptions(debouncedInputValue, value).then(setCollection);
   }, [debouncedInputValue, loadOptions, value]);
-  const handleFilterChange = React29.useCallback((val) => {
+  const handleFilterChange = React33.useCallback((val) => {
     setInputValue(val);
   }, []);
-  const handleValueChange = React29.useCallback(({ value: v, items }) => {
+  const handleValueChange = React33.useCallback(({ value: v, items }) => {
     setValue(v);
     onValueChange?.({ value: v, items });
   }, [onValueChange]);
@@ -4392,13 +5180,14 @@ var VERTICAL_SIZE_CLASSES = {
   md: "border-l-2",
   lg: "border-l-[3px]"
 };
-var Separator2 = React29__default.forwardRef(
+var Separator2 = React33__default.forwardRef(
   function Separator3({ orientation = "horizontal", variant = "solid", size = "sm", className, ...rest }, ref) {
     const isVertical = orientation === "vertical";
     return /* @__PURE__ */ jsx(
-      "hr",
+      Separator,
       {
         ref,
+        vertical: isVertical,
         role: "separator",
         "aria-orientation": orientation,
         className: cn(
@@ -4414,9 +5203,7 @@ var Separator2 = React29__default.forwardRef(
     );
   }
 );
-var THUMB_SIZE = 20;
-var TRACK_HEIGHT = 6;
-var Slider = React29.forwardRef(
+var Slider = React33.forwardRef(
   function Slider2(props, ref) {
     const {
       marks: marksProp,
@@ -4428,7 +5215,7 @@ var Slider = React29.forwardRef(
       max = 100,
       step,
       disabled,
-      orientation,
+      orientation = "horizontal",
       name,
       onValueChange,
       onValueCommit,
@@ -4440,6 +5227,14 @@ var Slider = React29.forwardRef(
       return mark;
     });
     const hasMarkLabel = Boolean(marks?.some((mark) => mark.label));
+    const latest = React33.useRef(value ?? defaultValue ?? []);
+    const handleValueChange = React33.useCallback((next) => {
+      latest.current = next;
+      onValueChange?.(next);
+    }, [onValueChange]);
+    const handleSlideEnd = React33.useCallback(() => {
+      onValueCommit?.(latest.current);
+    }, [onValueCommit]);
     return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
       label && !showValue && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
       label && showValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
@@ -4447,9 +5242,10 @@ var Slider = React29.forwardRef(
         /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary", children: (value ?? defaultValue ?? [])?.join(", ") })
       ] }),
       /* @__PURE__ */ jsxs(
-        RadixSlider.Root,
+        Slider$1,
         {
           ref,
+          unstyled: true,
           className: cn(
             "relative flex w-full touch-none select-none items-center",
             hasMarkLabel && "mb-6"
@@ -4462,24 +5258,30 @@ var Slider = React29.forwardRef(
           disabled,
           orientation,
           name,
-          onValueChange,
-          onValueCommit,
+          onValueChange: handleValueChange,
+          onSlideEnd: handleSlideEnd,
           children: [
             /* @__PURE__ */ jsx(
-              RadixSlider.Track,
+              Slider$1.Track,
               {
-                className: cn(
-                  "relative grow rounded-full bg-border-divider",
-                  `h-[${TRACK_HEIGHT}px]`
-                ),
-                children: /* @__PURE__ */ jsx(RadixSlider.Range, { className: "absolute h-full rounded-full bg-link-primary" })
+                unstyled: true,
+                className: "relative grow h-1.5 rounded-full bg-border-divider",
+                children: /* @__PURE__ */ jsx(
+                  Slider$1.TrackActive,
+                  {
+                    unstyled: true,
+                    className: "absolute h-full rounded-full bg-link-primary"
+                  }
+                )
               }
             ),
             resolvedValue?.map((_, index) => /* @__PURE__ */ jsx(
-              RadixSlider.Thumb,
+              Slider$1.Thumb,
               {
+                index,
+                unstyled: true,
                 className: cn(
-                  `block h-[${THUMB_SIZE}px] w-[${THUMB_SIZE}px]`,
+                  "block h-5 w-5",
                   "rounded-full border-2 border-link-primary bg-white",
                   "shadow-sm transition-colors",
                   "hover:border-link-primary-hover",
@@ -4521,22 +5323,22 @@ var NOOP3 = () => {
 var SIZE_CLASSES9 = {
   sm: {
     root: "h-4 w-7",
-    thumb: "h-3 w-3 data-[state=checked]:translate-x-3",
+    thumb: "h-3 w-3",
     label: "text-xs"
   },
   md: {
     root: "h-5 w-9",
-    thumb: "h-4 w-4 data-[state=checked]:translate-x-4",
+    thumb: "h-4 w-4",
     label: "text-sm"
   },
   lg: {
     root: "h-6 w-11",
-    thumb: "h-5 w-5 data-[state=checked]:translate-x-5",
+    thumb: "h-5 w-5",
     label: "text-base"
   }
 };
-var SwitchBase = React29.forwardRef(
-  function Switch(props, ref) {
+var SwitchBase = React33.forwardRef(
+  function Switch$1(props, ref) {
     const {
       inputProps,
       children,
@@ -4554,17 +5356,15 @@ var SwitchBase = React29.forwardRef(
       className,
       ...rest
     } = props;
-    const [internalChecked, setInternalChecked] = React29.useState(defaultChecked ?? false);
+    const [internalChecked, setInternalChecked] = React33.useState(defaultChecked ?? false);
     const isControlled = checkedProp !== void 0;
     const checkedState = isControlled ? checkedProp : internalChecked;
-    const handleCheckedChange = React29.useCallback(
+    const handleCheckedChange = React33.useCallback(
       (nextChecked) => {
         if (!isControlled) {
           setInternalChecked(nextChecked);
         }
-        if (onCheckedChange) {
-          onCheckedChange({ checked: nextChecked });
-        }
+        onCheckedChange?.({ checked: nextChecked });
       },
       [isControlled, onCheckedChange]
     );
@@ -4585,8 +5385,9 @@ var SwitchBase = React29.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsxs(
-            RadixSwitch.Root,
+            Switch,
             {
+              unstyled: true,
               checked: checkedState,
               onCheckedChange: handleCheckedChange,
               disabled,
@@ -4601,12 +5402,13 @@ var SwitchBase = React29.forwardRef(
               children: [
                 trackLabel && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-bold text-white pointer-events-none", children: checkedState ? trackLabel.on : trackLabel.off }),
                 /* @__PURE__ */ jsx(
-                  RadixSwitch.Thumb,
+                  Switch.Thumb,
                   {
+                    unstyled: true,
+                    "data-thumb": true,
+                    transition: "quicker",
                     className: cn(
                       "block rounded-full bg-white shadow-sm",
-                      "transition-transform duration-200",
-                      "translate-x-0.5",
                       sizeClasses2.thumb
                     ),
                     children: thumbLabel && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center h-full w-full text-[8px]", children: checkedState ? thumbLabel.on : thumbLabel.off })
@@ -4822,7 +5624,7 @@ function resolveResponsive(value) {
   }
   return void 0;
 }
-var TableRoot = React29.forwardRef(
+var TableRoot = React33.forwardRef(
   function TableRoot2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const rawMinW = other.minWidth ?? other.minW;
@@ -4845,7 +5647,7 @@ var TableRoot = React29.forwardRef(
     );
   }
 );
-var TableHeader = React29.forwardRef(
+var TableHeader = React33.forwardRef(
   function TableHeader2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -4862,7 +5664,7 @@ var TableHeader = React29.forwardRef(
     );
   }
 );
-var TableBody = React29.forwardRef(
+var TableBody = React33.forwardRef(
   function TableBody2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -4879,7 +5681,7 @@ var TableBody = React29.forwardRef(
     );
   }
 );
-var TableRow = React29.forwardRef(
+var TableRow = React33.forwardRef(
   function TableRow2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -4896,7 +5698,7 @@ var TableRow = React29.forwardRef(
     );
   }
 );
-var TableCell = React29.forwardRef(
+var TableCell = React33.forwardRef(
   function TableCell2(props, ref) {
     const { isNumeric, className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -4917,7 +5719,7 @@ var TableCell = React29.forwardRef(
     );
   }
 );
-var TableColumnHeader = React29.forwardRef(
+var TableColumnHeader = React33.forwardRef(
   function TableColumnHeader2(props, ref) {
     const { isNumeric, className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -4944,7 +5746,7 @@ var TableColumnHeader = React29.forwardRef(
 );
 var TableColumnHeaderSortable = (props) => {
   const { sortField, sortValue, onSortToggle, children, disabled, indicatorPosition = "left", contentAfter, ...rest } = props;
-  const handleSortToggle = React29.useCallback(() => {
+  const handleSortToggle = React33.useCallback(() => {
     onSortToggle(sortField);
   }, [onSortToggle, sortField]);
   const isActive = sortValue.includes(sortField);
@@ -4970,16 +5772,16 @@ var TableColumnHeaderSortable = (props) => {
 var ACTION_BAR_SHADOW = "0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%)";
 var TableHeaderSticky = (props) => {
   const { top, children, className, style: styleProp, ...rest } = props;
-  const ref = React29.useRef(null);
-  const [isStuck, setIsStuck] = React29.useState(false);
-  const handleScroll = React29.useCallback(() => {
+  const ref = React33.useRef(null);
+  const [isStuck, setIsStuck] = React33.useState(false);
+  const handleScroll = React33.useCallback(() => {
     if (Number(ref.current?.getBoundingClientRect().y) <= (Number(top) || 0)) {
       setIsStuck(true);
     } else {
       setIsStuck(false);
     }
   }, [top]);
-  React29.useEffect(() => {
+  React33.useEffect(() => {
     const throttledHandleScroll = throttle(handleScroll, 300);
     window.addEventListener("scroll", throttledHandleScroll);
     return () => {
@@ -5001,7 +5803,7 @@ var TableHeaderSticky = (props) => {
     }
   );
 };
-var TableCaption = React29.forwardRef(
+var TableCaption = React33.forwardRef(
   function TableCaption2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5018,7 +5820,7 @@ var TableCaption = React29.forwardRef(
     );
   }
 );
-var TableFooter = React29.forwardRef(
+var TableFooter = React33.forwardRef(
   function TableFooter2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5035,7 +5837,7 @@ var TableFooter = React29.forwardRef(
     );
   }
 );
-var TableScrollWrapper = React29.forwardRef(
+var TableScrollWrapper = React33.forwardRef(
   function TableScrollWrapper2(props, ref) {
     const { className, children, ...rest } = props;
     return /* @__PURE__ */ jsx(
@@ -5054,7 +5856,7 @@ var ROOT_SIZE_CLASSES = {
   md: "[--tabs-height:2.5rem] [--tabs-content-padding:1.5rem]",
   free: ""
 };
-var TabsRoot = React29.forwardRef(
+var TabsRoot = React33.forwardRef(
   function TabsRoot2(props, ref) {
     const {
       variant = "solid",
@@ -5066,7 +5868,7 @@ var TabsRoot = React29.forwardRef(
       className,
       ...rest
     } = props;
-    const handleValueChange = React29.useCallback(
+    const handleValueChange = React33.useCallback(
       (value) => {
         if (!onValueChange) return;
         onValueChange({ value });
@@ -5091,7 +5893,7 @@ var TabsRoot = React29.forwardRef(
     );
   }
 );
-var TabsList = React29.forwardRef(
+var TabsList = React33.forwardRef(
   function TabsList2(props, ref) {
     const {
       className,
@@ -5145,7 +5947,7 @@ var TRIGGER_VARIANT_CLASSES = {
   segmented: "bg-transparent text-text-primary border-2 border-solid border-selected-control-bg hover:text-hover data-[state=active]:text-selected-control-text data-[state=active]:bg-selected-control-bg data-[state=active]:border-selected-control-bg data-[state=active]:hover:text-selected-control-text",
   unstyled: ""
 };
-var TabsTrigger = React29.forwardRef(
+var TabsTrigger = React33.forwardRef(
   function TabsTrigger2(props, ref) {
     const {
       className,
@@ -5165,7 +5967,7 @@ var TabsTrigger = React29.forwardRef(
       visibility: _visibility,
       ...rest
     } = props;
-    const internalRef = React29.useRef(null);
+    const internalRef = React33.useRef(null);
     const mergedRef = useMergedRef(ref, internalRef);
     const { variant, size, fitted } = useTabsContext(internalRef);
     return /* @__PURE__ */ jsx(
@@ -5185,7 +5987,7 @@ var TabsTrigger = React29.forwardRef(
     );
   }
 );
-var TabsContent = React29.forwardRef(
+var TabsContent = React33.forwardRef(
   function TabsContent2(props, ref) {
     const { className, padding: _padding, ...rest } = props;
     return /* @__PURE__ */ jsx(
@@ -5219,8 +6021,8 @@ var TabsCounter = ({ count }) => {
   );
 };
 function useTabsContext(triggerRef) {
-  const [ctx, setCtx] = React29.useState({ variant: "solid", size: "md", fitted: false });
-  React29.useEffect(() => {
+  const [ctx, setCtx] = React33.useState({ variant: "solid", size: "md", fitted: false });
+  React33.useEffect(() => {
     const el = triggerRef.current;
     if (!el) return;
     const root = el.closest("[data-variant]");
@@ -5234,7 +6036,7 @@ function useTabsContext(triggerRef) {
   return ctx;
 }
 function useMergedRef(...refs) {
-  return React29.useCallback(
+  return React33.useCallback(
     (instance) => {
       for (const ref of refs) {
         if (!ref) continue;
@@ -5272,7 +6074,7 @@ var TAG_SELECTED_CLASSES = [
   "hover:opacity-76"
 ].join(" ");
 var TAG_DISABLED_CLASSES = "opacity-40 pointer-events-none cursor-not-allowed";
-var Tag = React29.forwardRef(
+var Tag = React33.forwardRef(
   function Tag2(props, ref) {
     const {
       variant,
@@ -5359,14 +6161,23 @@ var TEXTAREA_VARIANT_CLASSES = {
   filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
   unstyled: "border-0 bg-transparent p-0"
 };
-var Textarea = React29__default.forwardRef(
-  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
+var Textarea = React33__default.forwardRef(
+  ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React33__default.useCallback(
+      (event) => {
+        onChange?.(event);
+        onChangeText?.(event.target.value);
+      },
+      [onChange, onChangeText]
+    );
     return /* @__PURE__ */ jsx(
-      "textarea",
+      TextArea,
       {
         ref,
+        unstyled: true,
         className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
-        ...rest
+        ...rest,
+        onChange: handleChange
       }
     );
   }
@@ -5495,7 +6306,7 @@ function QuoteCell({ value, highlight, align = "right", onClick, className }) {
 }
 var CALL_HEADERS = ["Bid", "Ask", "Last", "Vol", "OI", "IV", "Delta"];
 var PUT_HEADERS = ["Delta", "IV", "OI", "Vol", "Last", "Ask", "Bid"];
-var OptionChain = React29.forwardRef(
+var OptionChain = React33.forwardRef(
   function OptionChain2(props, ref) {
     const {
       symbol: _symbol,
@@ -5506,7 +6317,7 @@ var OptionChain = React29.forwardRef(
       className,
       ...rest
     } = props;
-    const handleClick = React29.useCallback(
+    const handleClick = React33.useCallback(
       (quote, type, strike) => {
         if (!quote || !onSelectContract) return;
         onSelectContract({
@@ -5612,7 +6423,7 @@ var OptionChain = React29.forwardRef(
                     {
                       className: cn(
                         "px-2 py-1 text-center font-mono tabular-nums text-xs font-semibold",
-                        isATM ? "text-amber-400 bg-zinc-800/80" : "text-zinc-300"
+                        isATM ? "text-[var(--foreground)] bg-[var(--secondary)]" : "text-[var(--muted-foreground)]"
                       ),
                       children: fmt(row.strike)
                     }
@@ -5651,12 +6462,12 @@ var OptionChain = React29.forwardRef(
   }
 );
 var GREEKS = [
-  { key: "delta", label: "Delta", symbol: "\u0394", color: "text-blue-400", barColor: "bg-blue-500", decimals: 4, maxMagnitude: 1 },
-  { key: "gamma", label: "Gamma", symbol: "\u0393", color: "text-purple-400", barColor: "bg-purple-500", decimals: 4, maxMagnitude: 0.1 },
-  { key: "theta", label: "Theta", symbol: "\u0398", color: "text-red-400", barColor: "bg-red-500", decimals: 4, maxMagnitude: 1 },
-  { key: "vega", label: "Vega", symbol: "\u03BD", color: "text-emerald-400", barColor: "bg-emerald-500", decimals: 4, maxMagnitude: 1 },
-  { key: "rho", label: "Rho", symbol: "\u03C1", color: "text-orange-400", barColor: "bg-orange-500", decimals: 4, maxMagnitude: 1 },
-  { key: "iv", label: "IV", symbol: "\u03C3", color: "text-amber-400", barColor: "bg-amber-500", decimals: 1, maxMagnitude: 100 }
+  { key: "delta", label: "Delta", symbol: "\u0394", color: "text-[var(--foreground)]", barColor: "bg-[var(--foreground)]", decimals: 4, maxMagnitude: 1 },
+  { key: "gamma", label: "Gamma", symbol: "\u0393", color: "text-[var(--chart-1)]", barColor: "bg-[var(--chart-1)]", decimals: 4, maxMagnitude: 0.1 },
+  { key: "theta", label: "Theta", symbol: "\u0398", color: "text-[var(--chart-4)]", barColor: "bg-[var(--chart-4)]", decimals: 4, maxMagnitude: 1 },
+  { key: "vega", label: "Vega", symbol: "\u03BD", color: "text-[var(--chart-2)]", barColor: "bg-[var(--chart-2)]", decimals: 4, maxMagnitude: 1 },
+  { key: "rho", label: "Rho", symbol: "\u03C1", color: "text-[var(--chart-3)]", barColor: "bg-[var(--chart-3)]", decimals: 4, maxMagnitude: 1 },
+  { key: "iv", label: "IV", symbol: "\u03C3", color: "text-[var(--chart-5)]", barColor: "bg-[var(--chart-5)]", decimals: 1, maxMagnitude: 100 }
 ];
 function GreekItem({ def, value, compact }) {
   const magnitude = Math.min(Math.abs(value) / def.maxMagnitude, 1);
@@ -5686,7 +6497,7 @@ function GreekItem({ def, value, compact }) {
     }
   );
 }
-var GreeksDisplay = React29.forwardRef(
+var GreeksDisplay = React33.forwardRef(
   function GreeksDisplay2(props, ref) {
     const {
       delta,
@@ -5863,7 +6674,8 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
         type: "button",
         className: cn(
           "px-2 py-0.5 rounded text-xs font-medium transition-colors",
-          leg.type === "call" ? "bg-blue-900/40 text-blue-400" : "bg-orange-900/40 text-orange-400"
+          // Call vs put is a rank difference, not a hue difference.
+          leg.type === "call" ? "bg-[var(--secondary)] text-[var(--foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"
         ),
         onClick: () => update2({ type: leg.type === "call" ? "put" : "call" }),
         children: leg.type === "call" ? "CALL" : "PUT"
@@ -5917,7 +6729,7 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
     )
   ] });
 }
-var StrategyBuilder = React29.forwardRef(
+var StrategyBuilder = React33.forwardRef(
   function StrategyBuilder2(props, ref) {
     const {
       underlying,
@@ -5929,12 +6741,12 @@ var StrategyBuilder = React29.forwardRef(
       ...rest
     } = props;
     const defaultExp = expirations[0] ?? "";
-    const [strategyType, setStrategyType] = React29.useState("bull_call_spread");
-    const [legs, setLegs] = React29.useState(() => {
+    const [strategyType, setStrategyType] = React33.useState("bull_call_spread");
+    const [legs, setLegs] = React33.useState(() => {
       const preset = STRATEGY_PRESETS.find((p) => p.value === "bull_call_spread");
       return preset ? preset.buildLegs(strikes, spotPrice, defaultExp) : [];
     });
-    const handleStrategyChange = React29.useCallback(
+    const handleStrategyChange = React33.useCallback(
       (e) => {
         const type = e.target.value;
         setStrategyType(type);
@@ -5945,7 +6757,7 @@ var StrategyBuilder = React29.forwardRef(
       },
       [strikes, spotPrice, defaultExp]
     );
-    const handleLegChange = React29.useCallback(
+    const handleLegChange = React33.useCallback(
       (index, leg) => {
         setLegs((prev) => {
           const next = [...prev];
@@ -5955,13 +6767,13 @@ var StrategyBuilder = React29.forwardRef(
       },
       []
     );
-    const handleLegRemove = React29.useCallback(
+    const handleLegRemove = React33.useCallback(
       (index) => {
         setLegs((prev) => prev.filter((_, i) => i !== index));
       },
       []
     );
-    const handleAddLeg = React29.useCallback(() => {
+    const handleAddLeg = React33.useCallback(() => {
       if (legs.length >= 4) return;
       const atm = findATM(strikes, spotPrice);
       setLegs((prev) => [
@@ -5969,14 +6781,14 @@ var StrategyBuilder = React29.forwardRef(
         { action: "buy", type: "call", strike: atm, expiration: defaultExp, quantity: 1 }
       ]);
     }, [legs.length, strikes, spotPrice, defaultExp]);
-    const netPremium = React29.useMemo(() => {
+    const netPremium = React33.useMemo(() => {
       return legs.reduce((sum, leg) => {
         if (leg.premium === void 0) return sum;
         const sign = leg.action === "buy" ? -1 : 1;
         return sum + sign * leg.premium * leg.quantity;
       }, 0);
     }, [legs]);
-    const handleSubmit = React29.useCallback(() => {
+    const handleSubmit = React33.useCallback(() => {
       if (!onSubmit || legs.length === 0) return;
       onSubmit({
         type: strategyType,
@@ -6096,8 +6908,10 @@ function buildPath(points, vb, width, height) {
   });
   return parts.join(" ");
 }
-var LEG_COLORS = ["#6366f1", "#f59e0b", "#ec4899", "#06b6d4"];
-var PnlDiagram = React29.forwardRef(
+var LEG_COLORS = ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)"];
+var BREAKEVEN_COLOR = "var(--chart-1)";
+var BREAKEVEN_RING = "var(--background)";
+var PnlDiagram = React33.forwardRef(
   function PnlDiagram2(props, ref) {
     const {
       legs,
@@ -6106,10 +6920,10 @@ var PnlDiagram = React29.forwardRef(
       className,
       ...rest
     } = props;
-    const containerRef = React29.useRef(null);
-    const [hoverX, setHoverX] = React29.useState(null);
-    const [dims, setDims] = React29.useState({ width: 600, height: 240 });
-    React29.useEffect(() => {
+    const containerRef = React33.useRef(null);
+    const [hoverX, setHoverX] = React33.useState(null);
+    const [dims, setDims] = React33.useState({ width: 600, height: 240 });
+    React33.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       const observer = new ResizeObserver((entries) => {
@@ -6132,7 +6946,7 @@ var PnlDiagram = React29.forwardRef(
     const xMax = maxStrike + range * 0.3;
     const SAMPLES = 200;
     const step = (xMax - xMin) / SAMPLES;
-    const combinedPoints = React29.useMemo(() => {
+    const combinedPoints = React33.useMemo(() => {
       const pts = [];
       for (let i = 0; i <= SAMPLES; i++) {
         const price = xMin + i * step;
@@ -6140,7 +6954,7 @@ var PnlDiagram = React29.forwardRef(
       }
       return pts;
     }, [legs, multiplier, xMin, step]);
-    const legPointSets = React29.useMemo(() => {
+    const legPointSets = React33.useMemo(() => {
       return legs.map((leg) => {
         const pts = [];
         for (let i = 0; i <= SAMPLES; i++) {
@@ -6161,7 +6975,7 @@ var PnlDiagram = React29.forwardRef(
     const chartH = height - PADDING.top - PADDING.bottom;
     const scaleX = (x) => PADDING.left + (x - vb.xMin) / (vb.xMax - vb.xMin) * chartW;
     const scaleY = (y) => PADDING.top + chartH - (y - vb.yMin) / (vb.yMax - vb.yMin) * chartH;
-    const breakevens = React29.useMemo(() => {
+    const breakevens = React33.useMemo(() => {
       const pts = [];
       for (let i = 1; i < combinedPoints.length; i++) {
         const prev = combinedPoints[i - 1];
@@ -6178,7 +6992,7 @@ var PnlDiagram = React29.forwardRef(
     const maxGainPoint = combinedPoints.find((p) => p.y === maxGain);
     const maxLossPoint = combinedPoints.find((p) => p.y === maxLoss);
     const zeroY = scaleY(0);
-    const handleMouseMove = React29.useCallback(
+    const handleMouseMove = React33.useCallback(
       (e) => {
         const rect = e.currentTarget.getBoundingClientRect();
         const mouseX = e.clientX - rect.left;
@@ -6191,7 +7005,7 @@ var PnlDiagram = React29.forwardRef(
       },
       [vb.xMin, vb.xMax, chartW]
     );
-    const handleMouseLeave = React29.useCallback(() => setHoverX(null), []);
+    const handleMouseLeave = React33.useCallback(() => setHoverX(null), []);
     const hoverPnl = hoverX !== null ? calcTotalPnl(legs, hoverX, multiplier) : null;
     buildPath(
       combinedPoints.map((p) => ({ x: scaleX(p.x), y: scaleY(p.y) })).map((p) => ({ x: p.x - PADDING.left, y: p.y - PADDING.top })),
@@ -6338,13 +7152,13 @@ var PnlDiagram = React29.forwardRef(
                   }
                 ),
                 breakevens.map((be, i) => /* @__PURE__ */ jsxs("g", { children: [
-                  /* @__PURE__ */ jsx("circle", { cx: scaleX(be), cy: zeroY, r: "3", fill: "#fbbf24", stroke: "#18181b", strokeWidth: "1" }),
+                  /* @__PURE__ */ jsx("circle", { cx: scaleX(be), cy: zeroY, r: "3", fill: BREAKEVEN_COLOR, stroke: BREAKEVEN_RING, strokeWidth: "1" }),
                   /* @__PURE__ */ jsx(
                     "text",
                     {
                       x: scaleX(be),
                       y: PADDING.top + chartH + 14,
-                      fill: "#fbbf24",
+                      fill: BREAKEVEN_COLOR,
                       fontSize: "8",
                       fontFamily: "monospace",
                       textAnchor: "middle",
@@ -6385,7 +7199,7 @@ var PnlDiagram = React29.forwardRef(
                       cy: scaleY(hoverPnl),
                       r: "3",
                       fill: hoverPnl >= 0 ? "#22c55e" : "#ef4444",
-                      stroke: "#18181b",
+                      stroke: BREAKEVEN_RING,
                       strokeWidth: "1"
                     }
                   ),
@@ -6397,7 +7211,7 @@ var PnlDiagram = React29.forwardRef(
                       width: "90",
                       height: "28",
                       rx: "3",
-                      fill: "#18181b",
+                      fill: BREAKEVEN_RING,
                       stroke: "#3f3f46",
                       strokeWidth: "1"
                     }
@@ -6479,7 +7293,7 @@ var PnlDiagram = React29.forwardRef(
               ] })
             ] }, i)),
             breakevens.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-amber-400" }),
+              /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 rounded-full", style: { background: BREAKEVEN_COLOR } }),
               /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-zinc-500", children: [
                 "BE: ",
                 breakevens.map((b) => b.toFixed(1)).join(", ")
@@ -6495,7 +7309,7 @@ function formatDate(date) {
   const d = new Date(date);
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
 }
-var OptionPositionCard = React29.forwardRef(
+var OptionPositionCard = React33.forwardRef(
   function OptionPositionCard2(props, ref) {
     const {
       position,
@@ -6521,7 +7335,8 @@ var OptionPositionCard = React29.forwardRef(
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs("span", { className: cn(
               "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-semibold",
-              isCall ? "bg-blue-900/40 text-blue-400" : "bg-orange-900/40 text-orange-400"
+              // Call vs put is a rank difference, not a hue difference.
+              isCall ? "bg-[var(--secondary)] text-[var(--foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"
             ), children: [
               position.underlying,
               /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums", children: position.strike }),
@@ -6647,8 +7462,9 @@ function ExpirationPill({ exp, isSelected, onClick }) {
         /* @__PURE__ */ jsx("span", { className: "font-medium whitespace-nowrap", children: formatExpDate(exp.date) }),
         /* @__PURE__ */ jsxs("span", { className: cn(
           "font-mono tabular-nums text-[10px]",
-          isSelected ? "text-blue-400/70" : "text-zinc-600",
-          exp.dte <= 7 && !isSelected && "text-amber-600"
+          isSelected ? "text-[var(--foreground)]" : "text-[var(--muted-foreground)]",
+          // Near expiry is a notice, and a notice in Lux is the loudest neutral.
+          exp.dte <= 7 && !isSelected && "text-[var(--color-status-warn)]"
         ), children: [
           exp.dte,
           "d"
@@ -6657,7 +7473,7 @@ function ExpirationPill({ exp, isSelected, onClick }) {
     }
   );
 }
-var ExpirationSelector = React29.forwardRef(
+var ExpirationSelector = React33.forwardRef(
   function ExpirationSelector2(props, ref) {
     const {
       expirations,
@@ -6667,8 +7483,8 @@ var ExpirationSelector = React29.forwardRef(
       className,
       ...rest
     } = props;
-    const scrollRef = React29.useRef(null);
-    React29.useEffect(() => {
+    const scrollRef = React33.useRef(null);
+    React33.useEffect(() => {
       const container = scrollRef.current;
       if (!container) return;
       const selectedEl = container.querySelector('[data-selected="true"]');
@@ -6980,4 +7796,4 @@ var BankPage = styled(View, {
   padding: 16
 });
 
-export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, Alert, AppProvider, Avatar, AvatarGroup, Badge, BankAlert, BankAlertText, BankButton, BankButtonText, BankCard, BankDivider, BankField, BankHeading, BankInput, BankPage, BankPinBox, BankText, Button, ButtonGroup, ButtonGroupRadio, Checkbox2 as Checkbox, CheckboxGroup2 as CheckboxGroup, CloseButton, CollapsibleDetails, CollapsibleList, ColorModeProvider, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, DrawerTitle, DrawerTrigger, EmptyState, ExpirationSelector, Field, GreeksDisplay, Heading, IconButton, Image2 as Image, Input, InputGroup, Link, LinkBox, LinkExternalIcon, LinkOverlay, MenuArrow, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, OptionChain, OptionPositionCard, PinInput, PnlDiagram, PopoverArrow, PopoverBody, PopoverCloseTrigger, PopoverCloseTriggerWrapper, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger, Progress, ProgressCircleRing, ProgressCircleRoot, ProgressCircleValueText, Radio2 as Radio, RadioGroup3 as RadioGroup, Rating, Select, SelectAsync, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectValueText, Separator2 as Separator, Skeleton, SkeletonCircle, SkeletonText, Slider, StrategyBuilder, Switch2 as Switch, TableBody, TableCaption, TableCell, TableColumnHeader, TableColumnHeaderSortable, TableFooter, TableHeader, TableHeaderSticky, TableRoot, TableRow, TableScrollWrapper, TabsContent, TabsCounter, TabsList, TabsRoot, TabsTrigger, Tag, Textarea, Toaster, Tooltip, bankColors, buttonVariants, cn, createListCollection, toaster, useAccordion, useColorMode, useColorModeValue };
+export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, Alert, AppNav, AppProvider, Avatar, AvatarGroup, Badge, BankAlert, BankAlertText, BankButton, BankButtonText, BankCard, BankDivider, BankField, BankHeading, BankInput, BankPage, BankPinBox, BankText, Button, ButtonGroup, ButtonGroupRadio, Checkbox2 as Checkbox, CheckboxGroup2 as CheckboxGroup, CloseButton, CollapsibleDetails, CollapsibleList, ColorModeProvider, DEFAULT_ORG, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, DrawerTitle, DrawerTrigger, EmptyState, ExpirationSelector, Field, GreeksDisplay, Heading, IAM_PAGE_SIZE, IamError, IconButton, IdentityProvider, Image, Input, InputGroup, LUX_BRAND, Link, LinkBox, LinkExternalIcon, LinkOverlay, MenuArrow, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, NARROW_PX, OptionChain, OptionPositionCard, OrgSwitcher, PARS_GOLD, PinInput, PnlDiagram, PopoverArrow, PopoverBody, PopoverCloseTrigger, PopoverCloseTriggerWrapper, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger, Progress, ProgressCircleRing, ProgressCircleRoot, ProgressCircleValueText, ProjectSwitcher, Radio2 as Radio, RadioGroup3 as RadioGroup, Rating, Select, SelectAsync, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectValueText, Separator2 as Separator, SettingsMenu, Skeleton, SkeletonCircle, SkeletonText, Slider, StrategyBuilder, Switch2 as Switch, Switcher, TOUCH_PX, TableBody, TableCaption, TableCell, TableColumnHeader, TableColumnHeaderSortable, TableFooter, TableHeader, TableHeaderSticky, TableRoot, TableRow, TableScrollWrapper, TabsContent, TabsCounter, TabsList, TabsRoot, TabsTrigger, Tag, Textarea, Toaster, Tooltip, UserMenu, bankColors, buttonVariants, cn, config, createListCollection, currentHost, lux_config_default as guiConfig, iam, iamBase, initials, luxThemes, orgIdentity, ORGS as orgs, resolveWhiteLabel, toaster, useAccordion, useBelow, useColorMode, useColorModeValue, useIdentity, useIsNarrow, useIsTouch, useWhiteLabel };