@luxfi/ui 7.0.0 → 7.1.0

package/dist/index.cjs

@@ -7,18 +7,19 @@ var AccordionPrimitive = require('@radix-ui/react-accordion');
 var React29 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
+var core = require('@hanzogui/core');
 var RadixAvatar = require('@radix-ui/react-avatar');
-var RadixTooltip = require('@radix-ui/react-tooltip');
+var tooltip = require('@hanzogui/tooltip');
 var usehooks = require('@uidotdev/usehooks');
-var reactSlot = require('@radix-ui/react-slot');
 var RadixCheckbox = require('@radix-ui/react-checkbox');
 var Collapsible = require('@radix-ui/react-collapsible');
+var dialog = require('@hanzogui/dialog');
 var RadixDialog = require('@radix-ui/react-dialog');
 var LabelPrimitive = require('@radix-ui/react-label');
 var esToolkit = require('es-toolkit');
 var DropdownMenu = require('@radix-ui/react-dropdown-menu');
 var lu = require('react-icons/lu');
-var RadixPopover = require('@radix-ui/react-popover');
+var popover = require('@hanzogui/popover');
 var RadixProgress = require('@radix-ui/react-progress');
 var RadixRadioGroup = require('@radix-ui/react-radio-group');
 var RadixSelect = require('@radix-ui/react-select');
@@ -26,7 +27,6 @@ var RadixSlider = require('@radix-ui/react-slider');
 var RadixSwitch = require('@radix-ui/react-switch');
 var RadixTabs = require('@radix-ui/react-tabs');
 var sonner = require('sonner');
-var core = require('@hanzogui/core');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -49,13 +49,11 @@ function _interopNamespace(e) {
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var React29__namespace = /*#__PURE__*/_interopNamespace(React29);
 var RadixAvatar__namespace = /*#__PURE__*/_interopNamespace(RadixAvatar);
-var RadixTooltip__namespace = /*#__PURE__*/_interopNamespace(RadixTooltip);
 var RadixCheckbox__namespace = /*#__PURE__*/_interopNamespace(RadixCheckbox);
 var Collapsible__namespace = /*#__PURE__*/_interopNamespace(Collapsible);
 var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
-var RadixPopover__namespace = /*#__PURE__*/_interopNamespace(RadixPopover);
 var RadixProgress__namespace = /*#__PURE__*/_interopNamespace(RadixProgress);
 var RadixRadioGroup__namespace = /*#__PURE__*/_interopNamespace(RadixRadioGroup);
 var RadixSelect__namespace = /*#__PURE__*/_interopNamespace(RadixSelect);
@@ -241,24 +239,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 = core.styled(core.View, {
+  name: "LuxCloseButton",
+  render: /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
         "svg",
@@ -279,272 +300,137 @@ var CloseButton = React29__namespace.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__namespace.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__namespace.isValidElement(children)) {
-        return children;
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: finalClassName, style: mergedStyle, ...htmlRest, children });
+      if (asChild && React29__namespace.isValidElement(children)) return children;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
     }
     if (asChild && React29__namespace.isValidElement(children)) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -552,13 +438,7 @@ var Skeleton = React29__namespace.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
@@ -570,13 +450,7 @@ var Skeleton = React29__namespace.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
@@ -886,6 +760,10 @@ function useIsMobile() {
   }, []);
   return isMobile;
 }
+function mapPlacement(p) {
+  if (!p) return void 0;
+  return p;
+}
 var Tooltip = React29__namespace.forwardRef(
   function Tooltip2(props, ref) {
     const {
@@ -896,10 +774,8 @@ var Tooltip = React29__namespace.forwardRef(
       children,
       disabled,
       disableOnMobile,
-      portalled = true,
       content,
       contentProps,
-      portalRef,
       defaultOpen = false,
       triggerProps,
       closeDelay = 100,
@@ -947,36 +823,34 @@ var Tooltip = React29__namespace.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__ */ jsxRuntime.jsx(RadixTooltip__namespace.Provider, { delayDuration: openDelay, skipDelayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixTooltip__namespace.Root,
+    const placement = mapPlacement(positioning?.placement) ?? "top";
+    const offset = positioning?.offset?.mainAxis ?? 4;
+    return /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      tooltip.Tooltip,
       {
         open,
         onOpenChange: handleOpenChange,
-        delayDuration: openDelay,
+        delay: { open: openDelay, close: closeDelay },
+        placement,
+        offset,
+        unstyled: true,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            RadixTooltip__namespace.Trigger,
+            tooltip.Tooltip.Trigger,
             {
               ref: open ? triggerRef : void 0,
               asChild: true,
-              onClick: isMobile ? handleTriggerClick : void 0,
+              ...isMobile ? { onPress: handleTriggerClick } : {},
               ...triggerProps,
               children
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(RadixTooltip__namespace.Portal, { container: portalled ? portalRef?.current ?? void 0 : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
-            RadixTooltip__namespace.Content,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            tooltip.Tooltip.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",
@@ -985,12 +859,14 @@ var Tooltip = React29__namespace.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__ */ jsxRuntime.jsx(
-                  RadixTooltip__namespace.Arrow,
+                  tooltip.Tooltip.Arrow,
                   {
+                    unstyled: true,
                     className: cn(
                       isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
                     )
@@ -999,7 +875,7 @@ var Tooltip = React29__namespace.forwardRef(
                 content
               ]
             }
-          ) })
+          )
         ]
       }
     ) });
@@ -1008,26 +884,12 @@ var Tooltip = React29__namespace.forwardRef(
 function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
-var badgeVariants = classVarianceAuthority.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",
@@ -1052,6 +914,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__namespace.default.forwardRef(
   function Badge2(props, ref) {
     const {
@@ -1060,8 +923,8 @@ var Badge = React29__namespace.default.forwardRef(
       children,
       truncated = false,
       endElement,
-      variant,
-      size,
+      variant: _variant,
+      size = "md",
       colorPalette = "gray",
       className,
       flexShrink: _flexShrink,
@@ -1073,16 +936,16 @@ var Badge = React29__namespace.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__ */ jsxRuntime.jsx("span", { className: "overflow-hidden text-ellipsis", children }) : null;
     const childrenElement = truncated ? /* @__PURE__ */ jsxRuntime.jsx(TruncatedTextTooltip, { label: children, children: child }) : child;
@@ -1091,7 +954,8 @@ var Badge = React29__namespace.default.forwardRef(
       {
         ref,
         className: cn(
-          badgeVariants({ variant, size }),
+          BASE_CLASSES,
+          SIZE_CLASSES2[size],
           COLOR_PALETTE_CLASSES[colorPalette],
           className
         ),
@@ -1110,171 +974,202 @@ var Badge = React29__namespace.default.forwardRef(
     return badgeElement;
   }
 );
-var buttonVariants = classVarianceAuthority.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 = core.styled(core.View, {
+  name: "ButtonSpinner",
+  render: /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+  width: 16,
+  height: 16,
+  borderRadius: 1e3,
+  borderWidth: 2,
+  borderColor: "currentColor",
+  borderBottomColor: "transparent",
+  borderLeftColor: "transparent"
+});
 function Spinner({ className }) {
   return /* @__PURE__ */ jsxRuntime.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 = core.styled(core.View, {
+  name: "LuxButton",
+  render: /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(
   function Button2(props, ref) {
     const {
       className,
-      variant,
-      size,
+      variant = "solid",
+      size = "md",
       asChild = false,
       loading = false,
       loadingText,
@@ -1286,57 +1181,48 @@ var Button = React29__namespace.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 ? reactSlot.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;
@@ -1345,15 +1231,19 @@ var Button = React29__namespace.forwardRef(
     const isDisabled = !loadingSkeleton && (loading || disabled);
     const inner = loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
-      loadingText != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: loadingText })
+      loadingText != null && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
@@ -1365,6 +1255,17 @@ var Button = React29__namespace.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__namespace.forwardRef(
   function ButtonGroup2(props, ref) {
     const { className, ...rest } = props;
@@ -1372,7 +1273,7 @@ var ButtonGroup = React29__namespace.forwardRef(
       "div",
       {
         ref,
-        className: cn("inline-flex", className),
+        className: ["inline-flex", className].filter(Boolean).join(" "),
         role: "group",
         ...rest
       }
@@ -1413,11 +1314,11 @@ var ButtonGroupRadio = React29__namespace.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,
@@ -1480,7 +1381,7 @@ var CheckboxGroupBase = React29__namespace.forwardRef(
   }
 );
 var CheckboxGroup2 = CheckboxGroupBase;
-var SIZE_CLASSES2 = {
+var SIZE_CLASSES4 = {
   sm: {
     root: "gap-1.5",
     control: "h-3.5 w-3.5 rounded-sm",
@@ -1590,7 +1491,7 @@ var CheckboxBase = React29__namespace.forwardRef(
       },
       [readOnly, isControlled, isInGroup, group, value, onCheckedChange, onChange]
     );
-    const sizeClasses2 = SIZE_CLASSES2[size];
+    const sizeClasses2 = SIZE_CLASSES4[size];
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
@@ -1666,7 +1567,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)]",
@@ -1706,7 +1607,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__ */ jsxRuntime.jsx(
   ArrowIcon,
   {
@@ -1775,7 +1676,7 @@ var Link = React29__namespace.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;
@@ -1864,8 +1765,8 @@ var LinkOverlay = React29__namespace.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-[""]',
@@ -2063,9 +1964,9 @@ function BackToButton({ onClick }) {
     }
   );
 }
-var DialogContext = React29__namespace.createContext({ size: "md" });
-function useDialogContext() {
-  return React29__namespace.useContext(DialogContext);
+var DialogSizeContext = React29__namespace.createContext({ size: "md" });
+function useDialogSizeContext() {
+  return React29__namespace.useContext(DialogSizeContext);
 }
 var CONTENT_SIZE_MAP = {
   sm: "max-w-[400px]",
@@ -2095,7 +1996,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__namespace.useCallback(
     (nextOpen) => {
@@ -2104,8 +2005,8 @@ var DialogRoot = ({
     [onOpenChange]
   );
   const ctx = React29__namespace.useMemo(() => ({ size }), [size]);
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
-    RadixDialog__namespace.Root,
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog,
     {
       open,
       defaultOpen,
@@ -2118,8 +2019,8 @@ var DialogRoot = ({
 var DialogContent = React29__namespace.forwardRef(function DialogContent2(props, ref) {
   const {
     children,
-    portalled = true,
-    portalRef,
+    portalled: _portalled = true,
+    portalRef: _portalRef,
     backdrop = true,
     className,
     paddingTop: _paddingTop,
@@ -2130,21 +2031,12 @@ var DialogContent = React29__namespace.forwardRef(function DialogContent2(props,
     ...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__namespace.Portal : React29__namespace.Fragment;
-  const wrapperProps = portalled ? portalProps : {};
-  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { ...wrapperProps, children: [
+  const { size } = useDialogSizeContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
     backdrop && /* @__PURE__ */ jsxRuntime.jsx(
-      RadixDialog__namespace.Overlay,
+      dialog.Dialog.Overlay,
       {
+        unstyled: true,
         className: "fixed inset-0 z-[1400] bg-black/80"
       }
     ),
@@ -2157,9 +2049,10 @@ var DialogContent = React29__namespace.forwardRef(function DialogContent2(props,
           "overflow-hidden"
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          RadixDialog__namespace.Content,
+          dialog.Dialog.Content,
           {
             ref,
+            unstyled: true,
             className: cn(
               // Base content styles
               "relative flex flex-col w-full p-6 outline-none text-base",
@@ -2182,7 +2075,7 @@ var DialogContent = React29__namespace.forwardRef(function DialogContent2(props,
 });
 var DialogCloseTrigger = React29__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
 });
 var DialogHeader = React29__namespace.forwardRef(function DialogHeader2(props, ref) {
   const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
@@ -2199,8 +2092,9 @@ var DialogHeader = React29__namespace.forwardRef(function DialogHeader2(props, r
       children: [
         startElement,
         /* @__PURE__ */ jsxRuntime.jsx(
-          RadixDialog__namespace.Title,
+          dialog.Dialog.Title,
           {
+            unstyled: true,
             className: cn(
               "text-base lg:text-lg font-medium",
               "whitespace-nowrap overflow-hidden text-ellipsis"
@@ -2240,11 +2134,11 @@ var DialogFooter = React29__namespace.forwardRef(function DialogFooter2({ classN
     }
   );
 });
-var DialogBackdrop = RadixDialog__namespace.Overlay;
-var DialogTitle = RadixDialog__namespace.Title;
-var DialogDescription = RadixDialog__namespace.Description;
-var DialogTrigger = RadixDialog__namespace.Trigger;
-var DialogActionTrigger = RadixDialog__namespace.Close;
+var DialogBackdrop = dialog.Dialog.Overlay;
+var DialogTitle = dialog.Dialog.Title;
+var DialogDescription = dialog.Dialog.Description;
+var DialogTrigger = dialog.Dialog.Trigger;
+var DialogActionTrigger = dialog.Dialog.Close;
 var DrawerPlacementContext = React29__namespace.createContext("right");
 var DrawerSizeContext = React29__namespace.createContext("md");
 var DrawerRoot = (props) => {
@@ -2293,7 +2187,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" },
@@ -2322,7 +2216,7 @@ var DrawerContent = React29__namespace.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,
@@ -2574,92 +2468,100 @@ var Field = React29__namespace.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__namespace.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__ */ jsxRuntime.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 = classVarianceAuthority.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 = core.styled(core.View, {
+  name: "LuxIconButton",
+  render: /* @__PURE__ */ jsxRuntime.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__namespace.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__namespace.forwardRef(
   function IconButton2(props, ref) {
     const {
       size,
@@ -2672,7 +2574,7 @@ var IconButton = React29__namespace.default.forwardRef(
       disabled,
       className,
       children,
-      as: Comp = "button",
+      as: _as,
       style: styleProp,
       // Strip Chakra style props
       boxSize: _boxSize,
@@ -2685,37 +2587,47 @@ var IconButton = React29__namespace.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__ */ jsxRuntime.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__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -3531,8 +3443,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
@@ -3568,23 +3479,27 @@ var PopoverRoot = (props) => {
   const handleOpenChange = React29__namespace.useCallback((isOpen) => {
     onOpenChange?.({ open: isOpen });
   }, [onOpenChange]);
+  const placement = mergedPositioning.placement ?? "bottom-start";
+  const offset = mergedPositioning.offset?.mainAxis ?? 4;
   return /* @__PURE__ */ jsxRuntime.jsx(PositioningContext2.Provider, { value: positioningValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-    RadixPopover__namespace.Root,
+    popover.Popover,
     {
       open,
       defaultOpen,
       onOpenChange: handleOpenChange,
-      modal,
+      placement,
+      offset,
+      disableFocus: !autoFocus,
       children
     }
   ) });
 };
 var PopoverTrigger = React29__namespace.forwardRef(function PopoverTrigger2(props, ref) {
   const { asChild = true, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Trigger, { asChild, ref, ...rest });
+  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { asChild: asChild ? "except-style" : void 0, ref, ...rest });
 });
 var PopoverContent = React29__namespace.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,
@@ -3593,20 +3508,11 @@ var PopoverContent = React29__namespace.forwardRef(function PopoverContent2(prop
     ...maxW ? { maxWidth: maxW } : {},
     ...paddingTop !== void 0 ? { paddingTop: typeof paddingTop === "number" ? `${paddingTop * 4}px` : paddingTop } : {}
   };
-  const positioning = React29__namespace.useContext(PositioningContext2);
-  const preventFocus = React29__namespace.useCallback((e) => e.preventDefault(), []);
-  const preventInteract = React29__namespace.useCallback((e) => e.preventDefault(), []);
-  const content = /* @__PURE__ */ jsxRuntime.jsx(
-    RadixPopover__namespace.Content,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    popover.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))]",
@@ -3622,17 +3528,14 @@ var PopoverContent = React29__namespace.forwardRef(function PopoverContent2(prop
       ...rest
     }
   );
-  if (!portalled) {
-    return content;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
 });
 var PopoverArrow = React29__namespace.forwardRef(function PopoverArrow2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    RadixPopover__namespace.Arrow,
+    popover.Popover.Arrow,
     {
       ref,
+      unstyled: true,
       className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
       ...rest
     }
@@ -3641,8 +3544,9 @@ var PopoverArrow = React29__namespace.forwardRef(function PopoverArrow2(props, r
 var PopoverCloseTrigger = React29__namespace.forwardRef(function PopoverCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    RadixPopover__namespace.Close,
+    popover.Popover.Close,
     {
+      unstyled: true,
       className: cn("absolute top-1 right-1", className),
       ...rest,
       asChild: true,
@@ -3656,7 +3560,7 @@ var PopoverCloseTriggerWrapper = React29__namespace.forwardRef(function PopoverC
   if (disabled) {
     return children;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Close, { ref, ...rest, asChild: true, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Close, { ref, ...rest, asChild: true, children });
 });
 var PopoverBody = React29__namespace.forwardRef(function PopoverBody2(props, ref) {
   const {
@@ -3740,7 +3644,7 @@ var PopoverDescription = React29__namespace.forwardRef(function PopoverDescripti
     }
   );
 });
-var SIZE_CLASSES4 = {
+var SIZE_CLASSES6 = {
   sm: "h-1",
   md: "h-2",
   lg: "h-3",
@@ -3798,7 +3702,7 @@ var Progress = React29__namespace.forwardRef(
             className: cn(
               "w-full overflow-hidden rounded-full",
               "bg-[var(--color-progress-track)]",
-              SIZE_CLASSES4[size],
+              SIZE_CLASSES6[size],
               trackProps?.className
             ),
             style: trackStyle,
@@ -3937,7 +3841,7 @@ var ProgressCircleValueText = React29__namespace.forwardRef(function ProgressCir
     }
   );
 });
-var SIZE_CLASSES5 = {
+var SIZE_CLASSES7 = {
   xs: {
     root: "gap-1.5",
     control: "h-3 w-3",
@@ -4018,7 +3922,7 @@ var RadioBase = React29__namespace.forwardRef(
   function Radio(props, ref) {
     const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
     const size = React29__namespace.useContext(RadioSizeContext);
-    const sizeClasses2 = SIZE_CLASSES5[size];
+    const sizeClasses2 = SIZE_CLASSES7[size];
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
@@ -4533,7 +4437,7 @@ var SelectAsync = React29__namespace.forwardRef((props, ref) => {
     }
   );
 });
-var VARIANT_CLASSES3 = {
+var VARIANT_CLASSES5 = {
   solid: "border-solid",
   dashed: "border-dashed",
   dotted: "border-dotted"
@@ -4562,7 +4466,7 @@ var Separator2 = React29__namespace.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
@@ -4676,7 +4580,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",
@@ -4726,7 +4630,7 @@ var SwitchBase = React29__namespace.forwardRef(
       },
       [isControlled, onCheckedChange]
     );
-    const sizeClasses2 = SIZE_CLASSES6[size];
+    const sizeClasses2 = SIZE_CLASSES8[size];
     const isRtl = direction === "rtl";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
@@ -4802,11 +4706,11 @@ var SwitchBase = React29__namespace.forwardRef(
 );
 var Switch2 = SwitchBase;
 var ArrowIcon3 = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.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 = {};
@@ -5649,7 +5553,7 @@ var Toaster = () => {
     }
   );
 };
-function Provider2(props) {
+function Provider(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(ColorModeProvider, { ...props });
 }
 function fmt(n, decimals = 2) {
@@ -7264,7 +7168,7 @@ exports.Progress = Progress;
 exports.ProgressCircleRing = ProgressCircleRing;
 exports.ProgressCircleRoot = ProgressCircleRoot;
 exports.ProgressCircleValueText = ProgressCircleValueText;
-exports.Provider = Provider2;
+exports.Provider = Provider;
 exports.Radio = Radio2;
 exports.RadioGroup = RadioGroup3;
 exports.Rating = Rating;