@luxfi/ui 7.4.11 → 7.4.13

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-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 { createGui, styled, View, Sheet, Dialog, XStack, YStack, Text, Avatar as Avatar$1, TooltipGroup, Tooltip as Tooltip$1, Label, Checkbox, VisuallyHidden, 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, Menu, Accordion, Collapsible, Tabs, useTabsContext, ToastProvider, ToastViewport, Toast } from '@hanzo/gui';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as React32 from 'react';
 import React32__default, { Children, createElement } from 'react';
@@ -542,23 +542,19 @@ var CloseButtonFrame = styled(View, {
     }
   }
 });
-var CLOSE_BUTTON_CLASSES = [
-  "text-[var(--closeButton-fg,currentColor)]",
-  "hover:text-[var(--hover-color,currentColor)]",
-  "disabled:opacity-40"
-].join(" ");
 var CloseButton = React32.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsx(
     CloseButtonFrame,
     {
       ref,
-      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      className,
       ...rest,
       children: children ?? /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "size-5",
+          width: 20,
+          height: 20,
           viewBox: "0 0 20 20",
           fill: "none",
           "aria-hidden": "true",
@@ -1456,22 +1452,30 @@ function LoadingBar({ loading = true }) {
   if (!loading) return null;
   return /* @__PURE__ */ jsx("div", { className: "lux-loading", role: "progressbar", "aria-busy": "true", "aria-label": "Loading" });
 }
-var IndicatorIcon2 = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 10a.75.75 0 011.5 0v3a.75.75 0 01-1.5 0v-3z" }) });
-var ALERT_BASE = "w-full flex items-start relative rounded text-[var(--color-alert-fg)]";
-var STATUS_CLASSES = {
-  info: "bg-[var(--color-alert-bg-info)]",
-  warning: "bg-[var(--color-alert-bg-warning)]",
-  warning_table: "bg-[var(--color-alert-bg-warning-table)]",
-  success: "bg-[var(--color-alert-bg-success)]",
-  error: "bg-[var(--color-alert-bg-error)]"
+var IndicatorIcon2 = () => /* @__PURE__ */ jsx("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 10a.75.75 0 011.5 0v3a.75.75 0 01-1.5 0v-3z" }) });
+var ALERT_BASE = {
+  width: "100%",
+  position: "relative",
+  alignItems: "flex-start",
+  borderRadius: 4,
+  gap: 8,
+  paddingVertical: 8
 };
-var SIZE_CLASSES = {
-  sm: "gap-2 px-2 py-2 text-xs",
-  md: "gap-2 px-3 py-2 text-base"
+var ALERT_FG = "var(--color-alert-fg)";
+var STATUS_BG = {
+  info: "var(--color-alert-bg-info)",
+  warning: "var(--color-alert-bg-warning)",
+  warning_table: "var(--color-alert-bg-warning-table)",
+  success: "var(--color-alert-bg-success)",
+  error: "var(--color-alert-bg-error)"
+};
+var SIZE = {
+  sm: { paddingHorizontal: 8, fontSize: 12 },
+  md: { paddingHorizontal: 12, fontSize: 16 }
 };
-var INDICATOR_SIZE_CLASSES = {
-  sm: "w-5 h-5 my-0",
-  md: "w-5 h-5 my-[2px]"
+var INDICATOR_SIZE = {
+  sm: { marginVertical: 0 },
+  md: { marginVertical: 2 }
 };
 var Alert = React32.forwardRef(
   function Alert2(props, ref) {
@@ -1500,7 +1504,8 @@ var Alert = React32.forwardRef(
     const alertStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
     const [isOpen, setIsOpen] = React32.useState(true);
     const resolvedSize = size ?? "md";
-    const defaultIcon = /* @__PURE__ */ jsx(IndicatorIcon2, { className: "w-5 h-5" });
+    const fontSize = SIZE[resolvedSize].fontSize;
+    const defaultIcon = /* @__PURE__ */ jsx(IndicatorIcon2, {});
     const iconElement = (() => {
       if (startElement !== void 0) {
         return startElement;
@@ -1508,10 +1513,20 @@ var Alert = React32.forwardRef(
       if (!showIcon && icon === void 0) {
         return null;
       }
-      return /* @__PURE__ */ jsx("span", { className: cn(
-        "inline-flex items-center justify-center shrink-0 text-[var(--color-alert-fg)] [&>svg]:w-full [&>svg]:h-full",
-        INDICATOR_SIZE_CLASSES[resolvedSize]
-      ), children: icon || defaultIcon });
+      return /* @__PURE__ */ jsx(
+        XStack,
+        {
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          width: 20,
+          height: 20,
+          ...INDICATOR_SIZE[resolvedSize],
+          className: "lux-icon",
+          style: { color: ALERT_FG },
+          children: icon || defaultIcon
+        }
+      );
     })();
     const handleClose = React32.useCallback(() => {
       setIsOpen(false);
@@ -1540,52 +1555,57 @@ var Alert = React32.forwardRef(
       ...descRowGap !== void 0 ? { rowGap: typeof descRowGap === "number" ? `${descRowGap * 4}px` : descRowGap } : {},
       ...descColumnGap !== void 0 ? { columnGap: typeof descColumnGap === "number" ? `${descColumnGap * 4}px` : descColumnGap } : {}
     };
+    const ContentFrame = inline ? XStack : YStack;
     return /* @__PURE__ */ jsx(Skeleton, { loading, children: /* @__PURE__ */ jsxs(
-      "div",
+      XStack,
       {
         ref,
-        className: cn(ALERT_BASE, STATUS_CLASSES[status], SIZE_CLASSES[resolvedSize], className),
+        ...ALERT_BASE,
+        paddingHorizontal: SIZE[resolvedSize].paddingHorizontal,
+        backgroundColor: STATUS_BG[status],
+        className,
         style: alertStyle,
         ...alertRest,
         children: [
           iconElement,
-          children ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-1", inline ? "inline-flex flex-row items-center" : "flex flex-col"), children: [
-            title && /* @__PURE__ */ jsx("div", { className: "font-semibold", children: title }),
+          children ? /* @__PURE__ */ jsxs(ContentFrame, { flex: 1, alignItems: inline ? "center" : void 0, children: [
+            title && /* @__PURE__ */ jsx(Text, { fontWeight: "600", fontSize, color: ALERT_FG, children: title }),
             /* @__PURE__ */ jsx(
-              "div",
+              XStack,
               {
-                className: cn("inline-flex flex-wrap", descClassName),
+                flexWrap: "wrap",
+                className: descClassName,
                 style: Object.keys(descStyle).length > 0 ? descStyle : void 0,
                 ...descRest,
-                children
+                children: ink(children, void 0, { fontSize, color: ALERT_FG })
               }
             )
-          ] }) : /* @__PURE__ */ jsx("div", { className: "font-semibold flex-1", children: title }),
+          ] }) : /* @__PURE__ */ jsx(Text, { flex: 1, fontWeight: "600", fontSize, color: ALERT_FG, children: title }),
           endElement,
-          closable && /* @__PURE__ */ jsx(
-            CloseButton,
-            {
-              className: "relative self-start",
-              onClick: handleClose
-            }
-          )
+          closable && /* @__PURE__ */ jsx(View, { position: "relative", alignSelf: "flex-start", children: /* @__PURE__ */ jsx(CloseButton, { onClick: handleClose }) })
         ]
       }
     ) });
   }
 );
-var SIZE_CLASSES2 = {
-  xs: "h-6 w-6 text-[10px]",
-  sm: "h-8 w-8 text-xs",
-  md: "h-10 w-10 text-sm",
-  lg: "h-12 w-12 text-base",
-  xl: "h-16 w-16 text-lg",
-  "2xl": "h-20 w-20 text-xl"
+var SIZE2 = {
+  xs: { width: 24, height: 24, fontSize: 10 },
+  sm: { width: 32, height: 32, fontSize: 12 },
+  md: { width: 40, height: 40, fontSize: 14 },
+  lg: { width: 48, height: 48, fontSize: 16 },
+  xl: { width: 64, height: 64, fontSize: 18 },
+  "2xl": { width: 80, height: 80, fontSize: 20 }
 };
-var VARIANT_CLASSES = {
-  solid: "bg-gray-500 text-white",
-  subtle: "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200",
-  outline: "border-2 border-gray-300 bg-transparent text-gray-700 dark:border-gray-600 dark:text-gray-200"
+var RING = "var(--color-bg-body)";
+var VARIANT = {
+  solid: { backgroundColor: "var(--color-gray-500)", color: "var(--color-white)" },
+  subtle: { backgroundColor: "var(--color-badge-gray-bg)", color: "var(--color-badge-gray-fg)" },
+  outline: {
+    borderWidth: 2,
+    borderColor: "var(--color-input-border)",
+    backgroundColor: "transparent",
+    color: "var(--color-text-secondary)"
+  }
 };
 var DEFAULT_SIZE = "md";
 var DEFAULT_VARIANT = "subtle";
@@ -1604,7 +1624,6 @@ var Avatar = React32.forwardRef(
       icon,
       fallback,
       children,
-      className,
       size: sizeProp,
       variant: variantProp,
       borderless,
@@ -1617,21 +1636,26 @@ var Avatar = React32.forwardRef(
       Avatar$1,
       {
         ref,
-        unstyled: true,
-        className: cn(
-          "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle",
-          SIZE_CLASSES2[size],
-          VARIANT_CLASSES[variant],
-          !isBorderless && "ring-2 ring-white dark:ring-gray-900",
-          className
-        ),
+        position: "relative",
+        display: "inline-flex",
+        flexShrink: 0,
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+        borderRadius: 9999,
+        ...SIZE2[size],
+        ...VARIANT[variant],
+        boxShadow: isBorderless ? void 0 : `0 0 0 2px ${RING}`,
         ...rest,
         children: [
           /* @__PURE__ */ jsx(AvatarFallback, { name, icon, children: fallback }),
           src != null && /* @__PURE__ */ jsx(
             Avatar$1.Image,
             {
-              className: "h-full w-full rounded-[inherit] object-cover",
+              width: "100%",
+              height: "100%",
+              borderRadius: 9999,
+              objectFit: "cover",
               src,
               srcSet,
               loading,
@@ -1646,22 +1670,18 @@ var Avatar = React32.forwardRef(
 );
 var AvatarFallback = React32.forwardRef(
   function AvatarFallback2(props, ref) {
-    const { name, icon, children, className, ...rest } = props;
-    return /* @__PURE__ */ jsxs(
+    const { name, icon, children, ...rest } = props;
+    return /* @__PURE__ */ jsx(
       Avatar$1.Fallback,
       {
         ref,
-        unstyled: true,
-        className: cn(
-          "flex h-full w-full items-center justify-center font-medium",
-          className
-        ),
+        display: "flex",
+        width: "100%",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
         ...rest,
-        children: [
-          children,
-          name != null && children == null && /* @__PURE__ */ jsx(Fragment, { children: getInitials(name) }),
-          name == null && children == null && icon
-        ]
+        children: ink(children ?? (name != null ? getInitials(name) : icon), void 0, { fontWeight: "500" })
       }
     );
   }
@@ -1674,19 +1694,12 @@ function getInitials(name) {
 }
 var AvatarGroup = React32.forwardRef(
   function AvatarGroup2(props, ref) {
-    const { size, variant, borderless, className, ...rest } = props;
+    const { size, variant, borderless, children, ...rest } = props;
     const contextValue = React32.useMemo(
       () => ({ size, variant, borderless }),
       [size, variant, borderless]
     );
-    return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex -space-x-3", className),
-        ...rest
-      }
-    ) });
+    return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(XStack, { ref, ...rest, children: React32.Children.map(children, (child, index) => index === 0 || !React32.isValidElement(child) ? child : React32.cloneElement(child, { marginLeft: -12 })) }) });
   }
 );
 function mapPlacement(p) {
@@ -1780,14 +1793,21 @@ var Tooltip = React32.forwardRef(
             {
               ref,
               unstyled: true,
-              className: cn(
-                "z-[9999] overflow-hidden rounded-lg px-3 py-2 text-sm",
-                "animate-in fade-in-0 zoom-in-95",
-                isPopover && "bg-[var(--color-popover-bg)] text-[var(--color-text-primary)]",
-                isPopover && "shadow-[var(--shadow-popover)] border border-[var(--color-border-divider)] max-w-sm",
-                !isPopover && "bg-[var(--color-tooltip-bg)] text-[var(--color-tooltip-fg)] max-w-xs",
-                contentProps?.className
-              ),
+              zIndex: 9999,
+              overflow: "hidden",
+              borderRadius: 8,
+              paddingHorizontal: 12,
+              paddingVertical: 8,
+              maxWidth: isPopover ? 384 : 320,
+              backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)",
+              transition: "quick",
+              enterStyle: { opacity: 0, scale: 0.95 },
+              exitStyle: { opacity: 0, scale: 0.95 },
+              ...isPopover ? {
+                borderWidth: 1,
+                borderColor: "var(--color-border-divider)",
+                shadowColor: "var(--shadow-popover)"
+              } : {},
               onClick: interactive ? handleContentClick : void 0,
               ...selected ? { "data-selected": true } : {},
               ...contentProps,
@@ -1796,12 +1816,13 @@ var Tooltip = React32.forwardRef(
                   Tooltip$1.Arrow,
                   {
                     unstyled: true,
-                    className: cn(
-                      isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
-                    )
+                    backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)"
                   }
                 ),
-                content
+                ink(content, void 0, {
+                  fontSize: 14,
+                  color: isPopover ? "var(--color-text-primary)" : "var(--color-tooltip-fg)"
+                })
               ]
             }
           )
@@ -1813,35 +1834,39 @@ var Tooltip = React32.forwardRef(
 function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
-var BASE_CLASSES = "inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text";
-var SIZE_CLASSES3 = {
-  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"
+var SIZE3 = {
+  sm: { padding: 4, height: 18, minHeight: 18 },
+  md: { paddingHorizontal: 4, paddingVertical: 2, minHeight: 24 },
+  lg: { paddingHorizontal: 8, paddingVertical: 4, minHeight: 28 }
 };
-var COLOR_PALETTE_CLASSES = {
-  gray: "bg-badge-gray-bg text-badge-gray-fg",
-  green: "bg-badge-green-bg text-badge-green-fg",
-  red: "bg-badge-red-bg text-badge-red-fg",
-  purple: "bg-badge-purple-bg text-badge-purple-fg",
-  orange: "bg-badge-orange-bg text-badge-orange-fg",
-  blue: "bg-badge-blue-bg text-badge-blue-fg",
-  yellow: "bg-badge-yellow-bg text-badge-yellow-fg",
-  teal: "bg-badge-teal-bg text-badge-teal-fg",
-  cyan: "bg-badge-cyan-bg text-badge-cyan-fg",
-  pink: "bg-badge-pink-bg text-badge-pink-fg",
-  purple_alt: "bg-badge-purple-alt-bg text-badge-purple-alt-fg",
-  blue_alt: "bg-badge-blue-alt-bg text-badge-blue-alt-fg",
-  bright_gray: "bg-badge-bright-gray-bg text-badge-bright-gray-fg",
-  bright_green: "bg-badge-bright-green-bg text-badge-bright-green-fg",
-  bright_red: "bg-badge-bright-red-bg text-badge-bright-red-fg",
-  bright_blue: "bg-badge-bright-blue-bg text-badge-bright-blue-fg",
-  bright_yellow: "bg-badge-bright-yellow-bg text-badge-bright-yellow-fg",
-  bright_teal: "bg-badge-bright-teal-bg text-badge-bright-teal-fg",
-  bright_cyan: "bg-badge-bright-cyan-bg text-badge-bright-cyan-fg",
-  bright_orange: "bg-badge-bright-orange-bg text-badge-bright-orange-fg",
-  bright_purple: "bg-badge-bright-purple-bg text-badge-bright-purple-fg",
-  bright_pink: "bg-badge-bright-pink-bg text-badge-bright-pink-fg"
+var SIZE_TEXT = {
+  sm: { fontSize: 12, fontWeight: "500" },
+  md: { fontSize: 14, fontWeight: "500" },
+  lg: { fontSize: 14, fontWeight: "600" }
+};
+var COLOR_PALETTE = {
+  gray: { bg: "var(--color-badge-gray-bg)", fg: "var(--color-badge-gray-fg)" },
+  green: { bg: "var(--color-badge-green-bg)", fg: "var(--color-badge-green-fg)" },
+  red: { bg: "var(--color-badge-red-bg)", fg: "var(--color-badge-red-fg)" },
+  purple: { bg: "var(--color-badge-purple-bg)", fg: "var(--color-badge-purple-fg)" },
+  orange: { bg: "var(--color-badge-orange-bg)", fg: "var(--color-badge-orange-fg)" },
+  blue: { bg: "var(--color-badge-blue-bg)", fg: "var(--color-badge-blue-fg)" },
+  yellow: { bg: "var(--color-badge-yellow-bg)", fg: "var(--color-badge-yellow-fg)" },
+  teal: { bg: "var(--color-badge-teal-bg)", fg: "var(--color-badge-teal-fg)" },
+  cyan: { bg: "var(--color-badge-cyan-bg)", fg: "var(--color-badge-cyan-fg)" },
+  pink: { bg: "var(--color-badge-pink-bg)", fg: "var(--color-badge-pink-fg)" },
+  purple_alt: { bg: "var(--color-badge-purple-alt-bg)", fg: "var(--color-badge-purple-alt-fg)" },
+  blue_alt: { bg: "var(--color-badge-blue-alt-bg)", fg: "var(--color-badge-blue-alt-fg)" },
+  bright_gray: { bg: "var(--color-badge-bright-gray-bg)", fg: "var(--color-badge-bright-gray-fg)" },
+  bright_green: { bg: "var(--color-badge-bright-green-bg)", fg: "var(--color-badge-bright-green-fg)" },
+  bright_red: { bg: "var(--color-badge-bright-red-bg)", fg: "var(--color-badge-bright-red-fg)" },
+  bright_blue: { bg: "var(--color-badge-bright-blue-bg)", fg: "var(--color-badge-bright-blue-fg)" },
+  bright_yellow: { bg: "var(--color-badge-bright-yellow-bg)", fg: "var(--color-badge-bright-yellow-fg)" },
+  bright_teal: { bg: "var(--color-badge-bright-teal-bg)", fg: "var(--color-badge-bright-teal-fg)" },
+  bright_cyan: { bg: "var(--color-badge-bright-cyan-bg)", fg: "var(--color-badge-bright-cyan-fg)" },
+  bright_orange: { bg: "var(--color-badge-bright-orange-bg)", fg: "var(--color-badge-bright-orange-fg)" },
+  bright_purple: { bg: "var(--color-badge-bright-purple-bg)", fg: "var(--color-badge-bright-purple-fg)" },
+  bright_pink: { bg: "var(--color-badge-bright-pink-bg)", fg: "var(--color-badge-bright-pink-fg)" }
 };
 var S2 = 4;
 var Badge = React32__default.forwardRef(
@@ -1876,18 +1901,31 @@ var Badge = React32__default.forwardRef(
     }
     if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * S2}px` : _mr;
     const badgeStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
-    const child = children ? /* @__PURE__ */ jsx("span", { className: "overflow-hidden text-ellipsis", children }) : null;
+    const palette = COLOR_PALETTE[colorPalette];
+    const child = children ? (
+      // `ellipsis` is gui Text's own built-in variant for single-line
+      // truncation — it expands to the same overflow/text-overflow/
+      // white-space/max-width rule Tailwind's `text-ellipsis` did, but
+      // through the component's own variants (guaranteed to compile),
+      // rather than naming each longhand as a separate style prop.
+      /* @__PURE__ */ jsx(Text, { ellipsis: true, ...SIZE_TEXT[size], color: palette.fg, children })
+    ) : null;
     const childrenElement = truncated ? /* @__PURE__ */ jsx(TruncatedTextTooltip, { label: children, children: child }) : child;
     const badgeElement = /* @__PURE__ */ jsxs(
-      "span",
+      XStack,
       {
         ref,
-        className: cn(
-          BASE_CLASSES,
-          SIZE_CLASSES3[size],
-          COLOR_PALETTE_CLASSES[colorPalette],
-          className
-        ),
+        render: /* @__PURE__ */ jsx("span", {}),
+        display: "inline-flex",
+        alignItems: "center",
+        alignSelf: "flex-start",
+        borderRadius: 2,
+        gap: 4,
+        maxWidth: "100%",
+        userSelect: "text",
+        ...SIZE3[size],
+        backgroundColor: palette.bg,
+        className,
         style: badgeStyle,
         ...rest,
         children: [
@@ -1961,7 +1999,7 @@ var ButtonFrame = styled(View, {
     size: "md"
   }
 });
-var VARIANT_CLASSES2 = {
+var VARIANT_CLASSES = {
   solid: [
     "bg-[var(--color-button-solid-bg)] text-[var(--color-button-solid-text)]",
     "hover:bg-[var(--color-hover)]",
@@ -2061,7 +2099,7 @@ var VARIANT_CLASSES2 = {
     "data-[selected]:hover:text-[var(--color-selected-control-text)] data-[selected]:hover:border-transparent"
   ].join(" ")
 };
-var BASE_CLASSES2 = "font-semibold whitespace-nowrap transition-colors duration-150";
+var BASE_CLASSES = "font-semibold whitespace-nowrap transition-colors duration-150";
 var SP = 4;
 function buildShimStyle(props) {
   const s = { ...props.style };
@@ -2162,8 +2200,8 @@ var Button = React32.forwardRef(
       /* @__PURE__ */ jsx(Spinner, {}),
       loadingText != null && /* @__PURE__ */ jsx("span", { style: { marginLeft: 8 }, children: loadingText })
     ] }) : children;
-    const variantClass = VARIANT_CLASSES2[variant] ?? VARIANT_CLASSES2.solid;
-    const combinedClassName = [BASE_CLASSES2, variantClass, className].filter(Boolean).join(" ");
+    const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.solid;
+    const combinedClassName = [BASE_CLASSES, variantClass, className].filter(Boolean).join(" ");
     const button = /* @__PURE__ */ jsx(
       ButtonFrame,
       {
@@ -2184,7 +2222,7 @@ var Button = React32.forwardRef(
     return button;
   }
 );
-var SIZE_CLASSES4 = {
+var SIZE_CLASSES = {
   "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",
@@ -2193,7 +2231,7 @@ var SIZE_CLASSES4 = {
 function buttonVariants(opts) {
   const v = opts?.variant ?? "solid";
   const s = opts?.size ?? "md";
-  return [BASE_CLASSES2, VARIANT_CLASSES2[v] ?? "", SIZE_CLASSES4[s] ?? ""].filter(Boolean).join(" ");
+  return [BASE_CLASSES, VARIANT_CLASSES[v] ?? "", SIZE_CLASSES[s] ?? ""].filter(Boolean).join(" ");
 }
 var ButtonGroup = React32.forwardRef(
   function ButtonGroup2(props, ref) {
@@ -2271,7 +2309,6 @@ var CheckboxGroupBase = React32.forwardRef(
       onValueChange,
       orientation = "vertical",
       name: _name,
-      className,
       ...rest
     } = props;
     const [uncontrolledValue, setUncontrolledValue] = React32.useState(defaultValue ?? []);
@@ -2294,15 +2331,13 @@ var CheckboxGroupBase = React32.forwardRef(
     }, [isControlled, controlledValue]);
     const ctx = React32.useMemo(() => ({ value, toggle }), [value, toggle]);
     return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
-      "div",
+      View,
       {
         ref,
         role: "group",
-        className: cn(
-          "flex",
-          orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-8",
-          className
-        ),
+        display: "flex",
+        flexDirection: orientation === "vertical" ? "column" : "row",
+        gap: orientation === "vertical" ? 12 : 32,
         ...rest,
         children
       }
@@ -2310,46 +2345,22 @@ var CheckboxGroupBase = React32.forwardRef(
   }
 );
 var CheckboxGroup2 = CheckboxGroupBase;
-var SIZE_CLASSES5 = {
-  sm: {
-    root: "gap-1.5",
-    control: "h-3.5 w-3.5 rounded-sm",
-    label: "text-xs",
-    icon: "h-3 w-3"
-  },
-  md: {
-    root: "gap-2",
-    control: "h-4 w-4 rounded",
-    label: "text-sm",
-    icon: "h-3.5 w-3.5"
-  }
+var SIZE4 = {
+  sm: { rootGap: 6, control: 14, radius: 2, label: 12, icon: 12 },
+  md: { rootGap: 8, control: 16, radius: 4, label: 14, icon: 14 }
 };
-var CheckIcon = ({ className }) => /* @__PURE__ */ jsx(
-  "svg",
+var INK = "var(--color-text-primary)";
+var ON_INK = "var(--color-bg-body)";
+var RESTING_BORDER = "var(--color-input-border)";
+var OUTLINE = "var(--color-gray-500)";
+var CheckIcon = ({ size, color }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  "path",
   {
-    className,
-    viewBox: "0 0 12 10",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M10.59 0.59L4 7.17L1.41 4.59L0 6L4 10L12 2L10.59 0.59Z",
-        fill: "currentColor"
-      }
-    )
+    d: "M10.59 0.59L4 7.17L1.41 4.59L0 6L4 10L12 2L10.59 0.59Z",
+    fill: color
   }
-);
-var IndeterminateIcon = ({ className }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className,
-    viewBox: "0 0 12 2",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx("path", { d: "M0 0H12V2H0V0Z", fill: "currentColor" })
-  }
-);
+) });
+var IndeterminateIcon = ({ size, color }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 12 2", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M0 0H12V2H0V0Z", fill: color }) });
 var CheckboxBase = React32.forwardRef(
   function Checkbox$1(props, ref) {
     const {
@@ -2367,7 +2378,6 @@ var CheckboxBase = React32.forwardRef(
       size = "md",
       name,
       required,
-      className,
       ...rest
     } = props;
     const group = useCheckboxGroupContext();
@@ -2420,18 +2430,19 @@ var CheckboxBase = React32.forwardRef(
       },
       [readOnly, isControlled, isInGroup, group, value, onCheckedChange, onChange]
     );
-    const sizeClasses2 = SIZE_CLASSES5[size];
+    const s = SIZE4[size];
+    const isChecked = checkedState !== false;
     return /* @__PURE__ */ jsxs(
-      "label",
+      Label,
       {
         ref: rootRef,
-        className: cn(
-          "inline-flex items-center cursor-pointer select-none",
-          sizeClasses2.root,
-          disabled && "opacity-50 cursor-not-allowed",
-          readOnly && "cursor-default",
-          className
-        ),
+        unstyled: true,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: s.rootGap,
+        cursor: disabled ? "not-allowed" : readOnly ? "default" : "pointer",
+        userSelect: "none",
+        opacity: disabled ? 0.5 : 1,
         onChange,
         "data-disabled": disabled || void 0,
         "data-readonly": readOnly || void 0,
@@ -2447,26 +2458,25 @@ var CheckboxBase = React32.forwardRef(
               name,
               value,
               required,
-              className: cn(
-                "inline-flex items-center justify-center shrink-0",
-                "border-2 border-current/30",
-                "data-[state=checked]:bg-gray-800 data-[state=checked]:text-white",
-                "dark:data-[state=checked]:bg-white dark:data-[state=checked]:text-black",
-                "data-[state=indeterminate]:bg-gray-800 data-[state=indeterminate]:text-white",
-                "dark:data-[state=indeterminate]:bg-white dark:data-[state=indeterminate]:text-black",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
-                "transition-colors duration-150",
-                sizeClasses2.control
-              ),
-              children: icon ?? /* @__PURE__ */ jsx(Checkbox.Indicator, { className: cn("flex items-center justify-center", sizeClasses2.icon), children: checkedState === "indeterminate" ? /* @__PURE__ */ jsx(IndeterminateIcon, { className: sizeClasses2.icon }) : /* @__PURE__ */ jsx(CheckIcon, { className: sizeClasses2.icon }) })
+              flexShrink: 0,
+              alignItems: "center",
+              justifyContent: "center",
+              width: s.control,
+              height: s.control,
+              borderRadius: s.radius,
+              borderWidth: 2,
+              borderColor: isChecked ? INK : RESTING_BORDER,
+              backgroundColor: isChecked ? INK : "transparent",
+              transition: "quicker",
+              focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: OUTLINE, outlineOffset: 2 },
+              children: icon ?? /* @__PURE__ */ jsx(Checkbox.Indicator, { alignItems: "center", justifyContent: "center", width: s.icon, height: s.icon, children: checkedState === "indeterminate" ? /* @__PURE__ */ jsx(IndeterminateIcon, { size: s.icon, color: ON_INK }) : /* @__PURE__ */ jsx(CheckIcon, { size: s.icon, color: ON_INK }) })
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
             "input",
             {
               ref: setHiddenInputRef,
               type: "checkbox",
-              className: "sr-only",
               checked: checkedState === true,
               disabled,
               readOnly,
@@ -2477,8 +2487,8 @@ var CheckboxBase = React32.forwardRef(
               onChange: NOOP,
               ...inputProps
             }
-          ),
-          children != null && /* @__PURE__ */ jsx("span", { className: cn(sizeClasses2.label), children })
+          ) }),
+          children != null && /* @__PURE__ */ jsx(Text, { fontSize: s.label, children })
         ]
       }
     );
@@ -2497,7 +2507,7 @@ function stripUtmParams(url) {
     return url;
   }
 }
-var VARIANT_CLASSES3 = {
+var VARIANT_CLASSES2 = {
   primary: cn(
     "text-[var(--color-link-primary)]",
     "hover:no-underline hover:text-[var(--color-link-primary-hover)]",
@@ -2537,7 +2547,7 @@ var VARIANT_CLASSES3 = {
     "data-[hover]:no-underline"
   )
 };
-var BASE_CLASSES3 = "inline-flex items-center gap-0 cursor-pointer data-[disabled]:cursor-not-allowed";
+var BASE_CLASSES2 = "inline-flex items-center gap-0 cursor-pointer data-[disabled]:cursor-not-allowed";
 var LinkExternalIcon = ({ color }) => /* @__PURE__ */ jsx(
   ArrowIcon,
   {
@@ -2606,7 +2616,7 @@ var Link = React32__default.forwardRef(
     if (_minW !== void 0) shimStyle.minWidth = typeof _minW === "number" ? `${_minW * SPACING}px` : _minW;
     if (_justifyContent) shimStyle.justifyContent = _justifyContent;
     if (_position) shimStyle.position = _position;
-    const linkClasses = cn(BASE_CLASSES3, VARIANT_CLASSES3[variant], className);
+    const linkClasses = cn(BASE_CLASSES2, VARIANT_CLASSES2[variant], className);
     const linkStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
     if (external) {
       const processedHref = typeof href === "string" ? stripUtmParams(href) : href;
@@ -2695,8 +2705,8 @@ var LinkOverlay = React32__default.forwardRef(
       ...rest
     } = props;
     const overlayClasses = cn(
-      BASE_CLASSES3,
-      VARIANT_CLASSES3[variant],
+      BASE_CLASSES2,
+      VARIANT_CLASSES2[variant],
       // Static positioning with a ::before pseudo-element that covers the LinkBox
       "static",
       'before:absolute before:inset-0 before:z-0 before:content-[""]',
@@ -3084,6 +3094,7 @@ function upperFirst(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 var ICONS = {};
+var MUTED = "var(--color-text-secondary)";
 var EmptyState = React32.forwardRef(
   function EmptyState2(props, ref) {
     const { title, description, term, type = "query", icon, children, className, ...rest } = props;
@@ -3121,17 +3132,20 @@ var EmptyState = React32.forwardRef(
       return icon;
     })();
     return /* @__PURE__ */ jsx(
-      "div",
+      XStack,
       {
         ref,
-        className: cn("flex items-center justify-center py-10", className),
+        alignItems: "center",
+        justifyContent: "center",
+        paddingVertical: 40,
+        className,
         ...rest,
-        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-5", children: [
-          iconContent && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: iconContent }),
-          descriptionContent ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-text-secondary", children: titleContent }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary", children: descriptionContent })
-          ] }) : /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-text-secondary", children: titleContent }),
+        children: /* @__PURE__ */ jsxs(YStack, { alignItems: "center", gap: 20, children: [
+          iconContent && /* @__PURE__ */ jsx(XStack, { alignItems: "center", justifyContent: "center", children: iconContent }),
+          descriptionContent ? /* @__PURE__ */ jsxs(YStack, { alignItems: "center", gap: 8, children: [
+            /* @__PURE__ */ jsx(Text, { fontSize: 18, fontWeight: "600", textAlign: "center", color: MUTED, children: titleContent }),
+            /* @__PURE__ */ jsx(Text, { fontSize: 14, textAlign: "center", color: MUTED, children: descriptionContent })
+          ] }) : /* @__PURE__ */ jsx(Text, { fontSize: 18, fontWeight: "600", textAlign: "center", color: MUTED, children: titleContent }),
           children
         ] })
       }
@@ -3145,10 +3159,10 @@ function getComponentDisplayName(type) {
   return void 0;
 }
 var ERROR = "var(--color-text-error)";
-var MUTED = "var(--color-text-secondary)";
+var MUTED2 = "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 }),
+  !required && optionalText && /* @__PURE__ */ jsx(Text, { fontSize: 14, color: MUTED2, children: optionalText }),
   errorText && /* @__PURE__ */ jsxs(Text, { fontSize: 14, color: ERROR, children: [
     "-",
     space,
@@ -3199,7 +3213,7 @@ var Field = React32.forwardRef(
           ]
         }
       );
-      const helperTextElement = helperText ? /* @__PURE__ */ jsx(Text, { marginTop: 6, fontSize: 12, color: MUTED, children: helperText }) : null;
+      const helperTextElement = helperText ? /* @__PURE__ */ jsx(Text, { marginTop: 6, fontSize: 12, color: MUTED2, children: helperText }) : null;
       const child2 = React32.Children.only(children);
       const isInputGroup = getComponentDisplayName(child2.type) === "InputGroup";
       if (isInputGroup) {
@@ -3237,7 +3251,7 @@ var Field = React32.forwardRef(
         }
       ),
       React32.cloneElement(child, { size }),
-      helperText && /* @__PURE__ */ jsx(Text, { fontSize: 12, color: MUTED, children: helperText }),
+      helperText && /* @__PURE__ */ jsx(Text, { fontSize: 12, color: MUTED2, children: helperText }),
       errorText && /* @__PURE__ */ jsx(Text, { fontSize: 12, color: ERROR, children: errorText })
     ] });
   }
@@ -3291,7 +3305,7 @@ var IconButtonFrame = styled(View, {
 var HOVER = "var(--color-hover)";
 var SELECTED_BG = "var(--color-selected-control-bg)";
 var SELECTED_FG = "var(--color-selected-control-text)";
-var VARIANT = {
+var VARIANT2 = {
   plain: {
     rest: { backgroundColor: "transparent", hoverStyle: { backgroundColor: "transparent" } }
   },
@@ -3366,7 +3380,7 @@ var IconButton = React32.forwardRef(
       style: styleProp,
       ...rest
     } = props;
-    const look = VARIANT[variant] ?? VARIANT.plain;
+    const look = VARIANT2[variant] ?? VARIANT2.plain;
     const iconSize = size ? ICON_SIZE[size] : void 0;
     const button = /* @__PURE__ */ jsx(
       IconButtonFrame,
@@ -3613,14 +3627,14 @@ var Image = React32__default.forwardRef(
     ] });
   }
 );
-var SIZE = {
+var SIZE5 = {
   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 VARIANT2 = {
+var VARIANT3 = {
   outline: { borderWidth: 1, borderStyle: "solid" },
   filled: { borderWidth: 0, backgroundColor: "var(--color-input-filled-bg)" },
   unstyled: { borderWidth: 0, backgroundColor: "transparent", padding: 0, height: "auto" }
@@ -3651,8 +3665,8 @@ var Input = React32__default.forwardRef(
         unstyled: true,
         className: className ? `lux-control ${className}` : "lux-control",
         ...CONTROL,
-        ...SIZE[size],
-        ...VARIANT2[variant],
+        ...SIZE5[size],
+        ...VARIANT3[variant],
         ...rest,
         onChange: handleChange
       }
@@ -3728,22 +3742,30 @@ var InputGroup = React32.forwardRef(
     const { className: startClassName, ...startRest } = startElementProps ?? {};
     const { className: endClassName, ...endRest } = endElementProps ?? {};
     return /* @__PURE__ */ jsxs(
-      "div",
+      XStack,
       {
         ref: combinedRef,
-        className: cn("relative flex w-full items-center", className),
+        position: "relative",
+        width: "100%",
+        alignItems: "center",
+        className,
         ...rest,
         children: [
           startElement && /* @__PURE__ */ jsx(
-            "div",
+            XStack,
             {
               ref: startElementRef,
-              className: cn(
-                "pointer-events-none absolute inset-y-0 left-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]",
-                startClassName
-              ),
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: 0,
+              zIndex: 1,
+              alignItems: "center",
+              pointerEvents: "none",
+              style: { color: "var(--color-icon-secondary)" },
+              className: startClassName,
               ...startRest,
-              children: startElement
+              children: ink(startElement)
             }
           ),
           React32.Children.map(children, (child) => {
@@ -3762,15 +3784,20 @@ var InputGroup = React32.forwardRef(
             });
           }),
           endElement && /* @__PURE__ */ jsx(
-            "div",
+            XStack,
             {
               ref: endElementRef,
-              className: cn(
-                "pointer-events-none absolute inset-y-0 right-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]",
-                endClassName
-              ),
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              right: 0,
+              zIndex: 1,
+              alignItems: "center",
+              pointerEvents: "none",
+              style: { color: "var(--color-icon-secondary)" },
+              className: endClassName,
               ...endRest,
-              children: endElement
+              children: ink(endElement)
             }
           )
         ]
@@ -3779,20 +3806,26 @@ var InputGroup = React32.forwardRef(
   }
 );
 InputGroup.displayName = "InputGroup";
-var INPUT_BASE = [
-  "w-10 h-10",
-  "text-center text-sm font-medium",
-  "border-2 rounded-md",
-  "outline-none appearance-none",
-  "bg-[var(--color-input-bg)] text-[var(--color-input-fg)]",
-  "border-[var(--color-input-border)]",
-  "placeholder:text-[var(--color-input-placeholder)]",
-  "hover:border-[var(--color-input-border-hover)]",
-  "focus:border-[var(--color-input-border-focus)] focus:shadow-md",
-  "disabled:opacity-40"
-].join(" ");
-var INPUT_FILLED = "border-[var(--color-input-border)]";
-var INPUT_INVALID = "border-[var(--color-border-error)] hover:border-[var(--color-border-error)]";
+var BOX = {
+  width: 40,
+  height: 40,
+  textAlign: "center",
+  fontSize: 14,
+  fontWeight: 500,
+  borderRadius: 6,
+  borderWidth: 2,
+  borderStyle: "solid",
+  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)",
+    boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+  },
+  disabledStyle: { opacity: 0.4 }
+};
 var PinInput = React32.forwardRef(
   function PinInput2(props, ref) {
     const {
@@ -3884,8 +3917,8 @@ var PinInput = React32.forwardRef(
     const onKeyDownAtIndex = React32.useCallback((index) => (e) => {
       handleKeyDown(index, e);
     }, [handleKeyDown]);
-    const bgStyle = bgColor ? { backgroundColor: `var(--color-${bgColor.replace(/\./g, "-")})` } : void 0;
-    return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("inline-flex items-center", attached ? "gap-0" : "gap-2", className), children: [
+    const boxBackground = bgColor ? `var(--color-${bgColor.replace(/\./g, "-")})` : BOX.backgroundColor;
+    return /* @__PURE__ */ jsxs(XStack, { ref: rootRef, alignItems: "center", gap: attached ? 0 : 8, className, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -3897,9 +3930,10 @@ var PinInput = React32.forwardRef(
         }
       ),
       Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
-        "input",
+        Input$1,
         {
           ref: setInputRef(index),
+          unstyled: true,
           type: "text",
           inputMode: "numeric",
           autoComplete: otp ? "one-time-code" : "off",
@@ -3908,14 +3942,12 @@ var PinInput = React32.forwardRef(
           placeholder,
           disabled,
           "aria-invalid": invalid || void 0,
+          "data-invalid": invalid || void 0,
           value: values[index] || "",
-          className: cn(
-            INPUT_BASE,
-            values[index] && INPUT_FILLED,
-            invalid && INPUT_INVALID,
-            attached && index > 0 && "-ml-0.5"
-          ),
-          style: bgStyle,
+          className: "lux-control",
+          ...BOX,
+          backgroundColor: boxBackground,
+          marginLeft: attached && index > 0 ? -2 : void 0,
           onInput: onInputAtIndex(index),
           onKeyDown: onKeyDownAtIndex(index),
           onPaste: handlePaste,
@@ -4161,11 +4193,11 @@ var PopoverDescription = React32.forwardRef(function PopoverDescription2(props,
     }
   );
 });
-var SIZE_CLASSES6 = {
-  sm: "h-1",
-  md: "h-2",
-  lg: "h-3",
-  xl: "h-4"
+var SIZE6 = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16
 };
 function normalizeValue(value, min, max) {
   if (value == null) return 0;
@@ -4181,7 +4213,6 @@ var Progress = React32.forwardRef(
       size = "md",
       color,
       trackProps,
-      className,
       style,
       w,
       flex,
@@ -4200,6 +4231,7 @@ var Progress = React32.forwardRef(
       }
     };
     const rootStyle = {
+      position: "relative",
       ...style,
       ...w !== void 0 && { width: w === "full" ? "100%" : w },
       ...flex !== void 0 && { flex }
@@ -4208,7 +4240,6 @@ var Progress = React32.forwardRef(
       "div",
       {
         ref,
-        className: cn("relative", className),
         style: rootStyle,
         ...rest,
         children: /* @__PURE__ */ jsx(
@@ -4217,22 +4248,21 @@ var Progress = React32.forwardRef(
             value: percent,
             max: 100,
             unstyled: true,
-            className: cn(
-              "w-full overflow-hidden rounded-full",
-              "bg-[var(--color-progress-track)]",
-              SIZE_CLASSES6[size],
-              trackProps?.className
-            ),
+            className: trackProps?.className,
+            width: "100%",
+            overflow: "hidden",
+            borderRadius: 9999,
+            height: SIZE6[size],
+            backgroundColor: "var(--color-progress-track)",
             style: trackStyle,
             children: /* @__PURE__ */ jsx(
               Progress$1.Indicator,
               {
                 unstyled: true,
                 transition: "slow",
-                className: cn(
-                  "h-full rounded-full",
-                  !color && "bg-[var(--color-progress-indicator)]"
-                ),
+                height: "100%",
+                borderRadius: 9999,
+                backgroundColor: color ? void 0 : "var(--color-progress-indicator)",
                 style: {
                   ...color && { backgroundColor: `var(--color-${color.replace(".", "-")}, ${color})` }
                 }
@@ -4245,11 +4275,11 @@ var Progress = React32.forwardRef(
   }
 );
 var SIZE_MAP = {
-  xs: { size: 24, thickness: 4, textClass: "text-[10px]" },
-  sm: { size: 32, thickness: 5, textClass: "text-[10px]" },
-  md: { size: 40, thickness: 6, textClass: "text-xs" },
-  lg: { size: 48, thickness: 7, textClass: "text-sm" },
-  xl: { size: 64, thickness: 8, textClass: "text-sm" }
+  xs: { size: 24, thickness: 4, fontSize: 10 },
+  sm: { size: 32, thickness: 5, fontSize: 10 },
+  md: { size: 40, thickness: 6, fontSize: 12 },
+  lg: { size: 48, thickness: 7, fontSize: 14 },
+  xl: { size: 64, thickness: 8, fontSize: 14 }
 };
 var Ctx = React32.createContext({
   value: 0,
@@ -4270,16 +4300,18 @@ var ProgressCircleRoot = React32.forwardRef(function ProgressCircleRoot2(props,
     [value, size, colorPalette]
   );
   return /* @__PURE__ */ jsx(Ctx.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
-    "div",
+    View,
     {
       ref,
       role: "progressbar",
       "aria-valuenow": value ?? void 0,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      className: cn("relative inline-flex text-sm", className),
+      position: "relative",
+      style: { display: "inline-flex", fontSize: 14 },
+      className,
       ...rest,
-      children
+      children: ink(children)
     }
   ) });
 });
@@ -4298,10 +4330,7 @@ var ProgressCircleRing = React32.forwardRef(function ProgressCircleRing2(props,
       width: size,
       height: size,
       viewBox: `0 0 ${size} ${size}`,
-      className: cn(
-        value === null && "animate-spin",
-        className
-      ),
+      className: value === null ? cn("lux-spin", className) : className,
       ...rest,
       children: [
         /* @__PURE__ */ jsx(
@@ -4313,7 +4342,7 @@ var ProgressCircleRing = React32.forwardRef(function ProgressCircleRing2(props,
             fill: "transparent",
             strokeWidth: thickness,
             stroke: trackColor ?? "currentColor",
-            className: !trackColor ? "opacity-20" : void 0
+            opacity: !trackColor ? 0.2 : void 0
           }
         ),
         /* @__PURE__ */ jsx(
@@ -4343,49 +4372,42 @@ var ProgressCircleRing = React32.forwardRef(function ProgressCircleRing2(props,
 var ProgressCircleValueText = React32.forwardRef(function ProgressCircleValueText2(props, ref) {
   const { className, children, ...rest } = props;
   const { value, size: sizeKey } = React32.useContext(Ctx);
-  const { textClass } = SIZE_MAP[sizeKey];
+  const { fontSize } = SIZE_MAP[sizeKey];
   return /* @__PURE__ */ jsx(
-    "div",
+    View,
     {
       ref,
       "aria-live": "polite",
-      className: cn(
-        "absolute inset-0 flex items-center justify-center",
-        "font-medium tracking-tight tabular-nums leading-none",
-        textClass,
-        className
-      ),
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      style: {
+        fontWeight: 500,
+        fontSize,
+        lineHeight: `${fontSize}px`,
+        letterSpacing: fontSize * -0.025,
+        fontVariantNumeric: "tabular-nums"
+      },
+      className,
       ...rest,
-      children: children ?? `${Math.round(value ?? 0)}%`
+      children: ink(children ?? `${Math.round(value ?? 0)}%`)
     }
   );
 });
-var SIZE_CLASSES7 = {
-  xs: {
-    root: "gap-1.5",
-    control: "h-3 w-3",
-    indicator: "h-1.5 w-1.5",
-    label: "text-xs"
-  },
-  sm: {
-    root: "gap-1.5",
-    control: "h-3.5 w-3.5",
-    indicator: "h-1.5 w-1.5",
-    label: "text-xs"
-  },
-  md: {
-    root: "gap-2",
-    control: "h-4 w-4",
-    indicator: "h-2 w-2",
-    label: "text-sm"
-  },
-  lg: {
-    root: "gap-2.5",
-    control: "h-5 w-5",
-    indicator: "h-2.5 w-2.5",
-    label: "text-base"
-  }
+var SIZE7 = {
+  xs: { rootGap: 6, control: 12, indicator: 6, label: 12 },
+  sm: { rootGap: 6, control: 14, indicator: 6, label: 12 },
+  md: { rootGap: 8, control: 16, indicator: 8, label: 14 },
+  lg: { rootGap: 10, control: 20, indicator: 10, label: 16 }
 };
+var INK2 = "var(--color-text-primary)";
+var RESTING_BORDER2 = "var(--color-input-border)";
+var OUTLINE2 = "var(--color-gray-500)";
 var RadioSizeContext = React32.createContext("md");
 var RadioGroupBase = React32.forwardRef(
   function RadioGroup$1(props, ref) {
@@ -4402,7 +4424,6 @@ var RadioGroupBase = React32.forwardRef(
       value,
       onValueChange,
       size = "md",
-      className,
       ...rest
     } = props;
     const handleValueChange = React32.useCallback(
@@ -4416,7 +4437,6 @@ var RadioGroupBase = React32.forwardRef(
       RadioGroup,
       {
         ref,
-        unstyled: true,
         name,
         required,
         disabled: disabled || readOnly,
@@ -4424,11 +4444,9 @@ var RadioGroupBase = React32.forwardRef(
         defaultValue,
         value: value ?? void 0,
         onValueChange: handleValueChange,
-        className: cn(
-          "flex",
-          orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-6",
-          className
-        ),
+        display: "flex",
+        flexDirection: orientation === "vertical" ? "column" : "row",
+        gap: orientation === "vertical" ? 12 : 24,
         ...rest,
         children
       }
@@ -4440,19 +4458,20 @@ var NOOP2 = () => {
 };
 var RadioBase = React32.forwardRef(
   function Radio(props, ref) {
-    const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
+    const { children, inputProps, rootRef, value, disabled, ...rest } = props;
     const size = React32.useContext(RadioSizeContext);
-    const sizeClasses2 = SIZE_CLASSES7[size];
+    const s = SIZE7[size];
     return /* @__PURE__ */ jsxs(
-      "label",
+      Label,
       {
         ref: rootRef,
-        className: cn(
-          "inline-flex items-center cursor-pointer select-none",
-          sizeClasses2.root,
-          disabled && "opacity-50 cursor-not-allowed",
-          className
-        ),
+        unstyled: true,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: s.rootGap,
+        cursor: disabled ? "not-allowed" : "pointer",
+        userSelect: "none",
+        opacity: disabled ? 0.5 : 1,
         "data-disabled": disabled || void 0,
         ...rest,
         children: [
@@ -4462,32 +4481,24 @@ var RadioBase = React32.forwardRef(
               unstyled: true,
               value,
               disabled,
-              className: cn(
-                "inline-flex items-center justify-center shrink-0 rounded-full",
-                "border-2 border-current/30",
-                "data-[state=checked]:border-gray-800 dark:border-white",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
-                "transition-colors duration-150",
-                sizeClasses2.control
-              ),
-              children: /* @__PURE__ */ jsx(
-                RadioGroup.Indicator,
-                {
-                  unstyled: true,
-                  className: cn(
-                    "block rounded-full bg-gray-800 dark:bg-white",
-                    sizeClasses2.indicator
-                  )
-                }
-              )
+              flexShrink: 0,
+              alignItems: "center",
+              justifyContent: "center",
+              width: s.control,
+              height: s.control,
+              borderRadius: 9999,
+              borderWidth: 2,
+              borderColor: RESTING_BORDER2,
+              transition: "quicker",
+              focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: OUTLINE2, outlineOffset: 2 },
+              children: /* @__PURE__ */ jsx(RadioGroup.Indicator, { unstyled: true, borderRadius: 9999, width: s.indicator, height: s.indicator, backgroundColor: INK2 })
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
             "input",
             {
               ref,
               type: "radio",
-              className: "sr-only",
               value,
               disabled,
               tabIndex: -1,
@@ -4495,16 +4506,16 @@ var RadioBase = React32.forwardRef(
               onChange: NOOP2,
               ...inputProps
             }
-          ),
-          children != null && /* @__PURE__ */ jsx("span", { className: sizeClasses2.label, children })
+          ) }),
+          children != null && /* @__PURE__ */ jsx(Text, { fontSize: s.label, children })
         ]
       }
     );
   }
 );
 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 StarFilledIcon = () => /* @__PURE__ */ jsx("svg", { width: 20, height: 20, 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 = () => /* @__PURE__ */ jsx("svg", { width: 20, height: 20, 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 = React32.forwardRef(
   function Rating2(props, ref) {
     const { count = 5, label: labelProp, defaultValue = 0, onValueChange, readOnly, className, ...rest } = props;
@@ -4524,28 +4535,30 @@ var Rating = React32.forwardRef(
     const handleMouseLeave = React32.useCallback(() => {
       setHoveredIndex(-1);
     }, []);
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("inline-flex items-center gap-1", className), ...rest, children: [
-      /* @__PURE__ */ jsx("div", { className: "inline-flex items-center", onMouseLeave: handleMouseLeave, children: Array.from({ length: count }).map((_, index) => {
+    return /* @__PURE__ */ jsxs(XStack, { ref, display: "inline-flex", alignItems: "center", gap: 4, className, ...rest, children: [
+      /* @__PURE__ */ jsx(XStack, { display: "inline-flex", alignItems: "center", onMouseLeave: handleMouseLeave, children: Array.from({ length: count }).map((_, index) => {
         const filled = index < highlightedIndex;
         const starIndex = index + 1;
         return /* @__PURE__ */ jsx(
-          "button",
+          View,
           {
-            type: "button",
+            render: /* @__PURE__ */ jsx("button", { type: "button" }),
             tabIndex: readOnly ? -1 : 0,
             "aria-label": `Rate ${starIndex} of ${count}`,
-            className: cn(
-              "inline-flex items-center justify-center w-5 h-5 text-current",
-              readOnly ? "cursor-default" : "cursor-pointer"
-            ),
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 20,
+            height: 20,
+            cursor: readOnly ? "default" : "pointer",
             onClick: handleClick(starIndex),
             onMouseEnter: handleMouseEnter(index),
-            children: filled ? /* @__PURE__ */ jsx(StarFilledIcon, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(StarOutlineIcon, { className: "w-5 h-5" })
+            children: filled ? /* @__PURE__ */ jsx(StarFilledIcon, {}) : /* @__PURE__ */ jsx(StarOutlineIcon, {})
           },
           index
         );
       }) }),
-      label && /* @__PURE__ */ jsx("span", { className: "text-sm", children: label })
+      label && /* @__PURE__ */ jsx(Text, { fontSize: 14, children: label })
     ] });
   }
 );
@@ -4981,6 +4994,11 @@ var Separator = React32__default.forwardRef(
     );
   }
 );
+var MUTED3 = "var(--color-text-secondary)";
+var TRACK = "var(--color-border-divider)";
+var ACTIVE = "var(--color-link-primary)";
+var ACTIVE_HOVER = "var(--color-link-primary-hover)";
+var WHITE = "var(--color-white)";
 var Slider = React32.forwardRef(
   function Slider2(props, ref) {
     const {
@@ -5013,21 +5031,22 @@ var Slider = React32.forwardRef(
     const handleSlideEnd = React32.useCallback(() => {
       onValueCommit?.(latest.current);
     }, [onValueCommit]);
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
-      label && !showValue && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
-      label && showValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary", children: (value ?? defaultValue ?? [])?.join(", ") })
+    return /* @__PURE__ */ jsxs(YStack, { className, gap: 4, children: [
+      label && !showValue && /* @__PURE__ */ jsx(Text, { fontSize: 14, fontWeight: "500", color: MUTED3, children: label }),
+      label && showValue && /* @__PURE__ */ jsxs(XStack, { alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: 14, fontWeight: "500", color: MUTED3, children: label }),
+        /* @__PURE__ */ jsx(Text, { fontSize: 14, color: MUTED3, children: (value ?? defaultValue ?? [])?.join(", ") })
       ] }),
       /* @__PURE__ */ jsxs(
         Slider$1,
         {
           ref,
-          unstyled: true,
-          className: cn(
-            "relative flex w-full touch-none select-none items-center",
-            hasMarkLabel && "mb-6"
-          ),
+          position: "relative",
+          flexDirection: "row",
+          width: "100%",
+          userSelect: "none",
+          alignItems: "center",
+          marginBottom: hasMarkLabel ? 24 : 0,
           value,
           defaultValue,
           min,
@@ -5039,33 +5058,23 @@ var Slider = React32.forwardRef(
           onValueChange: handleValueChange,
           onSlideEnd: handleSlideEnd,
           children: [
-            /* @__PURE__ */ jsx(
-              Slider$1.Track,
-              {
-                unstyled: true,
-                className: "relative grow h-1.5 rounded-full bg-border-divider",
-                children: /* @__PURE__ */ jsx(
-                  Slider$1.TrackActive,
-                  {
-                    unstyled: true,
-                    className: "absolute h-full rounded-full bg-link-primary"
-                  }
-                )
-              }
-            ),
+            /* @__PURE__ */ jsx(Slider$1.Track, { unstyled: true, position: "relative", flexGrow: 1, height: 6, borderRadius: 9999, backgroundColor: TRACK, children: /* @__PURE__ */ jsx(Slider$1.TrackActive, { unstyled: true, position: "absolute", height: "100%", borderRadius: 9999, backgroundColor: ACTIVE }) }),
             resolvedValue?.map((_, index) => /* @__PURE__ */ jsx(
               Slider$1.Thumb,
               {
                 index,
                 unstyled: true,
-                className: cn(
-                  "block h-5 w-5",
-                  "rounded-full border-2 border-link-primary bg-white",
-                  "shadow-sm transition-colors",
-                  "hover:border-link-primary-hover",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-link-primary focus-visible:ring-offset-2",
-                  "disabled:pointer-events-none disabled:opacity-50"
-                )
+                width: 20,
+                height: 20,
+                borderRadius: 9999,
+                borderWidth: 2,
+                borderColor: ACTIVE,
+                backgroundColor: WHITE,
+                boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+                transition: "quick",
+                hoverStyle: { borderColor: ACTIVE_HOVER },
+                focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: ACTIVE, outlineOffset: 2 },
+                disabledStyle: { pointerEvents: "none", opacity: 0.5 }
               },
               index
             ))
@@ -5080,41 +5089,25 @@ function SliderMarks(props) {
   const { marks, min, max } = props;
   if (!marks?.length) return null;
   const range = max - min;
-  return /* @__PURE__ */ jsx("div", { className: "relative w-full h-4", children: marks.map((mark, index) => {
+  return /* @__PURE__ */ jsx(View, { position: "relative", width: "100%", height: 16, children: marks.map((mark, index) => {
     const percent = (mark.value - min) / range * 100;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "absolute flex flex-col items-center -translate-x-1/2",
-        style: { left: `${percent}%` },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "h-1.5 w-0.5 bg-border-divider" }),
-          mark.label != null && /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-xs text-text-secondary whitespace-nowrap", children: mark.label })
-        ]
-      },
-      index
-    );
+    return /* @__PURE__ */ jsxs(View, { position: "absolute", left: `${percent}%`, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(View, { width: 2, height: 6, backgroundColor: TRACK }),
+      mark.label != null && /* @__PURE__ */ jsx(Text, { marginTop: 2, fontSize: 12, color: MUTED3, children: mark.label })
+    ] }, index);
   }) });
 }
 var NOOP3 = () => {
 };
-var SIZE_CLASSES8 = {
-  sm: {
-    root: "h-4 w-7",
-    thumb: "h-3 w-3",
-    label: "text-xs"
-  },
-  md: {
-    root: "h-5 w-9",
-    thumb: "h-4 w-4",
-    label: "text-sm"
-  },
-  lg: {
-    root: "h-6 w-11",
-    thumb: "h-5 w-5",
-    label: "text-base"
-  }
+var SIZE8 = {
+  sm: { width: 28, height: 16, thumb: 12, label: 12 },
+  md: { width: 36, height: 20, thumb: 16, label: 14 },
+  lg: { width: 44, height: 24, thumb: 20, label: 16 }
 };
+var TRACK_ON = "var(--color-text-primary)";
+var TRACK_OFF = "var(--color-switch-bg)";
+var OUTLINE3 = "var(--color-gray-500)";
+var WHITE2 = "var(--color-white)";
 var SwitchBase = React32.forwardRef(
   function Switch$1(props, ref) {
     const {
@@ -5131,7 +5124,6 @@ var SwitchBase = React32.forwardRef(
       disabled = false,
       size = "md",
       direction,
-      className,
       ...rest
     } = props;
     const [internalChecked, setInternalChecked] = React32.useState(defaultChecked ?? false);
@@ -5146,18 +5138,19 @@ var SwitchBase = React32.forwardRef(
       },
       [isControlled, onCheckedChange]
     );
-    const sizeClasses2 = SIZE_CLASSES8[size];
+    const s = SIZE8[size];
     const isRtl = direction === "rtl";
     return /* @__PURE__ */ jsxs(
-      "label",
+      Label,
       {
         ref: rootRef,
-        className: cn(
-          "inline-flex items-center cursor-pointer select-none gap-2",
-          isRtl && "flex-row-reverse",
-          disabled && "opacity-50 cursor-not-allowed",
-          className
-        ),
+        unstyled: true,
+        flexDirection: isRtl ? "row-reverse" : "row",
+        alignItems: "center",
+        gap: 8,
+        cursor: disabled ? "not-allowed" : "pointer",
+        userSelect: "none",
+        opacity: disabled ? 0.5 : 1,
         onChange,
         "data-disabled": disabled || void 0,
         ...rest,
@@ -5169,38 +5162,51 @@ var SwitchBase = React32.forwardRef(
               checked: checkedState,
               onCheckedChange: handleCheckedChange,
               disabled,
-              className: cn(
-                "relative inline-flex shrink-0 items-center rounded-full",
-                "bg-gray-300 dark:bg-gray-600",
-                "data-[state=checked]:bg-gray-800 dark:bg-white",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
-                "transition-colors duration-200",
-                sizeClasses2.root
-              ),
+              position: "relative",
+              flexShrink: 0,
+              alignItems: "center",
+              width: s.width,
+              height: s.height,
+              borderRadius: 9999,
+              backgroundColor: checkedState ? TRACK_ON : TRACK_OFF,
+              transition: "quick",
+              focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: OUTLINE3, outlineOffset: 2 },
               children: [
-                trackLabel && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-bold text-white pointer-events-none", children: checkedState ? trackLabel.on : trackLabel.off }),
+                trackLabel && /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    position: "absolute",
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 8,
+                    fontWeight: "700",
+                    color: WHITE2,
+                    pointerEvents: "none",
+                    children: checkedState ? trackLabel.on : trackLabel.off
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   Switch.Thumb,
                   {
                     unstyled: true,
                     "data-thumb": true,
                     transition: "quicker",
-                    className: cn(
-                      "block rounded-full bg-white shadow-sm",
-                      sizeClasses2.thumb
-                    ),
-                    children: thumbLabel && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center h-full w-full text-[8px]", children: checkedState ? thumbLabel.on : thumbLabel.off })
+                    width: s.thumb,
+                    height: s.thumb,
+                    borderRadius: 9999,
+                    backgroundColor: WHITE2,
+                    boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+                    children: thumbLabel && /* @__PURE__ */ jsx(Text, { width: "100%", height: "100%", textAlign: "center", fontSize: 8, children: checkedState ? thumbLabel.on : thumbLabel.off })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
             "input",
             {
               ref,
               type: "checkbox",
-              className: "sr-only",
               checked: checkedState,
               disabled,
               tabIndex: -1,
@@ -5208,15 +5214,8 @@ var SwitchBase = React32.forwardRef(
               onChange: NOOP3,
               ...inputProps
             }
-          ),
-          children != null && /* @__PURE__ */ jsx(
-            "span",
-            {
-              ...labelProps,
-              className: cn(sizeClasses2.label, labelProps?.className),
-              children
-            }
-          )
+          ) }),
+          children != null && /* @__PURE__ */ jsx(Text, { ...labelProps, fontSize: s.label, children })
         ]
       }
     );
@@ -5634,14 +5633,14 @@ var Shape = React32.createContext({
   size: "md",
   fitted: false
 });
-var SIZE2 = {
+var SIZE9 = {
   sm: { height: 32, minWidth: 32, paddingVertical: 4, paddingHorizontal: 12, fontSize: 14 },
   md: { height: 40, minWidth: 40, paddingVertical: 8, paddingHorizontal: 16, fontSize: 16 },
   free: {}
 };
 var SELECTED_BG2 = "var(--color-selected-control-bg)";
 var SELECTED_FG2 = "var(--color-selected-control-text)";
-var VARIANT3 = {
+var VARIANT4 = {
   solid: {
     rest: {
       fontWeight: "600",
@@ -5710,7 +5709,7 @@ var TabsList = (props) => {
 };
 var TabsTrigger = ({ children, ...props }) => {
   const { variant, size, fitted } = React32.useContext(Shape);
-  const { rest, active } = VARIANT3[variant];
+  const { rest, active } = VARIANT4[variant];
   const selected = useTabsContext().value === props.value;
   return /* @__PURE__ */ jsx(
     Tabs.Tab,
@@ -5723,7 +5722,7 @@ var TabsTrigger = ({ children, ...props }) => {
       cursor: "pointer",
       gap: 8,
       borderWidth: 0,
-      ...SIZE2[size],
+      ...SIZE9[size],
       ...rest,
       ...selected ? active : null,
       ...fitted ? { flex: 1 } : null,
@@ -5742,25 +5741,24 @@ var nbsp = String.fromCharCode(160);
 function TruncatedTextTooltip2({ label, children }) {
   return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
-var TAG_BASE = "inline-flex items-center align-top max-w-full select-text rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500";
-var TAG_VARIANT_CLASSES = {
-  subtle: "bg-[var(--color-tag-subtle-bg)] text-[var(--color-tag-subtle-fg)]",
-  clickable: "cursor-pointer bg-[var(--color-tag-clickable-bg)] text-[var(--color-tag-clickable-fg)] hover:opacity-76",
-  filter: "bg-[var(--color-tag-filter-bg)]",
-  select: "cursor-pointer bg-[var(--color-tag-select-bg)] text-[var(--color-tag-select-fg)] hover:text-[var(--color-hover)] hover:opacity-76"
+var TAG_VARIANT = {
+  subtle: { backgroundColor: "var(--color-tag-subtle-bg)" },
+  clickable: { backgroundColor: "var(--color-tag-clickable-bg)", cursor: "pointer", hoverStyle: { opacity: 0.76 } },
+  filter: { backgroundColor: "var(--color-tag-filter-bg)" },
+  select: { backgroundColor: "var(--color-tag-select-bg)", cursor: "pointer", hoverStyle: { opacity: 0.76 } }
+};
+var TAG_VARIANT_FG = {
+  subtle: "var(--color-tag-subtle-fg)",
+  clickable: "var(--color-tag-clickable-fg)",
+  filter: void 0,
+  select: "var(--color-tag-select-fg)"
 };
-var TAG_SIZE_CLASSES = {
-  sm: "px-1 py-0.5 min-h-5 gap-1 text-xs",
-  md: "px-1 py-0.5 min-h-6 gap-1 text-sm",
-  lg: "px-1.5 py-1.5 min-h-8 min-w-8 gap-1 text-sm"
+var TAG_SIZE = {
+  sm: { paddingHorizontal: 4, paddingVertical: 2, minHeight: 20, gap: 4 },
+  md: { paddingHorizontal: 4, paddingVertical: 2, minHeight: 24, gap: 4 },
+  lg: { paddingHorizontal: 6, paddingVertical: 6, minHeight: 32, minWidth: 32, gap: 4 }
 };
-var TAG_SELECTED_CLASSES = [
-  "bg-[var(--color-tag-select-selected-bg)]",
-  "text-[var(--color-tag-select-selected-fg)]",
-  "hover:text-[var(--color-tag-select-selected-fg)]",
-  "hover:opacity-76"
-].join(" ");
-var TAG_DISABLED_CLASSES = "opacity-40 pointer-events-none cursor-not-allowed";
+var TAG_SIZE_FONT = { sm: 12, md: 14, lg: 14 };
 var Tag = React32.forwardRef(
   function Tag2(props, ref) {
     const {
@@ -5780,52 +5778,87 @@ var Tag = React32.forwardRef(
       className,
       ...rest
     } = props;
-    const labelElement = label ? /* @__PURE__ */ jsxs("span", { className: "text-[var(--color-text-secondary)]", children: [
+    const resolvedVariant = variant ?? "subtle";
+    const resolvedSize = size ?? "md";
+    const isSelected = Boolean(selected) && !loading;
+    const backgroundColor = isSelected ? "var(--color-tag-select-selected-bg)" : TAG_VARIANT[resolvedVariant].backgroundColor;
+    const color = isSelected ? "var(--color-tag-select-selected-fg)" : TAG_VARIANT_FG[resolvedVariant];
+    const hoverStyle = isSelected ? { opacity: 0.76 } : TAG_VARIANT[resolvedVariant].hoverStyle;
+    const textHoverColor = !isSelected && resolvedVariant === "select" ? "var(--color-hover)" : void 0;
+    const labelElement = label ? /* @__PURE__ */ jsxs(Text, { fontSize: TAG_SIZE_FONT[resolvedSize], fontWeight: "500", color: "var(--color-text-secondary)", children: [
       label,
       ":",
       nbsp
     ] }) : null;
-    const labelSpan = /* @__PURE__ */ jsxs("span", { className: "line-clamp-1 whitespace-nowrap text-ellipsis font-medium inline", children: [
-      labelElement,
-      children
-    ] });
+    const labelSpan = (
+      // `ellipsis` is Text's own built-in single-line-truncation variant —
+      // the same rule Tailwind's `line-clamp-1`/`text-ellipsis` drew, through
+      // the component's variants rather than three separate style props.
+      /* @__PURE__ */ jsxs(
+        Text,
+        {
+          ellipsis: true,
+          fontWeight: "500",
+          fontSize: TAG_SIZE_FONT[resolvedSize],
+          color,
+          hoverStyle: textHoverColor ? { color: textHoverColor } : void 0,
+          children: [
+            labelElement,
+            children
+          ]
+        }
+      )
+    );
     const contentElement = truncated ? /* @__PURE__ */ jsx(TruncatedTextTooltip2, { label: children, children: labelSpan }) : labelSpan;
     return /* @__PURE__ */ jsx(Skeleton, { loading, asChild: true, children: /* @__PURE__ */ jsxs(
-      "span",
+      XStack,
       {
         ref,
-        className: cn(
-          TAG_BASE,
-          TAG_VARIANT_CLASSES[variant ?? "subtle"],
-          TAG_SIZE_CLASSES[size ?? "md"],
-          selected && !loading && TAG_SELECTED_CLASSES,
-          disabled && TAG_DISABLED_CLASSES,
-          className
-        ),
-        ...selected && !loading && { "data-selected": true },
+        render: /* @__PURE__ */ jsx("span", {}),
+        display: "inline-flex",
+        alignItems: "center",
+        verticalAlign: "top",
+        maxWidth: "100%",
+        userSelect: "text",
+        ...TAG_SIZE[resolvedSize],
+        backgroundColor,
+        hoverStyle,
+        focusVisibleStyle: {
+          outlineWidth: 2,
+          outlineOffset: 2,
+          outlineColor: "var(--color-gray-500)",
+          outlineStyle: "solid"
+        },
+        cursor: disabled ? "not-allowed" : TAG_VARIANT[resolvedVariant].cursor,
+        ...disabled ? { opacity: 0.4, pointerEvents: "none" } : {},
+        ...isSelected && { "data-selected": true },
         ...disabled && { "data-disabled": true },
+        className,
         ...rest,
         children: [
-          startElement && /* @__PURE__ */ jsx("span", { className: "shrink-0 inline-flex items-center justify-center empty:hidden", children: startElement }),
+          startElement && /* @__PURE__ */ jsx(XStack, { flexShrink: 0, alignItems: "center", justifyContent: "center", children: startElement }),
           contentElement,
-          endElement && /* @__PURE__ */ jsx(
-            "span",
-            {
-              ...endElementProps,
-              className: cn(
-                "shrink-0 inline-flex items-center justify-center",
-                endElementProps?.className
-              ),
-              children: endElement
-            }
-          ),
-          closable && /* @__PURE__ */ jsx("span", { className: "shrink-0 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx(CloseButton, { onClick: onClose }) })
+          endElement && (() => {
+            const { className: endClassName, ...endElementRest } = endElementProps ?? {};
+            return /* @__PURE__ */ jsx(
+              XStack,
+              {
+                ...endElementRest,
+                flexShrink: 0,
+                alignItems: "center",
+                justifyContent: "center",
+                className: endClassName,
+                children: endElement
+              }
+            );
+          })(),
+          closable && /* @__PURE__ */ jsx(XStack, { flexShrink: 0, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx(CloseButton, { onClick: onClose }) })
         ]
       }
     ) });
   }
 );
-var SIZE3 = {
+var SIZE10 = {
   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 },
@@ -5848,8 +5881,8 @@ var Textarea = React32__default.forwardRef(
         unstyled: true,
         className: className ? `lux-control ${className}` : "lux-control",
         ...CONTROL,
-        ...SIZE3[size],
-        ...VARIANT2[variant],
+        ...SIZE10[size],
+        ...VARIANT3[variant],
         ...rest,
         onChange: handleChange
       }
@@ -5958,20 +5991,55 @@ function fmtPct(n) {
   if (n === void 0 || n === null) return "-";
   return `${(n * 100).toFixed(1)}%`;
 }
+var justify = (align) => align === "right" ? "flex-end" : align === "left" ? "flex-start" : "center";
 function QuoteCell({ value, highlight, align = "right", onClick, className }) {
   return /* @__PURE__ */ jsx(
-    "td",
+    View,
     {
-      className: cn(
-        "px-1.5 py-1 font-mono tabular-nums text-xs whitespace-nowrap",
-        align === "right" ? "text-right" : "text-left",
-        highlight && "text-zinc-100",
-        !highlight && "text-zinc-400",
-        onClick && "cursor-pointer hover:bg-zinc-700/50 transition-colors",
-        className
-      ),
+      unstyled: true,
+      render: /* @__PURE__ */ jsx("td", {}),
       onClick,
-      children: value
+      paddingHorizontal: 6,
+      paddingVertical: 4,
+      cursor: onClick ? "pointer" : void 0,
+      transition: "quick",
+      hoverStyle: onClick ? { backgroundColor: "var(--color-popover-item-hover)" } : void 0,
+      style: { display: "flex", alignItems: "center", justifyContent: justify(align) },
+      className,
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          fontSize: 12,
+          style: { fontFamily: "monospace", whiteSpace: "nowrap" },
+          fontVariant: ["tabular-nums"],
+          color: highlight ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+          children: value
+        }
+      )
+    }
+  );
+}
+function HeadCell({ children, colSpan, align = "center", size = "column", color }) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      unstyled: true,
+      render: colSpan ? /* @__PURE__ */ jsx("th", { colSpan }) : /* @__PURE__ */ jsx("th", {}),
+      paddingHorizontal: size === "group" ? 8 : 6,
+      paddingVertical: size === "group" ? 6 : 4,
+      style: { display: "flex", alignItems: "center", justifyContent: justify(align) },
+      children: children != null && /* @__PURE__ */ jsx(
+        Text,
+        {
+          fontSize: 10,
+          fontWeight: size === "group" ? "600" : "500",
+          textTransform: "uppercase",
+          letterSpacing: 0.5,
+          style: { whiteSpace: "nowrap" },
+          color: color ?? "var(--color-text-secondary)",
+          children
+        }
+      )
     }
   );
 }
@@ -6002,71 +6070,51 @@ var OptionChain = React32.forwardRef(
       [onSelectContract]
     );
     return /* @__PURE__ */ jsx(
-      "div",
+      View,
       {
         ref,
-        className: cn("w-full overflow-x-auto", className),
+        unstyled: true,
+        width: "100%",
+        overflowX: "auto",
+        className,
         ...rest,
-        children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-xs", children: [
-          /* @__PURE__ */ jsxs("thead", { children: [
-            /* @__PURE__ */ jsxs("tr", { className: "border-b border-zinc-800", children: [
-              /* @__PURE__ */ jsx(
-                "th",
-                {
-                  colSpan: CALL_HEADERS.length,
-                  className: "px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-emerald-400",
-                  children: "Calls"
-                }
-              ),
-              /* @__PURE__ */ jsx("th", { className: "px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-zinc-500", children: "Strike" }),
-              /* @__PURE__ */ jsx(
-                "th",
-                {
-                  colSpan: PUT_HEADERS.length,
-                  className: "px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-red-400",
-                  children: "Puts"
-                }
-              )
+        children: /* @__PURE__ */ jsxs(View, { unstyled: true, render: /* @__PURE__ */ jsx("table", {}), width: "100%", style: { borderCollapse: "collapse" }, children: [
+          /* @__PURE__ */ jsxs(View, { unstyled: true, render: /* @__PURE__ */ jsx("thead", {}), children: [
+            /* @__PURE__ */ jsxs(View, { unstyled: true, render: /* @__PURE__ */ jsx("tr", {}), borderBottomWidth: 1, borderColor: "var(--color-border-divider)", children: [
+              /* @__PURE__ */ jsx(HeadCell, { colSpan: CALL_HEADERS.length, size: "group", color: "var(--color-status-good)", children: "Calls" }),
+              /* @__PURE__ */ jsx(HeadCell, { size: "group", children: "Strike" }),
+              /* @__PURE__ */ jsx(HeadCell, { colSpan: PUT_HEADERS.length, size: "group", color: "var(--color-status-bad)", children: "Puts" })
             ] }),
-            /* @__PURE__ */ jsxs("tr", { className: "border-b border-zinc-800/60", children: [
-              CALL_HEADERS.map((h) => /* @__PURE__ */ jsx(
-                "th",
-                {
-                  className: "px-1.5 py-1 text-right text-[10px] font-medium uppercase tracking-wider text-zinc-500",
-                  children: h
-                },
-                `call-${h}`
-              )),
-              /* @__PURE__ */ jsx("th", { className: "px-2 py-1 text-center text-[10px] font-medium uppercase tracking-wider text-zinc-500" }),
+            /* @__PURE__ */ jsxs(View, { unstyled: true, render: /* @__PURE__ */ jsx("tr", {}), borderBottomWidth: 1, borderColor: "var(--color-popover-item-hover)", children: [
+              CALL_HEADERS.map((h) => /* @__PURE__ */ jsx(HeadCell, { align: "right", children: h }, `call-${h}`)),
+              /* @__PURE__ */ jsx(HeadCell, {}),
               PUT_HEADERS.map((h) => /* @__PURE__ */ jsx(
-                "th",
+                HeadCell,
                 {
-                  className: cn(
-                    "px-1.5 py-1 text-[10px] font-medium uppercase tracking-wider text-zinc-500",
-                    h === "Bid" || h === "Ask" || h === "Last" ? "text-left" : "text-right"
-                  ),
+                  align: h === "Bid" || h === "Ask" || h === "Last" ? "left" : "right",
                   children: h
                 },
                 `put-${h}`
               ))
             ] })
           ] }),
-          /* @__PURE__ */ jsx("tbody", { children: strikes.map((row) => {
+          /* @__PURE__ */ jsx(View, { unstyled: true, render: /* @__PURE__ */ jsx("tbody", {}), children: strikes.map((row) => {
             const isATM = Math.abs(row.strike - spotPrice) <= (strikes.length > 1 ? Math.abs((strikes[1]?.strike ?? 0) - (strikes[0]?.strike ?? 0)) / 2 : 0.5);
             const callITM = row.strike < spotPrice;
             const putITM = row.strike > spotPrice;
             const c = row.call;
             const p = row.put;
+            const rowBg = isATM ? "var(--secondary)" : callITM ? "color-mix(in srgb, var(--color-status-good) 12%, transparent)" : putITM ? "color-mix(in srgb, var(--color-status-bad) 12%, transparent)" : "transparent";
             return /* @__PURE__ */ jsxs(
-              "tr",
+              View,
               {
-                className: cn(
-                  "border-b border-zinc-800/30 transition-colors",
-                  isATM && "bg-zinc-800/60",
-                  !isATM && callITM && "bg-emerald-950/20",
-                  !isATM && putITM && "bg-red-950/20",
-                  !isATM && !callITM && !putITM && "hover:bg-zinc-800/30"
-                ),
+                unstyled: true,
+                render: /* @__PURE__ */ jsx("tr", {}),
+                borderBottomWidth: 1,
+                borderColor: "color-mix(in srgb, var(--color-border-divider) 50%, transparent)",
+                transition: "quick",
+                backgroundColor: rowBg,
+                hoverStyle: isATM || callITM || putITM ? void 0 : { backgroundColor: "var(--color-popover-item-hover)" },
                 children: [
                   /* @__PURE__ */ jsx(
                     QuoteCell,
@@ -6090,13 +6138,24 @@ var OptionChain = React32.forwardRef(
                   /* @__PURE__ */ jsx(QuoteCell, { value: fmtPct(c?.iv) }),
                   /* @__PURE__ */ jsx(QuoteCell, { value: fmt(c?.delta, 3) }),
                   /* @__PURE__ */ jsx(
-                    "td",
+                    View,
                     {
-                      className: cn(
-                        "px-2 py-1 text-center font-mono tabular-nums text-xs font-semibold",
-                        isATM ? "text-[var(--foreground)] bg-[var(--secondary)]" : "text-[var(--muted-foreground)]"
-                      ),
-                      children: fmt(row.strike)
+                      unstyled: true,
+                      render: /* @__PURE__ */ jsx("td", {}),
+                      paddingHorizontal: 8,
+                      paddingVertical: 4,
+                      style: { display: "flex", alignItems: "center", justifyContent: "center" },
+                      children: /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          fontSize: 12,
+                          fontWeight: "600",
+                          style: { fontFamily: "monospace" },
+                          fontVariant: ["tabular-nums"],
+                          color: isATM ? "var(--foreground)" : "var(--muted-foreground)",
+                          children: fmt(row.strike)
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ jsx(QuoteCell, { value: fmt(p?.delta, 3), align: "right" }),
@@ -6133,40 +6192,54 @@ var OptionChain = React32.forwardRef(
   }
 );
 var GREEKS = [
-  { key: "delta", label: "Delta", symbol: "\u0394", color: "text-[var(--foreground)]", barColor: "bg-[var(--foreground)]", decimals: 4, maxMagnitude: 1 },
-  { key: "gamma", label: "Gamma", symbol: "\u0393", color: "text-[var(--chart-1)]", barColor: "bg-[var(--chart-1)]", decimals: 4, maxMagnitude: 0.1 },
-  { key: "theta", label: "Theta", symbol: "\u0398", color: "text-[var(--chart-4)]", barColor: "bg-[var(--chart-4)]", decimals: 4, maxMagnitude: 1 },
-  { key: "vega", label: "Vega", symbol: "\u03BD", color: "text-[var(--chart-2)]", barColor: "bg-[var(--chart-2)]", decimals: 4, maxMagnitude: 1 },
-  { key: "rho", label: "Rho", symbol: "\u03C1", color: "text-[var(--chart-3)]", barColor: "bg-[var(--chart-3)]", decimals: 4, maxMagnitude: 1 },
-  { key: "iv", label: "IV", symbol: "\u03C3", color: "text-[var(--chart-5)]", barColor: "bg-[var(--chart-5)]", decimals: 1, maxMagnitude: 100 }
+  { key: "delta", label: "Delta", symbol: "\u0394", color: "var(--foreground)", barColor: "var(--foreground)", decimals: 4, maxMagnitude: 1 },
+  { key: "gamma", label: "Gamma", symbol: "\u0393", color: "var(--chart-1)", barColor: "var(--chart-1)", decimals: 4, maxMagnitude: 0.1 },
+  { key: "theta", label: "Theta", symbol: "\u0398", color: "var(--chart-4)", barColor: "var(--chart-4)", decimals: 4, maxMagnitude: 1 },
+  { key: "vega", label: "Vega", symbol: "\u03BD", color: "var(--chart-2)", barColor: "var(--chart-2)", decimals: 4, maxMagnitude: 1 },
+  { key: "rho", label: "Rho", symbol: "\u03C1", color: "var(--chart-3)", barColor: "var(--chart-3)", decimals: 4, maxMagnitude: 1 },
+  { key: "iv", label: "IV", symbol: "\u03C3", color: "var(--chart-5)", barColor: "var(--chart-5)", decimals: 1, maxMagnitude: 100 }
 ];
 function GreekItem({ def, value, compact }) {
   const magnitude = Math.min(Math.abs(value) / def.maxMagnitude, 1);
   const displayValue = def.key === "iv" ? `${(value * 100).toFixed(def.decimals)}%` : value.toFixed(def.decimals);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center gap-1.5",
-        compact ? "min-w-0" : "min-w-[100px]"
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: cn("text-[10px] font-semibold shrink-0", def.color), children: def.symbol }),
-        !compact && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-zinc-500 shrink-0 w-[34px]", children: def.label }),
-        /* @__PURE__ */ jsx("span", { className: cn(
-          "font-mono tabular-nums text-xs text-zinc-200 shrink-0",
-          value < 0 && "text-red-400"
-        ), children: displayValue }),
-        !compact && /* @__PURE__ */ jsx("div", { className: "flex-1 h-1 rounded-full bg-zinc-800 min-w-[24px] max-w-[48px] overflow-hidden", children: /* @__PURE__ */ jsx(
-          "div",
+  return /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 6, minWidth: compact ? 0 : 100, children: [
+    /* @__PURE__ */ jsx(Text, { fontSize: 10, fontWeight: "600", flexShrink: 0, color: def.color, children: def.symbol }),
+    !compact && /* @__PURE__ */ jsx(Text, { fontSize: 10, flexShrink: 0, width: 34, color: "var(--color-text-secondary)", children: def.label }),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        fontSize: 12,
+        flexShrink: 0,
+        style: { fontFamily: "monospace" },
+        fontVariant: ["tabular-nums"],
+        color: value < 0 ? "var(--color-status-bad)" : "var(--color-text-primary)",
+        children: displayValue
+      }
+    ),
+    !compact && /* @__PURE__ */ jsx(
+      View,
+      {
+        flex: 1,
+        height: 4,
+        borderRadius: 9999,
+        minWidth: 24,
+        maxWidth: 48,
+        overflow: "hidden",
+        backgroundColor: "var(--color-progress-track)",
+        children: /* @__PURE__ */ jsx(
+          View,
           {
-            className: cn("h-full rounded-full transition-all", def.barColor),
-            style: { width: `${magnitude * 100}%`, opacity: 0.7 }
+            height: "100%",
+            borderRadius: 9999,
+            transition: "quick",
+            width: `${magnitude * 100}%`,
+            opacity: 0.7,
+            backgroundColor: def.barColor
           }
-        ) })
-      ]
-    }
-  );
+        )
+      }
+    )
+  ] });
 }
 var GreeksDisplay = React32.forwardRef(
   function GreeksDisplay2(props, ref) {
@@ -6191,14 +6264,13 @@ var GreeksDisplay = React32.forwardRef(
     };
     const activeGreeks = GREEKS.filter((g) => values[g.key] !== void 0);
     return /* @__PURE__ */ jsx(
-      "div",
+      XStack,
       {
         ref,
-        className: cn(
-          "flex flex-wrap items-center",
-          compact ? "gap-3" : "gap-4",
-          className
-        ),
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: compact ? 12 : 16,
+        className,
         ...rest,
         children: activeGreeks.map((g) => /* @__PURE__ */ jsx(
           GreekItem,
@@ -6321,84 +6393,145 @@ var STRATEGY_PRESETS = [
     ]
   }
 ];
+var MONO = "monospace";
+var CONTROL_BOX = {
+  backgroundColor: "var(--color-input-bg)",
+  borderWidth: 1,
+  borderColor: "var(--color-input-border)",
+  outlineWidth: 0,
+  focusStyle: { borderColor: "var(--color-input-border-focus)" }
+};
+var CONTROL_INK = { color: "var(--color-input-fg)" };
 function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemove }) {
   const update2 = (patch) => {
     onChange(index, { ...leg, ...patch });
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md bg-zinc-800/50 px-2 py-1.5", children: [
-    /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-zinc-500 w-4 shrink-0", children: index + 1 }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "px-2 py-0.5 rounded text-xs font-semibold transition-colors",
-          leg.action === "buy" ? "bg-emerald-900/60 text-emerald-400" : "bg-red-900/60 text-red-400"
+  return /* @__PURE__ */ jsxs(
+    XStack,
+    {
+      alignItems: "center",
+      gap: 8,
+      borderRadius: 6,
+      backgroundColor: "var(--color-tag-subtle-bg)",
+      paddingHorizontal: 8,
+      paddingVertical: 6,
+      children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: 10, style: { fontFamily: MONO }, flexShrink: 0, width: 16, color: "var(--color-text-secondary)", children: index + 1 }),
+        /* @__PURE__ */ jsx(
+          XStack,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("button", { type: "button" }),
+            onClick: () => update2({ action: leg.action === "buy" ? "sell" : "buy" }),
+            paddingHorizontal: 8,
+            paddingVertical: 2,
+            borderRadius: 4,
+            borderWidth: 0,
+            cursor: "pointer",
+            transition: "quick",
+            backgroundColor: leg.action === "buy" ? "color-mix(in srgb, var(--color-status-good) 20%, transparent)" : "color-mix(in srgb, var(--color-status-bad) 20%, transparent)",
+            children: /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", color: leg.action === "buy" ? "var(--color-status-good)" : "var(--color-status-bad)", children: leg.action === "buy" ? "BUY" : "SELL" })
+          }
         ),
-        onClick: () => update2({ action: leg.action === "buy" ? "sell" : "buy" }),
-        children: leg.action === "buy" ? "BUY" : "SELL"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "px-2 py-0.5 rounded text-xs font-medium transition-colors",
-          // Call vs put is a rank difference, not a hue difference.
-          leg.type === "call" ? "bg-[var(--secondary)] text-[var(--foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"
+        /* @__PURE__ */ jsx(
+          XStack,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("button", { type: "button" }),
+            onClick: () => update2({ type: leg.type === "call" ? "put" : "call" }),
+            paddingHorizontal: 8,
+            paddingVertical: 2,
+            borderRadius: 4,
+            borderWidth: 0,
+            cursor: "pointer",
+            transition: "quick",
+            backgroundColor: leg.type === "call" ? "var(--secondary)" : "var(--muted)",
+            children: /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "500", color: leg.type === "call" ? "var(--foreground)" : "var(--muted-foreground)", children: leg.type === "call" ? "CALL" : "PUT" })
+          }
         ),
-        onClick: () => update2({ type: leg.type === "call" ? "put" : "call" }),
-        children: leg.type === "call" ? "CALL" : "PUT"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "select",
-      {
-        value: leg.strike,
-        onChange: (e) => update2({ strike: Number(e.target.value) }),
-        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs font-mono text-zinc-200 outline-none focus:border-zinc-500 min-w-[72px]",
-        children: strikes.map((s) => /* @__PURE__ */ jsx("option", { value: s, children: s.toFixed(2) }, s))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "select",
-      {
-        value: leg.expiration,
-        onChange: (e) => update2({ expiration: e.target.value }),
-        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs text-zinc-200 outline-none focus:border-zinc-500 min-w-[80px]",
-        children: expirations.map((exp) => /* @__PURE__ */ jsx("option", { value: exp, children: exp }, exp))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "number",
-        min: 1,
-        max: 999,
-        value: leg.quantity,
-        onChange: (e) => update2({ quantity: Math.max(1, parseInt(e.target.value, 10) || 1) }),
-        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs font-mono text-zinc-200 outline-none focus:border-zinc-500 w-[48px] text-center"
-      }
-    ),
-    leg.premium !== void 0 && /* @__PURE__ */ jsxs("span", { className: cn(
-      "font-mono tabular-nums text-xs ml-auto",
-      leg.premium >= 0 ? "text-emerald-400" : "text-red-400"
-    ), children: [
-      leg.premium >= 0 ? "+" : "",
-      leg.premium.toFixed(2)
-    ] }),
-    removable && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => onRemove(index),
-        className: "ml-auto p-0.5 text-zinc-500 hover:text-red-400 transition-colors",
-        "aria-label": "Remove leg",
-        children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
-      }
-    )
-  ] });
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("select", { value: leg.strike, onChange: (e) => update2({ strike: Number(e.target.value) }) }),
+            ...CONTROL_BOX,
+            borderRadius: 4,
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+            minWidth: 72,
+            style: { ...CONTROL_INK, fontFamily: MONO, fontSize: 12 },
+            children: strikes.map((s) => /* @__PURE__ */ jsx("option", { value: s, children: s.toFixed(2) }, s))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("select", { value: leg.expiration, onChange: (e) => update2({ expiration: e.target.value }) }),
+            ...CONTROL_BOX,
+            borderRadius: 4,
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+            minWidth: 80,
+            style: { ...CONTROL_INK, fontSize: 12 },
+            children: expirations.map((exp) => /* @__PURE__ */ jsx("option", { value: exp, children: exp }, exp))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                max: 999,
+                value: leg.quantity,
+                onChange: (e) => update2({ quantity: Math.max(1, parseInt(e.target.value, 10) || 1) })
+              }
+            ),
+            ...CONTROL_BOX,
+            borderRadius: 4,
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+            width: 48,
+            style: { ...CONTROL_INK, fontFamily: MONO, fontSize: 12, textAlign: "center" }
+          }
+        ),
+        leg.premium !== void 0 && /* @__PURE__ */ jsxs(
+          Text,
+          {
+            fontSize: 12,
+            style: { fontFamily: MONO },
+            fontVariant: ["tabular-nums"],
+            marginLeft: "auto",
+            color: leg.premium >= 0 ? "var(--color-status-good)" : "var(--color-status-bad)",
+            children: [
+              leg.premium >= 0 ? "+" : "",
+              leg.premium.toFixed(2)
+            ]
+          }
+        ),
+        removable && /* @__PURE__ */ jsx(
+          XStack,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Remove leg" }),
+            onClick: () => onRemove(index),
+            marginLeft: "auto",
+            padding: 2,
+            borderWidth: 0,
+            cursor: "pointer",
+            transition: "quick",
+            style: { color: "var(--color-text-secondary)" },
+            hoverStyle: { opacity: 0.7 },
+            children: /* @__PURE__ */ jsx("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+          }
+        )
+      ]
+    }
+  );
 }
 var StrategyBuilder = React32.forwardRef(
   function StrategyBuilder2(props, ref) {
@@ -6468,37 +6601,46 @@ var StrategyBuilder = React32.forwardRef(
       });
     }, [onSubmit, strategyType, legs, netPremium]);
     const currentPreset = STRATEGY_PRESETS.find((p) => p.value === strategyType);
+    const netColor = netPremium > 0 ? "var(--color-status-good)" : netPremium < 0 ? "var(--color-status-bad)" : "var(--color-text-secondary)";
     return /* @__PURE__ */ jsxs(
-      "div",
+      YStack,
       {
         ref,
-        className: cn(
-          "flex flex-col gap-3 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3",
-          className
-        ),
+        gap: 12,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: "var(--color-border-divider)",
+        backgroundColor: "var(--card)",
+        padding: 12,
+        className,
         ...rest,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-zinc-500", children: "Strategy" }),
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-200", children: underlying })
+          /* @__PURE__ */ jsxs(XStack, { alignItems: "center", justifyContent: "space-between", gap: 12, children: [
+            /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 8, children: [
+              /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.6, color: "var(--color-text-secondary)", children: "Strategy" }),
+              /* @__PURE__ */ jsx(Text, { fontSize: 14, fontWeight: "500", color: "var(--color-text-primary)", children: underlying })
             ] }),
-            /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+            /* @__PURE__ */ jsxs(Text, { fontSize: 10, color: "var(--color-text-secondary)", children: [
               "Spot: ",
-              /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums text-zinc-300", children: spotPrice.toFixed(2) })
+              /* @__PURE__ */ jsx(Text, { style: { fontFamily: MONO }, fontVariant: ["tabular-nums"], color: "var(--color-text-primary)", children: spotPrice.toFixed(2) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(
-            "select",
+          /* @__PURE__ */ jsx(XStack, { alignItems: "center", gap: 8, children: /* @__PURE__ */ jsx(
+            View,
             {
-              value: strategyType,
-              onChange: handleStrategyChange,
-              className: "flex-1 bg-zinc-900 border border-zinc-700 rounded-md px-2.5 py-1.5 text-sm text-zinc-200 outline-none focus:border-zinc-500",
+              unstyled: true,
+              render: /* @__PURE__ */ jsx("select", { value: strategyType, onChange: handleStrategyChange }),
+              flex: 1,
+              ...CONTROL_BOX,
+              borderRadius: 6,
+              paddingHorizontal: 10,
+              paddingVertical: 6,
+              style: { ...CONTROL_INK, fontSize: 14 },
               children: STRATEGY_PRESETS.map((preset) => /* @__PURE__ */ jsx("option", { value: preset.value, children: preset.label }, preset.value))
             }
           ) }),
-          currentPreset && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-zinc-500 -mt-1", children: currentPreset.description }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: legs.map((leg, i) => /* @__PURE__ */ jsx(
+          currentPreset && /* @__PURE__ */ jsx(Text, { fontSize: 11, marginTop: -4, color: "var(--color-text-secondary)", children: currentPreset.description }),
+          /* @__PURE__ */ jsx(YStack, { gap: 6, children: legs.map((leg, i) => /* @__PURE__ */ jsx(
             LegRow,
             {
               leg,
@@ -6512,40 +6654,53 @@ var StrategyBuilder = React32.forwardRef(
             i
           )) }),
           strategyType === "custom" && legs.length < 4 && /* @__PURE__ */ jsxs(
-            "button",
+            XStack,
             {
-              type: "button",
+              unstyled: true,
+              render: /* @__PURE__ */ jsx("button", { type: "button" }),
               onClick: handleAddLeg,
-              className: "flex items-center justify-center gap-1 rounded-md border border-dashed border-zinc-700 py-1 text-xs text-zinc-500 hover:text-zinc-300 hover:border-zinc-500 transition-colors",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 4,
+              borderRadius: 6,
+              borderWidth: 1,
+              paddingVertical: 4,
+              cursor: "pointer",
+              transition: "quick",
+              borderColor: "var(--color-border-divider)",
+              hoverStyle: { borderColor: "var(--color-hover)" },
+              style: { color: "var(--color-text-secondary)", borderStyle: "dashed" },
               children: [
-                /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
-                "Add Leg"
+                /* @__PURE__ */ jsx("svg", { width: 12, height: 12, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
+                /* @__PURE__ */ jsx(Text, { fontSize: 12, color: "var(--color-text-secondary)", children: "Add Leg" })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-1 border-t border-zinc-800", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500", children: "Net:" }),
-              /* @__PURE__ */ jsxs("span", { className: cn(
-                "font-mono tabular-nums text-sm font-semibold",
-                netPremium > 0 ? "text-emerald-400" : netPremium < 0 ? "text-red-400" : "text-zinc-400"
-              ), children: [
+          /* @__PURE__ */ jsxs(XStack, { alignItems: "center", justifyContent: "space-between", paddingTop: 4, borderTopWidth: 1, borderColor: "var(--color-border-divider)", children: [
+            /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 8, children: [
+              /* @__PURE__ */ jsx(Text, { fontSize: 12, color: "var(--color-text-secondary)", children: "Net:" }),
+              /* @__PURE__ */ jsxs(Text, { fontSize: 14, fontWeight: "600", style: { fontFamily: MONO }, fontVariant: ["tabular-nums"], color: netColor, children: [
                 netPremium > 0 ? "Credit " : netPremium < 0 ? "Debit " : "",
                 netPremium !== 0 ? `$${Math.abs(netPremium).toFixed(2)}` : "-"
               ] })
             ] }),
             /* @__PURE__ */ jsx(
-              "button",
+              XStack,
               {
-                type: "button",
+                unstyled: true,
+                render: /* @__PURE__ */ jsx("button", { type: "button" }),
                 onClick: handleSubmit,
                 disabled: legs.length === 0,
-                className: cn(
-                  "px-4 py-1.5 rounded-md text-xs font-semibold transition-colors",
-                  "bg-blue-600 text-white hover:bg-blue-500",
-                  "disabled:opacity-40 disabled:cursor-not-allowed"
-                ),
-                children: "Review Order"
+                paddingHorizontal: 16,
+                paddingVertical: 6,
+                borderRadius: 6,
+                borderWidth: 0,
+                cursor: "pointer",
+                transition: "quick",
+                backgroundColor: "var(--color-button-solid-bg)",
+                hoverStyle: { backgroundColor: "var(--color-hover)" },
+                disabledStyle: { opacity: 0.4, cursor: "not-allowed" },
+                children: /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", color: "var(--color-button-solid-text)", children: "Review Order" })
               }
             )
           ] })
@@ -6685,19 +6840,21 @@ var PnlDiagram = React32.forwardRef(
       chartH
     );
     return /* @__PURE__ */ jsxs(
-      "div",
+      View,
       {
         ref,
-        className: cn("w-full", className),
+        unstyled: true,
+        width: "100%",
+        className,
         ...rest,
         children: [
-          /* @__PURE__ */ jsx("div", { ref: containerRef, className: "w-full h-full min-h-[200px]", children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(View, { unstyled: true, ref: containerRef, width: "100%", height: "100%", minHeight: 200, children: /* @__PURE__ */ jsxs(
             "svg",
             {
               width,
               height,
               viewBox: `0 0 ${width} ${height}`,
-              className: "select-none",
+              style: { userSelect: "none" },
               onMouseMove: handleMouseMove,
               onMouseLeave: handleMouseLeave,
               children: [
@@ -6936,16 +7093,18 @@ var PnlDiagram = React32.forwardRef(
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4 px-2 pt-1", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-0.5 w-4 bg-zinc-200 rounded" }),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-zinc-400", children: "Combined" })
+          /* @__PURE__ */ jsxs(XStack, { flexWrap: "wrap", alignItems: "center", gap: 16, paddingHorizontal: 8, paddingTop: 4, children: [
+            /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 6, children: [
+              /* @__PURE__ */ jsx(View, { height: 2, width: 16, borderRadius: 4, backgroundColor: "var(--color-gray-200)" }),
+              /* @__PURE__ */ jsx(Text, { fontSize: 10, color: "var(--color-text-secondary)", children: "Combined" })
             ] }),
-            legs.map((leg, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            legs.map((leg, i) => /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 6, children: [
               /* @__PURE__ */ jsx(
-                "div",
+                View,
                 {
-                  className: "h-0.5 w-4 rounded",
+                  height: 2,
+                  width: 16,
+                  borderRadius: 4,
                   style: {
                     backgroundColor: LEG_COLORS[i % LEG_COLORS.length],
                     opacity: 0.6,
@@ -6953,7 +7112,7 @@ var PnlDiagram = React32.forwardRef(
                   }
                 }
               ),
-              /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+              /* @__PURE__ */ jsxs(Text, { fontSize: 10, color: "var(--color-text-secondary)", children: [
                 leg.action === "buy" ? "B" : "S",
                 " ",
                 leg.quantity,
@@ -6963,9 +7122,9 @@ var PnlDiagram = React32.forwardRef(
                 leg.type === "call" ? "C" : "P"
               ] })
             ] }, i)),
-            breakevens.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 rounded-full", style: { background: BREAKEVEN_COLOR } }),
-              /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+            breakevens.length > 0 && /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 6, children: [
+              /* @__PURE__ */ jsx(View, { width: 6, height: 6, borderRadius: 9999, style: { background: BREAKEVEN_COLOR } }),
+              /* @__PURE__ */ jsxs(Text, { fontSize: 10, color: "var(--color-text-secondary)", children: [
                 "BE: ",
                 breakevens.map((b) => b.toFixed(1)).join(", ")
               ] })
@@ -6980,6 +7139,7 @@ function formatDate(date) {
   const d = new Date(date);
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
 }
+var MONO2 = { fontFamily: "monospace" };
 var OptionPositionCard = React32.forwardRef(
   function OptionPositionCard2(props, ref) {
     const {
@@ -6993,64 +7153,76 @@ var OptionPositionCard = React32.forwardRef(
     const isLong = position.quantity > 0;
     const isCall = position.type === "call";
     const isProfitable = position.pnl >= 0;
+    const pnlColor = isProfitable ? "var(--color-status-good)" : "var(--color-status-bad)";
     return /* @__PURE__ */ jsxs(
-      "div",
+      YStack,
       {
         ref,
-        className: cn(
-          "flex flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3",
-          className
-        ),
+        gap: 8,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: "var(--color-border-divider)",
+        backgroundColor: "var(--card)",
+        padding: 12,
+        className,
         ...rest,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs("span", { className: cn(
-              "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-semibold",
-              // Call vs put is a rank difference, not a hue difference.
-              isCall ? "bg-[var(--secondary)] text-[var(--foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"
-            ), children: [
-              position.underlying,
-              /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums", children: position.strike }),
-              /* @__PURE__ */ jsx("span", { className: "uppercase", children: position.type === "call" ? "C" : "P" }),
-              /* @__PURE__ */ jsx("span", { className: "text-zinc-500 font-normal", children: formatDate(position.expiration) })
-            ] }) }),
-            /* @__PURE__ */ jsxs("span", { className: cn(
-              "text-xs font-semibold font-mono tabular-nums",
-              isLong ? "text-emerald-400" : "text-red-400"
-            ), children: [
-              isLong ? "+" : "",
-              position.quantity
-            ] })
+          /* @__PURE__ */ jsxs(XStack, { alignItems: "center", justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsx(XStack, { alignItems: "center", gap: 8, children: /* @__PURE__ */ jsxs(
+              XStack,
+              {
+                alignItems: "center",
+                gap: 4,
+                borderRadius: 4,
+                paddingHorizontal: 6,
+                paddingVertical: 2,
+                backgroundColor: isCall ? "var(--secondary)" : "var(--muted)",
+                children: [
+                  /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", color: isCall ? "var(--foreground)" : "var(--muted-foreground)", children: position.underlying }),
+                  /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", style: MONO2, fontVariant: ["tabular-nums"], color: isCall ? "var(--foreground)" : "var(--muted-foreground)", children: position.strike }),
+                  /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", textTransform: "uppercase", color: isCall ? "var(--foreground)" : "var(--muted-foreground)", children: position.type === "call" ? "C" : "P" }),
+                  /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "400", color: "var(--color-text-secondary)", children: formatDate(position.expiration) })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              Text,
+              {
+                fontSize: 12,
+                fontWeight: "600",
+                style: MONO2,
+                fontVariant: ["tabular-nums"],
+                color: isLong ? "var(--color-status-good)" : "var(--color-status-bad)",
+                children: [
+                  isLong ? "+" : "",
+                  position.quantity
+                ]
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-zinc-500", children: "Avg Cost" }),
-              /* @__PURE__ */ jsxs("span", { className: "font-mono tabular-nums text-xs text-zinc-300", children: [
+          /* @__PURE__ */ jsxs(XStack, { gap: 12, children: [
+            /* @__PURE__ */ jsxs(YStack, { flex: 1, gap: 2, children: [
+              /* @__PURE__ */ jsx(Text, { fontSize: 10, textTransform: "uppercase", letterSpacing: 0.5, color: "var(--color-text-secondary)", children: "Avg Cost" }),
+              /* @__PURE__ */ jsxs(Text, { fontSize: 12, style: MONO2, fontVariant: ["tabular-nums"], color: "var(--color-text-primary)", children: [
                 "$",
                 position.avgCost.toFixed(2)
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-zinc-500", children: "Value" }),
-              /* @__PURE__ */ jsxs("span", { className: "font-mono tabular-nums text-xs text-zinc-300", children: [
+            /* @__PURE__ */ jsxs(YStack, { flex: 1, gap: 2, children: [
+              /* @__PURE__ */ jsx(Text, { fontSize: 10, textTransform: "uppercase", letterSpacing: 0.5, color: "var(--color-text-secondary)", children: "Value" }),
+              /* @__PURE__ */ jsxs(Text, { fontSize: 12, style: MONO2, fontVariant: ["tabular-nums"], color: "var(--color-text-primary)", children: [
                 "$",
                 position.currentValue.toFixed(2)
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-zinc-500", children: "P/L" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsxs("span", { className: cn(
-                  "font-mono tabular-nums text-xs font-semibold",
-                  isProfitable ? "text-emerald-400" : "text-red-400"
-                ), children: [
+            /* @__PURE__ */ jsxs(YStack, { flex: 1, gap: 2, alignItems: "flex-end", children: [
+              /* @__PURE__ */ jsx(Text, { fontSize: 10, textTransform: "uppercase", letterSpacing: 0.5, color: "var(--color-text-secondary)", children: "P/L" }),
+              /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 4, children: [
+                /* @__PURE__ */ jsxs(Text, { fontSize: 12, fontWeight: "600", style: MONO2, fontVariant: ["tabular-nums"], color: pnlColor, children: [
                   isProfitable ? "+" : "",
                   position.pnl.toFixed(2)
                 ] }),
-                /* @__PURE__ */ jsxs("span", { className: cn(
-                  "font-mono tabular-nums text-[10px]",
-                  isProfitable ? "text-emerald-500/70" : "text-red-500/70"
-                ), children: [
+                /* @__PURE__ */ jsxs(Text, { fontSize: 10, style: MONO2, fontVariant: ["tabular-nums"], color: pnlColor, opacity: 0.7, children: [
                   "(",
                   isProfitable ? "+" : "",
                   position.pnlPercent.toFixed(1),
@@ -7059,53 +7231,47 @@ var OptionPositionCard = React32.forwardRef(
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-t border-zinc-800/60 pt-2", children: [
-            /* @__PURE__ */ jsx(GreekPill, { label: "\u0394", value: position.greeks.delta, color: "text-blue-400" }),
-            /* @__PURE__ */ jsx(GreekPill, { label: "\u0393", value: position.greeks.gamma, color: "text-purple-400" }),
-            /* @__PURE__ */ jsx(GreekPill, { label: "\u0398", value: position.greeks.theta, color: "text-red-400" }),
-            /* @__PURE__ */ jsx(GreekPill, { label: "\u03BD", value: position.greeks.vega, color: "text-emerald-400" })
+          /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 12, borderTopWidth: 1, borderColor: "var(--color-border-divider)", paddingTop: 8, children: [
+            /* @__PURE__ */ jsx(GreekPill, { label: "\u0394", value: position.greeks.delta, color: "var(--foreground)" }),
+            /* @__PURE__ */ jsx(GreekPill, { label: "\u0393", value: position.greeks.gamma, color: "var(--chart-1)" }),
+            /* @__PURE__ */ jsx(GreekPill, { label: "\u0398", value: position.greeks.theta, color: "var(--chart-4)" }),
+            /* @__PURE__ */ jsx(GreekPill, { label: "\u03BD", value: position.greeks.vega, color: "var(--chart-2)" })
           ] }),
-          (onClose || onExercise || onRoll) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-t border-zinc-800/60 pt-2", children: [
-            onClose && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onClose(position),
-                className: "flex-1 rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100 transition-colors",
-                children: "Close"
-              }
-            ),
-            onExercise && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onExercise(position),
-                className: "flex-1 rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100 transition-colors",
-                children: "Exercise"
-              }
-            ),
-            onRoll && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onRoll(position),
-                className: "flex-1 rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100 transition-colors",
-                children: "Roll"
-              }
-            )
+          (onClose || onExercise || onRoll) && /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 8, borderTopWidth: 1, borderColor: "var(--color-border-divider)", paddingTop: 8, children: [
+            onClose && /* @__PURE__ */ jsx(ActionButton, { onClick: () => onClose(position), children: "Close" }),
+            onExercise && /* @__PURE__ */ jsx(ActionButton, { onClick: () => onExercise(position), children: "Exercise" }),
+            onRoll && /* @__PURE__ */ jsx(ActionButton, { onClick: () => onRoll(position), children: "Roll" })
           ] })
         ]
       }
     );
   }
 );
+function ActionButton({ onClick, children }) {
+  return /* @__PURE__ */ jsx(
+    XStack,
+    {
+      unstyled: true,
+      render: /* @__PURE__ */ jsx("button", { type: "button" }),
+      onClick,
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: 6,
+      borderWidth: 0,
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      backgroundColor: "var(--color-button-subtle-bg)",
+      cursor: "pointer",
+      hoverStyle: { color: "var(--color-hover)" },
+      children: /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "500", color: "var(--color-button-subtle-fg)", children })
+    }
+  );
+}
 function GreekPill({ label, value, color }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-    /* @__PURE__ */ jsx("span", { className: cn("text-[10px] font-semibold", color), children: label }),
-    /* @__PURE__ */ jsx("span", { className: cn(
-      "font-mono tabular-nums text-[11px]",
-      value < 0 ? "text-red-400" : "text-zinc-400"
-    ), children: value.toFixed(4) })
+  return /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 4, children: [
+    /* @__PURE__ */ jsx(Text, { fontSize: 10, fontWeight: "600", color, children: label }),
+    /* @__PURE__ */ jsx(Text, { fontSize: 11, style: MONO2, fontVariant: ["tabular-nums"], color: value < 0 ? "var(--color-status-bad)" : "var(--color-text-secondary)", children: value.toFixed(4) })
   ] });
 }
 function formatExpDate(date) {
@@ -7118,28 +7284,53 @@ var GROUP_LABELS = {
   monthly: "Monthly",
   quarterly: "Quarterly"
 };
+var SHAPE = {
+  selected: {
+    borderColor: "transparent",
+    backgroundColor: "var(--color-selected-control-bg)",
+    color: "var(--color-selected-control-text)"
+  },
+  resting: {
+    borderColor: "var(--color-border-divider)",
+    backgroundColor: "var(--card)",
+    color: "var(--color-text-secondary)",
+    hoverStyle: { borderColor: "var(--color-hover)", color: "var(--color-hover)" }
+  }
+};
 function ExpirationPill({ exp, isSelected, onClick }) {
+  const shape = isSelected ? SHAPE.selected : SHAPE.resting;
+  const dteColor = exp.dte <= 7 && !isSelected ? "var(--color-status-warn)" : isSelected ? "var(--color-selected-control-text)" : "var(--muted-foreground)";
   return /* @__PURE__ */ jsxs(
-    "button",
+    YStack,
     {
-      type: "button",
+      unstyled: true,
+      render: /* @__PURE__ */ jsx("button", { type: "button" }),
       onClick,
-      className: cn(
-        "flex flex-col items-center gap-0.5 rounded-md px-3 py-1.5 transition-colors shrink-0",
-        "border text-xs",
-        isSelected ? "border-blue-500/60 bg-blue-900/30 text-blue-300" : "border-zinc-800 bg-zinc-900/50 text-zinc-400 hover:border-zinc-600 hover:text-zinc-200"
-      ),
+      alignItems: "center",
+      gap: 2,
+      borderRadius: 6,
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      flexShrink: 0,
+      borderWidth: 1,
+      borderStyle: "solid",
+      cursor: "pointer",
+      ...shape,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "font-medium whitespace-nowrap", children: formatExpDate(exp.date) }),
-        /* @__PURE__ */ jsxs("span", { className: cn(
-          "font-mono tabular-nums text-[10px]",
-          isSelected ? "text-[var(--foreground)]" : "text-[var(--muted-foreground)]",
-          // Near expiry is a notice, and a notice in Lux is the loudest neutral.
-          exp.dte <= 7 && !isSelected && "text-[var(--color-status-warn)]"
-        ), children: [
-          exp.dte,
-          "d"
-        ] })
+        /* @__PURE__ */ jsx(Text, { unstyled: true, fontSize: 12, fontWeight: "500", style: { whiteSpace: "nowrap" }, children: formatExpDate(exp.date) }),
+        /* @__PURE__ */ jsxs(
+          Text,
+          {
+            fontVariant: ["tabular-nums"],
+            style: { fontFamily: "monospace" },
+            fontSize: 10,
+            color: dteColor,
+            children: [
+              exp.dte,
+              "d"
+            ]
+          }
+        )
       ]
     }
   );
@@ -7169,49 +7360,23 @@ var ExpirationSelector = React32.forwardRef(
         label: GROUP_LABELS[type],
         items: expirations.filter((e) => e.type === type)
       })).filter((g) => g.items.length > 0);
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref,
-          className: cn("flex flex-col gap-2", className),
-          ...rest,
-          children: grouped.map((group) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-zinc-600 px-1", children: group.label }),
-            /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 overflow-x-auto no-scrollbar", children: group.items.map((exp) => /* @__PURE__ */ jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsx(
-              ExpirationPill,
-              {
-                exp,
-                isSelected: exp.date === selected,
-                onClick: () => onSelect(exp.date)
-              }
-            ) }, exp.date)) })
-          ] }, group.type))
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex items-center gap-1", className),
-        ...rest,
-        children: /* @__PURE__ */ jsx(
-          "div",
+      return /* @__PURE__ */ jsx(YStack, { ref, gap: 8, className, ...rest, children: grouped.map((group) => /* @__PURE__ */ jsxs(YStack, { gap: 4, children: [
+        /* @__PURE__ */ jsx(
+          Text,
           {
-            ref: scrollRef,
-            className: "flex gap-1.5 overflow-x-auto no-scrollbar",
-            children: expirations.map((exp) => /* @__PURE__ */ jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsx(
-              ExpirationPill,
-              {
-                exp,
-                isSelected: exp.date === selected,
-                onClick: () => onSelect(exp.date)
-              }
-            ) }, exp.date))
+            fontSize: 10,
+            fontWeight: "600",
+            textTransform: "uppercase",
+            letterSpacing: 0.5,
+            paddingHorizontal: 4,
+            color: "var(--color-text-secondary)",
+            children: group.label
           }
-        )
-      }
-    );
+        ),
+        /* @__PURE__ */ jsx(XStack, { gap: 6, overflowX: "auto", overflowY: "hidden", className: "lux-no-scrollbar", children: group.items.map((exp) => /* @__PURE__ */ jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsx(ExpirationPill, { exp, isSelected: exp.date === selected, onClick: () => onSelect(exp.date) }) }, exp.date)) })
+      ] }, group.type)) });
+    }
+    return /* @__PURE__ */ jsx(XStack, { ref, alignItems: "center", gap: 4, className, ...rest, children: /* @__PURE__ */ jsx(XStack, { ref: scrollRef, gap: 6, overflowX: "auto", overflowY: "hidden", className: "lux-no-scrollbar", children: expirations.map((exp) => /* @__PURE__ */ jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsx(ExpirationPill, { exp, isSelected: exp.date === selected, onClick: () => onSelect(exp.date) }) }, exp.date)) }) });
   }
 );
 var bankColors = {