@luxfi/ui 7.4.10 → 7.4.11

package/dist/index.js

@@ -1,24 +1,16 @@
 "use client";
-import { createGui, styled, View, Sheet, Avatar as Avatar$1, TooltipGroup, Tooltip as Tooltip$1, Checkbox, Dialog, H3, H2, H1, Input as Input$1, Popover, Progress as Progress$1, RadioGroup, Separator, Slider as Slider$1, Switch, TextArea, Text, GuiProvider } from '@hanzo/gui';
+import { createGui, styled, View, Sheet, Dialog, Avatar as Avatar$1, TooltipGroup, Tooltip as Tooltip$1, Checkbox, YStack, Label, Text, H3, H2, H1, Input as Input$1, Popover, Progress as Progress$1, RadioGroup, Select as Select$1, Separator as Separator$1, Slider as Slider$1, Switch, TextArea, GuiProvider, XStack, Menu, Accordion, Collapsible, Tabs, useTabsContext, ToastProvider, ToastViewport, Toast } from '@hanzo/gui';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import * as React33 from 'react';
-import React33__default from 'react';
+import * as React32 from 'react';
+import React32__default, { Children, createElement } from 'react';
 import { defaultConfig } from '@hanzogui/config/v5';
 import { animations } from '@hanzogui/config/v5-css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { Check, ChevronRight, ChevronsUpDown, Folder, LogOut, User, Settings, Menu, Building2 } from 'lucide-react';
-import * as RadixDialog from '@radix-ui/react-dialog';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronRight, ChevronsUpDown, Folder, LogOut, User, Settings, Menu as Menu$1, Building2, Check } from 'lucide-react';
 import { useClickAway, useDebounce } from '@uidotdev/usehooks';
-import * as Collapsible from '@radix-ui/react-collapsible';
-import * as LabelPrimitive from '@radix-ui/react-label';
 import { debounce, throttle } from 'es-toolkit';
-import * as RadixSelect from '@radix-ui/react-select';
-import * as RadixTabs from '@radix-ui/react-tabs';
-import { toast, Toaster as Toaster$1 } from 'sonner';
 
 // src/provider.tsx
 
@@ -199,7 +191,7 @@ var defaultQueryClient = new 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__default.useInsertionEffect(() => {
+  React32__default.useInsertionEffect(() => {
     if (typeof document === "undefined") return;
     if (document.getElementById(FONT_BODY_RESET_ID)) return;
     const style = document.createElement("style");
@@ -208,16 +200,16 @@ var useFontBodyReset = () => {
     document.head.appendChild(style);
   }, []);
 };
-var WhiteLabelContext = React33__default.createContext(resolveWhiteLabel(""));
-var useWhiteLabel = () => React33__default.useContext(WhiteLabelContext);
+var WhiteLabelContext = React32__default.createContext(resolveWhiteLabel(""));
+var useWhiteLabel = () => React32__default.useContext(WhiteLabelContext);
 var useHostWhiteLabel = (host) => {
-  const [resolvedHost, setResolvedHost] = React33__default.useState(host ?? "");
-  React33__default.useEffect(() => {
+  const [resolvedHost, setResolvedHost] = React32__default.useState(host ?? "");
+  React32__default.useEffect(() => {
     if (host !== void 0) return;
     const browserHost = currentHost();
     if (browserHost) setResolvedHost(browserHost);
   }, [host]);
-  return React33__default.useMemo(() => resolveWhiteLabel(resolvedHost), [resolvedHost]);
+  return React32__default.useMemo(() => resolveWhiteLabel(resolvedHost), [resolvedHost]);
 };
 var AppProvider = ({
   children,
@@ -236,8 +228,8 @@ function cn(...inputs) {
 var NARROW_PX = 640;
 var TOUCH_PX = 1024;
 function useBelow(px) {
-  const [below, setBelow] = React33.useState(false);
-  React33.useEffect(() => {
+  const [below, setBelow] = React32.useState(false);
+  React32.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
     const apply = () => setBelow(mql.matches);
     apply();
@@ -375,23 +367,23 @@ function writeScope(host, kind, value) {
   } catch {
   }
 }
-var IdentityContext = React33.createContext(null);
+var IdentityContext = React32.createContext(null);
 var IdentityProvider = ({
   children,
   auth = defaultAuth,
   loginPath = "/login"
 }) => {
   const whiteLabel = useWhiteLabel();
-  const base = React33.useMemo(() => iamBase(whiteLabel), [whiteLabel]);
-  const [status, setStatus] = React33.useState("loading");
-  const [account, setAccount] = React33.useState(null);
-  const [orgs, setOrgs] = React33.useState([]);
-  const [projects, setProjects] = React33.useState([]);
-  const [error, setError] = React33.useState(null);
-  const [orgName, setOrgName] = React33.useState(null);
-  const [projectName, setProjectName] = React33.useState(null);
-  const [epoch, setEpoch] = React33.useState(0);
-  React33.useEffect(() => {
+  const base = React32.useMemo(() => iamBase(whiteLabel), [whiteLabel]);
+  const [status, setStatus] = React32.useState("loading");
+  const [account, setAccount] = React32.useState(null);
+  const [orgs, setOrgs] = React32.useState([]);
+  const [projects, setProjects] = React32.useState([]);
+  const [error, setError] = React32.useState(null);
+  const [orgName, setOrgName] = React32.useState(null);
+  const [projectName, setProjectName] = React32.useState(null);
+  const [epoch, setEpoch] = React32.useState(0);
+  React32.useEffect(() => {
     const ac = new AbortController();
     let live = true;
     void (async () => {
@@ -439,12 +431,12 @@ var IdentityProvider = ({
       ac.abort();
     };
   }, [base, auth, epoch]);
-  const org = React33.useMemo(() => {
+  const org = React32.useMemo(() => {
     if (orgs.length === 0) return null;
     const saved = orgName ?? readScope(whiteLabel.host, "org");
     return orgs.find((o) => o.name === saved) ?? orgs.find((o) => o.name === account?.owner) ?? orgs[0];
   }, [orgs, orgName, account, whiteLabel.host]);
-  React33.useEffect(() => {
+  React32.useEffect(() => {
     if (!org) {
       setProjects([]);
       return;
@@ -462,12 +454,12 @@ var IdentityProvider = ({
       ac.abort();
     };
   }, [base, auth, org, epoch]);
-  const project = React33.useMemo(() => {
+  const project = React32.useMemo(() => {
     if (projects.length === 0) return null;
     const saved = projectName ?? readScope(whiteLabel.host, "project");
     return projects.find((p) => p.name === saved) ?? projects.find((p) => p.isDefault) ?? projects[0];
   }, [projects, projectName, whiteLabel.host]);
-  const value = React33.useMemo(() => ({
+  const value = React32.useMemo(() => ({
     status,
     account,
     orgs,
@@ -499,9 +491,9 @@ var IdentityProvider = ({
   return /* @__PURE__ */ jsx(IdentityContext.Provider, { value, children });
 };
 function useIdentity() {
-  const ctx = React33.useContext(IdentityContext);
+  const ctx = React32.useContext(IdentityContext);
   const whiteLabel = useWhiteLabel();
-  const fallback = React33.useMemo(() => ({
+  const fallback = React32.useMemo(() => ({
     status: "anonymous",
     account: null,
     orgs: [],
@@ -555,7 +547,7 @@ var CLOSE_BUTTON_CLASSES = [
   "hover:text-[var(--hover-color,currentColor)]",
   "disabled:opacity-40"
 ].join(" ");
-var CloseButton = React33.forwardRef(function CloseButton2(props, ref) {
+var CloseButton = React32.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsx(
     CloseButtonFrame,
@@ -582,13 +574,22 @@ var CloseButton = React33.forwardRef(function CloseButton2(props, ref) {
     }
   );
 });
-var DrawerPlacementContext = React33.createContext("right");
-var DrawerSizeContext = React33.createContext("md");
-var DrawerStateContext = React33.createContext({
+var ink = (children, Wrap = Text, props = {}) => {
+  let hasText = false;
+  Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? createElement(Wrap, props, child) : child);
+};
+var DrawerPlacementContext = React32.createContext("right");
+var DrawerSizeContext = React32.createContext("md");
+var DrawerStateContext = React32.createContext({
   open: false,
   setOpen: () => {
   },
-  modal: true
+  modal: true,
+  narrow: false
 });
 var DrawerRoot = (props) => {
   const {
@@ -600,63 +601,43 @@ var DrawerRoot = (props) => {
     modal = true,
     size = "md"
   } = props;
-  const [uncontrolled, setUncontrolled] = React33.useState(defaultOpen ?? false);
+  const [uncontrolled, setUncontrolled] = React32.useState(defaultOpen ?? false);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : uncontrolled;
-  const setOpen = React33.useCallback((nextOpen) => {
+  const narrow = useIsNarrow();
+  const setOpen = React32.useCallback((nextOpen) => {
     if (!isControlled) setUncontrolled(nextOpen);
     onOpenChange?.({ open: nextOpen });
   }, [isControlled, onOpenChange]);
-  const state = React33.useMemo(
-    () => ({ open: isOpen, setOpen, modal }),
-    [isOpen, setOpen, modal]
+  const state = React32.useMemo(
+    () => ({ open: isOpen, setOpen, modal, narrow }),
+    [isOpen, setOpen, modal, narrow]
   );
-  return /* @__PURE__ */ jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(DrawerStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(
-    RadixDialog.Root,
-    {
-      open: isOpen,
-      onOpenChange: setOpen,
-      modal,
-      children
-    }
-  ) }) }) });
+  return /* @__PURE__ */ jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(DrawerStateContext.Provider, { value: state, children: narrow ? children : /* @__PURE__ */ jsx(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.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.forwardRef(
   function DrawerContent2(props, ref) {
-    const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
-    const placement = React33.useContext(DrawerPlacementContext);
-    const size = React33.useContext(DrawerSizeContext);
-    const { open, setOpen, modal } = React33.useContext(DrawerStateContext);
-    const isNarrow = useIsNarrow();
-    if (isNarrow) {
+    const { children, portalled = true, portalRef: _portalRef, offset: _offset, backdrop = true, ...rest } = props;
+    const placement = React32.useContext(DrawerPlacementContext);
+    const size = React32.useContext(DrawerSizeContext);
+    const { open, setOpen, modal, narrow } = React32.useContext(DrawerStateContext);
+    if (narrow) {
       return /* @__PURE__ */ jsxs(
         Sheet,
         {
@@ -674,7 +655,7 @@ var DrawerContent = React33.forwardRef(
                 transition: "lazy",
                 enterStyle: { opacity: 0 },
                 exitStyle: { opacity: 0 },
-                className: "bg-black/50"
+                backgroundColor: SCRIM
               }
             ),
             /* @__PURE__ */ jsx(Sheet.Handle, {}),
@@ -682,10 +663,11 @@ var DrawerContent = React33.forwardRef(
               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
               }
@@ -696,324 +678,223 @@ var DrawerContent = React33.forwardRef(
     }
     const content = /* @__PURE__ */ jsxs(Fragment, { children: [
       backdrop && /* @__PURE__ */ jsx(
-        RadixDialog.Overlay,
+        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__ */ jsx(
-        RadixDialog.Content,
+        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__ */ jsx(RadixDialog.Portal, { container: portalRef?.current ?? void 0, children: content });
-    }
-    return content;
+    return portalled ? /* @__PURE__ */ jsx(Dialog.Portal, { children: content }) : content;
   }
 );
-var DrawerCloseTrigger = React33.forwardRef(function DrawerCloseTrigger2(props, ref) {
-  return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
-    CloseButton,
-    {
-      ref,
-      className: cn("absolute top-7 right-5", props.className),
-      ...props
-    }
-  ) });
+var DrawerCloseTrigger = React32.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__ */ jsx(View, { position: "absolute", top: 28, right: 20, zIndex: 1, children: /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { ref, ...props }) }) })
+  );
 });
-var DrawerTrigger = (props) => {
-  const { asChild = true, ...rest } = props;
-  return /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild, ...rest });
-};
-var DrawerHeader = React33.forwardRef(
-  function DrawerHeader2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5 p-6 pb-0", className), ...props });
-  }
-);
-var DrawerBody = React33.forwardRef(
-  function DrawerBody2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 overflow-auto p-6", className), ...props });
-  }
-);
-var DrawerFooter = React33.forwardRef(
-  function DrawerFooter2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-6 pt-0", className), ...props });
-  }
-);
-var DrawerTitle = RadixDialog.Title;
-var DrawerDescription = RadixDialog.Description;
-var DrawerActionTrigger = RadixDialog.Close;
-function parsePlacement(placement) {
-  if (!placement) {
-    return { side: "bottom", align: "start" };
-  }
-  const parts = placement.split("-");
-  const side = parts[0] ?? "bottom";
-  const alignPart = parts[1];
-  let align = "center";
-  if (alignPart === "start") {
-    align = "start";
-  } else if (alignPart === "end") {
-    align = "end";
+var DrawerTrigger = ({ asChild = true, children, ...rest }) => {
+  const { setOpen, narrow } = React32.useContext(DrawerStateContext);
+  if (narrow) {
+    return React32.isValidElement(children) ? React32.cloneElement(children, { onClick: () => setOpen(true) }) : /* @__PURE__ */ jsx(Fragment, { children });
   }
-  return { side, align };
-}
-var PositioningContext = React33.createContext({
-  side: "bottom",
-  align: "start",
-  sideOffset: 4,
-  alignOffset: 0
-});
-var MenuRoot = (props) => {
-  const {
-    children,
+  return /* @__PURE__ */ jsx(Dialog.Trigger, { asChild, ...rest, children });
+};
+var DrawerHeader = ({ children, ...props }) => /* @__PURE__ */ jsx(YStack, { gap: 6, padding: 24, paddingBottom: 0, ...props, children: ink(children) });
+var DrawerBody = ({ children, ...props }) => /* @__PURE__ */ jsx(YStack, { flex: 1, overflow: "scroll", padding: 24, ...props, children: ink(children) });
+var DrawerFooter = ({ children, ...props }) => /* @__PURE__ */ jsx(XStack, { alignItems: "center", justifyContent: "flex-end", gap: 8, padding: 24, paddingTop: 0, ...props, children: ink(children) });
+var DrawerTitle = Dialog.Title;
+var DrawerDescription = Dialog.Description;
+var DrawerActionTrigger = 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__ */ jsx(
+  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.useMemo(() => ({
-    side,
-    align,
-    sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
-    alignOffset: mergedPositioning.offset?.crossAxis ?? 0
-  }), [side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis]);
-  const handleOpenChange = React33.useCallback((isOpen) => {
-    onOpenChange?.({ open: isOpen });
-  }, [onOpenChange]);
-  return /* @__PURE__ */ jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsx(
-    DropdownMenu.Root,
-    {
-      open,
-      defaultOpen,
-      onOpenChange: handleOpenChange,
-      modal,
-      children
-    }
-  ) });
-};
-var MenuTrigger = React33.forwardRef(function MenuTrigger2(props, ref) {
-  const { asChild = false, ...rest } = props;
-  return /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild, ref, ...rest });
-});
-var MenuContent = React33.forwardRef(function MenuContent2(props, ref) {
-  const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
-  const positioning = React33.useContext(PositioningContext);
-  const mergedStyle = {
-    ...style,
-    ...zIndex !== void 0 ? { zIndex: typeof zIndex === "string" ? `var(--z-index-${zIndex}, ${zIndex})` : zIndex } : {},
-    ...minW !== void 0 ? { minWidth: minW } : {}
-  };
-  const content = /* @__PURE__ */ jsx(
-    DropdownMenu.Content,
-    {
-      ref,
-      side: positioning.side,
-      align: positioning.align,
-      sideOffset: positioning.sideOffset,
-      alignOffset: positioning.alignOffset,
-      className: cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-lg p-1",
-        "border border-[var(--color-popover-border,var(--color-border-divider))]",
-        "bg-[var(--color-popover-bg,var(--color-dialog-bg))]",
-        "shadow-[0_4px_12px_var(--color-popover-shadow)]",
-        "outline-none",
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      ),
-      style: Object.keys(mergedStyle).length > 0 ? mergedStyle : void 0,
-      ...rest
-    }
-  );
-  if (!portalled) {
-    return content;
+    onOpenChange: onOpenChange ? (isOpen) => onOpenChange({ open: isOpen }) : void 0,
+    modal,
+    placement: positioning?.placement ?? "bottom-start",
+    offset: positioning?.offset?.mainAxis ?? 4,
+    children
   }
-  return /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalRef?.current ?? void 0, children: content });
-});
-var MenuItem = React33.forwardRef(function MenuItem2(props, ref) {
-  const { className, value: _value, asChild, closeOnSelect: _closeOnSelect, disabled, children, onClick, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    DropdownMenu.Item,
+);
+var MenuTrigger = ({ asChild = false, ...rest }) => /* @__PURE__ */ jsx(Menu.Trigger, { asChild, ...rest });
+var MenuContent = ({
+  portalled = true,
+  minW,
+  children,
+  ...rest
+}) => {
+  const content = /* @__PURE__ */ jsx(
+    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.forwardRef(function MenuItemText2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx("span", { ref, className: cn("flex-1", className), ...rest });
-});
-React33.forwardRef(function MenuItemCommand2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ref,
-      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
-      ...rest
-    }
-  );
-});
-var MenuSeparator = React33.forwardRef(function MenuSeparator2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    DropdownMenu.Separator,
-    {
-      ref,
-      className: cn("-mx-1 my-1 h-px bg-[var(--color-border-divider)]", className),
-      ...rest
-    }
-  );
-});
-var MenuItemGroup = React33.forwardRef(function MenuItemGroup2(props, ref) {
-  const { title, children, className, ...rest } = props;
-  return /* @__PURE__ */ jsxs(DropdownMenu.Group, { ref, className, ...rest, children: [
-    title && /* @__PURE__ */ jsx(DropdownMenu.Label, { className: "px-2 py-1.5 text-xs font-semibold select-none opacity-60", children: title }),
-    children
-  ] });
-});
-var MenuArrow = React33.forwardRef(function MenuArrow2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    DropdownMenu.Arrow,
-    {
-      ref,
-      className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
-      ...rest
-    }
-  );
-});
-var MenuCheckboxItem = React33.forwardRef(function MenuCheckboxItem2(props, ref) {
-  const { className, children, checked, onCheckedChange, onClick, ...rest } = props;
-  return /* @__PURE__ */ jsxs(
-    DropdownMenu.CheckboxItem,
+  return portalled ? /* @__PURE__ */ jsx(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__ */ jsx(Menu.Item, { asChild: true, ...rest, children }) : /* @__PURE__ */ jsx(
+    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__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
-        children
-      ]
-    }
-  );
-});
-var MenuRadioItemGroup = React33.forwardRef(function MenuRadioItemGroup2(props, ref) {
-  const { value, onValueChange, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    DropdownMenu.RadioGroup,
-    {
-      ref,
-      value,
-      onValueChange,
-      ...rest
-    }
-  );
-});
-var MenuRadioItem = React33.forwardRef(function MenuRadioItem2(props, ref) {
-  const { className, children, value, onClick, ...rest } = props;
-  const { value: _v, ...radixRest } = rest;
-  return /* @__PURE__ */ jsxs(
-    DropdownMenu.RadioItem,
-    {
-      ref,
-      value,
-      onClick,
-      className: cn(
-        "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
-        "outline-none transition-colors",
-        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
-        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
-        /* @__PURE__ */ jsx("span", { children })
-      ]
+      children: ink(children, void 0, { fontSize: 14, color: TEXT })
     }
-  );
-});
-React33.forwardRef(function MenuContextTrigger2(props, ref) {
-  const { asChild: _asChild, ...rest } = props;
-  return /* @__PURE__ */ jsx("span", { ref, ...rest });
-});
-var MenuTriggerItem = React33.forwardRef(function MenuTriggerItem2(props, ref) {
-  const { startIcon, children, className, ...rest } = props;
-  return /* @__PURE__ */ jsx(DropdownMenu.Sub, { children: /* @__PURE__ */ jsxs(
-    DropdownMenu.SubTrigger,
+  )
+);
+var MenuItemText = (props) => /* @__PURE__ */ jsx(Text, { flex: 1, fontSize: 14, color: TEXT, ...props });
+var MenuSeparator = (props) => /* @__PURE__ */ jsx(
+  Menu.Separator,
+  {
+    unstyled: true,
+    height: 1,
+    marginVertical: 4,
+    marginHorizontal: -4,
+    backgroundColor: "var(--color-border-divider)",
+    ...props
+  }
+);
+var MenuItemGroup = ({ title, children, ...rest }) => /* @__PURE__ */ jsxs(Menu.Group, { unstyled: true, ...rest, children: [
+  title && /* @__PURE__ */ jsx(
+    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__ */ jsx("span", { className: "flex-1", children }),
-        /* @__PURE__ */ jsx(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__ */ jsx(Menu.Arrow, { backgroundColor: "var(--color-popover-bg)", ...props });
+var Indicator = () => /* @__PURE__ */ jsx(View, { position: "absolute", left: 8, width: 14, height: 14, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx(Menu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 16 }) }) });
+var MenuCheckboxItem = ({ children, ...rest }) => /* @__PURE__ */ jsxs(
+  Menu.CheckboxItem,
+  {
+    unstyled: true,
+    ...ROW,
+    paddingLeft: 32,
+    paddingRight: 8,
+    paddingVertical: 6,
+    disabledStyle: { opacity: 0.5, pointerEvents: "none" },
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsx(Indicator, {}),
+      ink(children, void 0, { fontSize: 14, color: TEXT })
+    ]
+  }
+);
+var MenuRadioItemGroup = (props) => /* @__PURE__ */ jsx(Menu.RadioGroup, { ...props });
+var MenuRadioItem = ({ children, ...rest }) => /* @__PURE__ */ jsxs(
+  Menu.RadioItem,
+  {
+    unstyled: true,
+    ...ROW,
+    paddingLeft: 32,
+    paddingRight: 8,
+    paddingVertical: 6,
+    disabledStyle: { opacity: 0.5, pointerEvents: "none" },
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsx(Indicator, {}),
+      ink(children, void 0, { fontSize: 14, color: TEXT })
+    ]
+  }
+);
+var MenuTriggerItem = ({ startIcon, children, ...rest }) => /* @__PURE__ */ jsx(Menu.Sub, { children: /* @__PURE__ */ jsxs(
+  Menu.SubTrigger,
+  {
+    unstyled: true,
+    ...ROW,
+    gap: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    ...rest,
+    children: [
+      startIcon,
+      /* @__PURE__ */ jsx(XStack, { flex: 1, children: ink(children, void 0, { fontSize: 14, color: TEXT }) }),
+      /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
+    ]
+  }
+) });
 function initials(label) {
   return label.split(/[\s._-]+/).filter(Boolean).map((w) => w[0]).join("").slice(0, 2).toUpperCase();
 }
@@ -1063,9 +944,9 @@ var Switcher = ({
   align = "start",
   testId
 }) => {
-  const [open, setOpen] = React33.useState(false);
+  const [open, setOpen] = React32.useState(false);
   const narrow = useIsNarrow();
-  const close = React33.useCallback(() => setOpen(false), []);
+  const close = React32.useCallback(() => setOpen(false), []);
   const message = status === "loading" ? "Loading\u2026" : status === "error" ? error ?? "Could not reach IAM." : status === "anonymous" ? null : items.length === 0 ? empty : null;
   const rows = status === "anonymous" && onSignIn ? [{ id: "sign-in", label: signInLabel, icon: /* @__PURE__ */ jsx(User, { "aria-hidden": "true", className: "h-4 w-4" }), onSelect: onSignIn }] : status === "ready" ? items : [];
   const panel = (menu) => /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1098,7 +979,7 @@ var Switcher = ({
   );
   if (narrow) {
     return /* @__PURE__ */ jsxs(DrawerRoot, { open, onOpenChange: (d) => setOpen(d.open), placement: "bottom", size: "md", children: [
-      React33.cloneElement(trigger, { onClick: () => setOpen(true) }),
+      React32.cloneElement(trigger, { onClick: () => setOpen(true) }),
       /* @__PURE__ */ jsxs(DrawerContent, { "data-testid": testId ? `${testId}-panel` : void 0, children: [
         /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: title }) }),
         /* @__PURE__ */ jsx(DrawerBody, { children: panel(false) })
@@ -1214,7 +1095,7 @@ var AppNav = ({
 }) => {
   const id = useIdentity();
   const narrow = useIsNarrow();
-  const [menu, setMenu] = React33.useState(false);
+  const [menu, setMenu] = React32.useState(false);
   return /* @__PURE__ */ jsx(
     "header",
     {
@@ -1230,7 +1111,7 @@ var AppNav = ({
               "data-testid": "nav-menu",
               className: "rounded-md p-2 hover:bg-[rgba(127,127,127,0.14)]",
               onClick: () => setMenu(true),
-              children: /* @__PURE__ */ jsx(Menu, { "aria-hidden": "true", className: "h-5 w-5" })
+              children: /* @__PURE__ */ jsx(Menu$1, { "aria-hidden": "true", className: "h-5 w-5" })
             }
           ),
           /* @__PURE__ */ jsxs(DrawerContent, { "data-testid": "nav-menu-panel", children: [
@@ -1276,178 +1157,117 @@ var AppNav = ({
     }
   );
 };
-var IndicatorIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var AccordionRoot = React33.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.useCallback(
-      (next) => {
-        onValueChange?.({ value: next });
-      },
-      [onValueChange]
-    );
-    return /* @__PURE__ */ jsx(
-      AccordionPrimitive.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__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var BAR = "var(--color-text-primary)";
+var Indicator2 = ({ open, variant }) => variant === "faq" ? /* @__PURE__ */ jsxs(XStack, { width: 12, height: 12, flexShrink: 0, alignItems: "center", justifyContent: "center", position: "relative", children: [
+  /* @__PURE__ */ jsx(View, { position: "absolute", width: "100%", height: 2, borderRadius: 2, backgroundColor: BAR }),
+  /* @__PURE__ */ jsx(
+    View,
+    {
+      position: "absolute",
+      width: 2,
+      height: "100%",
+      borderRadius: 2,
+      backgroundColor: BAR,
+      rotate: open ? "90deg" : "0deg"
+    }
+  )
+] }) : /* @__PURE__ */ jsx(XStack, { flexShrink: 0, alignItems: "center", rotate: open ? "270deg" : "180deg", children: /* @__PURE__ */ jsx(IndicatorIcon, {}) });
+var Variant = React32.createContext(void 0);
+var AccordionRoot = ({
+  value,
+  defaultValue,
+  onValueChange,
+  variant,
+  size,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsx(Variant.Provider, { value: variant, children: /* @__PURE__ */ jsx(
+  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.forwardRef(
-  function AccordionItem2(props, ref) {
-    const { className, as: _as, _first, _last, display: _display, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      AccordionPrimitive.Item,
-      {
-        ref,
-        className: cn(
-          "border-b border-[var(--color-border-divider)]",
-          className
-        ),
-        ...rest
-      }
-    );
+) });
+var AccordionItem = (props) => /* @__PURE__ */ jsx(
+  Accordion.Item,
+  {
+    unstyled: true,
+    borderBottomWidth: 1,
+    borderColor: "var(--color-border-divider)",
+    ...props
   }
 );
-var AccordionItemTrigger = React33.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__ */ 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__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "inline-flex shrink-0 transition-transform duration-200",
-        "rotate-180",
-        "group-data-[state=open]/trigger:rotate-[270deg]"
-      ),
-      children: /* @__PURE__ */ jsx(IndicatorIcon, { className: "h-5 w-5" })
-    }
-  );
-  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { asChild: true, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-    AccordionPrimitive.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.forwardRef(function AccordionItemContent2(props, ref) {
-  const { className, children, pb: _pb, pr: _pr, pl: _pl, w: _w, display: _display, flexDir: _flexDir, rowGap: _rowGap, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    AccordionPrimitive.Content,
+var AccordionItemTrigger = ({
+  children,
+  indicatorPlacement: placementProp,
+  variant: variantProp,
+  noIndicator,
+  headingLevel = 3,
+  ...rest
+}) => {
+  const variant = variantProp ?? React32.useContext(Variant);
+  const placement = variant === "faq" ? "start" : placementProp ?? "end";
+  return /* @__PURE__ */ jsx(Accordion.Header, { unstyled: true, render: `h${headingLevel}`, "aria-level": headingLevel, display: "flex", width: "100%", children: /* @__PURE__ */ jsx(
+    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__ */ jsx("div", { className: "pb-3", children })
+      children: (({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        placement === "start" && !noIndicator && /* @__PURE__ */ jsx(Indicator2, { open, variant }),
+        ink(children, void 0, { color: "inherit", textAlign: "left" }),
+        placement === "end" && !noIndicator && /* @__PURE__ */ jsx(Indicator2, { open, variant })
+      ] }))
     }
-  );
-});
+  ) });
+};
+var AccordionItemContent = ({ children, ...rest }) => /* @__PURE__ */ jsx(
+  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.useState([]);
-  const onValueChange = React33.useCallback(({ value: value2 }) => {
-    setValue(value2);
+  const [value, setValue] = React32.useState([]);
+  const onValueChange = React32.useCallback(({ value: next }) => {
+    setValue(next);
   }, []);
-  const scrollToItemFromUrl = React33.useCallback(() => {
+  const scrollToItemFromUrl = React32.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.useMemo(() => {
-    return {
-      value,
-      onValueChange,
-      scrollToItemFromUrl
-    };
-  }, [value, onValueChange, scrollToItemFromUrl]);
+  return React32.useMemo(
+    () => ({ value, onValueChange, scrollToItemFromUrl }),
+    [value, onValueChange, scrollToItemFromUrl]
+  );
 }
 var SHIM_PROPS = [
   "w",
@@ -1565,7 +1385,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.forwardRef(
+var Skeleton = React32.forwardRef(
   function Skeleton2(props, ref) {
     const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
     const shimStyle = shimToStyle(props);
@@ -1574,10 +1394,10 @@ var Skeleton = React33.forwardRef(
     const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
     const htmlRest = stripShims(allRest);
     if (!loading) {
-      if (asChild && React33.isValidElement(children)) return children;
+      if (asChild && React32.isValidElement(children)) return children;
       return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
     }
-    if (asChild && React33.isValidElement(children)) {
+    if (asChild && React32.isValidElement(children)) {
       return /* @__PURE__ */ jsx(
         Component,
         {
@@ -1603,7 +1423,7 @@ var Skeleton = React33.forwardRef(
     );
   }
 );
-var SkeletonCircle = React33.forwardRef(
+var SkeletonCircle = React32.forwardRef(
   function SkeletonCircle2(props, ref) {
     const { size = 40, loading = true, className, ...rest } = props;
     const dimension = typeof size === "number" ? `${size}px` : size;
@@ -1619,7 +1439,7 @@ var SkeletonCircle = React33.forwardRef(
     );
   }
 );
-var SkeletonText = React33.forwardRef(
+var SkeletonText = React32.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
     return /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
@@ -1645,7 +1465,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"
 };
@@ -1653,7 +1473,7 @@ var INDICATOR_SIZE_CLASSES = {
   sm: "w-5 h-5 my-0",
   md: "w-5 h-5 my-[2px]"
 };
-var Alert = React33.forwardRef(
+var Alert = React32.forwardRef(
   function Alert2(props, ref) {
     const {
       title,
@@ -1678,7 +1498,7 @@ var Alert = React33.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.useState(true);
+    const [isOpen, setIsOpen] = React32.useState(true);
     const resolvedSize = size ?? "md";
     const defaultIcon = /* @__PURE__ */ jsx(IndicatorIcon2, { className: "w-5 h-5" });
     const iconElement = (() => {
@@ -1693,7 +1513,7 @@ var Alert = React33.forwardRef(
         INDICATOR_SIZE_CLASSES[resolvedSize]
       ), children: icon || defaultIcon });
     })();
-    const handleClose = React33.useCallback(() => {
+    const handleClose = React32.useCallback(() => {
       setIsOpen(false);
       onClose?.();
     }, [onClose]);
@@ -1724,7 +1544,7 @@ var Alert = React33.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: [
@@ -1754,7 +1574,7 @@ var Alert = React33.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",
@@ -1769,11 +1589,11 @@ var VARIANT_CLASSES = {
 };
 var DEFAULT_SIZE = "md";
 var DEFAULT_VARIANT = "subtle";
-var AvatarGroupContext = React33.createContext({});
+var AvatarGroupContext = React32.createContext({});
 function useAvatarGroupContext() {
-  return React33.useContext(AvatarGroupContext);
+  return React32.useContext(AvatarGroupContext);
 }
-var Avatar = React33.forwardRef(
+var Avatar = React32.forwardRef(
   function Avatar2(props, ref) {
     const group = useAvatarGroupContext();
     const {
@@ -1800,7 +1620,7 @@ var Avatar = React33.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
@@ -1824,7 +1644,7 @@ var Avatar = React33.forwardRef(
     );
   }
 );
-var AvatarFallback = React33.forwardRef(
+var AvatarFallback = React32.forwardRef(
   function AvatarFallback2(props, ref) {
     const { name, icon, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxs(
@@ -1852,10 +1672,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.forwardRef(
+var AvatarGroup = React32.forwardRef(
   function AvatarGroup2(props, ref) {
     const { size, variant, borderless, className, ...rest } = props;
-    const contextValue = React33.useMemo(
+    const contextValue = React32.useMemo(
       () => ({ size, variant, borderless }),
       [size, variant, borderless]
     );
@@ -1873,7 +1693,7 @@ function mapPlacement(p) {
   if (!p) return void 0;
   return p;
 }
-var Tooltip = React33.forwardRef(
+var Tooltip = React32.forwardRef(
   function Tooltip2(props, ref) {
     const {
       showArrow: showArrowProp,
@@ -1892,28 +1712,28 @@ var Tooltip = React33.forwardRef(
       interactive,
       positioning
     } = props;
-    const [open, setOpen] = React33.useState(defaultOpen);
-    const timeoutRef = React33.useRef(null);
+    const [open, setOpen] = React32.useState(defaultOpen);
+    const timeoutRef = React32.useRef(null);
     const isMobile = useIsTouch();
-    const handleOpenChange = React33.useCallback((nextOpen) => {
+    const handleOpenChange = React32.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.({ open: nextOpen });
     }, [onOpenChange]);
-    const handleOpenChangeManual = React33.useCallback((nextOpen) => {
+    const handleOpenChangeManual = React32.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.useCallback(() => {
+    const handleClickAway = React32.useCallback(() => {
       if (open) handleOpenChangeManual(false);
     }, [open, handleOpenChangeManual]);
     const triggerRef = useClickAway(handleClickAway);
-    const handleTriggerClick = React33.useCallback(() => {
+    const handleTriggerClick = React32.useCallback(() => {
       handleOpenChangeManual(!open);
     }, [handleOpenChangeManual, open]);
-    const handleContentClick = React33.useCallback((event) => {
+    const handleContentClick = React32.useCallback((event) => {
       event.stopPropagation();
       if (interactive) {
         const closestLink = event.target?.closest("a");
@@ -1922,7 +1742,7 @@ var Tooltip = React33.forwardRef(
         }
       }
     }, [interactive, handleOpenChangeManual]);
-    React33.useEffect(() => {
+    React32.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -1994,7 +1814,7 @@ function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
 var BASE_CLASSES = "inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text";
-var SIZE_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"
@@ -2024,7 +1844,7 @@ var COLOR_PALETTE_CLASSES = {
   bright_pink: "bg-badge-bright-pink-bg text-badge-bright-pink-fg"
 };
 var S2 = 4;
-var Badge = React33__default.forwardRef(
+var Badge = React32__default.forwardRef(
   function Badge2(props, ref) {
     const {
       loading,
@@ -2064,7 +1884,7 @@ var Badge = React33__default.forwardRef(
         ref,
         className: cn(
           BASE_CLASSES,
-          SIZE_CLASSES4[size],
+          SIZE_CLASSES3[size],
           COLOR_PALETTE_CLASSES[colorPalette],
           className
         ),
@@ -2273,7 +2093,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.forwardRef(
+var Button = React32.forwardRef(
   function Button2(props, ref) {
     const {
       className,
@@ -2364,7 +2184,7 @@ var Button = React33.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",
@@ -2373,9 +2193,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.forwardRef(
+var ButtonGroup = React32.forwardRef(
   function ButtonGroup2(props, ref) {
     const { className, ...rest } = props;
     return /* @__PURE__ */ jsx(
@@ -2389,7 +2209,7 @@ var ButtonGroup = React33.forwardRef(
     );
   }
 );
-var ButtonGroupRadio = React33.forwardRef(
+var ButtonGroupRadio = React32.forwardRef(
   function ButtonGroupRadio2(props, ref) {
     const {
       children,
@@ -2401,24 +2221,24 @@ var ButtonGroupRadio = React33.forwardRef(
       className,
       ...rest
     } = props;
-    const firstChildValue = React33.useMemo(() => {
+    const firstChildValue = React32.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.useState(defaultValue ?? firstChildValue);
-    const handleItemClick = React33.useCallback((event) => {
+    const [value, setValue] = React32.useState(defaultValue ?? firstChildValue);
+    const handleItemClick = React32.useCallback((event) => {
       const v = event.currentTarget.value;
       setValue(v);
       onChange?.(v);
     }, [onChange]);
-    const clonedChildren = React33.Children.map(children, (child) => {
-      return React33.cloneElement(child, {
+    const clonedChildren = React32.Children.map(children, (child) => {
+      return React32.cloneElement(child, {
         onClick: handleItemClick,
         selected: value === child.props.value,
         variant
       });
     });
-    const childrenLength = React33.Children.count(children);
+    const childrenLength = React32.Children.count(children);
     return /* @__PURE__ */ jsx(Skeleton, { loading, children: /* @__PURE__ */ jsx(
       "div",
       {
@@ -2438,11 +2258,11 @@ var ButtonGroupRadio = React33.forwardRef(
 );
 var NOOP = () => {
 };
-var CheckboxGroupContext = React33.createContext(null);
+var CheckboxGroupContext = React32.createContext(null);
 function useCheckboxGroupContext() {
-  return React33.useContext(CheckboxGroupContext);
+  return React32.useContext(CheckboxGroupContext);
 }
-var CheckboxGroupBase = React33.forwardRef(
+var CheckboxGroupBase = React32.forwardRef(
   function CheckboxGroup(props, ref) {
     const {
       children,
@@ -2454,10 +2274,10 @@ var CheckboxGroupBase = React33.forwardRef(
       className,
       ...rest
     } = props;
-    const [uncontrolledValue, setUncontrolledValue] = React33.useState(defaultValue ?? []);
+    const [uncontrolledValue, setUncontrolledValue] = React32.useState(defaultValue ?? []);
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : uncontrolledValue;
-    const toggle = React33.useCallback(
+    const toggle = React32.useCallback(
       (itemValue) => {
         const next = value.includes(itemValue) ? value.filter((v) => v !== itemValue) : [...value, itemValue];
         if (!isControlled) {
@@ -2467,12 +2287,12 @@ var CheckboxGroupBase = React33.forwardRef(
       },
       [value, isControlled, onValueChange]
     );
-    React33.useEffect(() => {
+    React32.useEffect(() => {
       if (isControlled) {
         setUncontrolledValue(controlledValue);
       }
     }, [isControlled, controlledValue]);
-    const ctx = React33.useMemo(() => ({ value, toggle }), [value, toggle]);
+    const ctx = React32.useMemo(() => ({ value, toggle }), [value, toggle]);
     return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
       "div",
       {
@@ -2490,7 +2310,7 @@ var CheckboxGroupBase = React33.forwardRef(
   }
 );
 var CheckboxGroup2 = CheckboxGroupBase;
-var SIZE_CLASSES6 = {
+var SIZE_CLASSES5 = {
   sm: {
     root: "gap-1.5",
     control: "h-3.5 w-3.5 rounded-sm",
@@ -2530,7 +2350,7 @@ var IndeterminateIcon = ({ className }) => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("path", { d: "M0 0H12V2H0V0Z", fill: "currentColor" })
   }
 );
-var CheckboxBase = React33.forwardRef(
+var CheckboxBase = React32.forwardRef(
   function Checkbox$1(props, ref) {
     const {
       icon,
@@ -2551,8 +2371,8 @@ var CheckboxBase = React33.forwardRef(
       ...rest
     } = props;
     const group = useCheckboxGroupContext();
-    const hiddenInputRef = React33.useRef(null);
-    const setHiddenInputRef = React33.useCallback(
+    const hiddenInputRef = React32.useRef(null);
+    const setHiddenInputRef = React32.useCallback(
       (node) => {
         hiddenInputRef.current = node;
         if (typeof ref === "function") {
@@ -2565,7 +2385,7 @@ var CheckboxBase = React33.forwardRef(
     );
     const isInGroup = group !== null && value !== void 0;
     const groupChecked = isInGroup ? group.value.includes(value) : void 0;
-    const [internalChecked, setInternalChecked] = React33.useState(
+    const [internalChecked, setInternalChecked] = React32.useState(
       defaultChecked ?? false
     );
     const isControlled = checkedProp !== void 0 || isInGroup;
@@ -2577,7 +2397,7 @@ var CheckboxBase = React33.forwardRef(
     } else {
       checkedState = internalChecked;
     }
-    const handleCheckedChange = React33.useCallback(
+    const handleCheckedChange = React32.useCallback(
       (nextChecked) => {
         if (readOnly) return;
         if (!isControlled) {
@@ -2600,7 +2420,7 @@ var CheckboxBase = React33.forwardRef(
       },
       [readOnly, isControlled, isInGroup, group, value, onCheckedChange, onChange]
     );
-    const sizeClasses2 = SIZE_CLASSES6[size];
+    const sizeClasses2 = SIZE_CLASSES5[size];
     return /* @__PURE__ */ jsxs(
       "label",
       {
@@ -2742,7 +2562,7 @@ function resolveSpacing(v) {
   }
   return void 0;
 }
-var Link = React33__default.forwardRef(
+var Link = React32__default.forwardRef(
   function Link2(props, ref) {
     const {
       external,
@@ -2831,7 +2651,7 @@ var Link = React33__default.forwardRef(
     ) });
   }
 );
-var LinkBox = React33__default.forwardRef(
+var LinkBox = React32__default.forwardRef(
   function LinkBox2(props, ref) {
     const { className, ...rest } = props;
     return /* @__PURE__ */ jsx(
@@ -2844,7 +2664,7 @@ var LinkBox = React33__default.forwardRef(
     );
   }
 );
-var LinkOverlay = React33__default.forwardRef(
+var LinkOverlay = React32__default.forwardRef(
   function LinkOverlay2(props, ref) {
     const {
       children,
@@ -2925,8 +2745,8 @@ var LinkOverlay = React33__default.forwardRef(
   }
 );
 function useUpdateEffect(effect, deps) {
-  const isFirstMount = React33__default.useRef(true);
-  React33__default.useEffect(() => {
+  const isFirstMount = React32__default.useRef(true);
+  React32__default.useEffect(() => {
     if (isFirstMount.current) {
       isFirstMount.current = false;
       return;
@@ -2935,71 +2755,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__default.useState(isExpandedProp);
-  const handleClick = React33__default.useCallback((event) => {
+  const {
+    children,
+    id = CUT_ID,
+    onClick,
+    isExpanded: isExpandedProp = false,
+    text: textProp,
+    loading,
+    noScroll,
+    ...rest
+  } = props;
+  const [isExpanded, setIsExpanded] = React32__default.useState(isExpandedProp);
+  const handleClick = React32__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__ */ jsxs(Collapsible.Root, { open: isExpanded, children: [
-    /* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Collapsible, { open: isExpanded, onOpenChange: setIsExpanded, children: [
+    /* @__PURE__ */ jsx(
       Link,
       {
         className: "text-sm underline decoration-dashed w-fit",
+        "aria-expanded": isExpanded,
         onClick: handleClick,
         loading,
         ...rest,
         children: /* @__PURE__ */ jsx("span", { id, children: text })
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsx(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__default.useState(defaultExpanded);
-  React33__default.useEffect(() => {
+  const {
+    items,
+    renderItem,
+    triggerProps,
+    cutLength = CUT_LENGTH,
+    text: textProp,
+    defaultExpanded = false,
+    ...rest
+  } = props;
+  const [isExpanded, setIsExpanded] = React32__default.useState(defaultExpanded);
+  React32__default.useEffect(() => {
     setIsExpanded(defaultExpanded);
   }, [defaultExpanded]);
-  const handleToggle = React33__default.useCallback(() => {
-    setIsExpanded((flag) => !flag);
-  }, []);
+  const handleToggle = React32__default.useCallback(() => setIsExpanded((flag) => !flag), []);
   const text = isExpanded ? textProp?.[1] ?? "Hide" : textProp?.[0] ?? "Show all";
-  return /* @__PURE__ */ jsx(Collapsible.Root, { open: isExpanded, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col w-full", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs(YStack, { width: "100%", ...rest, children: [
     items.slice(0, isExpanded ? void 0 : cutLength).map(renderItem),
-    items.length > cutLength && /* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+    items.length > cutLength && /* @__PURE__ */ jsx(
       Link,
       {
         className: "text-sm underline decoration-dashed w-fit min-w-0",
+        "aria-expanded": isExpanded,
         onClick: handleToggle,
         ...triggerProps,
         children: text
       }
-    ) })
-  ] }) });
+    )
+  ] });
 };
-var ColorModeContext = React33.createContext(void 0);
+var ColorModeContext = React32.createContext(void 0);
 function ColorModeProvider(props) {
   const { children, defaultTheme = "light", value: controlledValue, onValueChange } = props;
-  const [internalMode, setInternalMode] = React33.useState(() => {
+  const [internalMode, setInternalMode] = React32.useState(() => {
     if (controlledValue === "dark" || controlledValue === "light") {
       return controlledValue;
     }
@@ -3009,7 +2839,7 @@ function ColorModeProvider(props) {
     return defaultTheme === "dark" ? "dark" : "light";
   });
   const colorMode = controlledValue === "dark" || controlledValue === "light" ? controlledValue : internalMode;
-  const setColorMode = React33.useCallback((mode) => {
+  const setColorMode = React32.useCallback((mode) => {
     const resolved = mode === "dark" ? "dark" : "light";
     setInternalMode(resolved);
     onValueChange?.(resolved);
@@ -3018,19 +2848,19 @@ function ColorModeProvider(props) {
       document.documentElement.classList.toggle("light", resolved === "light");
     }
   }, [onValueChange]);
-  const toggleColorMode = React33.useCallback(() => {
+  const toggleColorMode = React32.useCallback(() => {
     setColorMode(colorMode === "dark" ? "light" : "dark");
   }, [colorMode, setColorMode]);
-  const ctx = React33.useMemo(
+  const ctx = React32.useMemo(
     () => ({ colorMode, setColorMode, toggleColorMode }),
     [colorMode, setColorMode, toggleColorMode]
   );
   return /* @__PURE__ */ jsx(ColorModeContext.Provider, { value: ctx, children });
 }
 function useColorMode() {
-  const ctx = React33.useContext(ColorModeContext);
+  const ctx = React32.useContext(ColorModeContext);
   if (!ctx) {
-    const [mode, setMode] = React33.useState(() => {
+    const [mode, setMode] = React32.useState(() => {
       if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
         return "dark";
       }
@@ -3074,9 +2904,9 @@ function BackToButton({ onClick }) {
     }
   );
 }
-var DialogSizeContext = React33.createContext({ size: "md" });
+var DialogSizeContext = React32.createContext({ size: "md" });
 function useDialogSizeContext() {
-  return React33.useContext(DialogSizeContext);
+  return React32.useContext(DialogSizeContext);
 }
 var CONTENT_SIZE_MAP = {
   sm: "max-w-[400px]",
@@ -3108,13 +2938,13 @@ var DialogRoot = ({
   modal = true
   // motionPreset is intentionally unused -- kept for API compat
 }) => {
-  const handleOpenChange = React33.useCallback(
+  const handleOpenChange = React32.useCallback(
     (nextOpen) => {
       onOpenChange?.({ open: nextOpen });
     },
     [onOpenChange]
   );
-  const ctx = React33.useMemo(() => ({ size }), [size]);
+  const ctx = React32.useMemo(() => ({ size }), [size]);
   return /* @__PURE__ */ jsx(DialogSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
     Dialog,
     {
@@ -3126,7 +2956,7 @@ var DialogRoot = ({
     }
   ) });
 };
-var DialogContent = React33.forwardRef(function DialogContent2(props, ref) {
+var DialogContent = React32.forwardRef(function DialogContent2(props, ref) {
   const {
     children,
     portalled: _portalled = true,
@@ -3183,11 +3013,11 @@ var DialogContent = React33.forwardRef(function DialogContent2(props, ref) {
     )
   ] });
 });
-var DialogCloseTrigger = React33.forwardRef(function DialogCloseTrigger2(props, ref) {
+var DialogCloseTrigger = React32.forwardRef(function DialogCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
 });
-var DialogHeader = React33.forwardRef(function DialogHeader2(props, ref) {
+var DialogHeader = React32.forwardRef(function DialogHeader2(props, ref) {
   const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
   const startElement = startElementProp ?? (onBackToClick ? /* @__PURE__ */ jsx(BackToButton, { onClick: onBackToClick }) : void 0);
   return /* @__PURE__ */ jsxs(
@@ -3217,7 +3047,7 @@ var DialogHeader = React33.forwardRef(function DialogHeader2(props, ref) {
     }
   );
 });
-var DialogBody = React33.forwardRef(function DialogBody2({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
+var DialogBody = React32.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 } : {},
@@ -3234,7 +3064,7 @@ var DialogBody = React33.forwardRef(function DialogBody2({ className, pt, displa
     }
   );
 });
-var DialogFooter = React33.forwardRef(function DialogFooter2({ className, ...props }, ref) {
+var DialogFooter = React32.forwardRef(function DialogFooter2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3254,7 +3084,7 @@ function upperFirst(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 var ICONS = {};
-var EmptyState = React33.forwardRef(
+var EmptyState = React32.forwardRef(
   function EmptyState2(props, ref) {
     const { title, description, term, type = "query", icon, children, className, ...rest } = props;
     const titleContent = (() => {
@@ -3314,7 +3144,18 @@ function getComponentDisplayName(type) {
   if ("displayName" in type) return type.displayName;
   return void 0;
 }
-var Field = React33.forwardRef(
+var ERROR = "var(--color-text-error)";
+var MUTED = "var(--color-text-secondary)";
+var Marks = ({ required, optionalText, errorText }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  required && /* @__PURE__ */ jsx(Text, { color: ERROR, "aria-hidden": true, children: "*" }),
+  !required && optionalText && /* @__PURE__ */ jsx(Text, { fontSize: 14, color: MUTED, children: optionalText }),
+  errorText && /* @__PURE__ */ jsxs(Text, { fontSize: 14, color: ERROR, children: [
+    "-",
+    space,
+    errorText
+  ] })
+] });
+var Field = React32.forwardRef(
   function Field2(props, ref) {
     const {
       label,
@@ -3332,148 +3173,92 @@ var Field = React33.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__ */ jsxs(
-        LabelPrimitive.Root,
+        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__ */ jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
-            !required && optionalText && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm", children: optionalText }),
-            errorText && /* @__PURE__ */ jsxs("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))] text-sm", children: [
-              "-",
-              space,
-              errorText
-            ] })
+            /* @__PURE__ */ jsx(Marks, { required, optionalText, errorText })
           ]
         }
       );
-      const helperTextElement = helperText ? /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }) : null;
-      const child2 = React33.Children.only(children);
+      const helperTextElement = helperText ? /* @__PURE__ */ jsx(Text, { marginTop: 6, fontSize: 12, color: MUTED, children: helperText }) : null;
+      const child2 = React32.Children.only(children);
       const isInputGroup = getComponentDisplayName(child2.type) === "InputGroup";
       if (isInputGroup) {
-        const inputElement2 = React33.cloneElement(
-          React33.Children.only(child2.props.children),
-          injectedProps2
-        );
-        const groupInputElement = React33.cloneElement(
-          child2,
-          {},
-          inputElement2,
-          labelElement
+        const inputElement = React32.cloneElement(
+          React32.Children.only(child2.props.children),
+          injectedProps
         );
-        return /* @__PURE__ */ 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.cloneElement(child2, injectedProps2);
-      return /* @__PURE__ */ jsxs(
-        "div",
+        return /* @__PURE__ */ jsxs(YStack, { ref, id, position: "relative", width: "100%", className, style, ...flags, children: [
+          React32.cloneElement(child2, {}, inputElement, labelElement),
+          helperTextElement
+        ] });
+      }
+      return /* @__PURE__ */ jsxs(YStack, { ref, id, position: "relative", width: "100%", className, style, ...flags, children: [
+        React32.cloneElement(child2, injectedProps),
+        labelElement,
+        helperTextElement
+      ] });
+    }
+    const child = React32.Children.only(children);
+    return /* @__PURE__ */ jsxs(YStack, { ref, id, gap: 4, className, style, ...flags, children: [
+      label && /* @__PURE__ */ jsxs(
+        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__ */ jsx(Marks, { required, optionalText })
           ]
         }
-      );
-    }
-    const injectedProps = {
-      size
-    };
-    const child = React33.Children.only(children);
-    const clonedChild = React33.cloneElement(child, injectedProps);
-    return /* @__PURE__ */ 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__ */ jsxs(
-            LabelPrimitive.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__ */ jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
-                !required && optionalText && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm font-normal", children: optionalText })
-              ]
-            }
-          ),
-          clonedChild,
-          helperText && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }),
-          errorText && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--color-fg-error,theme(colors.red.500))]", children: errorText })
-        ]
-      }
-    );
+      ),
+      React32.cloneElement(child, { size }),
+      helperText && /* @__PURE__ */ jsx(Text, { fontSize: 12, color: MUTED, children: helperText }),
+      errorText && /* @__PURE__ */ jsx(Text, { fontSize: 12, color: ERROR, children: errorText })
+    ] });
   }
 );
-var LEVEL_TAG = { "1": H1, "2": H2, "3": H3 };
-var LEVEL_CLASSES = {
-  "1": "text-[18px] leading-[24px] font-medium lg:text-[32px] lg:leading-[40px] lg:tracking-[-0.5px]",
-  "2": "text-[16px] leading-[24px] font-medium lg:text-[24px] lg:leading-[32px]",
-  "3": "text-[14px] leading-[20px] font-semibold lg:text-[18px] lg:leading-[24px] lg:font-medium"
+var TAG = { "1": H1, "2": H2, "3": 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__default.forwardRef(
-  function Heading2({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
-    const Tag3 = level ? LEVEL_TAG[level] : H2;
-    const levelClasses = level ? LEVEL_CLASSES[level] : void 0;
-    const mergedStyle = mb !== void 0 ? { ...styleProp, marginBottom: typeof mb === "number" ? `${mb * 4}px` : mb } : styleProp;
+var Heading = React32__default.forwardRef(
+  function Heading2({ level, ...rest }, ref) {
+    const Tag3 = level ? TAG[level] : H2;
     return /* @__PURE__ */ jsx(
       Tag3,
       {
         ref,
         unstyled: true,
-        className: cn(BASE_CLASSES4, levelClasses, className),
-        style: mergedStyle,
+        fontFamily: "$heading",
+        color: "var(--color-heading)",
+        ...level ? RAMP[level] : null,
         ...rest
       }
     );
@@ -3496,60 +3281,75 @@ var IconButtonFrame = styled(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.forwardRef(
+var ICON_SIZE = { "2xs": 20, "2xs_alt": 12, md: 20 };
+var IconButton = React32.forwardRef(
   function IconButton2(props, ref) {
     const {
       size,
@@ -3562,58 +3362,43 @@ var IconButton = React33.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__ */ jsx(
       IconButtonFrame,
       {
         ref,
         size,
         disabled: !loadingSkeleton && (loading || disabled) || void 0,
-        render: _as ? React33.createElement(_as) : void 0,
-        className: combinedClassName,
-        style: mergedStyle,
+        render: asProp ? React32.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__ */ jsx(
-          "span",
+          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__ */ 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
       }
@@ -3771,31 +3556,31 @@ function extractStyleProps(props) {
   }
   return { styleProps, rest };
 }
-var Image = React33__default.forwardRef(
+var Image = React32__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__default.useState(true);
-    const [error, setError] = React33__default.useState(false);
-    const handleLoadError = React33__default.useCallback((event) => {
+    const [loading, setLoading] = React32__default.useState(true);
+    const [error, setError] = React32__default.useState(false);
+    const handleLoadError = React32__default.useCallback((event) => {
       setError(true);
       setLoading(false);
       onError?.(event);
     }, [onError]);
-    const handleLoadSuccess = React33__default.useCallback((event) => {
+    const handleLoadSuccess = React32__default.useCallback((event) => {
       setLoading(false);
       onLoad?.(event);
     }, [onLoad]);
     const passthroughProps = allRest;
     if (!src && fallback) {
-      if (React33__default.isValidElement(fallback)) {
-        return React33__default.cloneElement(fallback, passthroughProps);
+      if (React32__default.isValidElement(fallback)) {
+        return React32__default.cloneElement(fallback, passthroughProps);
       }
       return fallback;
     }
     if (error) {
-      if (React33__default.isValidElement(fallback)) {
-        return React33__default.cloneElement(fallback, passthroughProps);
+      if (React32__default.isValidElement(fallback)) {
+        return React32__default.cloneElement(fallback, passthroughProps);
       }
       return fallback;
     }
@@ -3828,32 +3613,31 @@ var Image = React33__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__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__default.forwardRef(
   ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
-    const handleChange = React33__default.useCallback(
+    const handleChange = React32__default.useCallback(
       (event) => {
         onChange?.(event);
         onChangeText?.(event.target.value);
@@ -3865,7 +3649,10 @@ var Input = React33__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
       }
@@ -3873,12 +3660,8 @@ var Input = React33__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.forwardRef(
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React32.useLayoutEffect : React32.useEffect;
+var InputGroup = React32.forwardRef(
   function InputGroup2(props, ref) {
     const {
       startElement,
@@ -3891,11 +3674,11 @@ var InputGroup = React33.forwardRef(
       className,
       ...rest
     } = props;
-    const startElementRef = React33.useRef(null);
-    const endElementRef = React33.useRef(null);
-    const groupRef = React33.useRef(null);
-    const [inlinePaddings, setInlinePaddings] = React33.useState();
-    const calculateInlinePaddings = React33.useCallback(() => {
+    const startElementRef = React32.useRef(null);
+    const endElementRef = React32.useRef(null);
+    const groupRef = React32.useRef(null);
+    const [inlinePaddings, setInlinePaddings] = React32.useState();
+    const calculateInlinePaddings = React32.useCallback(() => {
       const startWidth = startElementRef.current?.getBoundingClientRect().width ?? 0;
       const endWidth = endElementRef.current?.getBoundingClientRect().width ?? 0;
       setInlinePaddings({
@@ -3903,12 +3686,12 @@ var InputGroup = React33.forwardRef(
         end: endWidth
       });
     }, []);
-    React33.useEffect(() => {
+    React32.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);
           }
@@ -3923,7 +3706,7 @@ var InputGroup = React33.forwardRef(
         }
       };
     }, [calculateInlinePaddings]);
-    React33.useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       calculateInlinePaddings();
       const resizeHandler = debounce(calculateInlinePaddings, 300);
       const resizeObserver = new ResizeObserver(resizeHandler);
@@ -3934,7 +3717,7 @@ var InputGroup = React33.forwardRef(
         resizeObserver.disconnect();
       };
     }, [calculateInlinePaddings]);
-    const combinedRef = React33.useCallback((node) => {
+    const combinedRef = React32.useCallback((node) => {
       groupRef.current = node;
       if (typeof ref === "function") {
         ref(node);
@@ -3963,16 +3746,19 @@ var InputGroup = React33.forwardRef(
               children: startElement
             }
           ),
-          React33.Children.map(children, (child) => {
-            if (getComponentDisplayName2(child.type) !== "FieldInput") {
+          React32.Children.map(children, (child) => {
+            if (!React32.isValidElement(child)) {
               return child;
             }
-            return React33.cloneElement(child, {
-              ...startElement && { ps: startOffset ?? (inlinePaddings?.start ? `${inlinePaddings.start}px` : void 0) },
-              ...endElement && { pe: endOffset ?? (inlinePaddings?.end ? `${inlinePaddings.end}px` : void 0) },
-              // hide input value and placeholder for the first render
-              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.cloneElement(child, {
+              style: {
+                ...child.props.style,
+                ...start !== void 0 && { paddingInlineStart: px(start) },
+                ...end !== void 0 && { paddingInlineEnd: px(end) }
+              }
             });
           }),
           endElement && /* @__PURE__ */ jsx(
@@ -3993,7 +3779,7 @@ var InputGroup = React33.forwardRef(
   }
 );
 InputGroup.displayName = "InputGroup";
-var INPUT_BASE2 = [
+var INPUT_BASE = [
   "w-10 h-10",
   "text-center text-sm font-medium",
   "border-2 rounded-md",
@@ -4007,7 +3793,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.forwardRef(
+var PinInput = React32.forwardRef(
   function PinInput2(props, ref) {
     const {
       count = 6,
@@ -4025,12 +3811,12 @@ var PinInput = React33.forwardRef(
       bgColor,
       className
     } = props;
-    const inputRefs = React33.useRef([]);
-    const values = React33.useMemo(
+    const inputRefs = React32.useRef([]);
+    const values = React32.useMemo(
       () => controlledValue ?? Array.from({ length: count }).fill(""),
       [controlledValue, count]
     );
-    const updateValue = React33.useCallback((index, char) => {
+    const updateValue = React32.useCallback((index, char) => {
       const next = [...values];
       next[index] = char;
       onValueChange?.({ value: next });
@@ -4038,11 +3824,11 @@ var PinInput = React33.forwardRef(
         onValueComplete?.({ value: next });
       }
     }, [values, onValueChange, onValueComplete]);
-    const focusInput = React33.useCallback((index) => {
+    const focusInput = React32.useCallback((index) => {
       const clamped = Math.max(0, Math.min(index, count - 1));
       inputRefs.current[clamped]?.focus();
     }, [count]);
-    const handleInput = React33.useCallback((index, e) => {
+    const handleInput = React32.useCallback((index, e) => {
       const target = e.currentTarget;
       const char = target.value.slice(-1);
       updateValue(index, char);
@@ -4050,7 +3836,7 @@ var PinInput = React33.forwardRef(
         focusInput(index + 1);
       }
     }, [count, updateValue, focusInput]);
-    const handleKeyDown = React33.useCallback((index, e) => {
+    const handleKeyDown = React32.useCallback((index, e) => {
       if (e.key === "Backspace") {
         if (values[index]) {
           updateValue(index, "");
@@ -4067,7 +3853,7 @@ var PinInput = React33.forwardRef(
         e.preventDefault();
       }
     }, [count, values, updateValue, focusInput]);
-    const handlePaste = React33.useCallback((e) => {
+    const handlePaste = React32.useCallback((e) => {
       e.preventDefault();
       const pasted = e.clipboardData.getData("text/plain").trim();
       if (!pasted) {
@@ -4084,18 +3870,18 @@ var PinInput = React33.forwardRef(
       }
       focusInput(Math.min(chars.length, count - 1));
     }, [count, values, onValueChange, onValueComplete, focusInput]);
-    const handleFocus = React33.useCallback((e) => {
+    const handleFocus = React32.useCallback((e) => {
       e.currentTarget.select();
     }, []);
-    const handleNoop = React33.useCallback(() => {
+    const handleNoop = React32.useCallback(() => {
     }, []);
-    const setInputRef = React33.useCallback((index) => (el) => {
+    const setInputRef = React32.useCallback((index) => (el) => {
       inputRefs.current[index] = el;
     }, []);
-    const onInputAtIndex = React33.useCallback((index) => (e) => {
+    const onInputAtIndex = React32.useCallback((index) => (e) => {
       handleInput(index, e);
     }, [handleInput]);
-    const onKeyDownAtIndex = React33.useCallback((index) => (e) => {
+    const onKeyDownAtIndex = React32.useCallback((index) => (e) => {
       handleKeyDown(index, e);
     }, [handleKeyDown]);
     const bgStyle = bgColor ? { backgroundColor: `var(--color-${bgColor.replace(/\./g, "-")})` } : void 0;
@@ -4124,7 +3910,7 @@ var PinInput = React33.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"
@@ -4141,7 +3927,7 @@ var PinInput = React33.forwardRef(
     ] });
   }
 );
-function parsePlacement2(placement) {
+function parsePlacement(placement) {
   if (!placement) {
     return { side: "bottom", align: "start" };
   }
@@ -4156,7 +3942,7 @@ function parsePlacement2(placement) {
   }
   return { side, align };
 }
-var PositioningContext2 = React33.createContext({
+var PositioningContext = React32.createContext({
   side: "bottom",
   align: "start",
   sideOffset: 4,
@@ -4189,8 +3975,8 @@ var PopoverRoot = (props) => {
       ...positioning?.offset
     }
   };
-  const { side, align } = parsePlacement2(mergedPositioning.placement);
-  const positioningValue = React33.useMemo(() => ({
+  const { side, align } = parsePlacement(mergedPositioning.placement);
+  const positioningValue = React32.useMemo(() => ({
     side,
     align,
     sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
@@ -4207,12 +3993,12 @@ var PopoverRoot = (props) => {
     autoFocus,
     closeOnInteractOutside
   ]);
-  const handleOpenChange = React33.useCallback((isOpen) => {
+  const handleOpenChange = React32.useCallback((isOpen) => {
     onOpenChange?.({ open: isOpen });
   }, [onOpenChange]);
   const placement = mergedPositioning.placement ?? "bottom-start";
   const offset = mergedPositioning.offset?.mainAxis ?? 4;
-  return /* @__PURE__ */ jsx(PositioningContext2.Provider, { value: positioningValue, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsx(
     Popover,
     {
       open,
@@ -4225,11 +4011,11 @@ var PopoverRoot = (props) => {
     }
   ) });
 };
-var PopoverTrigger = React33.forwardRef(function PopoverTrigger2(props, ref) {
+var PopoverTrigger = React32.forwardRef(function PopoverTrigger2(props, ref) {
   const { asChild = true, ...rest } = props;
   return /* @__PURE__ */ jsx(Popover.Trigger, { asChild: asChild ? "except-style" : void 0, ref, ...rest });
 });
-var PopoverContent = React33.forwardRef(function PopoverContent2(props, ref) {
+var PopoverContent = React32.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 = {
@@ -4247,7 +4033,7 @@ var PopoverContent = React33.forwardRef(function PopoverContent2(props, ref) {
       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",
@@ -4260,7 +4046,7 @@ var PopoverContent = React33.forwardRef(function PopoverContent2(props, ref) {
     }
   );
 });
-var PopoverArrow = React33.forwardRef(function PopoverArrow2(props, ref) {
+var PopoverArrow = React32.forwardRef(function PopoverArrow2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
     Popover.Arrow,
@@ -4272,7 +4058,7 @@ var PopoverArrow = React33.forwardRef(function PopoverArrow2(props, ref) {
     }
   );
 });
-var PopoverCloseTrigger = React33.forwardRef(function PopoverCloseTrigger2(props, ref) {
+var PopoverCloseTrigger = React32.forwardRef(function PopoverCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
     Popover.Close,
@@ -4286,14 +4072,14 @@ var PopoverCloseTrigger = React33.forwardRef(function PopoverCloseTrigger2(props
     }
   );
 });
-var PopoverCloseTriggerWrapper = React33.forwardRef(function PopoverCloseTriggerWrapper2(props, ref) {
+var PopoverCloseTriggerWrapper = React32.forwardRef(function PopoverCloseTriggerWrapper2(props, ref) {
   const { disabled, children, ...rest } = props;
   if (disabled) {
     return children;
   }
   return /* @__PURE__ */ jsx(Popover.Close, { ref, ...rest, asChild: true, children });
 });
-var PopoverBody = React33.forwardRef(function PopoverBody2(props, ref) {
+var PopoverBody = React32.forwardRef(function PopoverBody2(props, ref) {
   const {
     className,
     style: styleProp,
@@ -4331,7 +4117,7 @@ var PopoverBody = React33.forwardRef(function PopoverBody2(props, ref) {
     }
   );
 });
-var PopoverHeader = React33.forwardRef(function PopoverHeader2(props, ref) {
+var PopoverHeader = React32.forwardRef(function PopoverHeader2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "div",
@@ -4342,7 +4128,7 @@ var PopoverHeader = React33.forwardRef(function PopoverHeader2(props, ref) {
     }
   );
 });
-var PopoverFooter = React33.forwardRef(function PopoverFooter2(props, ref) {
+var PopoverFooter = React32.forwardRef(function PopoverFooter2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "div",
@@ -4353,7 +4139,7 @@ var PopoverFooter = React33.forwardRef(function PopoverFooter2(props, ref) {
     }
   );
 });
-var PopoverTitle = React33.forwardRef(function PopoverTitle2(props, ref) {
+var PopoverTitle = React32.forwardRef(function PopoverTitle2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "h3",
@@ -4364,7 +4150,7 @@ var PopoverTitle = React33.forwardRef(function PopoverTitle2(props, ref) {
     }
   );
 });
-var PopoverDescription = React33.forwardRef(function PopoverDescription2(props, ref) {
+var PopoverDescription = React32.forwardRef(function PopoverDescription2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "p",
@@ -4375,7 +4161,7 @@ var PopoverDescription = React33.forwardRef(function PopoverDescription2(props,
     }
   );
 });
-var SIZE_CLASSES7 = {
+var SIZE_CLASSES6 = {
   sm: "h-1",
   md: "h-2",
   lg: "h-3",
@@ -4386,7 +4172,7 @@ function normalizeValue(value, min, max) {
   if (max <= min) return 0;
   return Math.round((value - min) / (max - min) * 100);
 }
-var Progress = React33.forwardRef(
+var Progress = React32.forwardRef(
   function Progress2(props, ref) {
     const {
       value,
@@ -4434,7 +4220,7 @@ var Progress = React33.forwardRef(
             className: cn(
               "w-full overflow-hidden rounded-full",
               "bg-[var(--color-progress-track)]",
-              SIZE_CLASSES7[size],
+              SIZE_CLASSES6[size],
               trackProps?.className
             ),
             style: trackStyle,
@@ -4465,12 +4251,12 @@ var SIZE_MAP = {
   lg: { size: 48, thickness: 7, textClass: "text-sm" },
   xl: { size: 64, thickness: 8, textClass: "text-sm" }
 };
-var Ctx = React33.createContext({
+var Ctx = React32.createContext({
   value: 0,
   size: "md",
   colorPalette: "blue"
 });
-var ProgressCircleRoot = React33.forwardRef(function ProgressCircleRoot2(props, ref) {
+var ProgressCircleRoot = React32.forwardRef(function ProgressCircleRoot2(props, ref) {
   const {
     value = 0,
     size = "md",
@@ -4479,7 +4265,7 @@ var ProgressCircleRoot = React33.forwardRef(function ProgressCircleRoot2(props,
     children,
     ...rest
   } = props;
-  const ctx = React33.useMemo(
+  const ctx = React32.useMemo(
     () => ({ value: value ?? null, size, colorPalette }),
     [value, size, colorPalette]
   );
@@ -4497,9 +4283,9 @@ var ProgressCircleRoot = React33.forwardRef(function ProgressCircleRoot2(props,
     }
   ) });
 });
-var ProgressCircleRing = React33.forwardRef(function ProgressCircleRing2(props, ref) {
+var ProgressCircleRing = React32.forwardRef(function ProgressCircleRing2(props, ref) {
   const { trackColor, cap, color, className, ...rest } = props;
-  const { value, size: sizeKey } = React33.useContext(Ctx);
+  const { value, size: sizeKey } = React32.useContext(Ctx);
   const { size, thickness } = SIZE_MAP[sizeKey];
   const radius = size / 2 - thickness / 2;
   const circumference = 2 * Math.PI * radius;
@@ -4554,9 +4340,9 @@ var ProgressCircleRing = React33.forwardRef(function ProgressCircleRing2(props,
     }
   );
 });
-var ProgressCircleValueText = React33.forwardRef(function ProgressCircleValueText2(props, ref) {
+var ProgressCircleValueText = React32.forwardRef(function ProgressCircleValueText2(props, ref) {
   const { className, children, ...rest } = props;
-  const { value, size: sizeKey } = React33.useContext(Ctx);
+  const { value, size: sizeKey } = React32.useContext(Ctx);
   const { textClass } = SIZE_MAP[sizeKey];
   return /* @__PURE__ */ jsx(
     "div",
@@ -4574,7 +4360,7 @@ var ProgressCircleValueText = React33.forwardRef(function ProgressCircleValueTex
     }
   );
 });
-var SIZE_CLASSES8 = {
+var SIZE_CLASSES7 = {
   xs: {
     root: "gap-1.5",
     control: "h-3 w-3",
@@ -4600,9 +4386,9 @@ var SIZE_CLASSES8 = {
     label: "text-base"
   }
 };
-var RadioSizeContext = React33.createContext("md");
-var RadioGroupBase = React33.forwardRef(
-  function RadioGroup2(props, ref) {
+var RadioSizeContext = React32.createContext("md");
+var RadioGroupBase = React32.forwardRef(
+  function RadioGroup$1(props, ref) {
     const {
       children,
       name,
@@ -4619,7 +4405,7 @@ var RadioGroupBase = React33.forwardRef(
       className,
       ...rest
     } = props;
-    const handleValueChange = React33.useCallback(
+    const handleValueChange = React32.useCallback(
       (nextValue) => {
         if (readOnly) return;
         onValueChange?.({ value: nextValue });
@@ -4649,14 +4435,14 @@ var RadioGroupBase = React33.forwardRef(
     ) });
   }
 );
-var RadioGroup3 = RadioGroupBase;
+var RadioGroup2 = RadioGroupBase;
 var NOOP2 = () => {
 };
-var RadioBase = React33.forwardRef(
+var RadioBase = React32.forwardRef(
   function Radio(props, ref) {
     const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
-    const size = React33.useContext(RadioSizeContext);
-    const sizeClasses2 = SIZE_CLASSES8[size];
+    const size = React32.useContext(RadioSizeContext);
+    const sizeClasses2 = SIZE_CLASSES7[size];
     return /* @__PURE__ */ jsxs(
       "label",
       {
@@ -4719,23 +4505,23 @@ var RadioBase = React33.forwardRef(
 var Radio2 = RadioBase;
 var StarFilledIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
 var StarOutlineIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z", strokeWidth: "1.5" }) });
-var Rating = React33.forwardRef(
+var Rating = React32.forwardRef(
   function Rating2(props, ref) {
     const { count = 5, label: labelProp, defaultValue = 0, onValueChange, readOnly, className, ...rest } = props;
-    const [value, setValue] = React33.useState(defaultValue);
-    const [hoveredIndex, setHoveredIndex] = React33.useState(-1);
+    const [value, setValue] = React32.useState(defaultValue);
+    const [hoveredIndex, setHoveredIndex] = React32.useState(-1);
     const highlightedIndex = hoveredIndex >= 0 && !readOnly ? hoveredIndex + 1 : value;
     const label = Array.isArray(labelProp) ? labelProp[highlightedIndex - 1] : labelProp;
-    const handleClick = React33.useCallback((index) => () => {
+    const handleClick = React32.useCallback((index) => () => {
       if (readOnly) return;
       setValue(index);
       onValueChange?.({ value: index });
     }, [readOnly, onValueChange]);
-    const handleMouseEnter = React33.useCallback((index) => () => {
+    const handleMouseEnter = React32.useCallback((index) => () => {
       if (readOnly) return;
       setHoveredIndex(index);
     }, [readOnly]);
-    const handleMouseLeave = React33.useCallback(() => {
+    const handleMouseLeave = React32.useCallback(() => {
       setHoveredIndex(-1);
     }, []);
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("inline-flex items-center gap-1", className), ...rest, children: [
@@ -4769,8 +4555,8 @@ function createListCollection(config2) {
 var ArrowIcon2 = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var CheckIcon2 = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M16.667 5L7.5 14.167 3.333 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function FilterInput({ placeholder, initialValue = "", onChange }) {
-  const [value, setValue] = React33.useState(initialValue);
-  const handleChange = React33.useCallback((e) => {
+  const [value, setValue] = React32.useState(initialValue);
+  const handleChange = React32.useCallback((e) => {
     setValue(e.target.value);
     onChange?.(e.target.value);
   }, [onChange]);
@@ -4789,15 +4575,15 @@ function FilterInput({ placeholder, initialValue = "", onChange }) {
     }
   );
 }
-var SelectInternalContext = React33.createContext(null);
+var SelectInternalContext = React32.createContext(null);
 function useSelectInternalContext() {
-  const ctx = React33.useContext(SelectInternalContext);
+  const ctx = React32.useContext(SelectInternalContext);
   if (!ctx) {
     throw new Error("Select compound components must be rendered inside <SelectRoot>");
   }
   return ctx;
 }
-var SelectRoot = React33.forwardRef(
+var SelectRoot = React32.forwardRef(
   function SelectRoot2(props, ref) {
     const {
       children,
@@ -4828,21 +4614,21 @@ var SelectRoot = React33.forwardRef(
       hideFrom: _hideFrom
     } = props;
     const collection = collectionProp ?? createListCollection({ items: [] });
-    const [internalValue, setInternalValue] = React33.useState(defaultValueArr ?? []);
+    const [internalValue, setInternalValue] = React32.useState(defaultValueArr ?? []);
     const currentValue = valueProp ?? internalValue;
-    const selectedItems = React33.useMemo(() => {
+    const selectedItems = React32.useMemo(() => {
       return currentValue.map((v) => collection.items.find((item) => item.value === v)).filter(Boolean);
     }, [currentValue, collection.items]);
-    const [open, setOpen] = React33.useState(defaultOpen ?? false);
+    const [open, setOpen] = React32.useState(defaultOpen ?? false);
     const isOpen = openProp ?? open;
-    const handleOpenChange = React33.useCallback((nextOpen) => {
+    const handleOpenChange = React32.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.(nextOpen);
       if (!nextOpen) {
         onInteractOutside?.();
       }
     }, [onOpenChange, onInteractOutside]);
-    const handleRadixValueChange = React33.useCallback((radixValue) => {
+    const handleRadixValueChange = React32.useCallback((radixValue) => {
       const nextArr = [radixValue];
       if (!valueProp) {
         setInternalValue(nextArr);
@@ -4850,7 +4636,7 @@ var SelectRoot = React33.forwardRef(
       const items = collection.items.filter((item) => nextArr.includes(item.value));
       onValueChangeProp?.({ value: nextArr, items });
     }, [valueProp, collection.items, onValueChangeProp]);
-    const ctxValue = React33.useMemo(() => ({
+    const ctxValue = React32.useMemo(() => ({
       value: currentValue,
       selectedItems,
       collection,
@@ -4870,7 +4656,7 @@ var SelectRoot = React33.forwardRef(
       if (typeof v === "string") return v;
       return v.base ?? v.lg ?? Object.values(v)[0];
     };
-    const inlineStyle = React33.useMemo(() => {
+    const inlineStyle = React32.useMemo(() => {
       const s = { ...style };
       const rw = resolveVal(w);
       if (rw) s.width = rw;
@@ -4881,16 +4667,15 @@ var SelectRoot = React33.forwardRef(
       return s;
     }, [style, w, maxW, minW]);
     return /* @__PURE__ */ jsx(SelectInternalContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
-      RadixSelect.Root,
+      Select$1,
       {
         value: currentValue[0] ?? "",
         defaultValue: defaultValueArr?.[0],
         onValueChange: handleRadixValueChange,
         open: isOpen,
         onOpenChange: handleOpenChange,
-        disabled: disabled || readOnly,
+        disablePreventBodyScroll: true,
         name,
-        required,
         children: /* @__PURE__ */ jsx(
           "div",
           {
@@ -4908,17 +4693,18 @@ var SelectRoot = React33.forwardRef(
     ) });
   }
 );
-var SelectControl = React33.forwardRef(
+var SelectControl = React32.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__ */ jsx(
-      RadixSelect.Trigger,
+      Select$1.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",
@@ -4945,11 +4731,11 @@ var SelectControl = React33.forwardRef(
     return trigger;
   }
 );
-var SelectClearTrigger = React33.forwardRef(
+var SelectClearTrigger = React32.forwardRef(
   function SelectClearTrigger2(props, ref) {
     const { className, ...rest } = props;
     const ctx = useSelectInternalContext();
-    const handleClick = React33.useCallback(() => {
+    const handleClick = React32.useCallback(() => {
       ctx.onValueChange({ value: [], items: [] });
     }, [ctx]);
     return /* @__PURE__ */ jsx(
@@ -4966,42 +4752,44 @@ var SelectClearTrigger = React33.forwardRef(
     );
   }
 );
-var SelectContent = React33.forwardRef(
-  function SelectContent2(props, ref) {
-    const { portalled = true, portalRef, children, className, ...rest } = props;
-    const content = /* @__PURE__ */ jsx(
-      RadixSelect.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__ */ jsx(RadixSelect.Viewport, { className: "p-1", children })
-      }
+var SelectContent = React32.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__ */ jsx(Select$1.Content, { ...rest, children: /* @__PURE__ */ jsx(
+        Select$1.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__ */ jsx(RadixSelect.Portal, { container: portalRef?.current ?? void 0, children: content });
-    }
-    return content;
   }
 );
-var SelectItem = React33.forwardRef(
+var stampIndices = (children, next) => React32.Children.map(children, (child) => {
+  if (!React32.isValidElement(child)) return child;
+  if (child.type === SelectItem) return React32.cloneElement(child, { index: next() });
+  const kids = child.props.children;
+  return kids === void 0 ? child : React32.cloneElement(child, void 0, stampIndices(kids, next));
+});
+var SelectItem = React32.forwardRef(
   function SelectItem2(props, ref) {
-    const { item, children, className, ...rest } = props;
+    const { item, children, className, index, ...rest } = props;
     return /* @__PURE__ */ jsxs(
-      RadixSelect.Item,
+      Select$1.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",
@@ -5014,14 +4802,14 @@ var SelectItem = React33.forwardRef(
         ...rest,
         children: [
           item.icon,
-          /* @__PURE__ */ jsx(RadixSelect.ItemText, { children }),
-          /* @__PURE__ */ jsx(RadixSelect.ItemIndicator, { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx(CheckIcon2, { className: "h-5 w-5" }) })
+          /* @__PURE__ */ jsx(Select$1.ItemText, { children: children ?? item.label }),
+          /* @__PURE__ */ jsx(Select$1.ItemIndicator, { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx(CheckIcon2, { className: "h-5 w-5" }) })
         ]
       }
     );
   }
 );
-var SelectValueText = React33.forwardRef(
+var SelectValueText = React32.forwardRef(
   function SelectValueText2(props, ref) {
     const { children, size, required, invalid, errorText, mode, className, style, placeholder: placeholderProp, ...rest } = props;
     const ctx = useSelectInternalContext();
@@ -5066,7 +4854,7 @@ var SelectValueText = React33.forwardRef(
       return `${items.length} selected`;
     })();
     return /* @__PURE__ */ jsx(
-      RadixSelect.Value,
+      Select$1.Value,
       {
         ref,
         placeholder: placeholderText,
@@ -5077,18 +4865,18 @@ var SelectValueText = React33.forwardRef(
     );
   }
 );
-var SelectItemGroup = React33.forwardRef(
+var SelectItemGroup = React32.forwardRef(
   function SelectItemGroup2(props, ref) {
     const { children, label, className, ...rest } = props;
-    return /* @__PURE__ */ jsxs(RadixSelect.Group, { ref, className: cn("py-1", className), ...rest, children: [
-      /* @__PURE__ */ jsx(RadixSelect.Label, { className: "px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]", children: label }),
+    return /* @__PURE__ */ jsxs(Select$1.Group, { ref, className: cn("py-1", className), ...rest, children: [
+      /* @__PURE__ */ jsx(Select$1.Label, { className: "px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]", children: label }),
       children
     ] });
   }
 );
-var SelectLabel = RadixSelect.Label;
-var SelectItemText = RadixSelect.ItemText;
-var Select = React33.forwardRef((props, ref) => {
+var SelectLabel = Select$1.Label;
+var SelectItemText = Select$1.ItemText;
+var Select = React32.forwardRef((props, ref) => {
   const { collection, placeholder, portalled = true, loading, errorText, contentProps, contentHeader, itemFilter, mode, ...rest } = props;
   return /* @__PURE__ */ jsxs(
     SelectRoot,
@@ -5110,7 +4898,7 @@ var Select = React33.forwardRef((props, ref) => {
         ) }),
         /* @__PURE__ */ jsxs(SelectContent, { portalled, ...contentProps, children: [
           contentHeader,
-          collection.items.filter(itemFilter ?? (() => true)).map((item) => /* @__PURE__ */ jsxs(React33.Fragment, { children: [
+          collection.items.filter(itemFilter ?? (() => true)).map((item) => /* @__PURE__ */ jsxs(React32.Fragment, { children: [
             /* @__PURE__ */ jsx(SelectItem, { item, children: item.renderLabel ? item.renderLabel("item") : item.label }),
             item.afterElement
           ] }, item.value))
@@ -5119,19 +4907,19 @@ var Select = React33.forwardRef((props, ref) => {
     }
   );
 });
-var SelectAsync = React33.forwardRef((props, ref) => {
+var SelectAsync = React32.forwardRef((props, ref) => {
   const { placeholder, portalled = true, loading, loadOptions, extraControls, onValueChange, errorText, mode, contentHeader, ...rest } = props;
-  const [collection, setCollection] = React33.useState(createListCollection({ items: [] }));
-  const [inputValue, setInputValue] = React33.useState("");
-  const [value, setValue] = React33.useState([]);
+  const [collection, setCollection] = React32.useState(createListCollection({ items: [] }));
+  const [inputValue, setInputValue] = React32.useState("");
+  const [value, setValue] = React32.useState([]);
   const debouncedInputValue = useDebounce(inputValue, 300);
-  React33.useEffect(() => {
+  React32.useEffect(() => {
     loadOptions(debouncedInputValue, value).then(setCollection);
   }, [debouncedInputValue, loadOptions, value]);
-  const handleFilterChange = React33.useCallback((val) => {
+  const handleFilterChange = React32.useCallback((val) => {
     setInputValue(val);
   }, []);
-  const handleValueChange = React33.useCallback(({ value: v, items }) => {
+  const handleValueChange = React32.useCallback(({ value: v, items }) => {
     setValue(v);
     onValueChange?.({ value: v, items });
   }, [onValueChange]);
@@ -5173,47 +4961,27 @@ var SelectAsync = React33.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__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__default.forwardRef(
+  function Separator2({ orientation = "horizontal", variant = "solid", size = "sm", ...rest }, ref) {
+    const vertical = orientation === "vertical";
     return /* @__PURE__ */ jsx(
-      Separator,
+      Separator$1,
       {
         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.forwardRef(
+var Slider = React32.forwardRef(
   function Slider2(props, ref) {
     const {
       marks: marksProp,
@@ -5237,12 +5005,12 @@ var Slider = React33.forwardRef(
       return mark;
     });
     const hasMarkLabel = Boolean(marks?.some((mark) => mark.label));
-    const latest = React33.useRef(value ?? defaultValue ?? []);
-    const handleValueChange = React33.useCallback((next) => {
+    const latest = React32.useRef(value ?? defaultValue ?? []);
+    const handleValueChange = React32.useCallback((next) => {
       latest.current = next;
       onValueChange?.(next);
     }, [onValueChange]);
-    const handleSlideEnd = React33.useCallback(() => {
+    const handleSlideEnd = React32.useCallback(() => {
       onValueCommit?.(latest.current);
     }, [onValueCommit]);
     return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
@@ -5330,7 +5098,7 @@ function SliderMarks(props) {
 }
 var NOOP3 = () => {
 };
-var SIZE_CLASSES9 = {
+var SIZE_CLASSES8 = {
   sm: {
     root: "h-4 w-7",
     thumb: "h-3 w-3",
@@ -5347,7 +5115,7 @@ var SIZE_CLASSES9 = {
     label: "text-base"
   }
 };
-var SwitchBase = React33.forwardRef(
+var SwitchBase = React32.forwardRef(
   function Switch$1(props, ref) {
     const {
       inputProps,
@@ -5366,10 +5134,10 @@ var SwitchBase = React33.forwardRef(
       className,
       ...rest
     } = props;
-    const [internalChecked, setInternalChecked] = React33.useState(defaultChecked ?? false);
+    const [internalChecked, setInternalChecked] = React32.useState(defaultChecked ?? false);
     const isControlled = checkedProp !== void 0;
     const checkedState = isControlled ? checkedProp : internalChecked;
-    const handleCheckedChange = React33.useCallback(
+    const handleCheckedChange = React32.useCallback(
       (nextChecked) => {
         if (!isControlled) {
           setInternalChecked(nextChecked);
@@ -5378,7 +5146,7 @@ var SwitchBase = React33.forwardRef(
       },
       [isControlled, onCheckedChange]
     );
-    const sizeClasses2 = SIZE_CLASSES9[size];
+    const sizeClasses2 = SIZE_CLASSES8[size];
     const isRtl = direction === "rtl";
     return /* @__PURE__ */ jsxs(
       "label",
@@ -5634,7 +5402,7 @@ function resolveResponsive(value) {
   }
   return void 0;
 }
-var TableRoot = React33.forwardRef(
+var TableRoot = React32.forwardRef(
   function TableRoot2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const rawMinW = other.minWidth ?? other.minW;
@@ -5657,7 +5425,7 @@ var TableRoot = React33.forwardRef(
     );
   }
 );
-var TableHeader = React33.forwardRef(
+var TableHeader = React32.forwardRef(
   function TableHeader2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5674,7 +5442,7 @@ var TableHeader = React33.forwardRef(
     );
   }
 );
-var TableBody = React33.forwardRef(
+var TableBody = React32.forwardRef(
   function TableBody2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5691,7 +5459,7 @@ var TableBody = React33.forwardRef(
     );
   }
 );
-var TableRow = React33.forwardRef(
+var TableRow = React32.forwardRef(
   function TableRow2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5708,7 +5476,7 @@ var TableRow = React33.forwardRef(
     );
   }
 );
-var TableCell = React33.forwardRef(
+var TableCell = React32.forwardRef(
   function TableCell2(props, ref) {
     const { isNumeric, className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5729,7 +5497,7 @@ var TableCell = React33.forwardRef(
     );
   }
 );
-var TableColumnHeader = React33.forwardRef(
+var TableColumnHeader = React32.forwardRef(
   function TableColumnHeader2(props, ref) {
     const { isNumeric, className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5756,7 +5524,7 @@ var TableColumnHeader = React33.forwardRef(
 );
 var TableColumnHeaderSortable = (props) => {
   const { sortField, sortValue, onSortToggle, children, disabled, indicatorPosition = "left", contentAfter, ...rest } = props;
-  const handleSortToggle = React33.useCallback(() => {
+  const handleSortToggle = React32.useCallback(() => {
     onSortToggle(sortField);
   }, [onSortToggle, sortField]);
   const isActive = sortValue.includes(sortField);
@@ -5782,16 +5550,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.useRef(null);
-  const [isStuck, setIsStuck] = React33.useState(false);
-  const handleScroll = React33.useCallback(() => {
+  const ref = React32.useRef(null);
+  const [isStuck, setIsStuck] = React32.useState(false);
+  const handleScroll = React32.useCallback(() => {
     if (Number(ref.current?.getBoundingClientRect().y) <= (Number(top) || 0)) {
       setIsStuck(true);
     } else {
       setIsStuck(false);
     }
   }, [top]);
-  React33.useEffect(() => {
+  React32.useEffect(() => {
     const throttledHandleScroll = throttle(handleScroll, 300);
     window.addEventListener("scroll", throttledHandleScroll);
     return () => {
@@ -5813,7 +5581,7 @@ var TableHeaderSticky = (props) => {
     }
   );
 };
-var TableCaption = React33.forwardRef(
+var TableCaption = React32.forwardRef(
   function TableCaption2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5830,7 +5598,7 @@ var TableCaption = React33.forwardRef(
     );
   }
 );
-var TableFooter = React33.forwardRef(
+var TableFooter = React32.forwardRef(
   function TableFooter2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5847,7 +5615,7 @@ var TableFooter = React33.forwardRef(
     );
   }
 );
-var TableScrollWrapper = React33.forwardRef(
+var TableScrollWrapper = React32.forwardRef(
   function TableScrollWrapper2(props, ref) {
     const { className, children, ...rest } = props;
     return /* @__PURE__ */ jsx(
@@ -5861,206 +5629,115 @@ var TableScrollWrapper = React33.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.forwardRef(
-  function TabsRoot2(props, ref) {
-    const {
-      variant = "solid",
-      size = "md",
-      fitted,
-      lazyMount: _lazyMount,
-      unmountOnExit: _unmountOnExit,
-      onValueChange,
-      className,
-      ...rest
-    } = props;
-    const handleValueChange = React33.useCallback(
-      (value) => {
-        if (!onValueChange) return;
-        onValueChange({ value });
-      },
-      [onValueChange]
-    );
-    return /* @__PURE__ */ jsx(
-      RadixTabs.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.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__ */ jsx(
-      RadixTabs.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.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.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.useMemo(() => ({ variant, size, fitted }), [variant, size, fitted]);
+  return /* @__PURE__ */ jsx(Shape.Provider, { value: shape, children: /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      unstyled: true,
+      position: "relative",
+      orientation: "horizontal",
+      onValueChange: onValueChange ? (value) => onValueChange({ value }) : void 0,
       ...rest
-    } = props;
-    const internalRef = React33.useRef(null);
-    const mergedRef = useMergedRef(ref, internalRef);
-    const { variant, size, fitted } = useTabsContext(internalRef);
-    return /* @__PURE__ */ jsx(
-      RadixTabs.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.forwardRef(
-  function TabsContent2(props, ref) {
-    const { className, padding: _padding, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      RadixTabs.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.useContext(Shape);
   return /* @__PURE__ */ jsx(
-    "span",
+    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.useState({ variant: "solid", size: "md", fitted: false });
-  React33.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.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.useContext(Shape);
+  const { rest, active } = VARIANT3[variant];
+  const selected = useTabsContext().value === props.value;
+  return /* @__PURE__ */ jsx(
+    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__ */ jsx(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__ */ jsx(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__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
@@ -6084,7 +5761,7 @@ var TAG_SELECTED_CLASSES = [
   "hover:opacity-76"
 ].join(" ");
 var TAG_DISABLED_CLASSES = "opacity-40 pointer-events-none cursor-not-allowed";
-var Tag = React33.forwardRef(
+var Tag = React32.forwardRef(
   function Tag2(props, ref) {
     const {
       variant,
@@ -6148,32 +5825,16 @@ var Tag = React33.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__default.forwardRef(
+var Textarea = React32__default.forwardRef(
   ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
-    const handleChange = React33__default.useCallback(
+    const handleChange = React32__default.useCallback(
       (event) => {
         onChange?.(event);
         onChangeText?.(event.target.value);
@@ -6185,7 +5846,10 @@ var Textarea = React33__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
       }
@@ -6195,93 +5859,90 @@ var Textarea = React33__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 toast.success(title, external);
-    case "error":
-      return toast.error(title, external);
-    case "warning":
-      return toast.warning(title, external);
-    case "loading":
-      return toast.loading(title, external);
-    case "info":
-    default:
-      return toast.info(title, external);
-  }
-}
-function update(id, opts) {
-  const title = opts.title ?? "";
-  const external = mapOptions({ ...opts, id });
-  switch (opts.type) {
-    case "success":
-      toast.success(title, external);
-      break;
-    case "error":
-      toast.error(title, external);
-      break;
-    case "warning":
-      toast.warning(title, external);
-      break;
-    case "loading":
-      toast.loading(title, external);
-      break;
-    case "info":
-    default:
-      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) => toast.dismiss(id)
+  remove
 };
-var Toaster = () => {
-  return /* @__PURE__ */ jsx(
-    Toaster$1,
-    {
-      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__ */ jsxs(
+  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__ */ jsx(Toast.Title, { unstyled: true, fontSize: 14, fontWeight: "600", color: "var(--color-text-primary)", children: entry.title }) : null,
+      entry.description ? /* @__PURE__ */ jsx(Toast.Description, { unstyled: true, fontSize: 13, color: "var(--color-text-secondary)", children: entry.description }) : null,
+      entry.action ? /* @__PURE__ */ jsx(XStack, { marginTop: 4, children: /* @__PURE__ */ jsx(Toast.Action, { altText: entry.action.label, onPress: entry.action.onClick, children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          cursor: "pointer",
+          fontSize: 13,
+          fontWeight: "500",
+          color: "var(--color-link-primary)",
+          children: entry.action.label
         }
-      }
-    }
-  );
+      ) }) }) : null
+    ]
+  },
+  entry.id
+);
+var Toaster = () => {
+  const list = React32.useSyncExternalStore(subscribe, snapshot, snapshot);
+  return /* @__PURE__ */ jsxs(ToastProvider, { children: [
+    /* @__PURE__ */ jsx(YStack, { children: list.map((entry) => /* @__PURE__ */ jsx(One, { entry }, entry.id)) }),
+    /* @__PURE__ */ jsx(ToastViewport, { position: "absolute", top: 12, right: 12 })
+  ] });
 };
 function fmt(n, decimals = 2) {
   if (n === void 0 || n === null) return "-";
@@ -6316,7 +5977,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.forwardRef(
+var OptionChain = React32.forwardRef(
   function OptionChain2(props, ref) {
     const {
       symbol: _symbol,
@@ -6327,7 +5988,7 @@ var OptionChain = React33.forwardRef(
       className,
       ...rest
     } = props;
-    const handleClick = React33.useCallback(
+    const handleClick = React32.useCallback(
       (quote, type, strike) => {
         if (!quote || !onSelectContract) return;
         onSelectContract({
@@ -6507,7 +6168,7 @@ function GreekItem({ def, value, compact }) {
     }
   );
 }
-var GreeksDisplay = React33.forwardRef(
+var GreeksDisplay = React32.forwardRef(
   function GreeksDisplay2(props, ref) {
     const {
       delta,
@@ -6739,7 +6400,7 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
     )
   ] });
 }
-var StrategyBuilder = React33.forwardRef(
+var StrategyBuilder = React32.forwardRef(
   function StrategyBuilder2(props, ref) {
     const {
       underlying,
@@ -6751,12 +6412,12 @@ var StrategyBuilder = React33.forwardRef(
       ...rest
     } = props;
     const defaultExp = expirations[0] ?? "";
-    const [strategyType, setStrategyType] = React33.useState("bull_call_spread");
-    const [legs, setLegs] = React33.useState(() => {
+    const [strategyType, setStrategyType] = React32.useState("bull_call_spread");
+    const [legs, setLegs] = React32.useState(() => {
       const preset = STRATEGY_PRESETS.find((p) => p.value === "bull_call_spread");
       return preset ? preset.buildLegs(strikes, spotPrice, defaultExp) : [];
     });
-    const handleStrategyChange = React33.useCallback(
+    const handleStrategyChange = React32.useCallback(
       (e) => {
         const type = e.target.value;
         setStrategyType(type);
@@ -6767,7 +6428,7 @@ var StrategyBuilder = React33.forwardRef(
       },
       [strikes, spotPrice, defaultExp]
     );
-    const handleLegChange = React33.useCallback(
+    const handleLegChange = React32.useCallback(
       (index, leg) => {
         setLegs((prev) => {
           const next = [...prev];
@@ -6777,13 +6438,13 @@ var StrategyBuilder = React33.forwardRef(
       },
       []
     );
-    const handleLegRemove = React33.useCallback(
+    const handleLegRemove = React32.useCallback(
       (index) => {
         setLegs((prev) => prev.filter((_, i) => i !== index));
       },
       []
     );
-    const handleAddLeg = React33.useCallback(() => {
+    const handleAddLeg = React32.useCallback(() => {
       if (legs.length >= 4) return;
       const atm = findATM(strikes, spotPrice);
       setLegs((prev) => [
@@ -6791,14 +6452,14 @@ var StrategyBuilder = React33.forwardRef(
         { action: "buy", type: "call", strike: atm, expiration: defaultExp, quantity: 1 }
       ]);
     }, [legs.length, strikes, spotPrice, defaultExp]);
-    const netPremium = React33.useMemo(() => {
+    const netPremium = React32.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.useCallback(() => {
+    const handleSubmit = React32.useCallback(() => {
       if (!onSubmit || legs.length === 0) return;
       onSubmit({
         type: strategyType,
@@ -6921,7 +6582,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.forwardRef(
+var PnlDiagram = React32.forwardRef(
   function PnlDiagram2(props, ref) {
     const {
       legs,
@@ -6930,14 +6591,14 @@ var PnlDiagram = React33.forwardRef(
       className,
       ...rest
     } = props;
-    const containerRef = React33.useRef(null);
-    const [hoverX, setHoverX] = React33.useState(null);
-    const [dims, setDims] = React33.useState({ width: 600, height: 240 });
-    React33.useEffect(() => {
+    const containerRef = React32.useRef(null);
+    const [hoverX, setHoverX] = React32.useState(null);
+    const [dims, setDims] = React32.useState({ width: 600, height: 240 });
+    React32.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),
@@ -6956,7 +6617,7 @@ var PnlDiagram = React33.forwardRef(
     const xMax = maxStrike + range * 0.3;
     const SAMPLES = 200;
     const step = (xMax - xMin) / SAMPLES;
-    const combinedPoints = React33.useMemo(() => {
+    const combinedPoints = React32.useMemo(() => {
       const pts = [];
       for (let i = 0; i <= SAMPLES; i++) {
         const price = xMin + i * step;
@@ -6964,7 +6625,7 @@ var PnlDiagram = React33.forwardRef(
       }
       return pts;
     }, [legs, multiplier, xMin, step]);
-    const legPointSets = React33.useMemo(() => {
+    const legPointSets = React32.useMemo(() => {
       return legs.map((leg) => {
         const pts = [];
         for (let i = 0; i <= SAMPLES; i++) {
@@ -6985,7 +6646,7 @@ var PnlDiagram = React33.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.useMemo(() => {
+    const breakevens = React32.useMemo(() => {
       const pts = [];
       for (let i = 1; i < combinedPoints.length; i++) {
         const prev = combinedPoints[i - 1];
@@ -7002,7 +6663,7 @@ var PnlDiagram = React33.forwardRef(
     const maxGainPoint = combinedPoints.find((p) => p.y === maxGain);
     const maxLossPoint = combinedPoints.find((p) => p.y === maxLoss);
     const zeroY = scaleY(0);
-    const handleMouseMove = React33.useCallback(
+    const handleMouseMove = React32.useCallback(
       (e) => {
         const rect = e.currentTarget.getBoundingClientRect();
         const mouseX = e.clientX - rect.left;
@@ -7015,7 +6676,7 @@ var PnlDiagram = React33.forwardRef(
       },
       [vb.xMin, vb.xMax, chartW]
     );
-    const handleMouseLeave = React33.useCallback(() => setHoverX(null), []);
+    const handleMouseLeave = React32.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 })),
@@ -7319,7 +6980,7 @@ function formatDate(date) {
   const d = new Date(date);
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
 }
-var OptionPositionCard = React33.forwardRef(
+var OptionPositionCard = React32.forwardRef(
   function OptionPositionCard2(props, ref) {
     const {
       position,
@@ -7483,7 +7144,7 @@ function ExpirationPill({ exp, isSelected, onClick }) {
     }
   );
 }
-var ExpirationSelector = React33.forwardRef(
+var ExpirationSelector = React32.forwardRef(
   function ExpirationSelector2(props, ref) {
     const {
       expirations,
@@ -7493,8 +7154,8 @@ var ExpirationSelector = React33.forwardRef(
       className,
       ...rest
     } = props;
-    const scrollRef = React33.useRef(null);
-    React33.useEffect(() => {
+    const scrollRef = React32.useRef(null);
+    React32.useEffect(() => {
       const container = scrollRef.current;
       if (!container) return;
       const selectedEl = container.querySelector('[data-selected="true"]');
@@ -7806,4 +7467,4 @@ var BankPage = styled(View, {
   padding: 16
 });
 
-export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, Alert, AppNav, AppProvider, Avatar, AvatarGroup, Badge, BankAlert, BankAlertText, BankButton, BankButtonText, BankCard, BankDivider, BankField, BankHeading, BankInput, BankPage, BankPinBox, BankText, Button, ButtonGroup, ButtonGroupRadio, Checkbox2 as Checkbox, CheckboxGroup2 as CheckboxGroup, CloseButton, CollapsibleDetails, CollapsibleList, ColorModeProvider, DEFAULT_ORG, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, DrawerTitle, DrawerTrigger, EmptyState, ExpirationSelector, Field, GreeksDisplay, Heading, IAM_PAGE_SIZE, IamError, IconButton, IdentityProvider, Image, Input, InputGroup, LUX_BRAND, Link, LinkBox, LinkExternalIcon, LinkOverlay, LoadingBar, MenuArrow, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, NARROW_PX, OptionChain, OptionPositionCard, OrgSwitcher, PARS_GOLD, PinInput, PnlDiagram, PopoverArrow, PopoverBody, PopoverCloseTrigger, PopoverCloseTriggerWrapper, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger, Progress, ProgressCircleRing, ProgressCircleRoot, ProgressCircleValueText, ProjectSwitcher, Radio2 as Radio, RadioGroup3 as RadioGroup, Rating, Select, SelectAsync, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectValueText, Separator2 as Separator, SettingsMenu, Skeleton, SkeletonCircle, SkeletonText, Slider, StrategyBuilder, Switch2 as Switch, Switcher, TOUCH_PX, TableBody, TableCaption, TableCell, TableColumnHeader, TableColumnHeaderSortable, TableFooter, TableHeader, TableHeaderSticky, TableRoot, TableRow, TableScrollWrapper, TabsContent, TabsCounter, TabsList, TabsRoot, TabsTrigger, Tag, Textarea, Toaster, Tooltip, UserMenu, bankColors, buttonVariants, cn, config, createListCollection, currentHost, lux_config_default as guiConfig, iam, iamBase, initials, luxThemes, orgIdentity, ORGS as orgs, resolveWhiteLabel, toaster, useAccordion, useBelow, useColorMode, useColorModeValue, useIdentity, useIsNarrow, useIsTouch, useWhiteLabel };
+export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, Alert, AppNav, AppProvider, Avatar, AvatarGroup, Badge, BankAlert, BankAlertText, BankButton, BankButtonText, BankCard, BankDivider, BankField, BankHeading, BankInput, BankPage, BankPinBox, BankText, Button, ButtonGroup, ButtonGroupRadio, Checkbox2 as Checkbox, CheckboxGroup2 as CheckboxGroup, CloseButton, CollapsibleDetails, CollapsibleList, ColorModeProvider, DEFAULT_ORG, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, DrawerTitle, DrawerTrigger, EmptyState, ExpirationSelector, Field, GreeksDisplay, Heading, IAM_PAGE_SIZE, IamError, IconButton, IdentityProvider, Image, Input, InputGroup, LUX_BRAND, Link, LinkBox, LinkExternalIcon, LinkOverlay, LoadingBar, MenuArrow, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, NARROW_PX, OptionChain, OptionPositionCard, OrgSwitcher, PARS_GOLD, PinInput, PnlDiagram, PopoverArrow, PopoverBody, PopoverCloseTrigger, PopoverCloseTriggerWrapper, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger, Progress, ProgressCircleRing, ProgressCircleRoot, ProgressCircleValueText, ProjectSwitcher, Radio2 as Radio, RadioGroup2 as RadioGroup, Rating, Select, SelectAsync, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectValueText, Separator, SettingsMenu, Skeleton, SkeletonCircle, SkeletonText, Slider, StrategyBuilder, Switch2 as Switch, Switcher, TOUCH_PX, TableBody, TableCaption, TableCell, TableColumnHeader, TableColumnHeaderSortable, TableFooter, TableHeader, TableHeaderSticky, TableRoot, TableRow, TableScrollWrapper, TabsContent, TabsCounter, TabsList, TabsRoot, TabsTrigger, Tag, Textarea, Toaster, Tooltip, UserMenu, bankColors, buttonVariants, cn, config, createListCollection, currentHost, lux_config_default as guiConfig, iam, iamBase, initials, luxThemes, orgIdentity, ORGS as orgs, resolveWhiteLabel, toaster, useAccordion, useBelow, useColorMode, useColorModeValue, useIdentity, useIsNarrow, useIsTouch, useWhiteLabel };