@luxfi/ui 7.4.9 → 7.4.11

package/dist/index.cjs

@@ -3,23 +3,15 @@
 
 var gui = require('@hanzo/gui');
 var reactQuery = require('@tanstack/react-query');
-var React33 = require('react');
+var React32 = require('react');
 var v5 = require('@hanzogui/config/v5');
 var v5Css = require('@hanzogui/config/v5-css');
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var lucideReact = require('lucide-react');
-var RadixDialog = require('@radix-ui/react-dialog');
-var DropdownMenu = require('@radix-ui/react-dropdown-menu');
-var AccordionPrimitive = require('@radix-ui/react-accordion');
 var usehooks = require('@uidotdev/usehooks');
-var Collapsible = require('@radix-ui/react-collapsible');
-var LabelPrimitive = require('@radix-ui/react-label');
 var esToolkit = require('es-toolkit');
-var RadixSelect = require('@radix-ui/react-select');
-var RadixTabs = require('@radix-ui/react-tabs');
-var sonner = require('sonner');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -39,14 +31,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React33__namespace = /*#__PURE__*/_interopNamespace(React33);
-var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
-var DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
-var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
-var Collapsible__namespace = /*#__PURE__*/_interopNamespace(Collapsible);
-var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
-var RadixSelect__namespace = /*#__PURE__*/_interopNamespace(RadixSelect);
-var RadixTabs__namespace = /*#__PURE__*/_interopNamespace(RadixTabs);
+var React32__namespace = /*#__PURE__*/_interopNamespace(React32);
 
 // src/provider.tsx
 
@@ -227,7 +212,7 @@ var defaultQueryClient = new reactQuery.QueryClient({
 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__namespace.default.useInsertionEffect(() => {
+  React32__namespace.default.useInsertionEffect(() => {
     if (typeof document === "undefined") return;
     if (document.getElementById(FONT_BODY_RESET_ID)) return;
     const style = document.createElement("style");
@@ -236,16 +221,16 @@ var useFontBodyReset = () => {
     document.head.appendChild(style);
   }, []);
 };
-var WhiteLabelContext = React33__namespace.default.createContext(resolveWhiteLabel(""));
-var useWhiteLabel = () => React33__namespace.default.useContext(WhiteLabelContext);
+var WhiteLabelContext = React32__namespace.default.createContext(resolveWhiteLabel(""));
+var useWhiteLabel = () => React32__namespace.default.useContext(WhiteLabelContext);
 var useHostWhiteLabel = (host) => {
-  const [resolvedHost, setResolvedHost] = React33__namespace.default.useState(host ?? "");
-  React33__namespace.default.useEffect(() => {
+  const [resolvedHost, setResolvedHost] = React32__namespace.default.useState(host ?? "");
+  React32__namespace.default.useEffect(() => {
     if (host !== void 0) return;
     const browserHost = currentHost();
     if (browserHost) setResolvedHost(browserHost);
   }, [host]);
-  return React33__namespace.default.useMemo(() => resolveWhiteLabel(resolvedHost), [resolvedHost]);
+  return React32__namespace.default.useMemo(() => resolveWhiteLabel(resolvedHost), [resolvedHost]);
 };
 var AppProvider = ({
   children,
@@ -264,8 +249,8 @@ function cn(...inputs) {
 var NARROW_PX = 640;
 var TOUCH_PX = 1024;
 function useBelow(px) {
-  const [below, setBelow] = React33__namespace.useState(false);
-  React33__namespace.useEffect(() => {
+  const [below, setBelow] = React32__namespace.useState(false);
+  React32__namespace.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
     const apply = () => setBelow(mql.matches);
     apply();
@@ -403,23 +388,23 @@ function writeScope(host, kind, value) {
   } catch {
   }
 }
-var IdentityContext = React33__namespace.createContext(null);
+var IdentityContext = React32__namespace.createContext(null);
 var IdentityProvider = ({
   children,
   auth = defaultAuth,
   loginPath = "/login"
 }) => {
   const whiteLabel = useWhiteLabel();
-  const base = React33__namespace.useMemo(() => iamBase(whiteLabel), [whiteLabel]);
-  const [status, setStatus] = React33__namespace.useState("loading");
-  const [account, setAccount] = React33__namespace.useState(null);
-  const [orgs, setOrgs] = React33__namespace.useState([]);
-  const [projects, setProjects] = React33__namespace.useState([]);
-  const [error, setError] = React33__namespace.useState(null);
-  const [orgName, setOrgName] = React33__namespace.useState(null);
-  const [projectName, setProjectName] = React33__namespace.useState(null);
-  const [epoch, setEpoch] = React33__namespace.useState(0);
-  React33__namespace.useEffect(() => {
+  const base = React32__namespace.useMemo(() => iamBase(whiteLabel), [whiteLabel]);
+  const [status, setStatus] = React32__namespace.useState("loading");
+  const [account, setAccount] = React32__namespace.useState(null);
+  const [orgs, setOrgs] = React32__namespace.useState([]);
+  const [projects, setProjects] = React32__namespace.useState([]);
+  const [error, setError] = React32__namespace.useState(null);
+  const [orgName, setOrgName] = React32__namespace.useState(null);
+  const [projectName, setProjectName] = React32__namespace.useState(null);
+  const [epoch, setEpoch] = React32__namespace.useState(0);
+  React32__namespace.useEffect(() => {
     const ac = new AbortController();
     let live = true;
     void (async () => {
@@ -467,12 +452,12 @@ var IdentityProvider = ({
       ac.abort();
     };
   }, [base, auth, epoch]);
-  const org = React33__namespace.useMemo(() => {
+  const org = React32__namespace.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__namespace.useEffect(() => {
+  React32__namespace.useEffect(() => {
     if (!org) {
       setProjects([]);
       return;
@@ -490,12 +475,12 @@ var IdentityProvider = ({
       ac.abort();
     };
   }, [base, auth, org, epoch]);
-  const project = React33__namespace.useMemo(() => {
+  const project = React32__namespace.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__namespace.useMemo(() => ({
+  const value = React32__namespace.useMemo(() => ({
     status,
     account,
     orgs,
@@ -527,9 +512,9 @@ var IdentityProvider = ({
   return /* @__PURE__ */ jsxRuntime.jsx(IdentityContext.Provider, { value, children });
 };
 function useIdentity() {
-  const ctx = React33__namespace.useContext(IdentityContext);
+  const ctx = React32__namespace.useContext(IdentityContext);
   const whiteLabel = useWhiteLabel();
-  const fallback = React33__namespace.useMemo(() => ({
+  const fallback = React32__namespace.useMemo(() => ({
     status: "anonymous",
     account: null,
     orgs: [],
@@ -583,7 +568,7 @@ var CLOSE_BUTTON_CLASSES = [
   "hover:text-[var(--hover-color,currentColor)]",
   "disabled:opacity-40"
 ].join(" ");
-var CloseButton = React33__namespace.forwardRef(function CloseButton2(props, ref) {
+var CloseButton = React32__namespace.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     CloseButtonFrame,
@@ -610,13 +595,22 @@ var CloseButton = React33__namespace.forwardRef(function CloseButton2(props, ref
     }
   );
 });
-var DrawerPlacementContext = React33__namespace.createContext("right");
-var DrawerSizeContext = React33__namespace.createContext("md");
-var DrawerStateContext = React33__namespace.createContext({
+var ink = (children, Wrap = gui.Text, props = {}) => {
+  let hasText = false;
+  React32.Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return React32.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? React32.createElement(Wrap, props, child) : child);
+};
+var DrawerPlacementContext = React32__namespace.createContext("right");
+var DrawerSizeContext = React32__namespace.createContext("md");
+var DrawerStateContext = React32__namespace.createContext({
   open: false,
   setOpen: () => {
   },
-  modal: true
+  modal: true,
+  narrow: false
 });
 var DrawerRoot = (props) => {
   const {
@@ -628,63 +622,43 @@ var DrawerRoot = (props) => {
     modal = true,
     size = "md"
   } = props;
-  const [uncontrolled, setUncontrolled] = React33__namespace.useState(defaultOpen ?? false);
+  const [uncontrolled, setUncontrolled] = React32__namespace.useState(defaultOpen ?? false);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : uncontrolled;
-  const setOpen = React33__namespace.useCallback((nextOpen) => {
+  const narrow = useIsNarrow();
+  const setOpen = React32__namespace.useCallback((nextOpen) => {
     if (!isControlled) setUncontrolled(nextOpen);
     onOpenChange?.({ open: nextOpen });
   }, [isControlled, onOpenChange]);
-  const state = React33__namespace.useMemo(
-    () => ({ open: isOpen, setOpen, modal }),
-    [isOpen, setOpen, modal]
+  const state = React32__namespace.useMemo(
+    () => ({ open: isOpen, setOpen, modal, narrow }),
+    [isOpen, setOpen, modal, narrow]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerStateContext.Provider, { value: state, children: /* @__PURE__ */ jsxRuntime.jsx(
-    RadixDialog__namespace.Root,
-    {
-      open: isOpen,
-      onOpenChange: setOpen,
-      modal,
-      children
-    }
-  ) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerStateContext.Provider, { value: state, children: narrow ? children : /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog, { 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 ANCHOR = {
+  right: { top: 0, bottom: 0, right: 0, enterStyle: { x: 24, opacity: 0 }, exitStyle: { x: 24, opacity: 0 } },
+  left: { top: 0, bottom: 0, left: 0, enterStyle: { x: -24, opacity: 0 }, exitStyle: { x: -24, opacity: 0 } },
+  top: { left: 0, right: 0, top: 0, enterStyle: { y: -24, opacity: 0 }, exitStyle: { y: -24, opacity: 0 } },
+  bottom: { left: 0, right: 0, bottom: 0, enterStyle: { y: 24, opacity: 0 }, exitStyle: { y: 24, opacity: 0 } }
 };
-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 ACROSS = {
+  xs: 240,
+  sm: 320,
+  md: 384,
+  lg: 480,
+  xl: 640,
+  full: "100%"
 };
-var DrawerContent = React33__namespace.forwardRef(
+var extent = (placement, size) => placement === "left" || placement === "right" ? { width: ACROSS[size], maxWidth: "100%" } : { height: ACROSS[size], maxHeight: "100%" };
+var SCRIM = "rgba(0,0,0,0.5)";
+var DrawerContent = React32__namespace.forwardRef(
   function DrawerContent2(props, ref) {
-    const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
-    const placement = React33__namespace.useContext(DrawerPlacementContext);
-    const size = React33__namespace.useContext(DrawerSizeContext);
-    const { open, setOpen, modal } = React33__namespace.useContext(DrawerStateContext);
-    const isNarrow = useIsNarrow();
-    if (isNarrow) {
+    const { children, portalled = true, portalRef: _portalRef, offset: _offset, backdrop = true, ...rest } = props;
+    const placement = React32__namespace.useContext(DrawerPlacementContext);
+    const size = React32__namespace.useContext(DrawerSizeContext);
+    const { open, setOpen, modal, narrow } = React32__namespace.useContext(DrawerStateContext);
+    if (narrow) {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         gui.Sheet,
         {
@@ -702,7 +676,7 @@ var DrawerContent = React33__namespace.forwardRef(
                 transition: "lazy",
                 enterStyle: { opacity: 0 },
                 exitStyle: { opacity: 0 },
-                className: "bg-black/50"
+                backgroundColor: SCRIM
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(gui.Sheet.Handle, {}),
@@ -710,10 +684,11 @@ var DrawerContent = React33__namespace.forwardRef(
               gui.Sheet.Frame,
               {
                 unstyled: true,
-                className: cn(
-                  "flex flex-col rounded-t-2xl bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)]",
-                  className
-                ),
+                flexDirection: "column",
+                borderTopLeftRadius: 16,
+                borderTopRightRadius: 16,
+                backgroundColor: "var(--color-drawer-bg)",
+                shadowColor: "var(--shadow-drawer)",
                 ...rest,
                 children
               }
@@ -724,324 +699,223 @@ var DrawerContent = React33__namespace.forwardRef(
     }
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       backdrop && /* @__PURE__ */ jsxRuntime.jsx(
-        RadixDialog__namespace.Overlay,
+        gui.Dialog.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"
-          )
-        }
+          position: "fixed",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: 50,
+          backgroundColor: SCRIM,
+          transition: "lazy",
+          enterStyle: { opacity: 0 },
+          exitStyle: { opacity: 0 }
+        },
+        "overlay"
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        RadixDialog__namespace.Content,
+        gui.Dialog.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
-          ),
+          unstyled: true,
+          position: "fixed",
+          zIndex: 50,
+          flexDirection: "column",
+          backgroundColor: "var(--color-drawer-bg)",
+          transition: "medium",
+          ...ANCHOR[placement],
+          ...extent(placement, size),
           ...rest,
           children
-        }
+        },
+        "content"
       )
     ] });
-    if (portalled) {
-      return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
-    }
-    return content;
+    return portalled ? /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog.Portal, { children: content }) : content;
   }
 );
-var DrawerCloseTrigger = React33__namespace.forwardRef(function DrawerCloseTrigger2(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-    CloseButton,
-    {
-      ref,
-      className: cn("absolute top-7 right-5", props.className),
-      ...props
-    }
-  ) });
+var DrawerCloseTrigger = React32__namespace.forwardRef(function DrawerCloseTrigger2(props, ref) {
+  return (
+    // Placement belongs to the surrounding box, not to the button: CloseButton
+    // is a fixed 20px control and has no opinion about where it sits.
+    /* @__PURE__ */ jsxRuntime.jsx(gui.View, { position: "absolute", top: 28, right: 20, zIndex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { ref, ...props }) }) })
+  );
 });
-var DrawerTrigger = (props) => {
-  const { asChild = true, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Trigger, { asChild, ...rest });
-};
-var DrawerHeader = React33__namespace.forwardRef(
-  function DrawerHeader2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col gap-1.5 p-6 pb-0", className), ...props });
-  }
-);
-var DrawerBody = React33__namespace.forwardRef(
-  function DrawerBody2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex-1 overflow-auto p-6", className), ...props });
-  }
-);
-var DrawerFooter = React33__namespace.forwardRef(
-  function DrawerFooter2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-6 pt-0", className), ...props });
-  }
-);
-var DrawerTitle = RadixDialog__namespace.Title;
-var DrawerDescription = RadixDialog__namespace.Description;
-var DrawerActionTrigger = RadixDialog__namespace.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";
+var DrawerTrigger = ({ asChild = true, children, ...rest }) => {
+  const { setOpen, narrow } = React32__namespace.useContext(DrawerStateContext);
+  if (narrow) {
+    return React32__namespace.isValidElement(children) ? React32__namespace.cloneElement(children, { onClick: () => setOpen(true) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   }
-  return { side, align };
-}
-var PositioningContext = React33__namespace.createContext({
-  side: "bottom",
-  align: "start",
-  sideOffset: 4,
-  alignOffset: 0
-});
-var MenuRoot = (props) => {
-  const {
-    children,
+  return /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog.Trigger, { asChild, ...rest, children });
+};
+var DrawerHeader = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { gap: 6, padding: 24, paddingBottom: 0, ...props, children: ink(children) });
+var DrawerBody = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { flex: 1, overflow: "scroll", padding: 24, ...props, children: ink(children) });
+var DrawerFooter = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { alignItems: "center", justifyContent: "flex-end", gap: 8, padding: 24, paddingTop: 0, ...props, children: ink(children) });
+var DrawerTitle = gui.Dialog.Title;
+var DrawerDescription = gui.Dialog.Description;
+var DrawerActionTrigger = gui.Dialog.Close;
+var ITEM_HOVER = "var(--color-popover-item-hover)";
+var TEXT = "var(--color-text-primary)";
+var ROW = {
+  position: "relative",
+  flexDirection: "row",
+  alignItems: "center",
+  cursor: "pointer",
+  userSelect: "none",
+  borderRadius: 6,
+  fontSize: 14,
+  backgroundColor: "transparent",
+  hoverStyle: { backgroundColor: ITEM_HOVER },
+  focusStyle: { backgroundColor: ITEM_HOVER }
+};
+var MenuRoot = ({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  positioning,
+  modal = true
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  gui.Menu,
+  {
     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__namespace.useMemo(() => ({
-    side,
-    align,
-    sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
-    alignOffset: mergedPositioning.offset?.crossAxis ?? 0
-  }), [side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis]);
-  const handleOpenChange = React33__namespace.useCallback((isOpen) => {
-    onOpenChange?.({ open: isOpen });
-  }, [onOpenChange]);
-  return /* @__PURE__ */ jsxRuntime.jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.Root,
-    {
-      open,
-      defaultOpen,
-      onOpenChange: handleOpenChange,
-      modal,
-      children
-    }
-  ) });
-};
-var MenuTrigger = React33__namespace.forwardRef(function MenuTrigger2(props, ref) {
-  const { asChild = false, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild, ref, ...rest });
-});
-var MenuContent = React33__namespace.forwardRef(function MenuContent2(props, ref) {
-  const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
-  const positioning = React33__namespace.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__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.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;
+    onOpenChange: onOpenChange ? (isOpen) => onOpenChange({ open: isOpen }) : void 0,
+    modal,
+    placement: positioning?.placement ?? "bottom-start",
+    offset: positioning?.offset?.mainAxis ?? 4,
+    children
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
-});
-var MenuItem = React33__namespace.forwardRef(function MenuItem2(props, ref) {
-  const { className, value: _value, asChild, closeOnSelect: _closeOnSelect, disabled, children, onClick, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.Item,
+);
+var MenuTrigger = ({ asChild = false, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.Trigger, { asChild, ...rest });
+var MenuContent = ({
+  portalled = true,
+  minW,
+  children,
+  ...rest
+}) => {
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
+    gui.Menu.Content,
     {
-      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
-      ),
+      unstyled: true,
+      zIndex: 50,
+      minWidth: minW ?? 128,
+      overflow: "hidden",
+      borderRadius: 8,
+      padding: 4,
+      borderWidth: 1,
+      borderColor: "var(--color-popover-border)",
+      backgroundColor: "var(--color-popover-bg)",
+      transition: "quick",
+      enterStyle: { opacity: 0, scale: 0.95 },
+      exitStyle: { opacity: 0, scale: 0.95 },
       ...rest,
       children
     }
   );
-});
-var MenuItemText = React33__namespace.forwardRef(function MenuItemText2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn("flex-1", className), ...rest });
-});
-React33__namespace.forwardRef(function MenuItemCommand2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      ref,
-      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
-      ...rest
-    }
-  );
-});
-var MenuSeparator = React33__namespace.forwardRef(function MenuSeparator2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.Separator,
-    {
-      ref,
-      className: cn("-mx-1 my-1 h-px bg-[var(--color-border-divider)]", className),
-      ...rest
-    }
-  );
-});
-var MenuItemGroup = React33__namespace.forwardRef(function MenuItemGroup2(props, ref) {
-  const { title, children, className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Group, { ref, className, ...rest, children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Label, { className: "px-2 py-1.5 text-xs font-semibold select-none opacity-60", children: title }),
-    children
-  ] });
-});
-var MenuArrow = React33__namespace.forwardRef(function MenuArrow2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.Arrow,
-    {
-      ref,
-      className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
-      ...rest
-    }
-  );
-});
-var MenuCheckboxItem = React33__namespace.forwardRef(function MenuCheckboxItem2(props, ref) {
-  const { className, children, checked, onCheckedChange, onClick, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    DropdownMenu__namespace.CheckboxItem,
+  return portalled ? /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.Portal, { children: content }) : content;
+};
+var MenuItem = ({ children, value: _value, asChild, ...rest }) => (
+  // `asChild` means the caller brought its own element and owns the look. Its
+  // props are then forwarded to that element verbatim, so the skin must NOT be
+  // applied: `unstyled` and friends are not DOM attributes and React rejects
+  // them out loud ("Received `true` for a non-boolean attribute `unstyled`").
+  // Two shapes, said once, rather than one shape that is wrong in one of them.
+  asChild ? /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.Item, { asChild: true, ...rest, children }) : /* @__PURE__ */ jsxRuntime.jsx(
+    gui.Menu.Item,
     {
-      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
-      ),
+      unstyled: true,
+      ...ROW,
+      gap: 8,
+      paddingHorizontal: 8,
+      paddingVertical: 6,
+      disabledStyle: { opacity: 0.5, pointerEvents: "none" },
       ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
-        children
-      ]
-    }
-  );
-});
-var MenuRadioItemGroup = React33__namespace.forwardRef(function MenuRadioItemGroup2(props, ref) {
-  const { value, onValueChange, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.RadioGroup,
-    {
-      ref,
-      value,
-      onValueChange,
-      ...rest
-    }
-  );
-});
-var MenuRadioItem = React33__namespace.forwardRef(function MenuRadioItem2(props, ref) {
-  const { className, children, value, onClick, ...rest } = props;
-  const { value: _v, ...radixRest } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    DropdownMenu__namespace.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__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children })
-      ]
+      children: ink(children, void 0, { fontSize: 14, color: TEXT })
     }
-  );
-});
-React33__namespace.forwardRef(function MenuContextTrigger2(props, ref) {
-  const { asChild: _asChild, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...rest });
-});
-var MenuTriggerItem = React33__namespace.forwardRef(function MenuTriggerItem2(props, ref) {
-  const { startIcon, children, className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Sub, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    DropdownMenu__namespace.SubTrigger,
+  )
+);
+var MenuItemText = (props) => /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { flex: 1, fontSize: 14, color: TEXT, ...props });
+var MenuSeparator = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  gui.Menu.Separator,
+  {
+    unstyled: true,
+    height: 1,
+    marginVertical: 4,
+    marginHorizontal: -4,
+    backgroundColor: "var(--color-border-divider)",
+    ...props
+  }
+);
+var MenuItemGroup = ({ title, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsxs(gui.Menu.Group, { unstyled: true, ...rest, children: [
+  title && /* @__PURE__ */ jsxRuntime.jsx(
+    gui.Menu.Label,
     {
-      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__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
-      ]
+      unstyled: true,
+      paddingHorizontal: 8,
+      paddingVertical: 6,
+      fontSize: 12,
+      fontWeight: "600",
+      userSelect: "none",
+      opacity: 0.6,
+      color: TEXT,
+      children: title
     }
-  ) });
-});
+  ),
+  children
+] });
+var MenuArrow = (props) => /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.Arrow, { backgroundColor: "var(--color-popover-bg)", ...props });
+var Indicator = () => /* @__PURE__ */ jsxRuntime.jsx(gui.View, { position: "absolute", left: 8, width: 14, height: 14, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 16 }) }) });
+var MenuCheckboxItem = ({ children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  gui.Menu.CheckboxItem,
+  {
+    unstyled: true,
+    ...ROW,
+    paddingLeft: 32,
+    paddingRight: 8,
+    paddingVertical: 6,
+    disabledStyle: { opacity: 0.5, pointerEvents: "none" },
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Indicator, {}),
+      ink(children, void 0, { fontSize: 14, color: TEXT })
+    ]
+  }
+);
+var MenuRadioItemGroup = (props) => /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.RadioGroup, { ...props });
+var MenuRadioItem = ({ children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  gui.Menu.RadioItem,
+  {
+    unstyled: true,
+    ...ROW,
+    paddingLeft: 32,
+    paddingRight: 8,
+    paddingVertical: 6,
+    disabledStyle: { opacity: 0.5, pointerEvents: "none" },
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Indicator, {}),
+      ink(children, void 0, { fontSize: 14, color: TEXT })
+    ]
+  }
+);
+var MenuTriggerItem = ({ startIcon, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.Sub, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  gui.Menu.SubTrigger,
+  {
+    unstyled: true,
+    ...ROW,
+    gap: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    ...rest,
+    children: [
+      startIcon,
+      /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { flex: 1, children: ink(children, void 0, { fontSize: 14, color: TEXT }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 })
+    ]
+  }
+) });
 function initials(label) {
   return label.split(/[\s._-]+/).filter(Boolean).map((w) => w[0]).join("").slice(0, 2).toUpperCase();
 }
@@ -1091,9 +965,9 @@ var Switcher = ({
   align = "start",
   testId
 }) => {
-  const [open, setOpen] = React33__namespace.useState(false);
+  const [open, setOpen] = React32__namespace.useState(false);
   const narrow = useIsNarrow();
-  const close = React33__namespace.useCallback(() => setOpen(false), []);
+  const close = React32__namespace.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__ */ jsxRuntime.jsx(lucideReact.User, { "aria-hidden": "true", className: "h-4 w-4" }), onSelect: onSignIn }] : status === "ready" ? items : [];
   const panel = (menu) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -1126,7 +1000,7 @@ var Switcher = ({
   );
   if (narrow) {
     return /* @__PURE__ */ jsxRuntime.jsxs(DrawerRoot, { open, onOpenChange: (d) => setOpen(d.open), placement: "bottom", size: "md", children: [
-      React33__namespace.cloneElement(trigger, { onClick: () => setOpen(true) }),
+      React32__namespace.cloneElement(trigger, { onClick: () => setOpen(true) }),
       /* @__PURE__ */ jsxRuntime.jsxs(DrawerContent, { "data-testid": testId ? `${testId}-panel` : void 0, children: [
         /* @__PURE__ */ jsxRuntime.jsx(DrawerHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { children: title }) }),
         /* @__PURE__ */ jsxRuntime.jsx(DrawerBody, { children: panel(false) })
@@ -1242,7 +1116,7 @@ var AppNav = ({
 }) => {
   const id = useIdentity();
   const narrow = useIsNarrow();
-  const [menu, setMenu] = React33__namespace.useState(false);
+  const [menu, setMenu] = React32__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "header",
     {
@@ -1304,178 +1178,117 @@ var AppNav = ({
     }
   );
 };
-var IndicatorIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var AccordionRoot = React33__namespace.forwardRef(
-  function AccordionRoot2(props, ref) {
-    const {
-      multiple: _multiple,
-      value,
-      defaultValue,
-      onValueChange,
-      variant,
-      size,
-      noAnimation: _noAnimation,
-      lazyMount: _lazyMount,
-      className,
-      children,
-      position: _position,
-      w: _w,
-      bgColor: _bgColor,
-      borderRadius: _borderRadius,
-      ...rest
-    } = props;
-    const handleValueChange = React33__namespace.useCallback(
-      (next) => {
-        onValueChange?.({ value: next });
-      },
-      [onValueChange]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      AccordionPrimitive__namespace.Root,
-      {
-        ref,
-        type: "multiple",
-        value,
-        defaultValue,
-        onValueChange: handleValueChange,
-        className: cn(
-          "w-full",
-          variant === "faq" && "accordion-faq",
-          size === "sm" && "accordion-sm",
-          className
-        ),
-        "data-variant": variant,
-        "data-size": size,
-        ...rest,
-        children
-      }
-    );
+var IndicatorIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var BAR = "var(--color-text-primary)";
+var Indicator2 = ({ open, variant }) => variant === "faq" ? /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { width: 12, height: 12, flexShrink: 0, alignItems: "center", justifyContent: "center", position: "relative", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(gui.View, { position: "absolute", width: "100%", height: 2, borderRadius: 2, backgroundColor: BAR }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    gui.View,
+    {
+      position: "absolute",
+      width: 2,
+      height: "100%",
+      borderRadius: 2,
+      backgroundColor: BAR,
+      rotate: open ? "90deg" : "0deg"
+    }
+  )
+] }) : /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { flexShrink: 0, alignItems: "center", rotate: open ? "270deg" : "180deg", children: /* @__PURE__ */ jsxRuntime.jsx(IndicatorIcon, {}) });
+var Variant = React32__namespace.createContext(void 0);
+var AccordionRoot = ({
+  value,
+  defaultValue,
+  onValueChange,
+  variant,
+  size,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsxRuntime.jsx(Variant.Provider, { value: variant, children: /* @__PURE__ */ jsxRuntime.jsx(
+  gui.Accordion,
+  {
+    unstyled: true,
+    type: "multiple",
+    width: "100%",
+    value,
+    defaultValue,
+    onValueChange: onValueChange ? (next) => onValueChange({ value: next }) : void 0,
+    "data-variant": variant,
+    "data-size": size,
+    ...rest,
+    children
   }
-);
-var AccordionItem = React33__namespace.forwardRef(
-  function AccordionItem2(props, ref) {
-    const { className, as: _as, _first, _last, display: _display, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      AccordionPrimitive__namespace.Item,
-      {
-        ref,
-        className: cn(
-          "border-b border-[var(--color-border-divider)]",
-          className
-        ),
-        ...rest
-      }
-    );
+) });
+var AccordionItem = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  gui.Accordion.Item,
+  {
+    unstyled: true,
+    borderBottomWidth: 1,
+    borderColor: "var(--color-border-divider)",
+    ...props
   }
 );
-var AccordionItemTrigger = React33__namespace.forwardRef(function AccordionItemTrigger2(props, ref) {
-  const {
-    children,
-    indicatorPlacement: indicatorPlacementProp,
-    variant,
-    noIndicator,
-    className,
-    // Strip Chakra style props
-    px: _px,
-    py: _py,
-    _hover,
-    wordBreak: _wordBreak,
-    textAlign: _textAlign,
-    cursor: _cursor,
-    display: _display,
-    alignItems: _alignItems,
-    columnGap: _columnGap,
-    ...rest
-  } = props;
-  const indicatorPlacement = variant === "faq" ? "start" : indicatorPlacementProp ?? "end";
-  const indicator = variant === "faq" ? /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: cn(
-        "relative inline-block h-3 w-3 shrink-0",
-        // horizontal bar (always visible)
-        "before:absolute before:left-0 before:top-1/2 before:block before:h-[2px] before:w-full before:-translate-y-1/2 before:rounded-[2px] before:bg-current",
-        // vertical bar (rotates to 0 when open)
-        "after:absolute after:left-1/2 after:top-0 after:block after:h-full after:w-[2px]",
-        "after:-translate-x-1/2 after:rounded-[2px] after:bg-current",
-        "after:transition-transform after:duration-200 after:ease-in-out",
-        // When parent trigger has data-state="open", rotate vertical bar
-        "group-data-[state=open]/trigger:after:rotate-90"
-      )
-    }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: cn(
-        "inline-flex shrink-0 transition-transform duration-200",
-        "rotate-180",
-        "group-data-[state=open]/trigger:rotate-[270deg]"
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(IndicatorIcon, { className: "h-5 w-5" })
-    }
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    AccordionPrimitive__namespace.Trigger,
-    {
-      ref,
-      className: cn(
-        "group/trigger flex w-full cursor-pointer items-center gap-2 py-3 text-left text-[var(--color-text-primary)]",
-        "hover:text-[var(--color-hover)]",
-        "focus-visible:outline-none",
-        className
-      ),
-      ...rest,
-      children: [
-        indicatorPlacement === "start" && !noIndicator && indicator,
-        children,
-        indicatorPlacement === "end" && !noIndicator && indicator
-      ]
-    }
-  ) }) });
-});
-var AccordionItemContent = React33__namespace.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__ */ jsxRuntime.jsx(
-    AccordionPrimitive__namespace.Content,
+var AccordionItemTrigger = ({
+  children,
+  indicatorPlacement: placementProp,
+  variant: variantProp,
+  noIndicator,
+  headingLevel = 3,
+  ...rest
+}) => {
+  const variant = variantProp ?? React32__namespace.useContext(Variant);
+  const placement = variant === "faq" ? "start" : placementProp ?? "end";
+  return /* @__PURE__ */ jsxRuntime.jsx(gui.Accordion.Header, { unstyled: true, render: `h${headingLevel}`, "aria-level": headingLevel, display: "flex", width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
+    gui.Accordion.Trigger,
     {
-      ref,
-      className: cn(
-        "overflow-hidden text-[var(--color-text-primary)]",
-        "data-[state=open]:animate-accordion-down",
-        "data-[state=closed]:animate-accordion-up",
-        className
-      ),
+      unstyled: true,
+      type: "button",
+      width: "100%",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+      paddingVertical: 12,
+      paddingHorizontal: 0,
+      borderWidth: 0,
+      backgroundColor: "transparent",
+      cursor: "pointer",
+      className: "lux-accordion-trigger",
       ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-3", children })
+      children: (({ open }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        placement === "start" && !noIndicator && /* @__PURE__ */ jsxRuntime.jsx(Indicator2, { open, variant }),
+        ink(children, void 0, { color: "inherit", textAlign: "left" }),
+        placement === "end" && !noIndicator && /* @__PURE__ */ jsxRuntime.jsx(Indicator2, { open, variant })
+      ] }))
     }
-  );
-});
+  ) });
+};
+var AccordionItemContent = ({ children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  gui.Accordion.Content,
+  {
+    unstyled: true,
+    overflow: "hidden",
+    paddingBottom: 12,
+    backgroundColor: "transparent",
+    ...rest,
+    children: ink(children, void 0, { color: "var(--color-text-primary)" })
+  }
+);
 function useAccordion(items) {
-  const [value, setValue] = React33__namespace.useState([]);
-  const onValueChange = React33__namespace.useCallback(({ value: value2 }) => {
-    setValue(value2);
+  const [value, setValue] = React32__namespace.useState([]);
+  const onValueChange = React32__namespace.useCallback(({ value: next }) => {
+    setValue(next);
   }, []);
-  const scrollToItemFromUrl = React33__namespace.useCallback(() => {
+  const scrollToItemFromUrl = React32__namespace.useCallback(() => {
     const hash = window.location.hash.replace("#", "");
-    if (!hash) {
-      return;
-    }
+    if (!hash) return;
     const itemToScroll = items.find((item) => item.id === hash);
-    if (itemToScroll) {
-      const el = document.getElementById(itemToScroll.id);
-      if (el) {
-        el.scrollIntoView({ behavior: "smooth", block: "start" });
-      }
-      setValue([itemToScroll.id]);
-    }
+    if (!itemToScroll) return;
+    document.getElementById(itemToScroll.id)?.scrollIntoView({ behavior: "smooth", block: "start" });
+    setValue([itemToScroll.id]);
   }, [items]);
-  return React33__namespace.useMemo(() => {
-    return {
-      value,
-      onValueChange,
-      scrollToItemFromUrl
-    };
-  }, [value, onValueChange, scrollToItemFromUrl]);
+  return React32__namespace.useMemo(
+    () => ({ value, onValueChange, scrollToItemFromUrl }),
+    [value, onValueChange, scrollToItemFromUrl]
+  );
 }
 var SHIM_PROPS = [
   "w",
@@ -1593,7 +1406,7 @@ function stripShims(props) {
 }
 var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
-var Skeleton = React33__namespace.forwardRef(
+var Skeleton = React32__namespace.forwardRef(
   function Skeleton2(props, ref) {
     const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
     const shimStyle = shimToStyle(props);
@@ -1602,10 +1415,10 @@ var Skeleton = React33__namespace.forwardRef(
     const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
     const htmlRest = stripShims(allRest);
     if (!loading) {
-      if (asChild && React33__namespace.isValidElement(children)) return children;
+      if (asChild && React32__namespace.isValidElement(children)) return children;
       return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
     }
-    if (asChild && React33__namespace.isValidElement(children)) {
+    if (asChild && React32__namespace.isValidElement(children)) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Component,
         {
@@ -1631,7 +1444,7 @@ var Skeleton = React33__namespace.forwardRef(
     );
   }
 );
-var SkeletonCircle = React33__namespace.forwardRef(
+var SkeletonCircle = React32__namespace.forwardRef(
   function SkeletonCircle2(props, ref) {
     const { size = 40, loading = true, className, ...rest } = props;
     const dimension = typeof size === "number" ? `${size}px` : size;
@@ -1647,7 +1460,7 @@ var SkeletonCircle = React33__namespace.forwardRef(
     );
   }
 );
-var SkeletonText = React33__namespace.forwardRef(
+var SkeletonText = React32__namespace.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1673,7 +1486,7 @@ var STATUS_CLASSES = {
   success: "bg-[var(--color-alert-bg-success)]",
   error: "bg-[var(--color-alert-bg-error)]"
 };
-var SIZE_CLASSES2 = {
+var SIZE_CLASSES = {
   sm: "gap-2 px-2 py-2 text-xs",
   md: "gap-2 px-3 py-2 text-base"
 };
@@ -1681,7 +1494,7 @@ var INDICATOR_SIZE_CLASSES = {
   sm: "w-5 h-5 my-0",
   md: "w-5 h-5 my-[2px]"
 };
-var Alert = React33__namespace.forwardRef(
+var Alert = React32__namespace.forwardRef(
   function Alert2(props, ref) {
     const {
       title,
@@ -1706,7 +1519,7 @@ var Alert = React33__namespace.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] = React33__namespace.useState(true);
+    const [isOpen, setIsOpen] = React32__namespace.useState(true);
     const resolvedSize = size ?? "md";
     const defaultIcon = /* @__PURE__ */ jsxRuntime.jsx(IndicatorIcon2, { className: "w-5 h-5" });
     const iconElement = (() => {
@@ -1721,7 +1534,7 @@ var Alert = React33__namespace.forwardRef(
         INDICATOR_SIZE_CLASSES[resolvedSize]
       ), children: icon || defaultIcon });
     })();
-    const handleClose = React33__namespace.useCallback(() => {
+    const handleClose = React32__namespace.useCallback(() => {
       setIsOpen(false);
       onClose?.();
     }, [onClose]);
@@ -1752,7 +1565,7 @@ var Alert = React33__namespace.forwardRef(
       "div",
       {
         ref,
-        className: cn(ALERT_BASE, STATUS_CLASSES[status], SIZE_CLASSES2[resolvedSize], className),
+        className: cn(ALERT_BASE, STATUS_CLASSES[status], SIZE_CLASSES[resolvedSize], className),
         style: alertStyle,
         ...alertRest,
         children: [
@@ -1782,7 +1595,7 @@ var Alert = React33__namespace.forwardRef(
     ) });
   }
 );
-var SIZE_CLASSES3 = {
+var SIZE_CLASSES2 = {
   xs: "h-6 w-6 text-[10px]",
   sm: "h-8 w-8 text-xs",
   md: "h-10 w-10 text-sm",
@@ -1797,11 +1610,11 @@ var VARIANT_CLASSES = {
 };
 var DEFAULT_SIZE = "md";
 var DEFAULT_VARIANT = "subtle";
-var AvatarGroupContext = React33__namespace.createContext({});
+var AvatarGroupContext = React32__namespace.createContext({});
 function useAvatarGroupContext() {
-  return React33__namespace.useContext(AvatarGroupContext);
+  return React32__namespace.useContext(AvatarGroupContext);
 }
-var Avatar = React33__namespace.forwardRef(
+var Avatar = React32__namespace.forwardRef(
   function Avatar2(props, ref) {
     const group = useAvatarGroupContext();
     const {
@@ -1828,7 +1641,7 @@ var Avatar = React33__namespace.forwardRef(
         unstyled: true,
         className: cn(
           "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle",
-          SIZE_CLASSES3[size],
+          SIZE_CLASSES2[size],
           VARIANT_CLASSES[variant],
           !isBorderless && "ring-2 ring-white dark:ring-gray-900",
           className
@@ -1852,7 +1665,7 @@ var Avatar = React33__namespace.forwardRef(
     );
   }
 );
-var AvatarFallback = React33__namespace.forwardRef(
+var AvatarFallback = React32__namespace.forwardRef(
   function AvatarFallback2(props, ref) {
     const { name, icon, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1880,10 +1693,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 = React33__namespace.forwardRef(
+var AvatarGroup = React32__namespace.forwardRef(
   function AvatarGroup2(props, ref) {
     const { size, variant, borderless, className, ...rest } = props;
-    const contextValue = React33__namespace.useMemo(
+    const contextValue = React32__namespace.useMemo(
       () => ({ size, variant, borderless }),
       [size, variant, borderless]
     );
@@ -1901,7 +1714,7 @@ function mapPlacement(p) {
   if (!p) return void 0;
   return p;
 }
-var Tooltip = React33__namespace.forwardRef(
+var Tooltip = React32__namespace.forwardRef(
   function Tooltip2(props, ref) {
     const {
       showArrow: showArrowProp,
@@ -1920,28 +1733,28 @@ var Tooltip = React33__namespace.forwardRef(
       interactive,
       positioning
     } = props;
-    const [open, setOpen] = React33__namespace.useState(defaultOpen);
-    const timeoutRef = React33__namespace.useRef(null);
+    const [open, setOpen] = React32__namespace.useState(defaultOpen);
+    const timeoutRef = React32__namespace.useRef(null);
     const isMobile = useIsTouch();
-    const handleOpenChange = React33__namespace.useCallback((nextOpen) => {
+    const handleOpenChange = React32__namespace.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.({ open: nextOpen });
     }, [onOpenChange]);
-    const handleOpenChangeManual = React33__namespace.useCallback((nextOpen) => {
+    const handleOpenChangeManual = React32__namespace.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 = React33__namespace.useCallback(() => {
+    const handleClickAway = React32__namespace.useCallback(() => {
       if (open) handleOpenChangeManual(false);
     }, [open, handleOpenChangeManual]);
     const triggerRef = usehooks.useClickAway(handleClickAway);
-    const handleTriggerClick = React33__namespace.useCallback(() => {
+    const handleTriggerClick = React32__namespace.useCallback(() => {
       handleOpenChangeManual(!open);
     }, [handleOpenChangeManual, open]);
-    const handleContentClick = React33__namespace.useCallback((event) => {
+    const handleContentClick = React32__namespace.useCallback((event) => {
       event.stopPropagation();
       if (interactive) {
         const closestLink = event.target?.closest("a");
@@ -1950,7 +1763,7 @@ var Tooltip = React33__namespace.forwardRef(
         }
       }
     }, [interactive, handleOpenChangeManual]);
-    React33__namespace.useEffect(() => {
+    React32__namespace.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -2022,7 +1835,7 @@ function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ jsxRuntime.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_CLASSES4 = {
+var SIZE_CLASSES3 = {
   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"
@@ -2052,7 +1865,7 @@ var COLOR_PALETTE_CLASSES = {
   bright_pink: "bg-badge-bright-pink-bg text-badge-bright-pink-fg"
 };
 var S2 = 4;
-var Badge = React33__namespace.default.forwardRef(
+var Badge = React32__namespace.default.forwardRef(
   function Badge2(props, ref) {
     const {
       loading,
@@ -2092,7 +1905,7 @@ var Badge = React33__namespace.default.forwardRef(
         ref,
         className: cn(
           BASE_CLASSES,
-          SIZE_CLASSES4[size],
+          SIZE_CLASSES3[size],
           COLOR_PALETTE_CLASSES[colorPalette],
           className
         ),
@@ -2301,7 +2114,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 = React33__namespace.forwardRef(
+var Button = React32__namespace.forwardRef(
   function Button2(props, ref) {
     const {
       className,
@@ -2392,7 +2205,7 @@ var Button = React33__namespace.forwardRef(
     return button;
   }
 );
-var SIZE_CLASSES5 = {
+var SIZE_CLASSES4 = {
   "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",
@@ -2401,9 +2214,9 @@ var SIZE_CLASSES5 = {
 function buttonVariants(opts) {
   const v = opts?.variant ?? "solid";
   const s = opts?.size ?? "md";
-  return [BASE_CLASSES2, VARIANT_CLASSES2[v] ?? "", SIZE_CLASSES5[s] ?? ""].filter(Boolean).join(" ");
+  return [BASE_CLASSES2, VARIANT_CLASSES2[v] ?? "", SIZE_CLASSES4[s] ?? ""].filter(Boolean).join(" ");
 }
-var ButtonGroup = React33__namespace.forwardRef(
+var ButtonGroup = React32__namespace.forwardRef(
   function ButtonGroup2(props, ref) {
     const { className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2417,7 +2230,7 @@ var ButtonGroup = React33__namespace.forwardRef(
     );
   }
 );
-var ButtonGroupRadio = React33__namespace.forwardRef(
+var ButtonGroupRadio = React32__namespace.forwardRef(
   function ButtonGroupRadio2(props, ref) {
     const {
       children,
@@ -2429,24 +2242,24 @@ var ButtonGroupRadio = React33__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const firstChildValue = React33__namespace.useMemo(() => {
+    const firstChildValue = React32__namespace.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] = React33__namespace.useState(defaultValue ?? firstChildValue);
-    const handleItemClick = React33__namespace.useCallback((event) => {
+    const [value, setValue] = React32__namespace.useState(defaultValue ?? firstChildValue);
+    const handleItemClick = React32__namespace.useCallback((event) => {
       const v = event.currentTarget.value;
       setValue(v);
       onChange?.(v);
     }, [onChange]);
-    const clonedChildren = React33__namespace.Children.map(children, (child) => {
-      return React33__namespace.cloneElement(child, {
+    const clonedChildren = React32__namespace.Children.map(children, (child) => {
+      return React32__namespace.cloneElement(child, {
         onClick: handleItemClick,
         selected: value === child.props.value,
         variant
       });
     });
-    const childrenLength = React33__namespace.Children.count(children);
+    const childrenLength = React32__namespace.Children.count(children);
     return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { loading, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -2466,11 +2279,11 @@ var ButtonGroupRadio = React33__namespace.forwardRef(
 );
 var NOOP = () => {
 };
-var CheckboxGroupContext = React33__namespace.createContext(null);
+var CheckboxGroupContext = React32__namespace.createContext(null);
 function useCheckboxGroupContext() {
-  return React33__namespace.useContext(CheckboxGroupContext);
+  return React32__namespace.useContext(CheckboxGroupContext);
 }
-var CheckboxGroupBase = React33__namespace.forwardRef(
+var CheckboxGroupBase = React32__namespace.forwardRef(
   function CheckboxGroup(props, ref) {
     const {
       children,
@@ -2482,10 +2295,10 @@ var CheckboxGroupBase = React33__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const [uncontrolledValue, setUncontrolledValue] = React33__namespace.useState(defaultValue ?? []);
+    const [uncontrolledValue, setUncontrolledValue] = React32__namespace.useState(defaultValue ?? []);
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : uncontrolledValue;
-    const toggle = React33__namespace.useCallback(
+    const toggle = React32__namespace.useCallback(
       (itemValue) => {
         const next = value.includes(itemValue) ? value.filter((v) => v !== itemValue) : [...value, itemValue];
         if (!isControlled) {
@@ -2495,12 +2308,12 @@ var CheckboxGroupBase = React33__namespace.forwardRef(
       },
       [value, isControlled, onValueChange]
     );
-    React33__namespace.useEffect(() => {
+    React32__namespace.useEffect(() => {
       if (isControlled) {
         setUncontrolledValue(controlledValue);
       }
     }, [isControlled, controlledValue]);
-    const ctx = React33__namespace.useMemo(() => ({ value, toggle }), [value, toggle]);
+    const ctx = React32__namespace.useMemo(() => ({ value, toggle }), [value, toggle]);
     return /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -2518,7 +2331,7 @@ var CheckboxGroupBase = React33__namespace.forwardRef(
   }
 );
 var CheckboxGroup2 = CheckboxGroupBase;
-var SIZE_CLASSES6 = {
+var SIZE_CLASSES5 = {
   sm: {
     root: "gap-1.5",
     control: "h-3.5 w-3.5 rounded-sm",
@@ -2558,7 +2371,7 @@ var IndeterminateIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
     children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 0H12V2H0V0Z", fill: "currentColor" })
   }
 );
-var CheckboxBase = React33__namespace.forwardRef(
+var CheckboxBase = React32__namespace.forwardRef(
   function Checkbox(props, ref) {
     const {
       icon,
@@ -2579,8 +2392,8 @@ var CheckboxBase = React33__namespace.forwardRef(
       ...rest
     } = props;
     const group = useCheckboxGroupContext();
-    const hiddenInputRef = React33__namespace.useRef(null);
-    const setHiddenInputRef = React33__namespace.useCallback(
+    const hiddenInputRef = React32__namespace.useRef(null);
+    const setHiddenInputRef = React32__namespace.useCallback(
       (node) => {
         hiddenInputRef.current = node;
         if (typeof ref === "function") {
@@ -2593,7 +2406,7 @@ var CheckboxBase = React33__namespace.forwardRef(
     );
     const isInGroup = group !== null && value !== void 0;
     const groupChecked = isInGroup ? group.value.includes(value) : void 0;
-    const [internalChecked, setInternalChecked] = React33__namespace.useState(
+    const [internalChecked, setInternalChecked] = React32__namespace.useState(
       defaultChecked ?? false
     );
     const isControlled = checkedProp !== void 0 || isInGroup;
@@ -2605,7 +2418,7 @@ var CheckboxBase = React33__namespace.forwardRef(
     } else {
       checkedState = internalChecked;
     }
-    const handleCheckedChange = React33__namespace.useCallback(
+    const handleCheckedChange = React32__namespace.useCallback(
       (nextChecked) => {
         if (readOnly) return;
         if (!isControlled) {
@@ -2628,7 +2441,7 @@ var CheckboxBase = React33__namespace.forwardRef(
       },
       [readOnly, isControlled, isInGroup, group, value, onCheckedChange, onChange]
     );
-    const sizeClasses2 = SIZE_CLASSES6[size];
+    const sizeClasses2 = SIZE_CLASSES5[size];
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
@@ -2770,7 +2583,7 @@ function resolveSpacing(v) {
   }
   return void 0;
 }
-var Link = React33__namespace.default.forwardRef(
+var Link = React32__namespace.default.forwardRef(
   function Link2(props, ref) {
     const {
       external,
@@ -2859,7 +2672,7 @@ var Link = React33__namespace.default.forwardRef(
     ) });
   }
 );
-var LinkBox = React33__namespace.default.forwardRef(
+var LinkBox = React32__namespace.default.forwardRef(
   function LinkBox2(props, ref) {
     const { className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2872,7 +2685,7 @@ var LinkBox = React33__namespace.default.forwardRef(
     );
   }
 );
-var LinkOverlay = React33__namespace.default.forwardRef(
+var LinkOverlay = React32__namespace.default.forwardRef(
   function LinkOverlay2(props, ref) {
     const {
       children,
@@ -2953,8 +2766,8 @@ var LinkOverlay = React33__namespace.default.forwardRef(
   }
 );
 function useUpdateEffect(effect, deps) {
-  const isFirstMount = React33__namespace.default.useRef(true);
-  React33__namespace.default.useEffect(() => {
+  const isFirstMount = React32__namespace.default.useRef(true);
+  React32__namespace.default.useEffect(() => {
     if (isFirstMount.current) {
       isFirstMount.current = false;
       return;
@@ -2963,71 +2776,81 @@ function useUpdateEffect(effect, deps) {
   }, deps);
 }
 function scrollToElement(id) {
-  const el = document.getElementById(id);
-  if (el) {
-    el.scrollIntoView({ behavior: "smooth", block: "start" });
-  }
+  document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
 }
 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] = React33__namespace.default.useState(isExpandedProp);
-  const handleClick = React33__namespace.default.useCallback((event) => {
+  const {
+    children,
+    id = CUT_ID,
+    onClick,
+    isExpanded: isExpandedProp = false,
+    text: textProp,
+    loading,
+    noScroll,
+    ...rest
+  } = props;
+  const [isExpanded, setIsExpanded] = React32__namespace.default.useState(isExpandedProp);
+  const handleClick = React32__namespace.default.useCallback((event) => {
     setIsExpanded((flag) => !flag);
-    if (!noScroll) {
-      scrollToElement(id);
-    }
+    if (!noScroll) scrollToElement(id);
     onClick?.(event);
   }, [id, noScroll, onClick]);
   useUpdateEffect(() => {
     setIsExpanded(isExpandedProp);
-    if (isExpandedProp && !noScroll) {
-      scrollToElement(id);
-    }
+    if (isExpandedProp && !noScroll) scrollToElement(id);
   }, [isExpandedProp, id, noScroll]);
   const text = isExpanded ? textProp?.[1] ?? "Hide details" : textProp?.[0] ?? "View details";
-  return /* @__PURE__ */ jsxRuntime.jsxs(Collapsible__namespace.Root, { open: isExpanded, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(gui.Collapsible, { open: isExpanded, onOpenChange: setIsExpanded, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       Link,
       {
         className: "text-sm underline decoration-dashed w-fit",
+        "aria-expanded": isExpanded,
         onClick: handleClick,
         loading,
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx("span", { id, children: text })
       }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Content, { children })
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(gui.Collapsible.Content, { children })
   ] });
 };
+var CUT_LENGTH = 3;
 var CollapsibleList = (props) => {
-  const CUT_LENGTH = 3;
-  const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, text: textProp, defaultExpanded = false, className, ...rest } = props;
-  const [isExpanded, setIsExpanded] = React33__namespace.default.useState(defaultExpanded);
-  React33__namespace.default.useEffect(() => {
+  const {
+    items,
+    renderItem,
+    triggerProps,
+    cutLength = CUT_LENGTH,
+    text: textProp,
+    defaultExpanded = false,
+    ...rest
+  } = props;
+  const [isExpanded, setIsExpanded] = React32__namespace.default.useState(defaultExpanded);
+  React32__namespace.default.useEffect(() => {
     setIsExpanded(defaultExpanded);
   }, [defaultExpanded]);
-  const handleToggle = React33__namespace.default.useCallback(() => {
-    setIsExpanded((flag) => !flag);
-  }, []);
+  const handleToggle = React32__namespace.default.useCallback(() => setIsExpanded((flag) => !flag), []);
   const text = isExpanded ? textProp?.[1] ?? "Hide" : textProp?.[0] ?? "Show all";
-  return /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Root, { open: isExpanded, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col w-full", className), ...rest, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { width: "100%", ...rest, children: [
     items.slice(0, isExpanded ? void 0 : cutLength).map(renderItem),
-    items.length > cutLength && /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    items.length > cutLength && /* @__PURE__ */ jsxRuntime.jsx(
       Link,
       {
         className: "text-sm underline decoration-dashed w-fit min-w-0",
+        "aria-expanded": isExpanded,
         onClick: handleToggle,
         ...triggerProps,
         children: text
       }
-    ) })
-  ] }) });
+    )
+  ] });
 };
-var ColorModeContext = React33__namespace.createContext(void 0);
+var ColorModeContext = React32__namespace.createContext(void 0);
 function ColorModeProvider(props) {
   const { children, defaultTheme = "light", value: controlledValue, onValueChange } = props;
-  const [internalMode, setInternalMode] = React33__namespace.useState(() => {
+  const [internalMode, setInternalMode] = React32__namespace.useState(() => {
     if (controlledValue === "dark" || controlledValue === "light") {
       return controlledValue;
     }
@@ -3037,7 +2860,7 @@ function ColorModeProvider(props) {
     return defaultTheme === "dark" ? "dark" : "light";
   });
   const colorMode = controlledValue === "dark" || controlledValue === "light" ? controlledValue : internalMode;
-  const setColorMode = React33__namespace.useCallback((mode) => {
+  const setColorMode = React32__namespace.useCallback((mode) => {
     const resolved = mode === "dark" ? "dark" : "light";
     setInternalMode(resolved);
     onValueChange?.(resolved);
@@ -3046,19 +2869,19 @@ function ColorModeProvider(props) {
       document.documentElement.classList.toggle("light", resolved === "light");
     }
   }, [onValueChange]);
-  const toggleColorMode = React33__namespace.useCallback(() => {
+  const toggleColorMode = React32__namespace.useCallback(() => {
     setColorMode(colorMode === "dark" ? "light" : "dark");
   }, [colorMode, setColorMode]);
-  const ctx = React33__namespace.useMemo(
+  const ctx = React32__namespace.useMemo(
     () => ({ colorMode, setColorMode, toggleColorMode }),
     [colorMode, setColorMode, toggleColorMode]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(ColorModeContext.Provider, { value: ctx, children });
 }
 function useColorMode() {
-  const ctx = React33__namespace.useContext(ColorModeContext);
+  const ctx = React32__namespace.useContext(ColorModeContext);
   if (!ctx) {
-    const [mode, setMode] = React33__namespace.useState(() => {
+    const [mode, setMode] = React32__namespace.useState(() => {
       if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
         return "dark";
       }
@@ -3102,9 +2925,9 @@ function BackToButton({ onClick }) {
     }
   );
 }
-var DialogSizeContext = React33__namespace.createContext({ size: "md" });
+var DialogSizeContext = React32__namespace.createContext({ size: "md" });
 function useDialogSizeContext() {
-  return React33__namespace.useContext(DialogSizeContext);
+  return React32__namespace.useContext(DialogSizeContext);
 }
 var CONTENT_SIZE_MAP = {
   sm: "max-w-[400px]",
@@ -3136,13 +2959,13 @@ var DialogRoot = ({
   modal = true
   // motionPreset is intentionally unused -- kept for API compat
 }) => {
-  const handleOpenChange = React33__namespace.useCallback(
+  const handleOpenChange = React32__namespace.useCallback(
     (nextOpen) => {
       onOpenChange?.({ open: nextOpen });
     },
     [onOpenChange]
   );
-  const ctx = React33__namespace.useMemo(() => ({ size }), [size]);
+  const ctx = React32__namespace.useMemo(() => ({ size }), [size]);
   return /* @__PURE__ */ jsxRuntime.jsx(DialogSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
     gui.Dialog,
     {
@@ -3154,7 +2977,7 @@ var DialogRoot = ({
     }
   ) });
 };
-var DialogContent = React33__namespace.forwardRef(function DialogContent2(props, ref) {
+var DialogContent = React32__namespace.forwardRef(function DialogContent2(props, ref) {
   const {
     children,
     portalled: _portalled = true,
@@ -3211,11 +3034,11 @@ var DialogContent = React33__namespace.forwardRef(function DialogContent2(props,
     )
   ] });
 });
-var DialogCloseTrigger = React33__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
+var DialogCloseTrigger = React32__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
 });
-var DialogHeader = React33__namespace.forwardRef(function DialogHeader2(props, ref) {
+var DialogHeader = React32__namespace.forwardRef(function DialogHeader2(props, ref) {
   const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
   const startElement = startElementProp ?? (onBackToClick ? /* @__PURE__ */ jsxRuntime.jsx(BackToButton, { onClick: onBackToClick }) : void 0);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3245,7 +3068,7 @@ var DialogHeader = React33__namespace.forwardRef(function DialogHeader2(props, r
     }
   );
 });
-var DialogBody = React33__namespace.forwardRef(function DialogBody2({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
+var DialogBody = React32__namespace.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 } : {},
@@ -3262,7 +3085,7 @@ var DialogBody = React33__namespace.forwardRef(function DialogBody2({ className,
     }
   );
 });
-var DialogFooter = React33__namespace.forwardRef(function DialogFooter2({ className, ...props }, ref) {
+var DialogFooter = React32__namespace.forwardRef(function DialogFooter2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -3282,7 +3105,7 @@ function upperFirst(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 var ICONS = {};
-var EmptyState = React33__namespace.forwardRef(
+var EmptyState = React32__namespace.forwardRef(
   function EmptyState2(props, ref) {
     const { title, description, term, type = "query", icon, children, className, ...rest } = props;
     const titleContent = (() => {
@@ -3342,7 +3165,18 @@ function getComponentDisplayName(type) {
   if ("displayName" in type) return type.displayName;
   return void 0;
 }
-var Field = React33__namespace.forwardRef(
+var ERROR = "var(--color-text-error)";
+var MUTED = "var(--color-text-secondary)";
+var Marks = ({ required, optionalText, errorText }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  required && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { color: ERROR, "aria-hidden": true, children: "*" }),
+  !required && optionalText && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 14, color: MUTED, children: optionalText }),
+  errorText && /* @__PURE__ */ jsxRuntime.jsxs(gui.Text, { fontSize: 14, color: ERROR, children: [
+    "-",
+    space,
+    errorText
+  ] })
+] });
+var Field = React32__namespace.forwardRef(
   function Field2(props, ref) {
     const {
       label,
@@ -3360,148 +3194,92 @@ var Field = React33__namespace.forwardRef(
       className,
       style
     } = props;
+    const flags = {
+      "data-disabled": disabled || void 0,
+      "data-readonly": readOnly || void 0,
+      "data-invalid": invalid || void 0
+    };
     if (floating && label) {
-      const injectedProps2 = {
-        className: "peer",
-        placeholder: " ",
-        size,
-        floating,
-        disabled,
-        readOnly
-      };
+      const injectedProps = { className: "lux-field-control", placeholder: " ", size, floating, disabled, readOnly };
       const labelElement = /* @__PURE__ */ jsxRuntime.jsxs(
-        LabelPrimitive__namespace.Root,
+        gui.Label,
         {
-          className: cn(
-            "absolute left-3 top-1/2 -translate-y-1/2",
-            "text-[var(--color-input-placeholder,theme(colors.gray.400))]",
-            "pointer-events-none select-none",
-            "origin-top-left transition-all duration-150",
-            "peer-focus:top-1 peer-focus:translate-y-0 peer-focus:scale-75",
-            "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:scale-75"
-          ),
           htmlFor: id,
+          position: "absolute",
+          left: 12,
+          top: "50%",
+          pointerEvents: "none",
+          userSelect: "none",
+          flexDirection: "row",
+          gap: 4,
+          color: "var(--color-input-placeholder)",
+          className: "lux-field-float",
           children: [
             label,
-            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
-            !required && optionalText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm", children: optionalText }),
-            errorText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))] text-sm", children: [
-              "-",
-              space,
-              errorText
-            ] })
+            /* @__PURE__ */ jsxRuntime.jsx(Marks, { required, optionalText, errorText })
           ]
         }
       );
-      const helperTextElement = helperText ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }) : null;
-      const child2 = React33__namespace.Children.only(children);
+      const helperTextElement = helperText ? /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { marginTop: 6, fontSize: 12, color: MUTED, children: helperText }) : null;
+      const child2 = React32__namespace.Children.only(children);
       const isInputGroup = getComponentDisplayName(child2.type) === "InputGroup";
       if (isInputGroup) {
-        const inputElement2 = React33__namespace.cloneElement(
-          React33__namespace.Children.only(child2.props.children),
-          injectedProps2
-        );
-        const groupInputElement = React33__namespace.cloneElement(
-          child2,
-          {},
-          inputElement2,
-          labelElement
+        const inputElement = React32__namespace.cloneElement(
+          React32__namespace.Children.only(child2.props.children),
+          injectedProps
         );
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            ref,
-            id,
-            className: cn("relative w-full", className),
-            style,
-            "data-disabled": disabled || void 0,
-            "data-readonly": readOnly || void 0,
-            "data-invalid": invalid || void 0,
-            children: [
-              groupInputElement,
-              helperTextElement
-            ]
-          }
-        );
-      }
-      const inputElement = React33__namespace.cloneElement(child2, injectedProps2);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
+        return /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { ref, id, position: "relative", width: "100%", className, style, ...flags, children: [
+          React32__namespace.cloneElement(child2, {}, inputElement, labelElement),
+          helperTextElement
+        ] });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { ref, id, position: "relative", width: "100%", className, style, ...flags, children: [
+        React32__namespace.cloneElement(child2, injectedProps),
+        labelElement,
+        helperTextElement
+      ] });
+    }
+    const child = React32__namespace.Children.only(children);
+    return /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { ref, id, gap: 4, className, style, ...flags, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsxs(
+        gui.Label,
         {
-          ref,
-          id,
-          className: cn("relative w-full", className),
-          style,
-          "data-disabled": disabled || void 0,
-          "data-readonly": readOnly || void 0,
-          "data-invalid": invalid || void 0,
+          htmlFor: id,
+          flexDirection: "row",
+          gap: 4,
+          fontSize: 14,
+          fontWeight: "500",
+          color: "var(--color-text-primary)",
+          opacity: disabled ? 0.4 : 1,
           children: [
-            inputElement,
-            labelElement,
-            helperTextElement
+            label,
+            /* @__PURE__ */ jsxRuntime.jsx(Marks, { required, optionalText })
           ]
         }
-      );
-    }
-    const injectedProps = {
-      size
-    };
-    const child = React33__namespace.Children.only(children);
-    const clonedChild = React33__namespace.cloneElement(child, injectedProps);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        id,
-        className: cn("flex flex-col gap-1", className),
-        style,
-        "data-disabled": disabled || void 0,
-        "data-readonly": readOnly || void 0,
-        "data-invalid": invalid || void 0,
-        children: [
-          label && /* @__PURE__ */ jsxRuntime.jsxs(
-            LabelPrimitive__namespace.Root,
-            {
-              className: cn(
-                "text-sm font-medium text-[var(--color-field-label,theme(colors.gray.700))]",
-                "dark:text-[var(--color-field-label,theme(colors.gray.300))]",
-                disabled && "opacity-40"
-              ),
-              htmlFor: id,
-              children: [
-                label,
-                required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
-                !required && optionalText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm font-normal", children: optionalText })
-              ]
-            }
-          ),
-          clonedChild,
-          helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }),
-          errorText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--color-fg-error,theme(colors.red.500))]", children: errorText })
-        ]
-      }
-    );
+      ),
+      React32__namespace.cloneElement(child, { size }),
+      helperText && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 12, color: MUTED, children: helperText }),
+      errorText && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 12, color: ERROR, children: errorText })
+    ] });
   }
 );
-var LEVEL_TAG = { "1": gui.H1, "2": gui.H2, "3": gui.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 TAG = { "1": gui.H1, "2": gui.H2, "3": gui.H3 };
+var RAMP = {
+  "1": { fontSize: 18, lineHeight: 24, fontWeight: "500", $lg: { fontSize: 32, lineHeight: 40, letterSpacing: -0.5 } },
+  "2": { fontSize: 16, lineHeight: 24, fontWeight: "500", $lg: { fontSize: 24, lineHeight: 32 } },
+  "3": { fontSize: 14, lineHeight: 20, fontWeight: "600", $lg: { fontSize: 18, lineHeight: 24, fontWeight: "500" } }
 };
-var BASE_CLASSES4 = "font-heading text-heading";
-var Heading = React33__namespace.default.forwardRef(
-  function Heading2({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
-    const Tag3 = level ? LEVEL_TAG[level] : gui.H2;
-    const levelClasses = level ? LEVEL_CLASSES[level] : void 0;
-    const mergedStyle = mb !== void 0 ? { ...styleProp, marginBottom: typeof mb === "number" ? `${mb * 4}px` : mb } : styleProp;
+var Heading = React32__namespace.default.forwardRef(
+  function Heading2({ level, ...rest }, ref) {
+    const Tag3 = level ? TAG[level] : gui.H2;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Tag3,
       {
         ref,
         unstyled: true,
-        className: cn(BASE_CLASSES4, levelClasses, className),
-        style: mergedStyle,
+        fontFamily: "$heading",
+        color: "var(--color-heading)",
+        ...level ? RAMP[level] : null,
         ...rest
       }
     );
@@ -3524,60 +3302,75 @@ var IconButtonFrame = gui.styled(gui.View, {
     size: {
       "2xs": { width: 20, height: 20, borderRadius: 4 },
       "2xs_alt": { width: 20, height: 20, borderRadius: 4 },
-      md: { width: 32, height: 32, borderRadius: "var(--radius-base, 8px)" }
+      md: { width: 32, height: 32, borderRadius: 8 }
     },
     disabled: {
-      true: {
-        opacity: 0.4,
-        cursor: "not-allowed",
-        pointerEvents: "none"
-      }
+      true: { opacity: 0.4, cursor: "not-allowed", pointerEvents: "none" }
     }
   }
 });
-var VARIANT_CLASSES4 = {
-  plain: "bg-transparent text-inherit border-none hover:bg-transparent",
-  icon_secondary: [
-    "bg-transparent text-icon-secondary border-none",
-    "hover:text-hover",
-    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text",
-    "data-[selected]:hover:text-hover",
-    "data-[expanded]:text-hover"
-  ].join(" "),
-  icon_background: [
-    "bg-[var(--color-button-icon-background-bg)] text-icon-secondary border-none",
-    "hover:text-hover",
-    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text",
-    "data-[selected]:hover:text-hover",
-    "data-[expanded]:text-hover"
-  ].join(" "),
-  link: [
-    "bg-transparent text-link-primary border-none font-normal px-0 h-auto",
-    "hover:bg-transparent hover:text-link-primary-hover",
-    "disabled:text-text-secondary"
-  ].join(" "),
-  dropdown: [
-    "border-2 border-solid bg-transparent",
-    "text-[var(--color-button-dropdown-fg)] border-[var(--color-button-dropdown-border)]",
-    "hover:bg-transparent hover:text-hover hover:border-hover",
-    "data-[expanded]:bg-transparent data-[expanded]:text-hover data-[expanded]:border-hover",
-    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text data-[selected]:border-transparent",
-    "data-[selected]:hover:text-hover"
-  ].join(" "),
-  pagination: [
-    "border-2 border-solid bg-transparent",
-    "text-[var(--color-button-pagination-fg)] border-[var(--color-button-pagination-border)]",
-    "hover:bg-transparent hover:text-hover hover:border-hover",
-    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text data-[selected]:border-transparent"
-  ].join(" ")
-};
-var ICON_SIZE_CLASSES = {
-  "2xs": "[&_svg]:size-5",
-  "2xs_alt": "[&_svg]:size-3",
-  md: "[&_svg]:size-5"
+var HOVER = "var(--color-hover)";
+var SELECTED_BG = "var(--color-selected-control-bg)";
+var SELECTED_FG = "var(--color-selected-control-text)";
+var VARIANT = {
+  plain: {
+    rest: { backgroundColor: "transparent", hoverStyle: { backgroundColor: "transparent" } }
+  },
+  icon_secondary: {
+    rest: {
+      backgroundColor: "transparent",
+      color: "var(--color-icon-secondary)",
+      hoverStyle: { color: HOVER }
+    },
+    selected: { backgroundColor: SELECTED_BG, color: SELECTED_FG, hoverStyle: { color: HOVER } },
+    expanded: { color: HOVER }
+  },
+  icon_background: {
+    rest: {
+      backgroundColor: "var(--color-button-icon-background-bg)",
+      color: "var(--color-icon-secondary)",
+      hoverStyle: { color: HOVER }
+    },
+    selected: { backgroundColor: SELECTED_BG, color: SELECTED_FG, hoverStyle: { color: HOVER } },
+    expanded: { color: HOVER }
+  },
+  link: {
+    rest: {
+      backgroundColor: "transparent",
+      color: "var(--color-link-primary)",
+      fontWeight: "400",
+      paddingHorizontal: 0,
+      height: "auto",
+      hoverStyle: { backgroundColor: "transparent", color: "var(--color-link-primary-hover)" },
+      disabledStyle: { color: "var(--color-text-secondary)" }
+    }
+  },
+  dropdown: {
+    rest: {
+      borderWidth: 2,
+      borderStyle: "solid",
+      backgroundColor: "transparent",
+      color: "var(--color-button-dropdown-fg)",
+      borderColor: "var(--color-button-dropdown-border)",
+      hoverStyle: { backgroundColor: "transparent", color: HOVER, borderColor: HOVER }
+    },
+    selected: { backgroundColor: SELECTED_BG, color: SELECTED_FG, borderColor: "transparent", hoverStyle: { color: HOVER } },
+    expanded: { backgroundColor: "transparent", color: HOVER, borderColor: HOVER }
+  },
+  pagination: {
+    rest: {
+      borderWidth: 2,
+      borderStyle: "solid",
+      backgroundColor: "transparent",
+      color: "var(--color-button-pagination-fg)",
+      borderColor: "var(--color-button-pagination-border)",
+      hoverStyle: { backgroundColor: "transparent", color: HOVER, borderColor: HOVER }
+    },
+    selected: { backgroundColor: SELECTED_BG, color: SELECTED_FG, borderColor: "transparent" }
+  }
 };
-var SP2 = 4;
-var IconButton = React33__namespace.forwardRef(
+var ICON_SIZE = { "2xs": 20, "2xs_alt": 12, md: 20 };
+var IconButton = React32__namespace.forwardRef(
   function IconButton2(props, ref) {
     const {
       size,
@@ -3590,58 +3383,43 @@ var IconButton = React33__namespace.forwardRef(
       disabled,
       className,
       children,
-      as: _as,
+      as: asProp,
       style: styleProp,
-      // Strip Chakra style props
-      boxSize: _boxSize,
-      color: _color,
-      px: _px,
-      borderRadius: _borderRadius,
-      ml: _ml,
-      mr: _mr,
-      _hover,
-      _expanded,
       ...rest
     } = props;
-    const shimStyle = { ...styleProp };
-    if (_boxSize !== void 0) {
-      const bs = typeof _boxSize === "number" ? `${_boxSize * SP2}px` : _boxSize;
-      shimStyle.width = bs;
-      shimStyle.height = bs;
-    }
-    if (_color) shimStyle.color = _color;
-    if (_px !== void 0) {
-      const v = typeof _px === "number" ? `${_px * SP2}px` : _px;
-      shimStyle.paddingLeft = v;
-      shimStyle.paddingRight = v;
-    }
-    if (_borderRadius) shimStyle.borderRadius = _borderRadius;
-    if (_ml !== void 0) shimStyle.marginLeft = typeof _ml === "number" ? `${_ml * SP2}px` : _ml;
-    if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * SP2}px` : _mr;
-    const mergedStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
-    const variantClass = VARIANT_CLASSES4[variant] ?? VARIANT_CLASSES4.plain;
-    const iconSizeClass = size ? ICON_SIZE_CLASSES[size] ?? "" : "";
-    const combinedClassName = [variantClass, iconSizeClass, className].filter(Boolean).join(" ");
+    const look = VARIANT[variant] ?? VARIANT.plain;
+    const iconSize = size ? ICON_SIZE[size] : void 0;
     const button = /* @__PURE__ */ jsxRuntime.jsx(
       IconButtonFrame,
       {
         ref,
         size,
         disabled: !loadingSkeleton && (loading || disabled) || void 0,
-        render: _as ? React33__namespace.createElement(_as) : void 0,
-        className: combinedClassName,
-        style: mergedStyle,
+        render: asProp ? React32__namespace.createElement(asProp) : void 0,
+        className: ["lux-icon", className].filter(Boolean).join(" "),
+        style: { ...styleProp, ...iconSize ? { "--icon-size": `${iconSize}px` } : null },
+        ...look.rest,
+        ...selected ? look.selected : null,
+        ...expanded ? look.expanded : null,
         ...expanded ? { "data-expanded": true } : {},
         ...selected ? { "data-selected": true } : {},
         ...highlighted ? { "data-highlighted": true } : {},
         ...loadingSkeleton ? { "data-loading-skeleton": true } : {},
         ...rest,
         children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+          gui.View,
           {
-            className: "inline-block size-5 animate-spin rounded-full border-2 border-current border-b-transparent border-l-transparent",
+            className: "lux-spin",
+            render: /* @__PURE__ */ jsxRuntime.jsx("span", {}),
             role: "status",
-            "aria-label": "Loading"
+            "aria-label": "Loading",
+            width: 20,
+            height: 20,
+            borderRadius: 1e3,
+            borderWidth: 2,
+            borderColor: "currentColor",
+            borderBottomColor: "transparent",
+            borderLeftColor: "transparent"
           }
         ) : children
       }
@@ -3799,31 +3577,31 @@ function extractStyleProps(props) {
   }
   return { styleProps, rest };
 }
-var Image = React33__namespace.default.forwardRef(
+var Image = React32__namespace.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] = React33__namespace.default.useState(true);
-    const [error, setError] = React33__namespace.default.useState(false);
-    const handleLoadError = React33__namespace.default.useCallback((event) => {
+    const [loading, setLoading] = React32__namespace.default.useState(true);
+    const [error, setError] = React32__namespace.default.useState(false);
+    const handleLoadError = React32__namespace.default.useCallback((event) => {
       setError(true);
       setLoading(false);
       onError?.(event);
     }, [onError]);
-    const handleLoadSuccess = React33__namespace.default.useCallback((event) => {
+    const handleLoadSuccess = React32__namespace.default.useCallback((event) => {
       setLoading(false);
       onLoad?.(event);
     }, [onLoad]);
     const passthroughProps = allRest;
     if (!src && fallback) {
-      if (React33__namespace.default.isValidElement(fallback)) {
-        return React33__namespace.default.cloneElement(fallback, passthroughProps);
+      if (React32__namespace.default.isValidElement(fallback)) {
+        return React32__namespace.default.cloneElement(fallback, passthroughProps);
       }
       return fallback;
     }
     if (error) {
-      if (React33__namespace.default.isValidElement(fallback)) {
-        return React33__namespace.default.cloneElement(fallback, passthroughProps);
+      if (React32__namespace.default.isValidElement(fallback)) {
+        return React32__namespace.default.cloneElement(fallback, passthroughProps);
       }
       return fallback;
     }
@@ -3856,32 +3634,31 @@ var Image = React33__namespace.default.forwardRef(
     ] });
   }
 );
-var INPUT_BASE = [
-  "w-full appearance-none outline-none transition-colors",
-  "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
-  "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
-  "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
-  "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
-  "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
-  "disabled:opacity-40 disabled:cursor-not-allowed",
-  "read-only:opacity-70",
-  "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
-].join(" ");
-var INPUT_SIZE_CLASSES = {
-  xs: "h-6 px-2 text-xs rounded",
-  sm: "h-8 px-3 text-sm rounded-md",
-  md: "h-10 px-4 text-base rounded-md",
-  lg: "h-12 px-4 text-lg rounded-lg",
-  "2xl": "h-14 px-4 text-xl rounded-lg"
+var SIZE = {
+  xs: { height: 24, paddingHorizontal: 8, fontSize: 12, borderRadius: 4 },
+  sm: { height: 32, paddingHorizontal: 12, fontSize: 14, borderRadius: 6 },
+  md: { height: 40, paddingHorizontal: 16, fontSize: 16, borderRadius: 6 },
+  lg: { height: 48, paddingHorizontal: 16, fontSize: 18, borderRadius: 8 },
+  "2xl": { height: 56, paddingHorizontal: 16, fontSize: 20, borderRadius: 8 }
 };
-var INPUT_VARIANT_CLASSES = {
-  outline: "border border-solid",
-  filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
-  unstyled: "border-0 bg-transparent p-0 h-auto"
+var VARIANT2 = {
+  outline: { borderWidth: 1, borderStyle: "solid" },
+  filled: { borderWidth: 0, backgroundColor: "var(--color-input-filled-bg)" },
+  unstyled: { borderWidth: 0, backgroundColor: "transparent", padding: 0, height: "auto" }
 };
-var Input = React33__namespace.default.forwardRef(
+var CONTROL = {
+  width: "100%",
+  outlineWidth: 0,
+  backgroundColor: "var(--color-input-bg)",
+  color: "var(--color-input-fg)",
+  borderColor: "var(--color-input-border)",
+  hoverStyle: { borderColor: "var(--color-input-border-hover)" },
+  focusStyle: { borderColor: "var(--color-input-border-focus)" },
+  disabledStyle: { opacity: 0.4, cursor: "not-allowed" }
+};
+var Input = React32__namespace.default.forwardRef(
   ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
-    const handleChange = React33__namespace.default.useCallback(
+    const handleChange = React32__namespace.default.useCallback(
       (event) => {
         onChange?.(event);
         onChangeText?.(event.target.value);
@@ -3893,7 +3670,10 @@ var Input = React33__namespace.default.forwardRef(
       {
         ref,
         unstyled: true,
-        className: cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className),
+        className: className ? `lux-control ${className}` : "lux-control",
+        ...CONTROL,
+        ...SIZE[size],
+        ...VARIANT2[variant],
         ...rest,
         onChange: handleChange
       }
@@ -3901,12 +3681,8 @@ var Input = React33__namespace.default.forwardRef(
   }
 );
 Input.displayName = "Input";
-function getComponentDisplayName2(type) {
-  if (typeof type === "string") return void 0;
-  if ("displayName" in type) return type.displayName;
-  return void 0;
-}
-var InputGroup = React33__namespace.forwardRef(
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React32__namespace.useLayoutEffect : React32__namespace.useEffect;
+var InputGroup = React32__namespace.forwardRef(
   function InputGroup2(props, ref) {
     const {
       startElement,
@@ -3919,11 +3695,11 @@ var InputGroup = React33__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const startElementRef = React33__namespace.useRef(null);
-    const endElementRef = React33__namespace.useRef(null);
-    const groupRef = React33__namespace.useRef(null);
-    const [inlinePaddings, setInlinePaddings] = React33__namespace.useState();
-    const calculateInlinePaddings = React33__namespace.useCallback(() => {
+    const startElementRef = React32__namespace.useRef(null);
+    const endElementRef = React32__namespace.useRef(null);
+    const groupRef = React32__namespace.useRef(null);
+    const [inlinePaddings, setInlinePaddings] = React32__namespace.useState();
+    const calculateInlinePaddings = React32__namespace.useCallback(() => {
       const startWidth = startElementRef.current?.getBoundingClientRect().width ?? 0;
       const endWidth = endElementRef.current?.getBoundingClientRect().width ?? 0;
       setInlinePaddings({
@@ -3931,12 +3707,12 @@ var InputGroup = React33__namespace.forwardRef(
         end: endWidth
       });
     }, []);
-    React33__namespace.useEffect(() => {
+    React32__namespace.useEffect(() => {
       if (!groupRef.current) return;
       let timeoutId;
       const intersectionObserver = new IntersectionObserver(
-        (entries) => {
-          const entry = entries[0];
+        (entries2) => {
+          const entry = entries2[0];
           if (entry && entry.isIntersecting) {
             timeoutId = setTimeout(calculateInlinePaddings, 50);
           }
@@ -3951,7 +3727,7 @@ var InputGroup = React33__namespace.forwardRef(
         }
       };
     }, [calculateInlinePaddings]);
-    React33__namespace.useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       calculateInlinePaddings();
       const resizeHandler = esToolkit.debounce(calculateInlinePaddings, 300);
       const resizeObserver = new ResizeObserver(resizeHandler);
@@ -3962,7 +3738,7 @@ var InputGroup = React33__namespace.forwardRef(
         resizeObserver.disconnect();
       };
     }, [calculateInlinePaddings]);
-    const combinedRef = React33__namespace.useCallback((node) => {
+    const combinedRef = React32__namespace.useCallback((node) => {
       groupRef.current = node;
       if (typeof ref === "function") {
         ref(node);
@@ -3991,16 +3767,19 @@ var InputGroup = React33__namespace.forwardRef(
               children: startElement
             }
           ),
-          React33__namespace.Children.map(children, (child) => {
-            if (getComponentDisplayName2(child.type) !== "FieldInput") {
+          React32__namespace.Children.map(children, (child) => {
+            if (!React32__namespace.isValidElement(child)) {
               return child;
             }
-            return React33__namespace.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
-              value: inlinePaddings ? child.props.value : void 0,
-              placeholder: inlinePaddings ? child.props.placeholder : void 0
+            const start = startElement ? startOffset ?? inlinePaddings?.start : void 0;
+            const end = endElement ? endOffset ?? inlinePaddings?.end : void 0;
+            const px = (v) => typeof v === "number" ? `${v}px` : v;
+            return React32__namespace.cloneElement(child, {
+              style: {
+                ...child.props.style,
+                ...start !== void 0 && { paddingInlineStart: px(start) },
+                ...end !== void 0 && { paddingInlineEnd: px(end) }
+              }
             });
           }),
           endElement && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4021,7 +3800,7 @@ var InputGroup = React33__namespace.forwardRef(
   }
 );
 InputGroup.displayName = "InputGroup";
-var INPUT_BASE2 = [
+var INPUT_BASE = [
   "w-10 h-10",
   "text-center text-sm font-medium",
   "border-2 rounded-md",
@@ -4035,7 +3814,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 = React33__namespace.forwardRef(
+var PinInput = React32__namespace.forwardRef(
   function PinInput2(props, ref) {
     const {
       count = 6,
@@ -4053,12 +3832,12 @@ var PinInput = React33__namespace.forwardRef(
       bgColor,
       className
     } = props;
-    const inputRefs = React33__namespace.useRef([]);
-    const values = React33__namespace.useMemo(
+    const inputRefs = React32__namespace.useRef([]);
+    const values = React32__namespace.useMemo(
       () => controlledValue ?? Array.from({ length: count }).fill(""),
       [controlledValue, count]
     );
-    const updateValue = React33__namespace.useCallback((index, char) => {
+    const updateValue = React32__namespace.useCallback((index, char) => {
       const next = [...values];
       next[index] = char;
       onValueChange?.({ value: next });
@@ -4066,11 +3845,11 @@ var PinInput = React33__namespace.forwardRef(
         onValueComplete?.({ value: next });
       }
     }, [values, onValueChange, onValueComplete]);
-    const focusInput = React33__namespace.useCallback((index) => {
+    const focusInput = React32__namespace.useCallback((index) => {
       const clamped = Math.max(0, Math.min(index, count - 1));
       inputRefs.current[clamped]?.focus();
     }, [count]);
-    const handleInput = React33__namespace.useCallback((index, e) => {
+    const handleInput = React32__namespace.useCallback((index, e) => {
       const target = e.currentTarget;
       const char = target.value.slice(-1);
       updateValue(index, char);
@@ -4078,7 +3857,7 @@ var PinInput = React33__namespace.forwardRef(
         focusInput(index + 1);
       }
     }, [count, updateValue, focusInput]);
-    const handleKeyDown = React33__namespace.useCallback((index, e) => {
+    const handleKeyDown = React32__namespace.useCallback((index, e) => {
       if (e.key === "Backspace") {
         if (values[index]) {
           updateValue(index, "");
@@ -4095,7 +3874,7 @@ var PinInput = React33__namespace.forwardRef(
         e.preventDefault();
       }
     }, [count, values, updateValue, focusInput]);
-    const handlePaste = React33__namespace.useCallback((e) => {
+    const handlePaste = React32__namespace.useCallback((e) => {
       e.preventDefault();
       const pasted = e.clipboardData.getData("text/plain").trim();
       if (!pasted) {
@@ -4112,18 +3891,18 @@ var PinInput = React33__namespace.forwardRef(
       }
       focusInput(Math.min(chars.length, count - 1));
     }, [count, values, onValueChange, onValueComplete, focusInput]);
-    const handleFocus = React33__namespace.useCallback((e) => {
+    const handleFocus = React32__namespace.useCallback((e) => {
       e.currentTarget.select();
     }, []);
-    const handleNoop = React33__namespace.useCallback(() => {
+    const handleNoop = React32__namespace.useCallback(() => {
     }, []);
-    const setInputRef = React33__namespace.useCallback((index) => (el) => {
+    const setInputRef = React32__namespace.useCallback((index) => (el) => {
       inputRefs.current[index] = el;
     }, []);
-    const onInputAtIndex = React33__namespace.useCallback((index) => (e) => {
+    const onInputAtIndex = React32__namespace.useCallback((index) => (e) => {
       handleInput(index, e);
     }, [handleInput]);
-    const onKeyDownAtIndex = React33__namespace.useCallback((index) => (e) => {
+    const onKeyDownAtIndex = React32__namespace.useCallback((index) => (e) => {
       handleKeyDown(index, e);
     }, [handleKeyDown]);
     const bgStyle = bgColor ? { backgroundColor: `var(--color-${bgColor.replace(/\./g, "-")})` } : void 0;
@@ -4152,7 +3931,7 @@ var PinInput = React33__namespace.forwardRef(
           "aria-invalid": invalid || void 0,
           value: values[index] || "",
           className: cn(
-            INPUT_BASE2,
+            INPUT_BASE,
             values[index] && INPUT_FILLED,
             invalid && INPUT_INVALID,
             attached && index > 0 && "-ml-0.5"
@@ -4169,7 +3948,7 @@ var PinInput = React33__namespace.forwardRef(
     ] });
   }
 );
-function parsePlacement2(placement) {
+function parsePlacement(placement) {
   if (!placement) {
     return { side: "bottom", align: "start" };
   }
@@ -4184,7 +3963,7 @@ function parsePlacement2(placement) {
   }
   return { side, align };
 }
-var PositioningContext2 = React33__namespace.createContext({
+var PositioningContext = React32__namespace.createContext({
   side: "bottom",
   align: "start",
   sideOffset: 4,
@@ -4217,8 +3996,8 @@ var PopoverRoot = (props) => {
       ...positioning?.offset
     }
   };
-  const { side, align } = parsePlacement2(mergedPositioning.placement);
-  const positioningValue = React33__namespace.useMemo(() => ({
+  const { side, align } = parsePlacement(mergedPositioning.placement);
+  const positioningValue = React32__namespace.useMemo(() => ({
     side,
     align,
     sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
@@ -4235,12 +4014,12 @@ var PopoverRoot = (props) => {
     autoFocus,
     closeOnInteractOutside
   ]);
-  const handleOpenChange = React33__namespace.useCallback((isOpen) => {
+  const handleOpenChange = React32__namespace.useCallback((isOpen) => {
     onOpenChange?.({ open: isOpen });
   }, [onOpenChange]);
   const placement = mergedPositioning.placement ?? "bottom-start";
   const offset = mergedPositioning.offset?.mainAxis ?? 4;
-  return /* @__PURE__ */ jsxRuntime.jsx(PositioningContext2.Provider, { value: positioningValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     gui.Popover,
     {
       open,
@@ -4253,11 +4032,11 @@ var PopoverRoot = (props) => {
     }
   ) });
 };
-var PopoverTrigger = React33__namespace.forwardRef(function PopoverTrigger2(props, ref) {
+var PopoverTrigger = React32__namespace.forwardRef(function PopoverTrigger2(props, ref) {
   const { asChild = true, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(gui.Popover.Trigger, { asChild: asChild ? "except-style" : void 0, ref, ...rest });
 });
-var PopoverContent = React33__namespace.forwardRef(function PopoverContent2(props, ref) {
+var PopoverContent = React32__namespace.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 = {
@@ -4275,7 +4054,7 @@ var PopoverContent = React33__namespace.forwardRef(function PopoverContent2(prop
       className: cn(
         "z-50 rounded-lg border border-[var(--color-popover-border,var(--color-border-divider))]",
         "bg-[var(--color-popover-bg,var(--color-dialog-bg))]",
-        "shadow-[var(--shadow-popover,var(--shadow-lg))]",
+        "shadow-[var(--shadow-popover)]",
         "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",
@@ -4288,7 +4067,7 @@ var PopoverContent = React33__namespace.forwardRef(function PopoverContent2(prop
     }
   );
 });
-var PopoverArrow = React33__namespace.forwardRef(function PopoverArrow2(props, ref) {
+var PopoverArrow = React32__namespace.forwardRef(function PopoverArrow2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     gui.Popover.Arrow,
@@ -4300,7 +4079,7 @@ var PopoverArrow = React33__namespace.forwardRef(function PopoverArrow2(props, r
     }
   );
 });
-var PopoverCloseTrigger = React33__namespace.forwardRef(function PopoverCloseTrigger2(props, ref) {
+var PopoverCloseTrigger = React32__namespace.forwardRef(function PopoverCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     gui.Popover.Close,
@@ -4314,14 +4093,14 @@ var PopoverCloseTrigger = React33__namespace.forwardRef(function PopoverCloseTri
     }
   );
 });
-var PopoverCloseTriggerWrapper = React33__namespace.forwardRef(function PopoverCloseTriggerWrapper2(props, ref) {
+var PopoverCloseTriggerWrapper = React32__namespace.forwardRef(function PopoverCloseTriggerWrapper2(props, ref) {
   const { disabled, children, ...rest } = props;
   if (disabled) {
     return children;
   }
   return /* @__PURE__ */ jsxRuntime.jsx(gui.Popover.Close, { ref, ...rest, asChild: true, children });
 });
-var PopoverBody = React33__namespace.forwardRef(function PopoverBody2(props, ref) {
+var PopoverBody = React32__namespace.forwardRef(function PopoverBody2(props, ref) {
   const {
     className,
     style: styleProp,
@@ -4359,7 +4138,7 @@ var PopoverBody = React33__namespace.forwardRef(function PopoverBody2(props, ref
     }
   );
 });
-var PopoverHeader = React33__namespace.forwardRef(function PopoverHeader2(props, ref) {
+var PopoverHeader = React32__namespace.forwardRef(function PopoverHeader2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -4370,7 +4149,7 @@ var PopoverHeader = React33__namespace.forwardRef(function PopoverHeader2(props,
     }
   );
 });
-var PopoverFooter = React33__namespace.forwardRef(function PopoverFooter2(props, ref) {
+var PopoverFooter = React32__namespace.forwardRef(function PopoverFooter2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -4381,7 +4160,7 @@ var PopoverFooter = React33__namespace.forwardRef(function PopoverFooter2(props,
     }
   );
 });
-var PopoverTitle = React33__namespace.forwardRef(function PopoverTitle2(props, ref) {
+var PopoverTitle = React32__namespace.forwardRef(function PopoverTitle2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "h3",
@@ -4392,7 +4171,7 @@ var PopoverTitle = React33__namespace.forwardRef(function PopoverTitle2(props, r
     }
   );
 });
-var PopoverDescription = React33__namespace.forwardRef(function PopoverDescription2(props, ref) {
+var PopoverDescription = React32__namespace.forwardRef(function PopoverDescription2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "p",
@@ -4403,7 +4182,7 @@ var PopoverDescription = React33__namespace.forwardRef(function PopoverDescripti
     }
   );
 });
-var SIZE_CLASSES7 = {
+var SIZE_CLASSES6 = {
   sm: "h-1",
   md: "h-2",
   lg: "h-3",
@@ -4414,7 +4193,7 @@ function normalizeValue(value, min, max) {
   if (max <= min) return 0;
   return Math.round((value - min) / (max - min) * 100);
 }
-var Progress = React33__namespace.forwardRef(
+var Progress = React32__namespace.forwardRef(
   function Progress2(props, ref) {
     const {
       value,
@@ -4462,7 +4241,7 @@ var Progress = React33__namespace.forwardRef(
             className: cn(
               "w-full overflow-hidden rounded-full",
               "bg-[var(--color-progress-track)]",
-              SIZE_CLASSES7[size],
+              SIZE_CLASSES6[size],
               trackProps?.className
             ),
             style: trackStyle,
@@ -4493,12 +4272,12 @@ var SIZE_MAP = {
   lg: { size: 48, thickness: 7, textClass: "text-sm" },
   xl: { size: 64, thickness: 8, textClass: "text-sm" }
 };
-var Ctx = React33__namespace.createContext({
+var Ctx = React32__namespace.createContext({
   value: 0,
   size: "md",
   colorPalette: "blue"
 });
-var ProgressCircleRoot = React33__namespace.forwardRef(function ProgressCircleRoot2(props, ref) {
+var ProgressCircleRoot = React32__namespace.forwardRef(function ProgressCircleRoot2(props, ref) {
   const {
     value = 0,
     size = "md",
@@ -4507,7 +4286,7 @@ var ProgressCircleRoot = React33__namespace.forwardRef(function ProgressCircleRo
     children,
     ...rest
   } = props;
-  const ctx = React33__namespace.useMemo(
+  const ctx = React32__namespace.useMemo(
     () => ({ value: value ?? null, size, colorPalette }),
     [value, size, colorPalette]
   );
@@ -4525,9 +4304,9 @@ var ProgressCircleRoot = React33__namespace.forwardRef(function ProgressCircleRo
     }
   ) });
 });
-var ProgressCircleRing = React33__namespace.forwardRef(function ProgressCircleRing2(props, ref) {
+var ProgressCircleRing = React32__namespace.forwardRef(function ProgressCircleRing2(props, ref) {
   const { trackColor, cap, color, className, ...rest } = props;
-  const { value, size: sizeKey } = React33__namespace.useContext(Ctx);
+  const { value, size: sizeKey } = React32__namespace.useContext(Ctx);
   const { size, thickness } = SIZE_MAP[sizeKey];
   const radius = size / 2 - thickness / 2;
   const circumference = 2 * Math.PI * radius;
@@ -4582,9 +4361,9 @@ var ProgressCircleRing = React33__namespace.forwardRef(function ProgressCircleRi
     }
   );
 });
-var ProgressCircleValueText = React33__namespace.forwardRef(function ProgressCircleValueText2(props, ref) {
+var ProgressCircleValueText = React32__namespace.forwardRef(function ProgressCircleValueText2(props, ref) {
   const { className, children, ...rest } = props;
-  const { value, size: sizeKey } = React33__namespace.useContext(Ctx);
+  const { value, size: sizeKey } = React32__namespace.useContext(Ctx);
   const { textClass } = SIZE_MAP[sizeKey];
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -4602,7 +4381,7 @@ var ProgressCircleValueText = React33__namespace.forwardRef(function ProgressCir
     }
   );
 });
-var SIZE_CLASSES8 = {
+var SIZE_CLASSES7 = {
   xs: {
     root: "gap-1.5",
     control: "h-3 w-3",
@@ -4628,9 +4407,9 @@ var SIZE_CLASSES8 = {
     label: "text-base"
   }
 };
-var RadioSizeContext = React33__namespace.createContext("md");
-var RadioGroupBase = React33__namespace.forwardRef(
-  function RadioGroup2(props, ref) {
+var RadioSizeContext = React32__namespace.createContext("md");
+var RadioGroupBase = React32__namespace.forwardRef(
+  function RadioGroup(props, ref) {
     const {
       children,
       name,
@@ -4647,7 +4426,7 @@ var RadioGroupBase = React33__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const handleValueChange = React33__namespace.useCallback(
+    const handleValueChange = React32__namespace.useCallback(
       (nextValue) => {
         if (readOnly) return;
         onValueChange?.({ value: nextValue });
@@ -4677,14 +4456,14 @@ var RadioGroupBase = React33__namespace.forwardRef(
     ) });
   }
 );
-var RadioGroup3 = RadioGroupBase;
+var RadioGroup2 = RadioGroupBase;
 var NOOP2 = () => {
 };
-var RadioBase = React33__namespace.forwardRef(
+var RadioBase = React32__namespace.forwardRef(
   function Radio(props, ref) {
     const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
-    const size = React33__namespace.useContext(RadioSizeContext);
-    const sizeClasses2 = SIZE_CLASSES8[size];
+    const size = React32__namespace.useContext(RadioSizeContext);
+    const sizeClasses2 = SIZE_CLASSES7[size];
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
@@ -4747,23 +4526,23 @@ var RadioBase = React33__namespace.forwardRef(
 var Radio2 = RadioBase;
 var StarFilledIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.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 = React33__namespace.forwardRef(
+var Rating = React32__namespace.forwardRef(
   function Rating2(props, ref) {
     const { count = 5, label: labelProp, defaultValue = 0, onValueChange, readOnly, className, ...rest } = props;
-    const [value, setValue] = React33__namespace.useState(defaultValue);
-    const [hoveredIndex, setHoveredIndex] = React33__namespace.useState(-1);
+    const [value, setValue] = React32__namespace.useState(defaultValue);
+    const [hoveredIndex, setHoveredIndex] = React32__namespace.useState(-1);
     const highlightedIndex = hoveredIndex >= 0 && !readOnly ? hoveredIndex + 1 : value;
     const label = Array.isArray(labelProp) ? labelProp[highlightedIndex - 1] : labelProp;
-    const handleClick = React33__namespace.useCallback((index) => () => {
+    const handleClick = React32__namespace.useCallback((index) => () => {
       if (readOnly) return;
       setValue(index);
       onValueChange?.({ value: index });
     }, [readOnly, onValueChange]);
-    const handleMouseEnter = React33__namespace.useCallback((index) => () => {
+    const handleMouseEnter = React32__namespace.useCallback((index) => () => {
       if (readOnly) return;
       setHoveredIndex(index);
     }, [readOnly]);
-    const handleMouseLeave = React33__namespace.useCallback(() => {
+    const handleMouseLeave = React32__namespace.useCallback(() => {
       setHoveredIndex(-1);
     }, []);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("inline-flex items-center gap-1", className), ...rest, children: [
@@ -4797,8 +4576,8 @@ function createListCollection(config2) {
 var ArrowIcon2 = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var CheckIcon2 = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.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] = React33__namespace.useState(initialValue);
-  const handleChange = React33__namespace.useCallback((e) => {
+  const [value, setValue] = React32__namespace.useState(initialValue);
+  const handleChange = React32__namespace.useCallback((e) => {
     setValue(e.target.value);
     onChange?.(e.target.value);
   }, [onChange]);
@@ -4817,15 +4596,15 @@ function FilterInput({ placeholder, initialValue = "", onChange }) {
     }
   );
 }
-var SelectInternalContext = React33__namespace.createContext(null);
+var SelectInternalContext = React32__namespace.createContext(null);
 function useSelectInternalContext() {
-  const ctx = React33__namespace.useContext(SelectInternalContext);
+  const ctx = React32__namespace.useContext(SelectInternalContext);
   if (!ctx) {
     throw new Error("Select compound components must be rendered inside <SelectRoot>");
   }
   return ctx;
 }
-var SelectRoot = React33__namespace.forwardRef(
+var SelectRoot = React32__namespace.forwardRef(
   function SelectRoot2(props, ref) {
     const {
       children,
@@ -4856,21 +4635,21 @@ var SelectRoot = React33__namespace.forwardRef(
       hideFrom: _hideFrom
     } = props;
     const collection = collectionProp ?? createListCollection({ items: [] });
-    const [internalValue, setInternalValue] = React33__namespace.useState(defaultValueArr ?? []);
+    const [internalValue, setInternalValue] = React32__namespace.useState(defaultValueArr ?? []);
     const currentValue = valueProp ?? internalValue;
-    const selectedItems = React33__namespace.useMemo(() => {
+    const selectedItems = React32__namespace.useMemo(() => {
       return currentValue.map((v) => collection.items.find((item) => item.value === v)).filter(Boolean);
     }, [currentValue, collection.items]);
-    const [open, setOpen] = React33__namespace.useState(defaultOpen ?? false);
+    const [open, setOpen] = React32__namespace.useState(defaultOpen ?? false);
     const isOpen = openProp ?? open;
-    const handleOpenChange = React33__namespace.useCallback((nextOpen) => {
+    const handleOpenChange = React32__namespace.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.(nextOpen);
       if (!nextOpen) {
         onInteractOutside?.();
       }
     }, [onOpenChange, onInteractOutside]);
-    const handleRadixValueChange = React33__namespace.useCallback((radixValue) => {
+    const handleRadixValueChange = React32__namespace.useCallback((radixValue) => {
       const nextArr = [radixValue];
       if (!valueProp) {
         setInternalValue(nextArr);
@@ -4878,7 +4657,7 @@ var SelectRoot = React33__namespace.forwardRef(
       const items = collection.items.filter((item) => nextArr.includes(item.value));
       onValueChangeProp?.({ value: nextArr, items });
     }, [valueProp, collection.items, onValueChangeProp]);
-    const ctxValue = React33__namespace.useMemo(() => ({
+    const ctxValue = React32__namespace.useMemo(() => ({
       value: currentValue,
       selectedItems,
       collection,
@@ -4898,7 +4677,7 @@ var SelectRoot = React33__namespace.forwardRef(
       if (typeof v === "string") return v;
       return v.base ?? v.lg ?? Object.values(v)[0];
     };
-    const inlineStyle = React33__namespace.useMemo(() => {
+    const inlineStyle = React32__namespace.useMemo(() => {
       const s = { ...style };
       const rw = resolveVal(w);
       if (rw) s.width = rw;
@@ -4909,16 +4688,15 @@ var SelectRoot = React33__namespace.forwardRef(
       return s;
     }, [style, w, maxW, minW]);
     return /* @__PURE__ */ jsxRuntime.jsx(SelectInternalContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-      RadixSelect__namespace.Root,
+      gui.Select,
       {
         value: currentValue[0] ?? "",
         defaultValue: defaultValueArr?.[0],
         onValueChange: handleRadixValueChange,
         open: isOpen,
         onOpenChange: handleOpenChange,
-        disabled: disabled || readOnly,
+        disablePreventBodyScroll: true,
         name,
-        required,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -4936,17 +4714,18 @@ var SelectRoot = React33__namespace.forwardRef(
     ) });
   }
 );
-var SelectControl = React33__namespace.forwardRef(
+var SelectControl = React32__namespace.forwardRef(
   function SelectControl2(props, ref) {
     const { children, noIndicator, triggerProps, loading, defaultValue } = props;
     const ctx = useSelectInternalContext();
     const isDefaultValue = Array.isArray(defaultValue) ? ctx.value.every((item) => defaultValue.includes(item)) : false;
     const { asChild, px: _px, className: triggerClassName, ...radixTriggerProps } = triggerProps ?? {};
     const trigger = /* @__PURE__ */ jsxRuntime.jsx(
-      RadixSelect__namespace.Trigger,
+      gui.Select.Trigger,
       {
         ref,
         asChild,
+        unstyled: true,
         className: cn(
           "group peer inline-flex items-center gap-2 cursor-pointer",
           "rounded-lg text-sm transition-colors outline-none",
@@ -4973,11 +4752,11 @@ var SelectControl = React33__namespace.forwardRef(
     return trigger;
   }
 );
-var SelectClearTrigger = React33__namespace.forwardRef(
+var SelectClearTrigger = React32__namespace.forwardRef(
   function SelectClearTrigger2(props, ref) {
     const { className, ...rest } = props;
     const ctx = useSelectInternalContext();
-    const handleClick = React33__namespace.useCallback(() => {
+    const handleClick = React32__namespace.useCallback(() => {
       ctx.onValueChange({ value: [], items: [] });
     }, [ctx]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4994,42 +4773,44 @@ var SelectClearTrigger = React33__namespace.forwardRef(
     );
   }
 );
-var SelectContent = React33__namespace.forwardRef(
-  function SelectContent2(props, ref) {
-    const { portalled = true, portalRef, children, className, ...rest } = props;
-    const content = /* @__PURE__ */ jsxRuntime.jsx(
-      RadixSelect__namespace.Content,
-      {
-        ref,
-        position: "popper",
-        sideOffset: 4,
-        className: cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-lg",
-          "bg-[var(--color-popover-bg)] shadow-[var(--shadow-popover)]",
-          "border border-[var(--color-border-divider)]",
-          "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",
-          className
-        ),
-        ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Viewport, { className: "p-1", children })
-      }
+var SelectContent = React32__namespace.forwardRef(
+  function SelectContent2(props, _ref) {
+    const { portalled: _portalled, portalRef: _portalRef, children, className, ...rest } = props;
+    let n = 0;
+    const counter2 = () => n++;
+    return (
+      // Content is the focus scope — it takes no style props at all. The
+      // Viewport is the box you can see, so the surface is declared there.
+      /* @__PURE__ */ jsxRuntime.jsx(gui.Select.Content, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+        gui.Select.Viewport,
+        {
+          className: cn(
+            "min-w-[8rem] overflow-hidden rounded-lg p-1",
+            "bg-[var(--color-popover-bg)] shadow-[var(--shadow-popover)]",
+            "border border-[var(--color-border-divider)]",
+            className
+          ),
+          children: stampIndices(children, counter2)
+        }
+      ) })
     );
-    if (portalled) {
-      return /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
-    }
-    return content;
   }
 );
-var SelectItem = React33__namespace.forwardRef(
+var stampIndices = (children, next) => React32__namespace.Children.map(children, (child) => {
+  if (!React32__namespace.isValidElement(child)) return child;
+  if (child.type === SelectItem) return React32__namespace.cloneElement(child, { index: next() });
+  const kids = child.props.children;
+  return kids === void 0 ? child : React32__namespace.cloneElement(child, void 0, stampIndices(kids, next));
+});
+var SelectItem = React32__namespace.forwardRef(
   function SelectItem2(props, ref) {
-    const { item, children, className, ...rest } = props;
+    const { item, children, className, index, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixSelect__namespace.Item,
+      gui.Select.Item,
       {
         ref,
+        index: index ?? 0,
         value: item.value,
-        textValue: item.label,
         className: cn(
           "relative flex cursor-pointer select-none items-center gap-2",
           "rounded-md px-3 py-2 text-sm outline-none",
@@ -5042,14 +4823,14 @@ var SelectItem = React33__namespace.forwardRef(
         ...rest,
         children: [
           item.icon,
-          /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ItemText, { children }),
-          /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ItemIndicator, { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon2, { className: "h-5 w-5" }) })
+          /* @__PURE__ */ jsxRuntime.jsx(gui.Select.ItemText, { children: children ?? item.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(gui.Select.ItemIndicator, { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon2, { className: "h-5 w-5" }) })
         ]
       }
     );
   }
 );
-var SelectValueText = React33__namespace.forwardRef(
+var SelectValueText = React32__namespace.forwardRef(
   function SelectValueText2(props, ref) {
     const { children, size, required, invalid, errorText, mode, className, style, placeholder: placeholderProp, ...rest } = props;
     const ctx = useSelectInternalContext();
@@ -5094,7 +4875,7 @@ var SelectValueText = React33__namespace.forwardRef(
       return `${items.length} selected`;
     })();
     return /* @__PURE__ */ jsxRuntime.jsx(
-      RadixSelect__namespace.Value,
+      gui.Select.Value,
       {
         ref,
         placeholder: placeholderText,
@@ -5105,18 +4886,18 @@ var SelectValueText = React33__namespace.forwardRef(
     );
   }
 );
-var SelectItemGroup = React33__namespace.forwardRef(
+var SelectItemGroup = React32__namespace.forwardRef(
   function SelectItemGroup2(props, ref) {
     const { children, label, className, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsxs(RadixSelect__namespace.Group, { ref, className: cn("py-1", className), ...rest, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.Label, { className: "px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]", children: label }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(gui.Select.Group, { ref, className: cn("py-1", className), ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(gui.Select.Label, { className: "px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]", children: label }),
       children
     ] });
   }
 );
-var SelectLabel = RadixSelect__namespace.Label;
-var SelectItemText = RadixSelect__namespace.ItemText;
-var Select = React33__namespace.forwardRef((props, ref) => {
+var SelectLabel = gui.Select.Label;
+var SelectItemText = gui.Select.ItemText;
+var Select = React32__namespace.forwardRef((props, ref) => {
   const { collection, placeholder, portalled = true, loading, errorText, contentProps, contentHeader, itemFilter, mode, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SelectRoot,
@@ -5138,7 +4919,7 @@ var Select = React33__namespace.forwardRef((props, ref) => {
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { portalled, ...contentProps, children: [
           contentHeader,
-          collection.items.filter(itemFilter ?? (() => true)).map((item) => /* @__PURE__ */ jsxRuntime.jsxs(React33__namespace.Fragment, { children: [
+          collection.items.filter(itemFilter ?? (() => true)).map((item) => /* @__PURE__ */ jsxRuntime.jsxs(React32__namespace.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { item, children: item.renderLabel ? item.renderLabel("item") : item.label }),
             item.afterElement
           ] }, item.value))
@@ -5147,19 +4928,19 @@ var Select = React33__namespace.forwardRef((props, ref) => {
     }
   );
 });
-var SelectAsync = React33__namespace.forwardRef((props, ref) => {
+var SelectAsync = React32__namespace.forwardRef((props, ref) => {
   const { placeholder, portalled = true, loading, loadOptions, extraControls, onValueChange, errorText, mode, contentHeader, ...rest } = props;
-  const [collection, setCollection] = React33__namespace.useState(createListCollection({ items: [] }));
-  const [inputValue, setInputValue] = React33__namespace.useState("");
-  const [value, setValue] = React33__namespace.useState([]);
+  const [collection, setCollection] = React32__namespace.useState(createListCollection({ items: [] }));
+  const [inputValue, setInputValue] = React32__namespace.useState("");
+  const [value, setValue] = React32__namespace.useState([]);
   const debouncedInputValue = usehooks.useDebounce(inputValue, 300);
-  React33__namespace.useEffect(() => {
+  React32__namespace.useEffect(() => {
     loadOptions(debouncedInputValue, value).then(setCollection);
   }, [debouncedInputValue, loadOptions, value]);
-  const handleFilterChange = React33__namespace.useCallback((val) => {
+  const handleFilterChange = React32__namespace.useCallback((val) => {
     setInputValue(val);
   }, []);
-  const handleValueChange = React33__namespace.useCallback(({ value: v, items }) => {
+  const handleValueChange = React32__namespace.useCallback(({ value: v, items }) => {
     setValue(v);
     onValueChange?.({ value: v, items });
   }, [onValueChange]);
@@ -5201,47 +4982,27 @@ var SelectAsync = React33__namespace.forwardRef((props, ref) => {
     }
   );
 });
-var VARIANT_CLASSES5 = {
-  solid: "border-solid",
-  dashed: "border-dashed",
-  dotted: "border-dotted"
-};
-var HORIZONTAL_SIZE_CLASSES = {
-  xs: "border-t-[0.5px]",
-  sm: "border-t",
-  md: "border-t-2",
-  lg: "border-t-[3px]"
-};
-var VERTICAL_SIZE_CLASSES = {
-  xs: "border-l-[0.5px]",
-  sm: "border-l",
-  md: "border-l-2",
-  lg: "border-l-[3px]"
-};
-var Separator2 = React33__namespace.default.forwardRef(
-  function Separator3({ orientation = "horizontal", variant = "solid", size = "sm", className, ...rest }, ref) {
-    const isVertical = orientation === "vertical";
+var WEIGHT = { xs: 0.5, sm: 1, md: 2, lg: 3 };
+var Separator = React32__namespace.default.forwardRef(
+  function Separator2({ orientation = "horizontal", variant = "solid", size = "sm", ...rest }, ref) {
+    const vertical = orientation === "vertical";
     return /* @__PURE__ */ jsxRuntime.jsx(
       gui.Separator,
       {
         ref,
-        vertical: isVertical,
+        vertical,
         role: "separator",
         "aria-orientation": orientation,
-        className: cn(
-          "border-[var(--color-border-divider)]",
-          "border-0",
-          VARIANT_CLASSES5[variant],
-          isVertical ? VERTICAL_SIZE_CLASSES[size] : HORIZONTAL_SIZE_CLASSES[size],
-          isVertical ? "self-stretch h-auto w-0" : "w-full",
-          className
-        ),
+        borderWidth: 0,
+        borderStyle: variant,
+        borderColor: "var(--color-border-divider)",
+        ...vertical ? { borderLeftWidth: WEIGHT[size], alignSelf: "stretch", height: "auto", width: 0 } : { borderTopWidth: WEIGHT[size], width: "100%" },
         ...rest
       }
     );
   }
 );
-var Slider = React33__namespace.forwardRef(
+var Slider = React32__namespace.forwardRef(
   function Slider2(props, ref) {
     const {
       marks: marksProp,
@@ -5265,12 +5026,12 @@ var Slider = React33__namespace.forwardRef(
       return mark;
     });
     const hasMarkLabel = Boolean(marks?.some((mark) => mark.label));
-    const latest = React33__namespace.useRef(value ?? defaultValue ?? []);
-    const handleValueChange = React33__namespace.useCallback((next) => {
+    const latest = React32__namespace.useRef(value ?? defaultValue ?? []);
+    const handleValueChange = React32__namespace.useCallback((next) => {
       latest.current = next;
       onValueChange?.(next);
     }, [onValueChange]);
-    const handleSlideEnd = React33__namespace.useCallback(() => {
+    const handleSlideEnd = React32__namespace.useCallback(() => {
       onValueCommit?.(latest.current);
     }, [onValueCommit]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
@@ -5358,7 +5119,7 @@ function SliderMarks(props) {
 }
 var NOOP3 = () => {
 };
-var SIZE_CLASSES9 = {
+var SIZE_CLASSES8 = {
   sm: {
     root: "h-4 w-7",
     thumb: "h-3 w-3",
@@ -5375,7 +5136,7 @@ var SIZE_CLASSES9 = {
     label: "text-base"
   }
 };
-var SwitchBase = React33__namespace.forwardRef(
+var SwitchBase = React32__namespace.forwardRef(
   function Switch(props, ref) {
     const {
       inputProps,
@@ -5394,10 +5155,10 @@ var SwitchBase = React33__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const [internalChecked, setInternalChecked] = React33__namespace.useState(defaultChecked ?? false);
+    const [internalChecked, setInternalChecked] = React32__namespace.useState(defaultChecked ?? false);
     const isControlled = checkedProp !== void 0;
     const checkedState = isControlled ? checkedProp : internalChecked;
-    const handleCheckedChange = React33__namespace.useCallback(
+    const handleCheckedChange = React32__namespace.useCallback(
       (nextChecked) => {
         if (!isControlled) {
           setInternalChecked(nextChecked);
@@ -5406,7 +5167,7 @@ var SwitchBase = React33__namespace.forwardRef(
       },
       [isControlled, onCheckedChange]
     );
-    const sizeClasses2 = SIZE_CLASSES9[size];
+    const sizeClasses2 = SIZE_CLASSES8[size];
     const isRtl = direction === "rtl";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
@@ -5662,7 +5423,7 @@ function resolveResponsive(value) {
   }
   return void 0;
 }
-var TableRoot = React33__namespace.forwardRef(
+var TableRoot = React32__namespace.forwardRef(
   function TableRoot2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const rawMinW = other.minWidth ?? other.minW;
@@ -5685,7 +5446,7 @@ var TableRoot = React33__namespace.forwardRef(
     );
   }
 );
-var TableHeader = React33__namespace.forwardRef(
+var TableHeader = React32__namespace.forwardRef(
   function TableHeader2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5702,7 +5463,7 @@ var TableHeader = React33__namespace.forwardRef(
     );
   }
 );
-var TableBody = React33__namespace.forwardRef(
+var TableBody = React32__namespace.forwardRef(
   function TableBody2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5719,7 +5480,7 @@ var TableBody = React33__namespace.forwardRef(
     );
   }
 );
-var TableRow = React33__namespace.forwardRef(
+var TableRow = React32__namespace.forwardRef(
   function TableRow2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5736,7 +5497,7 @@ var TableRow = React33__namespace.forwardRef(
     );
   }
 );
-var TableCell = React33__namespace.forwardRef(
+var TableCell = React32__namespace.forwardRef(
   function TableCell2(props, ref) {
     const { isNumeric, className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5757,7 +5518,7 @@ var TableCell = React33__namespace.forwardRef(
     );
   }
 );
-var TableColumnHeader = React33__namespace.forwardRef(
+var TableColumnHeader = React32__namespace.forwardRef(
   function TableColumnHeader2(props, ref) {
     const { isNumeric, className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5784,7 +5545,7 @@ var TableColumnHeader = React33__namespace.forwardRef(
 );
 var TableColumnHeaderSortable = (props) => {
   const { sortField, sortValue, onSortToggle, children, disabled, indicatorPosition = "left", contentAfter, ...rest } = props;
-  const handleSortToggle = React33__namespace.useCallback(() => {
+  const handleSortToggle = React32__namespace.useCallback(() => {
     onSortToggle(sortField);
   }, [onSortToggle, sortField]);
   const isActive = sortValue.includes(sortField);
@@ -5810,16 +5571,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 = React33__namespace.useRef(null);
-  const [isStuck, setIsStuck] = React33__namespace.useState(false);
-  const handleScroll = React33__namespace.useCallback(() => {
+  const ref = React32__namespace.useRef(null);
+  const [isStuck, setIsStuck] = React32__namespace.useState(false);
+  const handleScroll = React32__namespace.useCallback(() => {
     if (Number(ref.current?.getBoundingClientRect().y) <= (Number(top) || 0)) {
       setIsStuck(true);
     } else {
       setIsStuck(false);
     }
   }, [top]);
-  React33__namespace.useEffect(() => {
+  React32__namespace.useEffect(() => {
     const throttledHandleScroll = esToolkit.throttle(handleScroll, 300);
     window.addEventListener("scroll", throttledHandleScroll);
     return () => {
@@ -5841,7 +5602,7 @@ var TableHeaderSticky = (props) => {
     }
   );
 };
-var TableCaption = React33__namespace.forwardRef(
+var TableCaption = React32__namespace.forwardRef(
   function TableCaption2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5858,7 +5619,7 @@ var TableCaption = React33__namespace.forwardRef(
     );
   }
 );
-var TableFooter = React33__namespace.forwardRef(
+var TableFooter = React32__namespace.forwardRef(
   function TableFooter2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5875,7 +5636,7 @@ var TableFooter = React33__namespace.forwardRef(
     );
   }
 );
-var TableScrollWrapper = React33__namespace.forwardRef(
+var TableScrollWrapper = React32__namespace.forwardRef(
   function TableScrollWrapper2(props, ref) {
     const { className, children, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5889,206 +5650,115 @@ var TableScrollWrapper = React33__namespace.forwardRef(
     );
   }
 );
-var ROOT_SIZE_CLASSES = {
-  sm: "[--tabs-height:2rem] [--tabs-content-padding:1.5rem]",
-  md: "[--tabs-height:2.5rem] [--tabs-content-padding:1.5rem]",
-  free: ""
-};
-var TabsRoot = React33__namespace.forwardRef(
-  function TabsRoot2(props, ref) {
-    const {
-      variant = "solid",
-      size = "md",
-      fitted,
-      lazyMount: _lazyMount,
-      unmountOnExit: _unmountOnExit,
-      onValueChange,
-      className,
-      ...rest
-    } = props;
-    const handleValueChange = React33__namespace.useCallback(
-      (value) => {
-        if (!onValueChange) return;
-        onValueChange({ value });
-      },
-      [onValueChange]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RadixTabs__namespace.Root,
-      {
-        ref,
-        "data-variant": variant,
-        "data-size": size,
-        "data-fitted": fitted ? "" : void 0,
-        className: cn(
-          "relative",
-          ROOT_SIZE_CLASSES[size],
-          className
-        ),
-        onValueChange: onValueChange ? handleValueChange : void 0,
-        ...rest
-      }
-    );
-  }
-);
-var TabsList = React33__namespace.forwardRef(
-  function TabsList2(props, ref) {
-    const {
-      className,
-      // Strip Chakra style props
-      flexWrap: _flexWrap,
-      alignItems: _alignItems,
-      whiteSpace: _whiteSpace,
-      bgColor: _bgColor,
-      marginBottom: _marginBottom,
-      mx: _mx,
-      px: _px,
-      w: _w,
-      overflowX: _overflowX,
-      overscrollBehaviorX: _overscrollBehaviorX,
-      css: _css,
-      position: _position,
-      boxShadow: _boxShadow,
-      top: _top,
-      zIndex: _zIndex,
-      style: styleProp,
-      asChild,
-      loop,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RadixTabs__namespace.List,
-      {
-        ref,
-        asChild,
-        loop,
-        className: cn(
-          "inline-flex w-full relative isolate flex-row",
-          "min-h-[var(--tabs-height,2.5rem)]",
-          className
-        ),
-        style: styleProp,
-        ...rest
-      }
-    );
-  }
-);
-var TRIGGER_BASE = "outline-none min-w-[var(--tabs-height,2.5rem)] h-[var(--tabs-height,2.5rem)] flex items-center relative cursor-pointer gap-2 focus-visible:z-[1] focus-visible:outline-2 focus-visible:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-50";
-var TRIGGER_SIZE_CLASSES = {
-  sm: "py-1 px-3 text-sm",
-  md: "py-2 px-4 text-base",
-  free: ""
+var Shape = React32__namespace.createContext({
+  variant: "solid",
+  size: "md",
+  fitted: false
+});
+var SIZE2 = {
+  sm: { height: 32, minWidth: 32, paddingVertical: 4, paddingHorizontal: 12, fontSize: 14 },
+  md: { height: 40, minWidth: 40, paddingVertical: 8, paddingHorizontal: 16, fontSize: 16 },
+  free: {}
 };
-var TRIGGER_VARIANT_CLASSES = {
-  solid: "font-semibold gap-1 rounded-md bg-transparent text-tabs-solid-fg data-[state=active]:bg-selected-control-bg data-[state=active]:text-selected-control-text data-[state=active]:hover:text-selected-control-text hover:text-hover",
-  secondary: "font-medium bg-transparent text-tabs-secondary-fg border-2 border-solid border-tabs-secondary-border rounded-md data-[state=active]:bg-selected-control-bg data-[state=active]:text-selected-control-text data-[state=active]:border-transparent data-[state=active]:hover:border-transparent hover:text-hover hover:border-hover",
-  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 SELECTED_BG2 = "var(--color-selected-control-bg)";
+var SELECTED_FG2 = "var(--color-selected-control-text)";
+var VARIANT3 = {
+  solid: {
+    rest: {
+      fontWeight: "600",
+      borderRadius: 6,
+      color: "var(--color-tabs-solid-fg)",
+      hoverStyle: { color: "var(--color-hover)" }
+    },
+    active: { backgroundColor: SELECTED_BG2, color: SELECTED_FG2 }
+  },
+  secondary: {
+    rest: {
+      fontWeight: "500",
+      borderRadius: 6,
+      borderWidth: 2,
+      borderColor: "var(--color-tabs-secondary-border)",
+      color: "var(--color-tabs-secondary-fg)",
+      hoverStyle: { color: "var(--color-hover)", borderColor: "var(--color-hover)" }
+    },
+    active: { backgroundColor: SELECTED_BG2, color: SELECTED_FG2, borderColor: "transparent" }
+  },
+  segmented: {
+    rest: {
+      borderWidth: 2,
+      borderColor: SELECTED_BG2,
+      color: "var(--color-text-primary)",
+      hoverStyle: { color: "var(--color-hover)" }
+    },
+    active: { backgroundColor: SELECTED_BG2, borderColor: SELECTED_BG2, color: SELECTED_FG2 }
+  },
+  unstyled: { rest: {}, active: {} }
 };
-var TabsTrigger = React33__namespace.forwardRef(
-  function TabsTrigger2(props, ref) {
-    const {
-      className,
-      // Strip Chakra style props
-      scrollSnapAlign: _scrollSnapAlign,
-      flexShrink: _flexShrink,
-      bgColor: _bgColor,
-      w: _w,
-      py: _py,
-      borderRadius: _borderRadius,
-      fontWeight: _fontWeight,
-      color: _color,
-      _hover,
-      position: _position,
-      top: _top,
-      left: _left,
-      visibility: _visibility,
+var LIST_HEIGHT = { sm: 32, md: 40, free: void 0 };
+var TabsRoot = ({
+  variant = "solid",
+  size = "md",
+  fitted = false,
+  onValueChange,
+  ...rest
+}) => {
+  const shape = React32__namespace.useMemo(() => ({ variant, size, fitted }), [variant, size, fitted]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Shape.Provider, { value: shape, children: /* @__PURE__ */ jsxRuntime.jsx(
+    gui.Tabs,
+    {
+      unstyled: true,
+      position: "relative",
+      orientation: "horizontal",
+      onValueChange: onValueChange ? (value) => onValueChange({ value }) : void 0,
       ...rest
-    } = props;
-    const internalRef = React33__namespace.useRef(null);
-    const mergedRef = useMergedRef(ref, internalRef);
-    const { variant, size, fitted } = useTabsContext(internalRef);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RadixTabs__namespace.Trigger,
-      {
-        ref: mergedRef,
-        className: cn(
-          "group",
-          TRIGGER_BASE,
-          TRIGGER_SIZE_CLASSES[size],
-          TRIGGER_VARIANT_CLASSES[variant],
-          fitted && "flex-1 text-center justify-center",
-          className
-        ),
-        ...rest
-      }
-    );
-  }
-);
-var TabsContent = React33__namespace.forwardRef(
-  function TabsContent2(props, ref) {
-    const { className, padding: _padding, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RadixTabs__namespace.Content,
-      {
-        ref,
-        className: cn(
-          "w-full pt-[var(--tabs-content-padding,1.5rem)]",
-          "focus-visible:outline-2 focus-visible:outline-offset-[-2px]",
-          className
-        ),
-        ...rest
-      }
-    );
-  }
-);
-var COUNTER_OVERLOAD = 50;
-var TabsCounter = ({ count }) => {
-  if (count === void 0 || count === null) {
-    return null;
-  }
+    }
+  ) });
+};
+var TabsList = (props) => {
+  const { size } = React32__namespace.useContext(Shape);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
+    gui.Tabs.List,
     {
-      className: cn(
-        "group-hover:text-inherit",
-        count > 0 ? "text-text-secondary" : "text-[rgba(16,17,18,0.24)] dark:text-[rgba(255,255,255,0.24)]"
-      ),
-      children: count > COUNTER_OVERLOAD ? `${COUNTER_OVERLOAD}+` : count
+      unstyled: true,
+      width: "100%",
+      position: "relative",
+      flexDirection: "row",
+      backgroundColor: "transparent",
+      minHeight: LIST_HEIGHT[size],
+      ...props
     }
   );
 };
-function useTabsContext(triggerRef) {
-  const [ctx, setCtx] = React33__namespace.useState({ variant: "solid", size: "md", fitted: false });
-  React33__namespace.useEffect(() => {
-    const el = triggerRef.current;
-    if (!el) return;
-    const root = el.closest("[data-variant]");
-    if (!root) return;
-    setCtx({
-      variant: root.getAttribute("data-variant") ?? "solid",
-      size: root.getAttribute("data-size") ?? "md",
-      fitted: root.hasAttribute("data-fitted")
-    });
-  }, [triggerRef]);
-  return ctx;
-}
-function useMergedRef(...refs) {
-  return React33__namespace.useCallback(
-    (instance) => {
-      for (const ref of refs) {
-        if (!ref) continue;
-        if (typeof ref === "function") {
-          ref(instance);
-        } else {
-          ref.current = instance;
-        }
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    refs
+var TabsTrigger = ({ children, ...props }) => {
+  const { variant, size, fitted } = React32__namespace.useContext(Shape);
+  const { rest, active } = VARIANT3[variant];
+  const selected = gui.useTabsContext().value === props.value;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    gui.Tabs.Tab,
+    {
+      unstyled: true,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "relative",
+      cursor: "pointer",
+      gap: 8,
+      borderWidth: 0,
+      ...SIZE2[size],
+      ...rest,
+      ...selected ? active : null,
+      ...fitted ? { flex: 1 } : null,
+      ...props,
+      children: ink(children, void 0, { fontSize: "inherit", color: "inherit", fontWeight: "inherit" })
+    }
   );
-}
+};
+var TabsContent = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(gui.Tabs.Content, { unstyled: true, width: "100%", paddingTop: 24, backgroundColor: "transparent", ...props, children: ink(children) });
+var COUNTER_OVERLOAD = 50;
+var TabsCounter = ({ count }) => {
+  if (count === void 0 || count === null) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { color: count > 0 ? "var(--color-text-secondary)" : "var(--color-text-disabled)", children: count > COUNTER_OVERLOAD ? `${COUNTER_OVERLOAD}+` : count });
+};
 var nbsp = String.fromCharCode(160);
 function TruncatedTextTooltip2({ label, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
@@ -6112,7 +5782,7 @@ var TAG_SELECTED_CLASSES = [
   "hover:opacity-76"
 ].join(" ");
 var TAG_DISABLED_CLASSES = "opacity-40 pointer-events-none cursor-not-allowed";
-var Tag = React33__namespace.forwardRef(
+var Tag = React32__namespace.forwardRef(
   function Tag2(props, ref) {
     const {
       variant,
@@ -6176,32 +5846,16 @@ var Tag = React33__namespace.forwardRef(
     ) });
   }
 );
-var TEXTAREA_BASE = [
-  "w-full appearance-none outline-none transition-colors resize-y",
-  "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
-  "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
-  "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
-  "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
-  "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
-  "disabled:opacity-40 disabled:cursor-not-allowed",
-  "read-only:opacity-70",
-  "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
-].join(" ");
-var TEXTAREA_SIZE_CLASSES = {
-  xs: "px-2 py-1 text-xs rounded",
-  sm: "px-3 py-2 text-sm rounded-md",
-  md: "px-4 py-2 text-base rounded-md",
-  lg: "px-4 py-3 text-lg rounded-lg",
-  "2xl": "px-4 py-3 text-xl rounded-lg"
-};
-var TEXTAREA_VARIANT_CLASSES = {
-  outline: "border border-solid",
-  filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
-  unstyled: "border-0 bg-transparent p-0"
+var SIZE3 = {
+  xs: { paddingHorizontal: 8, paddingVertical: 4, fontSize: 12, borderRadius: 4 },
+  sm: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 14, borderRadius: 6 },
+  md: { paddingHorizontal: 16, paddingVertical: 8, fontSize: 16, borderRadius: 6 },
+  lg: { paddingHorizontal: 16, paddingVertical: 12, fontSize: 18, borderRadius: 8 },
+  "2xl": { paddingHorizontal: 16, paddingVertical: 12, fontSize: 20, borderRadius: 8 }
 };
-var Textarea = React33__namespace.default.forwardRef(
+var Textarea = React32__namespace.default.forwardRef(
   ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
-    const handleChange = React33__namespace.default.useCallback(
+    const handleChange = React32__namespace.default.useCallback(
       (event) => {
         onChange?.(event);
         onChangeText?.(event.target.value);
@@ -6213,7 +5867,10 @@ var Textarea = React33__namespace.default.forwardRef(
       {
         ref,
         unstyled: true,
-        className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
+        className: className ? `lux-control ${className}` : "lux-control",
+        ...CONTROL,
+        ...SIZE3[size],
+        ...VARIANT2[variant],
         ...rest,
         onChange: handleChange
       }
@@ -6223,93 +5880,90 @@ var Textarea = React33__namespace.default.forwardRef(
 Textarea.displayName = "Textarea";
 var SECOND = 1e3;
 var DURATION = 10 * SECOND;
-function mapOptions(opts) {
-  const external = {
-    id: opts.id,
-    description: opts.description,
-    duration: opts.duration
+var entries = [];
+var listeners = /* @__PURE__ */ new Set();
+var counter = 0;
+var emit = () => listeners.forEach((l) => l());
+var subscribe = (l) => {
+  listeners.add(l);
+  return () => {
+    listeners.delete(l);
   };
-  if (opts.action) {
-    external.action = {
-      label: opts.action.label,
-      onClick: opts.action.onClick
-    };
-  }
-  if (opts.onStatusChange) {
-    const cb = opts.onStatusChange;
-    external.onDismiss = () => cb({ status: "unmounted" });
-    external.onAutoClose = () => cb({ status: "unmounted" });
-  }
-  return external;
-}
-function create(opts) {
-  const external = mapOptions(opts);
-  const title = opts.title ?? "";
-  switch (opts.type) {
-    case "success":
-      return sonner.toast.success(title, external);
-    case "error":
-      return sonner.toast.error(title, external);
-    case "warning":
-      return sonner.toast.warning(title, external);
-    case "loading":
-      return sonner.toast.loading(title, external);
-    case "info":
-    default:
-      return sonner.toast.info(title, external);
-  }
-}
-function update(id, opts) {
-  const title = opts.title ?? "";
-  const external = mapOptions({ ...opts, id });
-  switch (opts.type) {
-    case "success":
-      sonner.toast.success(title, external);
-      break;
-    case "error":
-      sonner.toast.error(title, external);
-      break;
-    case "warning":
-      sonner.toast.warning(title, external);
-      break;
-    case "loading":
-      sonner.toast.loading(title, external);
-      break;
-    case "info":
-    default:
-      sonner.toast.info(title, external);
-      break;
-  }
-}
+};
+var snapshot = () => entries;
+var remove = (id) => {
+  const found = entries.find((e) => e.id === id);
+  entries = entries.filter((e) => e.id !== id);
+  emit();
+  found?.onStatusChange?.({ status: "unmounted" });
+};
+var create = (opts) => {
+  const id = opts.id ?? `toast-${++counter}`;
+  const entry = { ...opts, id };
+  entries = [...entries.filter((e) => e.id !== id), entry];
+  emit();
+  return id;
+};
+var update = (id, opts) => {
+  entries = entries.map((e) => e.id === id ? { ...e, ...opts, id } : e);
+  emit();
+};
 var toaster = {
   create,
   success: (opts) => create({ ...opts, type: "success" }),
   error: (opts) => create({ ...opts, type: "error" }),
   loading: (opts) => create({ ...opts, type: "loading" }),
   update,
-  remove: (id) => sonner.toast.dismiss(id)
+  remove
 };
-var Toaster = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    sonner.Toaster,
-    {
-      position: "top-right",
-      richColors: true,
-      closeButton: true,
-      duration: DURATION,
-      offset: { top: 12, right: 12, bottom: 12, left: 12 },
-      mobileOffset: { top: 16, right: 16, bottom: 16, left: 16 },
-      toastOptions: {
-        className: "font-sans",
-        style: {
-          fontFamily: 'var(--font-sans, "Geist", sans-serif)',
-          color: "var(--color-text-primary)",
-          backgroundColor: "var(--color-bg-primary)",
-          borderColor: "var(--color-border-divider)"
+var EDGE = {
+  success: "var(--color-status-good)",
+  error: "var(--color-status-bad)",
+  warning: "var(--color-status-warn)",
+  loading: "var(--color-border-divider)",
+  info: "var(--color-border-divider)"
+};
+var One = ({ entry }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  gui.Toast,
+  {
+    duration: entry.duration ?? DURATION,
+    onOpenChange: (open) => {
+      if (!open) remove(entry.id);
+    },
+    unstyled: true,
+    flexDirection: "column",
+    gap: 4,
+    padding: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: EDGE[entry.type ?? "info"],
+    backgroundColor: "var(--color-popover-bg)",
+    transition: "quick",
+    enterStyle: { opacity: 0, y: -8 },
+    exitStyle: { opacity: 0, y: -8 },
+    children: [
+      entry.title ? /* @__PURE__ */ jsxRuntime.jsx(gui.Toast.Title, { unstyled: true, fontSize: 14, fontWeight: "600", color: "var(--color-text-primary)", children: entry.title }) : null,
+      entry.description ? /* @__PURE__ */ jsxRuntime.jsx(gui.Toast.Description, { unstyled: true, fontSize: 13, color: "var(--color-text-secondary)", children: entry.description }) : null,
+      entry.action ? /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { marginTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(gui.Toast.Action, { altText: entry.action.label, onPress: entry.action.onClick, children: /* @__PURE__ */ jsxRuntime.jsx(
+        gui.Text,
+        {
+          cursor: "pointer",
+          fontSize: 13,
+          fontWeight: "500",
+          color: "var(--color-link-primary)",
+          children: entry.action.label
         }
-      }
-    }
-  );
+      ) }) }) : null
+    ]
+  },
+  entry.id
+);
+var Toaster = () => {
+  const list = React32__namespace.useSyncExternalStore(subscribe, snapshot, snapshot);
+  return /* @__PURE__ */ jsxRuntime.jsxs(gui.ToastProvider, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { children: list.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(One, { entry }, entry.id)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(gui.ToastViewport, { position: "absolute", top: 12, right: 12 })
+  ] });
 };
 function fmt(n, decimals = 2) {
   if (n === void 0 || n === null) return "-";
@@ -6344,7 +5998,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 = React33__namespace.forwardRef(
+var OptionChain = React32__namespace.forwardRef(
   function OptionChain2(props, ref) {
     const {
       symbol: _symbol,
@@ -6355,7 +6009,7 @@ var OptionChain = React33__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const handleClick = React33__namespace.useCallback(
+    const handleClick = React32__namespace.useCallback(
       (quote, type, strike) => {
         if (!quote || !onSelectContract) return;
         onSelectContract({
@@ -6535,7 +6189,7 @@ function GreekItem({ def, value, compact }) {
     }
   );
 }
-var GreeksDisplay = React33__namespace.forwardRef(
+var GreeksDisplay = React32__namespace.forwardRef(
   function GreeksDisplay2(props, ref) {
     const {
       delta,
@@ -6767,7 +6421,7 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
     )
   ] });
 }
-var StrategyBuilder = React33__namespace.forwardRef(
+var StrategyBuilder = React32__namespace.forwardRef(
   function StrategyBuilder2(props, ref) {
     const {
       underlying,
@@ -6779,12 +6433,12 @@ var StrategyBuilder = React33__namespace.forwardRef(
       ...rest
     } = props;
     const defaultExp = expirations[0] ?? "";
-    const [strategyType, setStrategyType] = React33__namespace.useState("bull_call_spread");
-    const [legs, setLegs] = React33__namespace.useState(() => {
+    const [strategyType, setStrategyType] = React32__namespace.useState("bull_call_spread");
+    const [legs, setLegs] = React32__namespace.useState(() => {
       const preset = STRATEGY_PRESETS.find((p) => p.value === "bull_call_spread");
       return preset ? preset.buildLegs(strikes, spotPrice, defaultExp) : [];
     });
-    const handleStrategyChange = React33__namespace.useCallback(
+    const handleStrategyChange = React32__namespace.useCallback(
       (e) => {
         const type = e.target.value;
         setStrategyType(type);
@@ -6795,7 +6449,7 @@ var StrategyBuilder = React33__namespace.forwardRef(
       },
       [strikes, spotPrice, defaultExp]
     );
-    const handleLegChange = React33__namespace.useCallback(
+    const handleLegChange = React32__namespace.useCallback(
       (index, leg) => {
         setLegs((prev) => {
           const next = [...prev];
@@ -6805,13 +6459,13 @@ var StrategyBuilder = React33__namespace.forwardRef(
       },
       []
     );
-    const handleLegRemove = React33__namespace.useCallback(
+    const handleLegRemove = React32__namespace.useCallback(
       (index) => {
         setLegs((prev) => prev.filter((_, i) => i !== index));
       },
       []
     );
-    const handleAddLeg = React33__namespace.useCallback(() => {
+    const handleAddLeg = React32__namespace.useCallback(() => {
       if (legs.length >= 4) return;
       const atm = findATM(strikes, spotPrice);
       setLegs((prev) => [
@@ -6819,14 +6473,14 @@ var StrategyBuilder = React33__namespace.forwardRef(
         { action: "buy", type: "call", strike: atm, expiration: defaultExp, quantity: 1 }
       ]);
     }, [legs.length, strikes, spotPrice, defaultExp]);
-    const netPremium = React33__namespace.useMemo(() => {
+    const netPremium = React32__namespace.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 = React33__namespace.useCallback(() => {
+    const handleSubmit = React32__namespace.useCallback(() => {
       if (!onSubmit || legs.length === 0) return;
       onSubmit({
         type: strategyType,
@@ -6949,7 +6603,7 @@ function buildPath(points, vb, width, height) {
 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__namespace.forwardRef(
+var PnlDiagram = React32__namespace.forwardRef(
   function PnlDiagram2(props, ref) {
     const {
       legs,
@@ -6958,14 +6612,14 @@ var PnlDiagram = React33__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const containerRef = React33__namespace.useRef(null);
-    const [hoverX, setHoverX] = React33__namespace.useState(null);
-    const [dims, setDims] = React33__namespace.useState({ width: 600, height: 240 });
-    React33__namespace.useEffect(() => {
+    const containerRef = React32__namespace.useRef(null);
+    const [hoverX, setHoverX] = React32__namespace.useState(null);
+    const [dims, setDims] = React32__namespace.useState({ width: 600, height: 240 });
+    React32__namespace.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
-      const observer = new ResizeObserver((entries) => {
-        const entry = entries[0];
+      const observer = new ResizeObserver((entries2) => {
+        const entry = entries2[0];
         if (entry) {
           setDims({
             width: Math.max(entry.contentRect.width, 200),
@@ -6984,7 +6638,7 @@ var PnlDiagram = React33__namespace.forwardRef(
     const xMax = maxStrike + range * 0.3;
     const SAMPLES = 200;
     const step = (xMax - xMin) / SAMPLES;
-    const combinedPoints = React33__namespace.useMemo(() => {
+    const combinedPoints = React32__namespace.useMemo(() => {
       const pts = [];
       for (let i = 0; i <= SAMPLES; i++) {
         const price = xMin + i * step;
@@ -6992,7 +6646,7 @@ var PnlDiagram = React33__namespace.forwardRef(
       }
       return pts;
     }, [legs, multiplier, xMin, step]);
-    const legPointSets = React33__namespace.useMemo(() => {
+    const legPointSets = React32__namespace.useMemo(() => {
       return legs.map((leg) => {
         const pts = [];
         for (let i = 0; i <= SAMPLES; i++) {
@@ -7013,7 +6667,7 @@ var PnlDiagram = React33__namespace.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 = React33__namespace.useMemo(() => {
+    const breakevens = React32__namespace.useMemo(() => {
       const pts = [];
       for (let i = 1; i < combinedPoints.length; i++) {
         const prev = combinedPoints[i - 1];
@@ -7030,7 +6684,7 @@ var PnlDiagram = React33__namespace.forwardRef(
     const maxGainPoint = combinedPoints.find((p) => p.y === maxGain);
     const maxLossPoint = combinedPoints.find((p) => p.y === maxLoss);
     const zeroY = scaleY(0);
-    const handleMouseMove = React33__namespace.useCallback(
+    const handleMouseMove = React32__namespace.useCallback(
       (e) => {
         const rect = e.currentTarget.getBoundingClientRect();
         const mouseX = e.clientX - rect.left;
@@ -7043,7 +6697,7 @@ var PnlDiagram = React33__namespace.forwardRef(
       },
       [vb.xMin, vb.xMax, chartW]
     );
-    const handleMouseLeave = React33__namespace.useCallback(() => setHoverX(null), []);
+    const handleMouseLeave = React32__namespace.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 })),
@@ -7347,7 +7001,7 @@ function formatDate(date) {
   const d = new Date(date);
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
 }
-var OptionPositionCard = React33__namespace.forwardRef(
+var OptionPositionCard = React32__namespace.forwardRef(
   function OptionPositionCard2(props, ref) {
     const {
       position,
@@ -7511,7 +7165,7 @@ function ExpirationPill({ exp, isSelected, onClick }) {
     }
   );
 }
-var ExpirationSelector = React33__namespace.forwardRef(
+var ExpirationSelector = React32__namespace.forwardRef(
   function ExpirationSelector2(props, ref) {
     const {
       expirations,
@@ -7521,8 +7175,8 @@ var ExpirationSelector = React33__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const scrollRef = React33__namespace.useRef(null);
-    React33__namespace.useEffect(() => {
+    const scrollRef = React32__namespace.useRef(null);
+    React32__namespace.useEffect(() => {
       const container = scrollRef.current;
       if (!container) return;
       const selectedEl = container.querySelector('[data-selected="true"]');
@@ -7941,7 +7595,7 @@ exports.ProgressCircleRoot = ProgressCircleRoot;
 exports.ProgressCircleValueText = ProgressCircleValueText;
 exports.ProjectSwitcher = ProjectSwitcher;
 exports.Radio = Radio2;
-exports.RadioGroup = RadioGroup3;
+exports.RadioGroup = RadioGroup2;
 exports.Rating = Rating;
 exports.Select = Select;
 exports.SelectAsync = SelectAsync;
@@ -7954,7 +7608,7 @@ exports.SelectItemText = SelectItemText;
 exports.SelectLabel = SelectLabel;
 exports.SelectRoot = SelectRoot;
 exports.SelectValueText = SelectValueText;
-exports.Separator = Separator2;
+exports.Separator = Separator;
 exports.SettingsMenu = SettingsMenu;
 exports.Skeleton = Skeleton;
 exports.SkeletonCircle = SkeletonCircle;