@luxfi/ui 7.0.0 → 7.1.0

package/dist/index.js

@@ -6,18 +6,19 @@ import * as React29 from 'react';
 import React29__default from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
+import { styled, View, Text } from '@hanzogui/core';
 import * as RadixAvatar from '@radix-ui/react-avatar';
-import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzogui/tooltip';
 import { useClickAway, useDebounce } from '@uidotdev/usehooks';
-import { Slot } from '@radix-ui/react-slot';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import * as Collapsible from '@radix-ui/react-collapsible';
+import { Dialog } from '@hanzogui/dialog';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { debounce, throttle } from 'es-toolkit';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { LuCheck, LuChevronRight } from 'react-icons/lu';
-import * as RadixPopover from '@radix-ui/react-popover';
+import { Popover } from '@hanzogui/popover';
 import * as RadixProgress from '@radix-ui/react-progress';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
 import * as RadixSelect from '@radix-ui/react-select';
@@ -25,7 +26,6 @@ import * as RadixSlider from '@radix-ui/react-slider';
 import * as RadixSwitch from '@radix-ui/react-switch';
 import * as RadixTabs from '@radix-ui/react-tabs';
 import { toast, Toaster as Toaster$1 } from 'sonner';
-import { styled, View, Text } from '@hanzogui/core';
 
 // src/utils.ts
 function cn(...inputs) {
@@ -205,24 +205,47 @@ function useAccordion(items) {
   }, [value, onValueChange, scrollToItemFromUrl]);
 }
 var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
+var CloseButtonFrame = styled(View, {
+  name: "LuxCloseButton",
+  render: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close" }),
+  role: "button",
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 20,
+  height: 20,
+  minWidth: 0,
+  flexShrink: 1,
+  padding: 0,
+  borderRadius: 4,
+  borderWidth: 0,
+  overflow: "hidden",
+  backgroundColor: "transparent",
+  hoverStyle: {
+    backgroundColor: "transparent"
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.4,
+        pointerEvents: "none"
+      }
+    }
+  }
+});
+var CLOSE_BUTTON_CLASSES = [
+  "text-[var(--closeButton-fg,currentColor)]",
+  "hover:text-[var(--hover-color,currentColor)]",
+  "disabled:opacity-40"
+].join(" ");
 var CloseButton = React29.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    "button",
+    CloseButtonFrame,
     {
-      type: "button",
-      "aria-label": "Close",
       ref,
-      className: cn(
-        "inline-flex items-center justify-center",
-        "size-5 min-w-0 shrink-0 p-0",
-        "rounded-sm border-0 overflow-hidden",
-        "bg-transparent text-[var(--closeButton-fg,currentColor)]",
-        "hover:bg-transparent hover:text-[var(--hover-color,currentColor)]",
-        "disabled:opacity-40",
-        "cursor-pointer",
-        className
-      ),
+      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
       ...rest,
       children: children ?? /* @__PURE__ */ jsx(
         "svg",
@@ -243,272 +266,137 @@ var CloseButton = React29.forwardRef(function CloseButton2(props, ref) {
     }
   );
 });
-var SPACING_SCALE = 4;
-function toStylePx(value) {
-  if (value === void 0) return void 0;
-  if (typeof value === "string") return value;
-  return `${value * SPACING_SCALE}px`;
+var SHIM_PROPS = [
+  "w",
+  "h",
+  "minW",
+  "maxW",
+  "display",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "fontWeight",
+  "textStyle",
+  "borderRadius",
+  "alignSelf",
+  "alignItems",
+  "justifyContent",
+  "color",
+  "mt",
+  "mb",
+  "ml",
+  "mr",
+  "height",
+  "overflow",
+  "whiteSpace",
+  "textOverflow",
+  "textTransform",
+  "gap",
+  "gridTemplateColumns",
+  "minWidth",
+  "boxSize",
+  "py",
+  "px",
+  "p",
+  "hideBelow",
+  "fontSize",
+  "flexWrap",
+  "wordBreak",
+  "lineHeight",
+  "marginRight",
+  "position",
+  "background"
+];
+var S = 4;
+function dim(v) {
+  if (v == null) return void 0;
+  if (typeof v === "number") return `${v * S}px`;
+  if (typeof v === "string") return v;
+  if (typeof v === "object") {
+    const o = v;
+    return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
+  }
+  return void 0;
 }
-function extractSkeletonStyleProps(props) {
-  const style = {};
-  const rest = {};
-  function resolveDimension(value) {
-    if (value === void 0 || value === null) return void 0;
-    if (typeof value === "number") return `${value * SPACING_SCALE}px`;
-    if (typeof value === "string") return value;
-    if (typeof value === "object") {
-      const obj = value;
-      return obj.base ?? obj.lg ?? obj.xl ?? Object.values(obj)[0];
-    }
-    return void 0;
+function sp(v) {
+  if (v === void 0) return void 0;
+  return typeof v === "number" ? `${v * S}px` : v;
+}
+function shimToStyle(props) {
+  const s = {};
+  if (props.w !== void 0) s.width = dim(props.w);
+  if (props.h !== void 0) s.height = dim(props.h);
+  if (props.minW !== void 0) s.minWidth = dim(props.minW);
+  if (props.maxW !== void 0) s.maxWidth = dim(props.maxW);
+  if (props.display !== void 0) s.display = props.display;
+  if (props.flexGrow !== void 0) s.flexGrow = props.flexGrow;
+  if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
+  if (props.flexBasis !== void 0) s.flexBasis = props.flexBasis;
+  if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
+  if (props.borderRadius !== void 0) s.borderRadius = props.borderRadius;
+  if (props.alignSelf !== void 0) s.alignSelf = props.alignSelf;
+  if (props.alignItems !== void 0) s.alignItems = props.alignItems;
+  if (props.justifyContent !== void 0) s.justifyContent = props.justifyContent;
+  if (props.color !== void 0) s.color = props.color;
+  if (props.mt !== void 0) s.marginTop = sp(props.mt);
+  if (props.mb !== void 0) s.marginBottom = sp(props.mb);
+  if (props.ml !== void 0) s.marginLeft = sp(props.ml);
+  if (props.mr !== void 0) s.marginRight = sp(props.mr);
+  if (props.height !== void 0) s.height = props.height;
+  if (props.overflow !== void 0) s.overflow = props.overflow;
+  if (props.whiteSpace !== void 0) s.whiteSpace = props.whiteSpace;
+  if (props.textOverflow !== void 0) s.textOverflow = props.textOverflow;
+  if (props.textTransform !== void 0) s.textTransform = props.textTransform;
+  if (props.gap !== void 0) s.gap = sp(props.gap);
+  if (props.gridTemplateColumns !== void 0) s.gridTemplateColumns = props.gridTemplateColumns;
+  if (props.minWidth !== void 0) s.minWidth = props.minWidth;
+  if (props.boxSize !== void 0) {
+    const v = typeof props.boxSize === "number" ? `${props.boxSize * S}px` : props.boxSize;
+    s.width = v;
+    s.height = v;
   }
-  for (const [key, value] of Object.entries(props)) {
-    if (value === void 0) continue;
-    switch (key) {
-      case "w": {
-        const v = resolveDimension(value);
-        if (v) style.width = v;
-        break;
-      }
-      case "h": {
-        const v = resolveDimension(value);
-        if (v) style.height = v;
-        break;
-      }
-      case "minW": {
-        const v = resolveDimension(value);
-        if (v) style.minWidth = v;
-        break;
-      }
-      case "maxW": {
-        const v = resolveDimension(value);
-        if (v) style.maxWidth = v;
-        break;
-      }
-      case "height":
-        style.height = value;
-        break;
-      case "display":
-        style.display = value;
-        break;
-      case "flexGrow":
-        style.flexGrow = value;
-        break;
-      case "flexShrink":
-        style.flexShrink = value;
-        break;
-      case "flexBasis":
-        style.flexBasis = value;
-        break;
-      case "fontWeight":
-        style.fontWeight = value;
-        break;
-      case "borderRadius":
-        style.borderRadius = value;
-        break;
-      case "alignSelf":
-        style.alignSelf = value;
-        break;
-      case "alignItems":
-        style.alignItems = value;
-        break;
-      case "justifyContent":
-        style.justifyContent = value;
-        break;
-      case "color":
-        style.color = value;
-        break;
-      case "mt":
-        style.marginTop = toStylePx(value);
-        break;
-      case "mb":
-        style.marginBottom = toStylePx(value);
-        break;
-      case "ml":
-        style.marginLeft = toStylePx(value);
-        break;
-      case "mr":
-        style.marginRight = toStylePx(value);
-        break;
-      case "overflow":
-        style.overflow = value;
-        break;
-      case "whiteSpace":
-        style.whiteSpace = value;
-        break;
-      case "textOverflow":
-        style.textOverflow = value;
-        break;
-      case "textTransform":
-        style.textTransform = value;
-        break;
-      case "gap":
-        style.gap = typeof value === "number" ? `${value * SPACING_SCALE}px` : value;
-        break;
-      case "gridTemplateColumns":
-        style.gridTemplateColumns = value;
-        break;
-      case "minWidth":
-        style.minWidth = value;
-        break;
-      case "boxSize": {
-        const s = typeof value === "number" ? `${value * SPACING_SCALE}px` : value;
-        style.width = s;
-        style.height = s;
-        break;
-      }
-      case "py": {
-        const v = toStylePx(value);
-        style.paddingTop = v;
-        style.paddingBottom = v;
-        break;
-      }
-      case "px": {
-        const v = toStylePx(value);
-        style.paddingLeft = v;
-        style.paddingRight = v;
-        break;
-      }
-      case "p": {
-        const v = toStylePx(value);
-        style.padding = v;
-        break;
-      }
-      case "hideBelow":
-        break;
-      // handled via className
-      case "textStyle":
-        break;
-      // drop textStyle, not directly applicable
-      case "fontSize":
-        style.fontSize = value;
-        break;
-      case "flexWrap":
-        style.flexWrap = value;
-        break;
-      case "wordBreak":
-        style.wordBreak = value;
-        break;
-      case "lineHeight":
-        style.lineHeight = value;
-        break;
-      case "marginRight":
-        style.marginRight = value;
-        break;
-      case "position":
-        style.position = value;
-        break;
-      case "background":
-        style.background = value;
-        break;
-      default:
-        rest[key] = value;
-        break;
-    }
+  if (props.py !== void 0) {
+    const v = sp(props.py);
+    s.paddingTop = v;
+    s.paddingBottom = v;
   }
-  return { style, rest };
+  if (props.px !== void 0) {
+    const v = sp(props.px);
+    s.paddingLeft = v;
+    s.paddingRight = v;
+  }
+  if (props.p !== void 0) s.padding = sp(props.p);
+  if (props.fontSize !== void 0) s.fontSize = props.fontSize;
+  if (props.flexWrap !== void 0) s.flexWrap = props.flexWrap;
+  if (props.wordBreak !== void 0) s.wordBreak = props.wordBreak;
+  if (props.lineHeight !== void 0) s.lineHeight = props.lineHeight;
+  if (props.marginRight !== void 0) s.marginRight = props.marginRight;
+  if (props.position !== void 0) s.position = props.position;
+  if (props.background !== void 0) s.background = props.background;
+  return s;
 }
+function stripShims(props) {
+  const out = { ...props };
+  for (const k of SHIM_PROPS) delete out[k];
+  return out;
+}
+var SKELETON_CLASSES = [
+  "animate-skeleton-shimmer rounded-sm",
+  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
+  "bg-[length:200%_100%]"
+].join(" ");
+var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React29.forwardRef(
   function Skeleton2(props, ref) {
-    const {
-      loading = false,
-      asChild,
-      className,
-      children,
-      style: styleProp,
-      // Destructure style-prop shims so they don't leak into DOM
-      w: _w,
-      h: _h,
-      minW: _minW,
-      maxW: _maxW,
-      display: _display,
-      flexGrow: _flexGrow,
-      flexShrink: _flexShrink,
-      flexBasis: _flexBasis,
-      fontWeight: _fontWeight,
-      textStyle: _textStyle,
-      borderRadius: _borderRadius,
-      alignSelf: _alignSelf,
-      alignItems: _alignItems,
-      justifyContent: _justifyContent,
-      color: _color,
-      mt: _mt,
-      mb: _mb,
-      ml: _ml,
-      mr: _mr,
-      height: _height,
-      overflow: _overflow,
-      whiteSpace: _whiteSpace,
-      textOverflow: _textOverflow,
-      textTransform: _textTransform,
-      gap: _gap,
-      gridTemplateColumns: _gridTemplateColumns,
-      minWidth: _minWidth,
-      boxSize: _boxSize,
-      py: _py,
-      px: _px,
-      p: _p,
-      hideBelow: _hideBelow,
-      fontSize: _fontSize,
-      flexWrap: _flexWrap,
-      wordBreak: _wordBreak,
-      lineHeight: _lineHeight,
-      marginRight: _marginRight,
-      position: _position,
-      background: _background,
-      as: Component = "div",
-      ...htmlRest
-    } = props;
-    const { style: shimStyle } = extractSkeletonStyleProps({
-      w: _w,
-      h: _h,
-      minW: _minW,
-      maxW: _maxW,
-      display: _display,
-      flexGrow: _flexGrow,
-      flexShrink: _flexShrink,
-      flexBasis: _flexBasis,
-      fontWeight: _fontWeight,
-      textStyle: _textStyle,
-      borderRadius: _borderRadius,
-      alignSelf: _alignSelf,
-      alignItems: _alignItems,
-      justifyContent: _justifyContent,
-      color: _color,
-      mt: _mt,
-      mb: _mb,
-      ml: _ml,
-      mr: _mr,
-      height: _height,
-      overflow: _overflow,
-      whiteSpace: _whiteSpace,
-      textOverflow: _textOverflow,
-      textTransform: _textTransform,
-      gap: _gap,
-      gridTemplateColumns: _gridTemplateColumns,
-      minWidth: _minWidth,
-      boxSize: _boxSize,
-      py: _py,
-      px: _px,
-      p: _p,
-      hideBelow: _hideBelow,
-      fontSize: _fontSize,
-      flexWrap: _flexWrap,
-      wordBreak: _wordBreak,
-      lineHeight: _lineHeight,
-      marginRight: _marginRight,
-      position: _position,
-      background: _background
-    });
+    const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
+    const shimStyle = shimToStyle(props);
     const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
-    const HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
-    const hideBelowClass = _hideBelow ? HIDE_BELOW_MAP[_hideBelow] : void 0;
-    const finalClassName = hideBelowClass ? cn(className, hideBelowClass) : className;
+    const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : void 0;
+    const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
+    const htmlRest = stripShims(allRest);
     if (!loading) {
-      if (asChild && React29.isValidElement(children)) {
-        return children;
-      }
-      return /* @__PURE__ */ jsx(Component, { ref, className: finalClassName, style: mergedStyle, ...htmlRest, children });
+      if (asChild && React29.isValidElement(children)) return children;
+      return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
     }
     if (asChild && React29.isValidElement(children)) {
       return /* @__PURE__ */ jsx(
@@ -516,13 +404,7 @@ var Skeleton = React29.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(
-            "animate-skeleton-shimmer rounded-sm",
-            "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-            "bg-[length:200%_100%]",
-            "text-transparent [&_*]:invisible",
-            finalClassName
-          ),
+          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -534,13 +416,7 @@ var Skeleton = React29.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(
-          "animate-skeleton-shimmer rounded-sm",
-          "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-          "bg-[length:200%_100%]",
-          children ? "text-transparent [&_*]:invisible" : "min-h-5",
-          finalClassName
-        ),
+        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children
@@ -850,6 +726,10 @@ function useIsMobile() {
   }, []);
   return isMobile;
 }
+function mapPlacement(p) {
+  if (!p) return void 0;
+  return p;
+}
 var Tooltip = React29.forwardRef(
   function Tooltip2(props, ref) {
     const {
@@ -860,10 +740,8 @@ var Tooltip = React29.forwardRef(
       children,
       disabled,
       disableOnMobile,
-      portalled = true,
       content,
       contentProps,
-      portalRef,
       defaultOpen = false,
       triggerProps,
       closeDelay = 100,
@@ -911,36 +789,34 @@ var Tooltip = React29.forwardRef(
     if (disabled || disableOnMobile && isMobile) return children;
     const defaultShowArrow = variant === "popover" ? false : true;
     const showArrow = showArrowProp !== void 0 ? showArrowProp : defaultShowArrow;
-    const placement = positioning?.placement ?? "top";
-    const side = placement.split("-")[0];
-    const align = placement.includes("-") ? placement.split("-")[1] : void 0;
-    const sideOffset = positioning?.offset?.mainAxis ?? 4;
     const isPopover = variant === "popover";
-    return /* @__PURE__ */ jsx(RadixTooltip.Provider, { delayDuration: openDelay, skipDelayDuration: 0, children: /* @__PURE__ */ jsxs(
-      RadixTooltip.Root,
+    const placement = mapPlacement(positioning?.placement) ?? "top";
+    const offset = positioning?.offset?.mainAxis ?? 4;
+    return /* @__PURE__ */ jsx(TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxs(
+      Tooltip$1,
       {
         open,
         onOpenChange: handleOpenChange,
-        delayDuration: openDelay,
+        delay: { open: openDelay, close: closeDelay },
+        placement,
+        offset,
+        unstyled: true,
         children: [
           /* @__PURE__ */ jsx(
-            RadixTooltip.Trigger,
+            Tooltip$1.Trigger,
             {
               ref: open ? triggerRef : void 0,
               asChild: true,
-              onClick: isMobile ? handleTriggerClick : void 0,
+              ...isMobile ? { onPress: handleTriggerClick } : {},
               ...triggerProps,
               children
             }
           ),
-          /* @__PURE__ */ jsx(RadixTooltip.Portal, { container: portalled ? portalRef?.current ?? void 0 : void 0, children: /* @__PURE__ */ jsxs(
-            RadixTooltip.Content,
+          /* @__PURE__ */ jsxs(
+            Tooltip$1.Content,
             {
               ref,
-              side,
-              align,
-              sideOffset,
-              onClick: interactive ? handleContentClick : void 0,
+              unstyled: true,
               className: cn(
                 "z-[9999] overflow-hidden rounded-lg px-3 py-2 text-sm",
                 "animate-in fade-in-0 zoom-in-95",
@@ -949,12 +825,14 @@ var Tooltip = React29.forwardRef(
                 !isPopover && "bg-[var(--color-tooltip-bg)] text-[var(--color-tooltip-fg)] max-w-xs",
                 contentProps?.className
               ),
+              onClick: interactive ? handleContentClick : void 0,
               ...selected ? { "data-selected": true } : {},
               ...contentProps,
               children: [
                 showArrow && /* @__PURE__ */ jsx(
-                  RadixTooltip.Arrow,
+                  Tooltip$1.Arrow,
                   {
+                    unstyled: true,
                     className: cn(
                       isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
                     )
@@ -963,7 +841,7 @@ var Tooltip = React29.forwardRef(
                 content
               ]
             }
-          ) })
+          )
         ]
       }
     ) });
@@ -972,26 +850,12 @@ var Tooltip = React29.forwardRef(
 function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
-var badgeVariants = cva(
-  "inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text",
-  {
-    variants: {
-      variant: {
-        subtle: "",
-        solid: ""
-      },
-      size: {
-        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"
-      }
-    },
-    defaultVariants: {
-      variant: "subtle",
-      size: "md"
-    }
-  }
-);
+var BASE_CLASSES = "inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text";
+var SIZE_CLASSES2 = {
+  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 COLOR_PALETTE_CLASSES = {
   gray: "bg-badge-gray-bg text-badge-gray-fg",
   green: "bg-badge-green-bg text-badge-green-fg",
@@ -1016,6 +880,7 @@ var COLOR_PALETTE_CLASSES = {
   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 S2 = 4;
 var Badge = React29__default.forwardRef(
   function Badge2(props, ref) {
     const {
@@ -1024,8 +889,8 @@ var Badge = React29__default.forwardRef(
       children,
       truncated = false,
       endElement,
-      variant,
-      size,
+      variant: _variant,
+      size = "md",
       colorPalette = "gray",
       className,
       flexShrink: _flexShrink,
@@ -1037,16 +902,16 @@ var Badge = React29__default.forwardRef(
     } = props;
     const shimStyle = { ...styleProp };
     if (_flexShrink !== void 0) shimStyle.flexShrink = _flexShrink;
-    if (_gap !== void 0) shimStyle.gap = typeof _gap === "number" ? `${_gap * 4}px` : _gap;
+    if (_gap !== void 0) shimStyle.gap = typeof _gap === "number" ? `${_gap * S2}px` : _gap;
     if (_ml !== void 0) {
       if (typeof _ml === "object") {
         const obj = _ml;
-        shimStyle.marginLeft = `${(obj.base ?? obj.lg ?? 0) * 4}px`;
+        shimStyle.marginLeft = `${(obj.base ?? obj.lg ?? 0) * S2}px`;
       } else {
-        shimStyle.marginLeft = typeof _ml === "number" ? `${_ml * 4}px` : _ml;
+        shimStyle.marginLeft = typeof _ml === "number" ? `${_ml * S2}px` : _ml;
       }
     }
-    if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * 4}px` : _mr;
+    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 childrenElement = truncated ? /* @__PURE__ */ jsx(TruncatedTextTooltip, { label: children, children: child }) : child;
@@ -1055,7 +920,8 @@ var Badge = React29__default.forwardRef(
       {
         ref,
         className: cn(
-          badgeVariants({ variant, size }),
+          BASE_CLASSES,
+          SIZE_CLASSES2[size],
           COLOR_PALETTE_CLASSES[colorPalette],
           className
         ),
@@ -1074,171 +940,202 @@ var Badge = React29__default.forwardRef(
     return badgeElement;
   }
 );
-var buttonVariants = cva(
-  // base styles (shared across all variants)
-  [
-    "inline-flex items-center justify-center",
-    "gap-0 font-semibold overflow-hidden rounded-md",
-    "cursor-pointer select-none whitespace-nowrap",
-    "transition-colors duration-150",
-    "disabled:opacity-[0.2] disabled:cursor-not-allowed"
-  ],
-  {
-    variants: {
-      variant: {
-        // --- Solid ---
-        solid: [
-          "bg-[var(--color-button-solid-bg)] text-[var(--color-button-solid-text)]",
-          "hover:bg-[var(--color-hover)]",
-          "data-[expanded]:bg-[var(--color-hover)]"
-        ],
-        // --- Solid Danger ---
-        solid_danger: [
-          "bg-red-600 text-[var(--color-button-solid-text)]",
-          "hover:bg-red-500",
-          "data-[expanded]:bg-red-500"
-        ],
-        // --- Outline ---
-        outline: [
-          "border-2 border-solid bg-transparent",
-          "text-[var(--color-button-outline-fg)] border-[var(--color-button-outline-fg)]",
-          "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]"
-        ],
-        // --- Outline Danger ---
-        outline_danger: [
-          "border-2 border-solid bg-transparent",
-          "text-red-600 border-red-600",
-          "hover:bg-transparent hover:text-red-500 hover:border-red-500"
-        ],
-        // --- Dropdown ---
-        dropdown: [
-          "border-2 border-solid bg-transparent",
-          "text-[var(--color-button-dropdown-fg)] border-[var(--color-button-dropdown-border)]",
-          "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
-          "data-[expanded]:bg-transparent data-[expanded]:text-[var(--color-hover)] data-[expanded]:border-[var(--color-hover)]",
-          "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)] data-[selected]:border-transparent",
-          "data-[selected]:hover:bg-[var(--color-selected-control-bg)]",
-          "data-[selected]:hover:text-[var(--color-hover)] data-[selected]:hover:border-transparent",
-          "data-[selected]:data-[expanded]:text-[var(--color-hover)]"
-        ],
-        // --- Header ---
-        header: [
-          "bg-transparent border-2 border-solid",
-          "text-[var(--color-button-header-fg)] border-[var(--color-button-header-border)]",
-          "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
-          // selected
-          "data-[selected]:bg-[var(--color-button-header-bg-selected)]",
-          "data-[selected]:text-[var(--color-button-header-fg-selected)] data-[selected]:border-transparent data-[selected]:border-0",
-          "data-[selected]:hover:bg-[var(--color-button-header-bg-selected)] data-[selected]:hover:text-[var(--color-hover)]",
-          "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
-          // selected + highlighted
-          "data-[selected]:data-[highlighted]:bg-[var(--color-button-header-bg-highlighted)]",
-          "data-[selected]:data-[highlighted]:text-[var(--color-button-header-fg-highlighted)]",
-          "data-[selected]:data-[highlighted]:border-transparent data-[selected]:data-[highlighted]:border-0",
-          "data-[selected]:data-[highlighted]:hover:bg-[var(--color-button-header-bg-highlighted)]",
-          "data-[selected]:data-[highlighted]:hover:text-[var(--color-hover)]",
-          "data-[selected]:data-[highlighted]:data-[expanded]:text-[var(--color-hover)]"
-        ],
-        // --- Hero ---
-        hero: [
-          "bg-[var(--color-button-hero-bg)] text-[var(--color-button-hero-fg)]",
-          "hover:bg-[var(--color-button-hero-bg-hover)] hover:text-[var(--color-button-hero-fg-hover)]",
-          "data-[selected]:bg-[var(--color-button-hero-bg-selected)] data-[selected]:text-[var(--color-button-hero-fg-selected)]",
-          "data-[selected]:hover:bg-[var(--color-button-hero-bg-selected)] data-[selected]:hover:text-[var(--color-hover)]",
-          "data-[selected]:data-[expanded]:text-[var(--color-hover)]"
-        ],
-        // --- Segmented ---
-        segmented: [
-          "bg-transparent border-2 border-solid rounded-none",
-          "text-[var(--color-button-segmented-fg)] border-[var(--color-selected-control-bg)]",
-          "hover:text-[var(--color-hover)]",
-          // selected
-          "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
-          "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-selected-control-text)]",
-          // border collapse: hide right border except when selected; first/last get rounded
-          "[&:not(:last-child)]:border-r-0 data-[selected]:[&:not(:last-child)]:border-r-2",
-          "data-[selected]+*:border-l-0",
-          "first:rounded-l-md last:rounded-r-md"
-        ],
-        // --- Plain ---
-        plain: [
-          "bg-transparent text-inherit border-none",
-          "hover:bg-transparent"
-        ],
-        // --- Subtle ---
-        subtle: [
-          "bg-[var(--color-button-subtle-bg)] text-[var(--color-button-subtle-fg)]",
-          "hover:bg-[var(--color-button-subtle-bg)] hover:text-[var(--color-hover)]",
-          "disabled:bg-[var(--color-button-subtle-bg)] disabled:text-[var(--color-button-subtle-fg)]"
-        ],
-        // --- Link ---
-        link: [
-          "bg-transparent text-[var(--color-link-primary)] border-none font-normal",
-          "px-0 h-auto",
-          "hover:bg-transparent hover:text-[var(--color-link-primary-hover)]",
-          "disabled:text-[var(--color-text-secondary)]"
-        ],
-        // --- Icon Secondary ---
-        icon_secondary: [
-          "bg-transparent text-[var(--color-icon-secondary)] border-none",
-          "hover:text-[var(--color-hover)]",
-          "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
-          "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-hover)]",
-          "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
-          "data-[expanded]:text-[var(--color-hover)]"
-        ],
-        // --- Icon Background ---
-        icon_background: [
-          "bg-[var(--color-button-icon-background-bg)] text-[var(--color-icon-secondary)] border-none",
-          "hover:text-[var(--color-hover)]",
-          "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
-          "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-hover)]",
-          "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
-          "data-[expanded]:text-[var(--color-hover)]"
-        ],
-        // --- Pagination ---
-        pagination: [
-          "border-2 border-solid bg-transparent",
-          "text-[var(--color-button-pagination-fg)] border-[var(--color-button-pagination-border)]",
-          "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
-          "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)] data-[selected]:border-transparent",
-          "data-[selected]:hover:bg-[var(--color-selected-control-bg)]",
-          "data-[selected]:hover:text-[var(--color-selected-control-text)] data-[selected]:hover:border-transparent"
-        ]
-      },
-      size: {
-        "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",
-        md: "px-3 h-10 min-w-10 text-base rounded-md gap-2"
-      }
-    },
-    defaultVariants: {
-      variant: "solid",
-      size: "md"
-    }
-  }
-);
+var SpinnerFrame = styled(View, {
+  name: "ButtonSpinner",
+  render: /* @__PURE__ */ jsx("span", {}),
+  width: 16,
+  height: 16,
+  borderRadius: 1e3,
+  borderWidth: 2,
+  borderColor: "currentColor",
+  borderBottomColor: "transparent",
+  borderLeftColor: "transparent"
+});
 function Spinner({ className }) {
   return /* @__PURE__ */ jsx(
-    "span",
+    SpinnerFrame,
     {
-      className: cn(
-        "inline-block h-4 w-4 animate-spin rounded-full",
-        "border-2 border-current border-b-transparent border-l-transparent",
-        className
-      ),
       role: "status",
-      "aria-label": "Loading"
+      "aria-label": "Loading",
+      className: [
+        "animate-spin",
+        className
+      ].filter(Boolean).join(" ")
     }
   );
 }
+var ButtonFrame = styled(View, {
+  name: "LuxButton",
+  render: /* @__PURE__ */ jsx("button", { type: "button" }),
+  role: "button",
+  tabIndex: 0,
+  cursor: "pointer",
+  userSelect: "none",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 0,
+  overflow: "hidden",
+  borderRadius: 6,
+  // Whitespace nowrap via className since hanzogui doesn't have a direct token
+  // Transition via className
+  variants: {
+    size: {
+      "2xs": { paddingHorizontal: 8, height: 20, minWidth: 20, fontSize: 12, borderRadius: 4, gap: 4 },
+      xs: { paddingHorizontal: 8, height: 24, minWidth: 24, fontSize: 14, borderRadius: 4, gap: 4 },
+      sm: { paddingHorizontal: 12, height: 32, minWidth: 32, fontSize: 14, borderRadius: 6, gap: 4 },
+      md: { paddingHorizontal: 12, height: 40, minWidth: 40, fontSize: 16, borderRadius: 6, gap: 8 }
+    },
+    disabled: {
+      true: {
+        opacity: 0.2,
+        cursor: "not-allowed",
+        pointerEvents: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var VARIANT_CLASSES2 = {
+  solid: [
+    "bg-[var(--color-button-solid-bg)] text-[var(--color-button-solid-text)]",
+    "hover:bg-[var(--color-hover)]",
+    "data-[expanded]:bg-[var(--color-hover)]"
+  ].join(" "),
+  solid_danger: [
+    "bg-red-600 text-[var(--color-button-solid-text)]",
+    "hover:bg-red-500",
+    "data-[expanded]:bg-red-500"
+  ].join(" "),
+  outline: [
+    "border-2 border-solid bg-transparent",
+    "text-[var(--color-button-outline-fg)] border-[var(--color-button-outline-fg)]",
+    "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]"
+  ].join(" "),
+  outline_danger: [
+    "border-2 border-solid bg-transparent",
+    "text-red-600 border-red-600",
+    "hover:bg-transparent hover:text-red-500 hover:border-red-500"
+  ].join(" "),
+  dropdown: [
+    "border-2 border-solid bg-transparent",
+    "text-[var(--color-button-dropdown-fg)] border-[var(--color-button-dropdown-border)]",
+    "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
+    "data-[expanded]:bg-transparent data-[expanded]:text-[var(--color-hover)] data-[expanded]:border-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)] data-[selected]:border-transparent",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)]",
+    "data-[selected]:hover:text-[var(--color-hover)] data-[selected]:hover:border-transparent",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  header: [
+    "bg-transparent border-2 border-solid",
+    "text-[var(--color-button-header-fg)] border-[var(--color-button-header-border)]",
+    "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-button-header-bg-selected)]",
+    "data-[selected]:text-[var(--color-button-header-fg-selected)] data-[selected]:border-transparent data-[selected]:border-0",
+    "data-[selected]:hover:bg-[var(--color-button-header-bg-selected)] data-[selected]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
+    "data-[selected]:data-[highlighted]:bg-[var(--color-button-header-bg-highlighted)]",
+    "data-[selected]:data-[highlighted]:text-[var(--color-button-header-fg-highlighted)]",
+    "data-[selected]:data-[highlighted]:border-transparent data-[selected]:data-[highlighted]:border-0",
+    "data-[selected]:data-[highlighted]:hover:bg-[var(--color-button-header-bg-highlighted)]",
+    "data-[selected]:data-[highlighted]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[highlighted]:data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  hero: [
+    "bg-[var(--color-button-hero-bg)] text-[var(--color-button-hero-fg)]",
+    "hover:bg-[var(--color-button-hero-bg-hover)] hover:text-[var(--color-button-hero-fg-hover)]",
+    "data-[selected]:bg-[var(--color-button-hero-bg-selected)] data-[selected]:text-[var(--color-button-hero-fg-selected)]",
+    "data-[selected]:hover:bg-[var(--color-button-hero-bg-selected)] data-[selected]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  segmented: [
+    "bg-transparent border-2 border-solid rounded-none",
+    "text-[var(--color-button-segmented-fg)] border-[var(--color-selected-control-bg)]",
+    "hover:text-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-selected-control-text)]",
+    "[&:not(:last-child)]:border-r-0 data-[selected]:[&:not(:last-child)]:border-r-2",
+    "data-[selected]+*:border-l-0",
+    "first:rounded-l-md last:rounded-r-md"
+  ].join(" "),
+  plain: "bg-transparent text-inherit border-none hover:bg-transparent",
+  subtle: [
+    "bg-[var(--color-button-subtle-bg)] text-[var(--color-button-subtle-fg)]",
+    "hover:bg-[var(--color-button-subtle-bg)] hover:text-[var(--color-hover)]",
+    "disabled:bg-[var(--color-button-subtle-bg)] disabled:text-[var(--color-button-subtle-fg)]"
+  ].join(" "),
+  link: [
+    "bg-transparent text-[var(--color-link-primary)] border-none font-normal",
+    "px-0 h-auto",
+    "hover:bg-transparent hover:text-[var(--color-link-primary-hover)]",
+    "disabled:text-[var(--color-text-secondary)]"
+  ].join(" "),
+  icon_secondary: [
+    "bg-transparent text-[var(--color-icon-secondary)] border-none",
+    "hover:text-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
+    "data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  icon_background: [
+    "bg-[var(--color-button-icon-background-bg)] text-[var(--color-icon-secondary)] border-none",
+    "hover:text-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
+    "data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  pagination: [
+    "border-2 border-solid bg-transparent",
+    "text-[var(--color-button-pagination-fg)] border-[var(--color-button-pagination-border)]",
+    "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)] data-[selected]:border-transparent",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)]",
+    "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 SP = 4;
+function buildShimStyle(props) {
+  const s = { ...props.style };
+  if (props.mt !== void 0) s.marginTop = typeof props.mt === "number" ? `${props.mt * SP}px` : props.mt;
+  if (props.ml !== void 0) s.marginLeft = typeof props.ml === "number" ? `${props.ml * SP}px` : props.ml;
+  if (props.mr !== void 0) s.marginRight = typeof props.mr === "number" ? `${props.mr * SP}px` : props.mr;
+  if (props.px !== void 0) {
+    const v = typeof props.px === "number" ? `${props.px * SP}px` : props.px;
+    s.paddingLeft = v;
+    s.paddingRight = v;
+  }
+  if (props.py !== void 0) {
+    const v = typeof props.py === "number" ? `${props.py * SP}px` : props.py;
+    s.paddingTop = v;
+    s.paddingBottom = v;
+  }
+  if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
+  if (props.gap !== void 0) s.gap = typeof props.gap === "number" ? `${props.gap * SP}px` : props.gap;
+  if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
+  if (props.columnGap !== void 0) s.columnGap = typeof props.columnGap === "number" ? `${props.columnGap * SP}px` : props.columnGap;
+  if (props.gridColumn !== void 0) s.gridColumn = typeof props.gridColumn === "number" ? String(props.gridColumn) : props.gridColumn;
+  if (props.gridRow) s.gridRow = props.gridRow;
+  if (props.justifySelf) s.justifySelf = props.justifySelf;
+  if (props.alignSelf) s.alignSelf = props.alignSelf;
+  if (props.h) s.height = props.h;
+  if (props.w) s.width = props.w;
+  if (props.display) s.display = props.display;
+  if (props.borderBottomRightRadius !== void 0) s.borderBottomRightRadius = typeof props.borderBottomRightRadius === "number" ? `${props.borderBottomRightRadius}px` : props.borderBottomRightRadius;
+  if (props.borderTopRightRadius !== void 0) s.borderTopRightRadius = typeof props.borderTopRightRadius === "number" ? `${props.borderTopRightRadius}px` : props.borderTopRightRadius;
+  return Object.keys(s).length > 0 ? s : void 0;
+}
 var Button = React29.forwardRef(
   function Button2(props, ref) {
     const {
       className,
-      variant,
-      size,
+      variant = "solid",
+      size = "md",
       asChild = false,
       loading = false,
       loadingText,
@@ -1250,57 +1147,48 @@ var Button = React29.forwardRef(
       children,
       style: styleProp,
       // Strip Chakra style props
-      mt: _mt,
-      ml: _ml,
-      mr: _mr,
-      px: _px,
-      py: _py,
-      fontWeight: _fontWeight,
-      gap: _gap,
-      flexShrink: _flexShrink,
-      columnGap: _columnGap,
-      gridColumn: _gridColumn,
-      gridRow: _gridRow,
-      justifySelf: _justifySelf,
-      alignSelf: _alignSelf,
+      mt,
+      ml,
+      mr,
+      px,
+      py,
+      fontWeight,
+      gap,
+      flexShrink,
+      columnGap,
+      gridColumn,
+      gridRow,
+      justifySelf,
+      alignSelf,
       textStyle: _textStyle,
-      h: _h,
-      w: _w,
-      display: _display,
-      borderBottomRightRadius: _bbrr,
-      borderTopRightRadius: _btrr,
+      h,
+      w,
+      display,
+      borderBottomRightRadius,
+      borderTopRightRadius,
       ...rest
     } = props;
-    const SP = 4;
-    const shimStyle = { ...styleProp };
-    if (_mt !== void 0) shimStyle.marginTop = typeof _mt === "number" ? `${_mt * SP}px` : _mt;
-    if (_ml !== void 0) shimStyle.marginLeft = typeof _ml === "number" ? `${_ml * SP}px` : _ml;
-    if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * SP}px` : _mr;
-    if (_px !== void 0) {
-      const v = typeof _px === "number" ? `${_px * SP}px` : _px;
-      shimStyle.paddingLeft = v;
-      shimStyle.paddingRight = v;
-    }
-    if (_py !== void 0) {
-      const v = typeof _py === "number" ? `${_py * SP}px` : _py;
-      shimStyle.paddingTop = v;
-      shimStyle.paddingBottom = v;
-    }
-    if (_fontWeight !== void 0) shimStyle.fontWeight = _fontWeight;
-    if (_gap !== void 0) shimStyle.gap = typeof _gap === "number" ? `${_gap * SP}px` : _gap;
-    if (_flexShrink !== void 0) shimStyle.flexShrink = _flexShrink;
-    if (_columnGap !== void 0) shimStyle.columnGap = typeof _columnGap === "number" ? `${_columnGap * SP}px` : _columnGap;
-    if (_gridColumn !== void 0) shimStyle.gridColumn = typeof _gridColumn === "number" ? String(_gridColumn) : _gridColumn;
-    if (_gridRow) shimStyle.gridRow = _gridRow;
-    if (_justifySelf) shimStyle.justifySelf = _justifySelf;
-    if (_alignSelf) shimStyle.alignSelf = _alignSelf;
-    if (_h) shimStyle.height = _h;
-    if (_w) shimStyle.width = _w;
-    if (_display) shimStyle.display = _display;
-    if (_bbrr !== void 0) shimStyle.borderBottomRightRadius = typeof _bbrr === "number" ? `${_bbrr}px` : _bbrr;
-    if (_btrr !== void 0) shimStyle.borderTopRightRadius = typeof _btrr === "number" ? `${_btrr}px` : _btrr;
-    const mergedStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
-    const Comp = asChild ? Slot : "button";
+    const mergedStyle = buildShimStyle({
+      style: styleProp,
+      mt,
+      ml,
+      mr,
+      px,
+      py,
+      fontWeight,
+      gap,
+      flexShrink,
+      columnGap,
+      gridColumn,
+      gridRow,
+      justifySelf,
+      alignSelf,
+      h,
+      w,
+      display,
+      borderBottomRightRadius,
+      borderTopRightRadius
+    });
     const dataAttrs = {};
     if (expanded) dataAttrs["data-expanded"] = true;
     if (selected) dataAttrs["data-selected"] = true;
@@ -1309,15 +1197,19 @@ var Button = React29.forwardRef(
     const isDisabled = !loadingSkeleton && (loading || disabled);
     const inner = loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Spinner, {}),
-      loadingText != null && /* @__PURE__ */ jsx("span", { className: "ml-2", children: loadingText })
+      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 button = /* @__PURE__ */ jsx(
-      Comp,
+      ButtonFrame,
       {
         ref,
-        className: cn(buttonVariants({ variant, size }), className),
-        style: mergedStyle,
+        size,
         disabled: isDisabled || void 0,
+        asChild: asChild || void 0,
+        className: combinedClassName,
+        style: mergedStyle,
         ...dataAttrs,
         ...rest,
         children: inner
@@ -1329,6 +1221,17 @@ var Button = React29.forwardRef(
     return button;
   }
 );
+var SIZE_CLASSES3 = {
+  "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",
+  md: "px-3 h-10 min-w-10 text-base rounded-md gap-2"
+};
+function buttonVariants(opts) {
+  const v = opts?.variant ?? "solid";
+  const s = opts?.size ?? "md";
+  return [BASE_CLASSES2, VARIANT_CLASSES2[v] ?? "", SIZE_CLASSES3[s] ?? ""].filter(Boolean).join(" ");
+}
 var ButtonGroup = React29.forwardRef(
   function ButtonGroup2(props, ref) {
     const { className, ...rest } = props;
@@ -1336,7 +1239,7 @@ var ButtonGroup = React29.forwardRef(
       "div",
       {
         ref,
-        className: cn("inline-flex", className),
+        className: ["inline-flex", className].filter(Boolean).join(" "),
         role: "group",
         ...rest
       }
@@ -1377,11 +1280,11 @@ var ButtonGroupRadio = React29.forwardRef(
       "div",
       {
         ref,
-        className: cn(
+        className: [
           "inline-flex gap-0",
-          equalWidth && "grid",
+          equalWidth ? "grid" : "",
           className
-        ),
+        ].filter(Boolean).join(" "),
         style: equalWidth ? { gridTemplateColumns: `repeat(${childrenLength}, 1fr)` } : void 0,
         role: "group",
         ...rest,
@@ -1444,7 +1347,7 @@ var CheckboxGroupBase = React29.forwardRef(
   }
 );
 var CheckboxGroup2 = CheckboxGroupBase;
-var SIZE_CLASSES2 = {
+var SIZE_CLASSES4 = {
   sm: {
     root: "gap-1.5",
     control: "h-3.5 w-3.5 rounded-sm",
@@ -1554,7 +1457,7 @@ var CheckboxBase = React29.forwardRef(
       },
       [readOnly, isControlled, isInGroup, group, value, onCheckedChange, onChange]
     );
-    const sizeClasses2 = SIZE_CLASSES2[size];
+    const sizeClasses2 = SIZE_CLASSES4[size];
     return /* @__PURE__ */ jsxs(
       "label",
       {
@@ -1630,7 +1533,7 @@ function stripUtmParams(url) {
     return url;
   }
 }
-var VARIANT_CLASSES2 = {
+var VARIANT_CLASSES3 = {
   primary: cn(
     "text-[var(--color-link-primary)]",
     "hover:no-underline hover:text-[var(--color-link-primary-hover)]",
@@ -1670,7 +1573,7 @@ var VARIANT_CLASSES2 = {
     "data-[hover]:no-underline"
   )
 };
-var BASE_CLASSES = "inline-flex items-center gap-0 cursor-pointer data-[disabled]:cursor-not-allowed";
+var BASE_CLASSES3 = "inline-flex items-center gap-0 cursor-pointer data-[disabled]:cursor-not-allowed";
 var LinkExternalIcon = ({ color }) => /* @__PURE__ */ jsx(
   ArrowIcon,
   {
@@ -1739,7 +1642,7 @@ var Link = React29__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_CLASSES, VARIANT_CLASSES2[variant], className);
+    const linkClasses = cn(BASE_CLASSES3, VARIANT_CLASSES3[variant], className);
     const linkStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
     if (external) {
       const processedHref = typeof href === "string" ? stripUtmParams(href) : href;
@@ -1828,8 +1731,8 @@ var LinkOverlay = React29__default.forwardRef(
       ...rest
     } = props;
     const overlayClasses = cn(
-      BASE_CLASSES,
-      VARIANT_CLASSES2[variant],
+      BASE_CLASSES3,
+      VARIANT_CLASSES3[variant],
       // Static positioning with a ::before pseudo-element that covers the LinkBox
       "static",
       'before:absolute before:inset-0 before:z-0 before:content-[""]',
@@ -2027,9 +1930,9 @@ function BackToButton({ onClick }) {
     }
   );
 }
-var DialogContext = React29.createContext({ size: "md" });
-function useDialogContext() {
-  return React29.useContext(DialogContext);
+var DialogSizeContext = React29.createContext({ size: "md" });
+function useDialogSizeContext() {
+  return React29.useContext(DialogSizeContext);
 }
 var CONTENT_SIZE_MAP = {
   sm: "max-w-[400px]",
@@ -2059,7 +1962,7 @@ var DialogRoot = ({
   onOpenChange,
   size = "md",
   modal = true
-  // motionPreset is intentionally unused — kept for API compat
+  // motionPreset is intentionally unused -- kept for API compat
 }) => {
   const handleOpenChange = React29.useCallback(
     (nextOpen) => {
@@ -2068,8 +1971,8 @@ var DialogRoot = ({
     [onOpenChange]
   );
   const ctx = React29.useMemo(() => ({ size }), [size]);
-  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
-    RadixDialog.Root,
+  return /* @__PURE__ */ jsx(DialogSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    Dialog,
     {
       open,
       defaultOpen,
@@ -2082,8 +1985,8 @@ var DialogRoot = ({
 var DialogContent = React29.forwardRef(function DialogContent2(props, ref) {
   const {
     children,
-    portalled = true,
-    portalRef,
+    portalled: _portalled = true,
+    portalRef: _portalRef,
     backdrop = true,
     className,
     paddingTop: _paddingTop,
@@ -2094,21 +1997,12 @@ var DialogContent = React29.forwardRef(function DialogContent2(props, ref) {
     ...styleProp,
     ..._paddingTop !== void 0 ? { paddingTop: typeof _paddingTop === "number" ? `${_paddingTop * 4}px` : _paddingTop } : {}
   };
-  const { size } = useDialogContext();
-  let portalProps;
-  if (!portalled) {
-    portalProps = { container: void 0 };
-  } else if (portalRef) {
-    portalProps = { container: portalRef.current };
-  } else {
-    portalProps = {};
-  }
-  const Wrapper = portalled ? RadixDialog.Portal : React29.Fragment;
-  const wrapperProps = portalled ? portalProps : {};
-  return /* @__PURE__ */ jsxs(Wrapper, { ...wrapperProps, children: [
+  const { size } = useDialogSizeContext();
+  return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
     backdrop && /* @__PURE__ */ jsx(
-      RadixDialog.Overlay,
+      Dialog.Overlay,
       {
+        unstyled: true,
         className: "fixed inset-0 z-[1400] bg-black/80"
       }
     ),
@@ -2121,9 +2015,10 @@ var DialogContent = React29.forwardRef(function DialogContent2(props, ref) {
           "overflow-hidden"
         ),
         children: /* @__PURE__ */ jsx(
-          RadixDialog.Content,
+          Dialog.Content,
           {
             ref,
+            unstyled: true,
             className: cn(
               // Base content styles
               "relative flex flex-col w-full p-6 outline-none text-base",
@@ -2146,7 +2041,7 @@ var DialogContent = React29.forwardRef(function DialogContent2(props, ref) {
 });
 var DialogCloseTrigger = React29.forwardRef(function DialogCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
+  return /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
 });
 var DialogHeader = React29.forwardRef(function DialogHeader2(props, ref) {
   const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
@@ -2163,8 +2058,9 @@ var DialogHeader = React29.forwardRef(function DialogHeader2(props, ref) {
       children: [
         startElement,
         /* @__PURE__ */ jsx(
-          RadixDialog.Title,
+          Dialog.Title,
           {
+            unstyled: true,
             className: cn(
               "text-base lg:text-lg font-medium",
               "whitespace-nowrap overflow-hidden text-ellipsis"
@@ -2204,11 +2100,11 @@ var DialogFooter = React29.forwardRef(function DialogFooter2({ className, ...pro
     }
   );
 });
-var DialogBackdrop = RadixDialog.Overlay;
-var DialogTitle = RadixDialog.Title;
-var DialogDescription = RadixDialog.Description;
-var DialogTrigger = RadixDialog.Trigger;
-var DialogActionTrigger = RadixDialog.Close;
+var DialogBackdrop = Dialog.Overlay;
+var DialogTitle = Dialog.Title;
+var DialogDescription = Dialog.Description;
+var DialogTrigger = Dialog.Trigger;
+var DialogActionTrigger = Dialog.Close;
 var DrawerPlacementContext = React29.createContext("right");
 var DrawerSizeContext = React29.createContext("md");
 var DrawerRoot = (props) => {
@@ -2257,7 +2153,7 @@ var PLACEMENT_CLASSES = {
     "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom"
   ].join(" ")
 };
-var SIZE_CLASSES3 = {
+var SIZE_CLASSES5 = {
   right: { xs: "w-60", sm: "w-80", md: "w-96", lg: "w-[480px]", xl: "w-[640px]", full: "w-screen" },
   left: { xs: "w-60", sm: "w-80", md: "w-96", lg: "w-[480px]", xl: "w-[640px]", full: "w-screen" },
   top: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" },
@@ -2286,7 +2182,7 @@ var DrawerContent = React29.forwardRef(
           className: cn(
             "fixed z-50 flex flex-col bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)] duration-300",
             PLACEMENT_CLASSES[placement] ?? PLACEMENT_CLASSES.right,
-            SIZE_CLASSES3[placement]?.[size] ?? SIZE_CLASSES3.right?.md,
+            SIZE_CLASSES5[placement]?.[size] ?? SIZE_CLASSES5.right?.md,
             className
           ),
           ...rest,
@@ -2538,92 +2434,100 @@ var Field = React29.forwardRef(
     );
   }
 );
-var LEVEL_TAG = {
-  "1": "h1",
-  "2": "h2",
-  "3": "h3"
-};
+var LEVEL_TAG = { "1": "h1", "2": "h2", "3": "h3" };
 var LEVEL_CLASSES = {
   "1": "text-[18px] leading-[24px] font-medium lg:text-[32px] lg:leading-[40px] lg:tracking-[-0.5px]",
   "2": "text-[16px] leading-[24px] font-medium lg:text-[24px] lg:leading-[32px]",
   "3": "text-[14px] leading-[20px] font-semibold lg:text-[18px] lg:leading-[24px] lg:font-medium"
 };
-var BASE_CLASSES2 = "font-heading text-heading";
+var BASE_CLASSES4 = "font-heading text-heading";
 var Heading = React29__default.forwardRef(
   function Heading2({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
     const Tag3 = level ? LEVEL_TAG[level] : "h2";
     const levelClasses = level ? LEVEL_CLASSES[level] : void 0;
-    const shimStyle = { ...styleProp };
-    if (mb !== void 0) shimStyle.marginBottom = typeof mb === "number" ? `${mb * 4}px` : mb;
+    const mergedStyle = mb !== void 0 ? { ...styleProp, marginBottom: typeof mb === "number" ? `${mb * 4}px` : mb } : styleProp;
     return /* @__PURE__ */ jsx(
       Tag3,
       {
         ref,
-        className: cn(BASE_CLASSES2, levelClasses, className),
-        style: Object.keys(shimStyle).length > 0 ? shimStyle : void 0,
+        className: cn(BASE_CLASSES4, levelClasses, className),
+        style: mergedStyle,
         ...rest
       }
     );
   }
 );
-var iconButtonVariants = cva(
-  // base
-  [
-    "inline-flex items-center justify-center",
-    "p-0 min-w-auto shrink-0",
-    "cursor-pointer border-0 bg-transparent",
-    "disabled:opacity-[var(--opacity-control-disabled,0.4)] disabled:cursor-not-allowed"
-  ],
-  {
-    variants: {
-      variant: {
-        plain: "bg-transparent text-inherit border-none hover:bg-transparent",
-        icon_secondary: [
-          "bg-transparent text-icon-secondary border-none",
-          "hover:text-hover",
-          "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text",
-          "data-[selected]:hover:text-hover",
-          "data-[expanded]:text-hover"
-        ],
-        icon_background: [
-          "bg-[var(--color-button-icon-background-bg)] text-icon-secondary border-none",
-          "hover:text-hover",
-          "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text",
-          "data-[selected]:hover:text-hover",
-          "data-[expanded]:text-hover"
-        ],
-        link: [
-          "bg-transparent text-link-primary border-none font-normal px-0 h-auto",
-          "hover:bg-transparent hover:text-link-primary-hover",
-          "disabled:text-text-secondary"
-        ],
-        dropdown: [
-          "border-2 border-solid bg-transparent",
-          "text-[var(--color-button-dropdown-fg)] border-[var(--color-button-dropdown-border)]",
-          "hover:bg-transparent hover:text-hover hover:border-hover",
-          "data-[expanded]:bg-transparent data-[expanded]:text-hover data-[expanded]:border-hover",
-          "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text data-[selected]:border-transparent",
-          "data-[selected]:hover:text-hover"
-        ],
-        pagination: [
-          "border-2 border-solid bg-transparent",
-          "text-[var(--color-button-pagination-fg)] border-[var(--color-button-pagination-border)]",
-          "hover:bg-transparent hover:text-hover hover:border-hover",
-          "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text data-[selected]:border-transparent"
-        ]
-      },
-      size: {
-        "2xs": "size-5 rounded-sm [&_svg]:size-5",
-        "2xs_alt": "size-5 rounded-sm [&_svg]:size-3",
-        md: "size-8 rounded-[var(--radius-base,8px)] [&_svg]:size-5"
-      }
+var IconButtonFrame = styled(View, {
+  name: "LuxIconButton",
+  render: /* @__PURE__ */ jsx("button", { type: "button" }),
+  role: "button",
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 0,
+  minWidth: "auto",
+  flexShrink: 1,
+  backgroundColor: "transparent",
+  borderWidth: 0,
+  variants: {
+    size: {
+      "2xs": { width: 20, height: 20, borderRadius: 4 },
+      "2xs_alt": { width: 20, height: 20, borderRadius: 4 },
+      md: { width: 32, height: 32, borderRadius: "var(--radius-base, 8px)" }
     },
-    defaultVariants: {
-      variant: "plain"
+    disabled: {
+      true: {
+        opacity: 0.4,
+        cursor: "not-allowed",
+        pointerEvents: "none"
+      }
     }
   }
-);
-var IconButton = React29__default.forwardRef(
+});
+var VARIANT_CLASSES4 = {
+  plain: "bg-transparent text-inherit border-none hover:bg-transparent",
+  icon_secondary: [
+    "bg-transparent text-icon-secondary border-none",
+    "hover:text-hover",
+    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text",
+    "data-[selected]:hover:text-hover",
+    "data-[expanded]:text-hover"
+  ].join(" "),
+  icon_background: [
+    "bg-[var(--color-button-icon-background-bg)] text-icon-secondary border-none",
+    "hover:text-hover",
+    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text",
+    "data-[selected]:hover:text-hover",
+    "data-[expanded]:text-hover"
+  ].join(" "),
+  link: [
+    "bg-transparent text-link-primary border-none font-normal px-0 h-auto",
+    "hover:bg-transparent hover:text-link-primary-hover",
+    "disabled:text-text-secondary"
+  ].join(" "),
+  dropdown: [
+    "border-2 border-solid bg-transparent",
+    "text-[var(--color-button-dropdown-fg)] border-[var(--color-button-dropdown-border)]",
+    "hover:bg-transparent hover:text-hover hover:border-hover",
+    "data-[expanded]:bg-transparent data-[expanded]:text-hover data-[expanded]:border-hover",
+    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text data-[selected]:border-transparent",
+    "data-[selected]:hover:text-hover"
+  ].join(" "),
+  pagination: [
+    "border-2 border-solid bg-transparent",
+    "text-[var(--color-button-pagination-fg)] border-[var(--color-button-pagination-border)]",
+    "hover:bg-transparent hover:text-hover hover:border-hover",
+    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text data-[selected]:border-transparent"
+  ].join(" ")
+};
+var ICON_SIZE_CLASSES = {
+  "2xs": "[&_svg]:size-5",
+  "2xs_alt": "[&_svg]:size-3",
+  md: "[&_svg]:size-5"
+};
+var SP2 = 4;
+var IconButton = React29.forwardRef(
   function IconButton2(props, ref) {
     const {
       size,
@@ -2636,7 +2540,7 @@ var IconButton = React29__default.forwardRef(
       disabled,
       className,
       children,
-      as: Comp = "button",
+      as: _as,
       style: styleProp,
       // Strip Chakra style props
       boxSize: _boxSize,
@@ -2649,37 +2553,47 @@ var IconButton = React29__default.forwardRef(
       _expanded,
       ...rest
     } = props;
-    const SP = 4;
     const shimStyle = { ...styleProp };
     if (_boxSize !== void 0) {
-      const bs = typeof _boxSize === "number" ? `${_boxSize * SP}px` : _boxSize;
+      const bs = typeof _boxSize === "number" ? `${_boxSize * SP2}px` : _boxSize;
       shimStyle.width = bs;
       shimStyle.height = bs;
     }
     if (_color) shimStyle.color = _color;
     if (_px !== void 0) {
-      const v = typeof _px === "number" ? `${_px * SP}px` : _px;
+      const v = typeof _px === "number" ? `${_px * SP2}px` : _px;
       shimStyle.paddingLeft = v;
       shimStyle.paddingRight = v;
     }
     if (_borderRadius) shimStyle.borderRadius = _borderRadius;
-    if (_ml !== void 0) shimStyle.marginLeft = typeof _ml === "number" ? `${_ml * SP}px` : _ml;
-    if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * SP}px` : _mr;
-    const mergedBtnStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
+    if (_ml !== void 0) shimStyle.marginLeft = typeof _ml === "number" ? `${_ml * SP2}px` : _ml;
+    if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * SP2}px` : _mr;
+    const mergedStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
+    const variantClass = VARIANT_CLASSES4[variant] ?? VARIANT_CLASSES4.plain;
+    const iconSizeClass = size ? ICON_SIZE_CLASSES[size] ?? "" : "";
+    const combinedClassName = [variantClass, iconSizeClass, className].filter(Boolean).join(" ");
     const button = /* @__PURE__ */ jsx(
-      Comp,
+      IconButtonFrame,
       {
         ref,
-        type: Comp === "button" ? "button" : void 0,
-        disabled: !loadingSkeleton && (loading || disabled),
-        className: cn(iconButtonVariants({ variant, size }), className),
-        style: mergedBtnStyle,
+        size,
+        disabled: !loadingSkeleton && (loading || disabled) || void 0,
+        render: _as ? React29.createElement(_as) : void 0,
+        className: combinedClassName,
+        style: mergedStyle,
         ...expanded ? { "data-expanded": true } : {},
         ...selected ? { "data-selected": true } : {},
         ...highlighted ? { "data-highlighted": true } : {},
         ...loadingSkeleton ? { "data-loading-skeleton": true } : {},
         ...rest,
-        children: loading ? /* @__PURE__ */ jsx("span", { className: "inline-block size-5 animate-spin rounded-full border-2 border-current border-b-transparent border-l-transparent" }) : children
+        children: loading ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "inline-block size-5 animate-spin rounded-full border-2 border-current border-b-transparent border-l-transparent",
+            role: "status",
+            "aria-label": "Loading"
+          }
+        ) : children
       }
     );
     if (loadingSkeleton) {
@@ -3495,8 +3409,7 @@ var PopoverRoot = (props) => {
     positioning,
     autoFocus = false,
     closeOnInteractOutside = true,
-    modal = false,
-    // lazyMount and unmountOnExit are handled via forceMount on Portal/Content
+    // lazyMount and unmountOnExit are handled via keepChildrenMounted
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     lazyMount: _lazyMount,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -3532,23 +3445,27 @@ var PopoverRoot = (props) => {
   const handleOpenChange = React29.useCallback((isOpen) => {
     onOpenChange?.({ open: isOpen });
   }, [onOpenChange]);
+  const placement = mergedPositioning.placement ?? "bottom-start";
+  const offset = mergedPositioning.offset?.mainAxis ?? 4;
   return /* @__PURE__ */ jsx(PositioningContext2.Provider, { value: positioningValue, children: /* @__PURE__ */ jsx(
-    RadixPopover.Root,
+    Popover,
     {
       open,
       defaultOpen,
       onOpenChange: handleOpenChange,
-      modal,
+      placement,
+      offset,
+      disableFocus: !autoFocus,
       children
     }
   ) });
 };
 var PopoverTrigger = React29.forwardRef(function PopoverTrigger2(props, ref) {
   const { asChild = true, ...rest } = props;
-  return /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild, ref, ...rest });
+  return /* @__PURE__ */ jsx(Popover.Trigger, { asChild: asChild ? "except-style" : void 0, ref, ...rest });
 });
 var PopoverContent = React29.forwardRef(function PopoverContent2(props, ref) {
-  const { portalled = true, portalRef, className, w, minW, maxW, paddingTop, style: styleProp, ...rest } = props;
+  const { portalled = true, portalRef: _portalRef, className, w, minW, maxW, paddingTop, style: styleProp, ...rest } = props;
   const resolvedW = typeof w === "object" ? w.base ?? w.lg : w;
   const contentStyle = {
     ...styleProp,
@@ -3557,20 +3474,11 @@ var PopoverContent = React29.forwardRef(function PopoverContent2(props, ref) {
     ...maxW ? { maxWidth: maxW } : {},
     ...paddingTop !== void 0 ? { paddingTop: typeof paddingTop === "number" ? `${paddingTop * 4}px` : paddingTop } : {}
   };
-  const positioning = React29.useContext(PositioningContext2);
-  const preventFocus = React29.useCallback((e) => e.preventDefault(), []);
-  const preventInteract = React29.useCallback((e) => e.preventDefault(), []);
-  const content = /* @__PURE__ */ jsx(
-    RadixPopover.Content,
+  return /* @__PURE__ */ jsx(
+    Popover.Content,
     {
       ref,
-      side: positioning.side,
-      align: positioning.align,
-      sideOffset: positioning.sideOffset,
-      alignOffset: positioning.alignOffset,
-      collisionPadding: positioning.collisionPadding,
-      onOpenAutoFocus: positioning.autoFocus ? void 0 : preventFocus,
-      onInteractOutside: positioning.closeOnInteractOutside ? void 0 : preventInteract,
+      unstyled: true,
       className: cn(
         "z-50 rounded-lg border border-[var(--color-popover-border,var(--color-border-divider))]",
         "bg-[var(--color-popover-bg,var(--color-dialog-bg))]",
@@ -3586,17 +3494,14 @@ var PopoverContent = React29.forwardRef(function PopoverContent2(props, ref) {
       ...rest
     }
   );
-  if (!portalled) {
-    return content;
-  }
-  return /* @__PURE__ */ jsx(RadixPopover.Portal, { container: portalRef?.current ?? void 0, children: content });
 });
 var PopoverArrow = React29.forwardRef(function PopoverArrow2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    RadixPopover.Arrow,
+    Popover.Arrow,
     {
       ref,
+      unstyled: true,
       className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
       ...rest
     }
@@ -3605,8 +3510,9 @@ var PopoverArrow = React29.forwardRef(function PopoverArrow2(props, ref) {
 var PopoverCloseTrigger = React29.forwardRef(function PopoverCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    RadixPopover.Close,
+    Popover.Close,
     {
+      unstyled: true,
       className: cn("absolute top-1 right-1", className),
       ...rest,
       asChild: true,
@@ -3620,7 +3526,7 @@ var PopoverCloseTriggerWrapper = React29.forwardRef(function PopoverCloseTrigger
   if (disabled) {
     return children;
   }
-  return /* @__PURE__ */ jsx(RadixPopover.Close, { ref, ...rest, asChild: true, children });
+  return /* @__PURE__ */ jsx(Popover.Close, { ref, ...rest, asChild: true, children });
 });
 var PopoverBody = React29.forwardRef(function PopoverBody2(props, ref) {
   const {
@@ -3704,7 +3610,7 @@ var PopoverDescription = React29.forwardRef(function PopoverDescription2(props,
     }
   );
 });
-var SIZE_CLASSES4 = {
+var SIZE_CLASSES6 = {
   sm: "h-1",
   md: "h-2",
   lg: "h-3",
@@ -3762,7 +3668,7 @@ var Progress = React29.forwardRef(
             className: cn(
               "w-full overflow-hidden rounded-full",
               "bg-[var(--color-progress-track)]",
-              SIZE_CLASSES4[size],
+              SIZE_CLASSES6[size],
               trackProps?.className
             ),
             style: trackStyle,
@@ -3901,7 +3807,7 @@ var ProgressCircleValueText = React29.forwardRef(function ProgressCircleValueTex
     }
   );
 });
-var SIZE_CLASSES5 = {
+var SIZE_CLASSES7 = {
   xs: {
     root: "gap-1.5",
     control: "h-3 w-3",
@@ -3982,7 +3888,7 @@ var RadioBase = React29.forwardRef(
   function Radio(props, ref) {
     const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
     const size = React29.useContext(RadioSizeContext);
-    const sizeClasses2 = SIZE_CLASSES5[size];
+    const sizeClasses2 = SIZE_CLASSES7[size];
     return /* @__PURE__ */ jsxs(
       "label",
       {
@@ -4497,7 +4403,7 @@ var SelectAsync = React29.forwardRef((props, ref) => {
     }
   );
 });
-var VARIANT_CLASSES3 = {
+var VARIANT_CLASSES5 = {
   solid: "border-solid",
   dashed: "border-dashed",
   dotted: "border-dotted"
@@ -4526,7 +4432,7 @@ var Separator2 = React29__default.forwardRef(
         className: cn(
           "border-[var(--color-border-divider)]",
           "border-0",
-          VARIANT_CLASSES3[variant],
+          VARIANT_CLASSES5[variant],
           isVertical ? VERTICAL_SIZE_CLASSES[size] : HORIZONTAL_SIZE_CLASSES[size],
           isVertical ? "self-stretch h-auto w-0" : "w-full",
           className
@@ -4640,7 +4546,7 @@ function SliderMarks(props) {
 }
 var NOOP3 = () => {
 };
-var SIZE_CLASSES6 = {
+var SIZE_CLASSES8 = {
   sm: {
     root: "h-4 w-7",
     thumb: "h-3 w-3 data-[state=checked]:translate-x-3",
@@ -4690,7 +4596,7 @@ var SwitchBase = React29.forwardRef(
       },
       [isControlled, onCheckedChange]
     );
-    const sizeClasses2 = SIZE_CLASSES6[size];
+    const sizeClasses2 = SIZE_CLASSES8[size];
     const isRtl = direction === "rtl";
     return /* @__PURE__ */ jsxs(
       "label",
@@ -4766,11 +4672,11 @@ var SwitchBase = React29.forwardRef(
 );
 var Switch2 = SwitchBase;
 var ArrowIcon3 = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M5 12h14M12 5l7 7-7 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var SPACING_SCALE2 = 4;
+var SPACING_SCALE = 4;
 function toPixels(value) {
   if (value === void 0) return void 0;
   if (typeof value === "string") return value;
-  return `${value * SPACING_SCALE2}px`;
+  return `${value * SPACING_SCALE}px`;
 }
 function extractStyles(props) {
   const style = {};
@@ -5613,7 +5519,7 @@ var Toaster = () => {
     }
   );
 };
-function Provider2(props) {
+function Provider(props) {
   return /* @__PURE__ */ jsx(ColorModeProvider, { ...props });
 }
 function fmt(n, decimals = 2) {
@@ -7134,4 +7040,4 @@ var BankPage = styled(View, {
   padding: 16
 });
 
-export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, Alert, Avatar, AvatarGroup, Badge, BankAlert, BankAlertText, BankButton, BankButtonText, BankCard, BankDivider, BankField, BankHeading, BankInput, BankPage, BankPinBox, BankText, Button, ButtonGroup, ButtonGroupRadio, Checkbox2 as Checkbox, CheckboxGroup2 as CheckboxGroup, CloseButton, CollapsibleDetails, CollapsibleList, ColorModeProvider, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, DrawerTitle, DrawerTrigger, EmptyState, ExpirationSelector, Field, GreeksDisplay, Heading, IconButton, Image2 as Image, Input, InputGroup, Link, LinkBox, LinkExternalIcon, LinkOverlay, MenuArrow, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, OptionChain, OptionPositionCard, PinInput, PnlDiagram, PopoverArrow, PopoverBody, PopoverCloseTrigger, PopoverCloseTriggerWrapper, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger, Progress, ProgressCircleRing, ProgressCircleRoot, ProgressCircleValueText, Provider2 as Provider, Radio2 as Radio, RadioGroup3 as RadioGroup, Rating, Select, SelectAsync, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectValueText, Separator2 as Separator, Skeleton, SkeletonCircle, SkeletonText, Slider, StrategyBuilder, Switch2 as Switch, TableBody, TableCaption, TableCell, TableColumnHeader, TableColumnHeaderSortable, TableFooter, TableHeader, TableHeaderSticky, TableRoot, TableRow, TableScrollWrapper, TabsContent, TabsCounter, TabsList, TabsRoot, TabsTrigger, Tag, Textarea, Toaster, Tooltip, bankColors, buttonVariants, cn, createListCollection, toaster, useAccordion, useColorMode, useColorModeValue };
+export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, Alert, Avatar, AvatarGroup, Badge, BankAlert, BankAlertText, BankButton, BankButtonText, BankCard, BankDivider, BankField, BankHeading, BankInput, BankPage, BankPinBox, BankText, Button, ButtonGroup, ButtonGroupRadio, Checkbox2 as Checkbox, CheckboxGroup2 as CheckboxGroup, CloseButton, CollapsibleDetails, CollapsibleList, ColorModeProvider, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, DrawerTitle, DrawerTrigger, EmptyState, ExpirationSelector, Field, GreeksDisplay, Heading, IconButton, Image2 as Image, Input, InputGroup, Link, LinkBox, LinkExternalIcon, LinkOverlay, MenuArrow, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, OptionChain, OptionPositionCard, PinInput, PnlDiagram, PopoverArrow, PopoverBody, PopoverCloseTrigger, PopoverCloseTriggerWrapper, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger, Progress, ProgressCircleRing, ProgressCircleRoot, ProgressCircleValueText, Provider, Radio2 as Radio, RadioGroup3 as RadioGroup, Rating, Select, SelectAsync, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectValueText, Separator2 as Separator, Skeleton, SkeletonCircle, SkeletonText, Slider, StrategyBuilder, Switch2 as Switch, TableBody, TableCaption, TableCell, TableColumnHeader, TableColumnHeaderSortable, TableFooter, TableHeader, TableHeaderSticky, TableRoot, TableRow, TableScrollWrapper, TabsContent, TabsCounter, TabsList, TabsRoot, TabsTrigger, Tag, Textarea, Toaster, Tooltip, bankColors, buttonVariants, cn, createListCollection, toaster, useAccordion, useColorMode, useColorModeValue };