@luxfi/ui 7.4.14 → 8.0.0

package/dist/index.cjs

@@ -4,11 +4,11 @@
 var gui = require('@hanzo/gui');
 var reactQuery = require('@tanstack/react-query');
 var React32 = require('react');
+var guiConfig = require('@hanzo/ui/gui-config');
 var v5 = require('@hanzogui/config/v5');
 var v5Css = require('@hanzogui/config/v5-css');
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
+var ui = require('@hanzo/ui');
 var lucideReact = require('lucide-react');
 var usehooks = require('@uidotdev/usehooks');
 var esToolkit = require('es-toolkit');
@@ -195,6 +195,7 @@ var luxThemes = {
 };
 var config = gui.createGui({
   ...v5.defaultConfig,
+  ...guiConfig.config,
   animations: v5Css.animations,
   settings: {
     ...v5.defaultConfig.settings,
@@ -243,9 +244,6 @@ var AppProvider = ({
   const theme = defaultTheme ?? whiteLabel.theme;
   return /* @__PURE__ */ jsxRuntime.jsx(WhiteLabelContext.Provider, { value: whiteLabel, children: /* @__PURE__ */ jsxRuntime.jsx(gui.GuiProvider, { config: lux_config_default, defaultTheme: theme, children: /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient ?? defaultQueryClient, children }) }) });
 };
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 var NARROW_PX = 640;
 var TOUCH_PX = 1024;
 function useBelow(px) {
@@ -930,7 +928,7 @@ var Row = ({ item, onDone, menu }) => {
     item.hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs opacity-60", children: item.hint }) : null,
     item.selected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }) : null
   ] });
-  const className = cn(
+  const className = ui.cn(
     "flex w-full cursor-pointer select-none items-center gap-2.5 rounded-md px-2 py-2 text-left text-sm",
     "hover:bg-[rgba(127,127,127,0.14)]",
     item.danger && "text-[var(--color-text-error,#e5484d)]"
@@ -983,7 +981,7 @@ var Switcher = ({
       "aria-label": title,
       "aria-haspopup": "menu",
       "aria-expanded": open,
-      className: cn(
+      className: ui.cn(
         "flex max-w-[14rem] items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium",
         "hover:bg-[rgba(127,127,127,0.14)]"
       ),
@@ -1157,7 +1155,7 @@ var AppNav = ({
           {
             href: l.href,
             "aria-current": l.active ? "page" : void 0,
-            className: cn(
+            className: ui.cn(
               "rounded-md px-3 py-1.5 text-sm font-medium",
               l.active ? "bg-[rgba(127,127,127,0.14)]" : "opacity-75 hover:opacity-100"
             ),
@@ -1408,7 +1406,7 @@ var Skeleton = React32__namespace.forwardRef(
     const shimStyle = shimToStyle(props);
     const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
     const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : void 0;
-    const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
+    const cls = hideBelowClass ? ui.cn(className, hideBelowClass) : className;
     const htmlRest = stripShims(allRest);
     if (!loading) {
       if (asChild && React32__namespace.isValidElement(children)) return children;
@@ -1420,7 +1418,7 @@ var Skeleton = React32__namespace.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
+          className: ui.cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -1432,7 +1430,7 @@ var Skeleton = React32__namespace.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
+        className: ui.cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children
@@ -1449,7 +1447,7 @@ var SkeletonCircle = React32__namespace.forwardRef(
       {
         ref,
         loading,
-        className: cn("rounded-full shrink-0", className),
+        className: ui.cn("rounded-full shrink-0", className),
         style: { width: dimension, height: dimension, ...rest.style },
         ...rest
       }
@@ -1459,11 +1457,11 @@ var SkeletonCircle = React32__namespace.forwardRef(
 var SkeletonText = React32__namespace.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: ui.cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton,
       {
         loading,
-        className: cn("h-4", index === noOfLines - 1 && "max-w-[80%]")
+        className: ui.cn("h-4", index === noOfLines - 1 && "max-w-[80%]")
       },
       index
     )) });
@@ -2243,17 +2241,6 @@ var Button = React32__namespace.forwardRef(
     return button;
   }
 );
-var SIZE_CLASSES = {
-  "2xs": "px-2 h-5 min-w-5 text-xs rounded-sm gap-1",
-  xs: "px-2 h-6 min-w-6 text-sm rounded-sm gap-1",
-  sm: "px-3 h-8 min-w-8 text-sm rounded-md gap-1",
-  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_CLASSES, VARIANT_CLASSES[v] ?? "", SIZE_CLASSES[s] ?? ""].filter(Boolean).join(" ");
-}
 var ButtonGroup = React32__namespace.forwardRef(
   function ButtonGroup2(props, ref) {
     const { className, ...rest } = props;
@@ -2529,40 +2516,40 @@ function stripUtmParams(url) {
   }
 }
 var VARIANT_CLASSES2 = {
-  primary: cn(
+  primary: ui.cn(
     "text-[var(--color-link-primary)]",
     "hover:no-underline hover:text-[var(--color-link-primary-hover)]",
     "data-[hover]:no-underline data-[hover]:text-[var(--color-link-primary-hover)]"
   ),
-  secondary: cn(
+  secondary: ui.cn(
     "text-[var(--color-link-secondary)]",
     "hover:no-underline hover:text-[var(--color-hover)]",
     "data-[hover]:no-underline data-[hover]:text-[var(--color-hover)]"
   ),
-  subtle: cn(
+  subtle: ui.cn(
     "text-[var(--color-link-subtle)]",
     "hover:text-[var(--color-link-subtle-hover)] hover:underline hover:decoration-[var(--color-link-subtle-hover)]",
     "data-[hover]:text-[var(--color-link-subtle-hover)] data-[hover]:underline data-[hover]:decoration-[var(--color-link-subtle-hover)]"
   ),
-  underlaid: cn(
+  underlaid: ui.cn(
     "text-[var(--color-link-primary)] bg-[var(--color-link-underlaid-bg)]",
     "px-2 py-1.5 rounded-md text-sm",
     "hover:text-[var(--color-link-primary-hover)] hover:no-underline",
     "data-[hover]:text-[var(--color-link-primary-hover)] data-[hover]:no-underline"
   ),
-  menu: cn(
+  menu: ui.cn(
     "text-[var(--color-link-menu)]",
     "hover:text-[var(--color-hover)] hover:no-underline",
     "data-[hover]:text-[var(--color-hover)] data-[hover]:no-underline"
   ),
-  navigation: cn(
+  navigation: ui.cn(
     "text-[var(--color-link-nav-fg)] bg-transparent",
     "hover:text-[var(--color-link-nav-fg-hover)] hover:no-underline",
     "data-[hover]:text-[var(--color-link-nav-fg-hover)] data-[hover]:no-underline",
     "data-[selected]:text-[var(--color-link-nav-fg-selected)] data-[selected]:bg-[var(--color-link-nav-bg-selected)]",
     "data-[active]:text-[var(--color-link-nav-fg-active)]"
   ),
-  plain: cn(
+  plain: ui.cn(
     "text-inherit",
     "hover:no-underline",
     "data-[hover]:no-underline"
@@ -2572,7 +2559,7 @@ var BASE_CLASSES2 = "inline-flex items-center gap-0 cursor-pointer data-[disable
 var LinkExternalIcon = ({ color }) => /* @__PURE__ */ jsxRuntime.jsx(
   ArrowIcon,
   {
-    className: cn(
+    className: ui.cn(
       "size-3 align-middle shrink-0",
       "group-hover:text-inherit"
     ),
@@ -2637,7 +2624,7 @@ var Link = React32__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_CLASSES2, VARIANT_CLASSES2[variant], className);
+    const linkClasses = ui.cn(BASE_CLASSES2, VARIANT_CLASSES2[variant], className);
     const linkStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
     if (external) {
       const processedHref = typeof href === "string" ? stripUtmParams(href) : href;
@@ -2645,7 +2632,7 @@ var Link = React32__namespace.default.forwardRef(
         "a",
         {
           href: processedHref,
-          className: cn("group", linkClasses),
+          className: ui.cn("group", linkClasses),
           style: linkStyle,
           target: "_blank",
           rel: "noopener noreferrer",
@@ -2689,7 +2676,7 @@ var LinkBox = React32__namespace.default.forwardRef(
       "div",
       {
         ref,
-        className: cn("relative", className),
+        className: ui.cn("relative", className),
         ...rest
       }
     );
@@ -2725,7 +2712,7 @@ var LinkOverlay = React32__namespace.default.forwardRef(
       position: _p2,
       ...rest
     } = props;
-    const overlayClasses = cn(
+    const overlayClasses = ui.cn(
       BASE_CLASSES2,
       VARIANT_CLASSES2[variant],
       // Static positioning with a ::before pseudo-element that covers the LinkBox
@@ -3014,7 +3001,7 @@ var DialogContent = React32__namespace.forwardRef(function DialogContent2(props,
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: cn(
+        className: ui.cn(
           "fixed inset-0 z-[1400] flex w-screen h-dvh",
           "items-start lg:items-center justify-center",
           "overflow-hidden"
@@ -3024,7 +3011,7 @@ var DialogContent = React32__namespace.forwardRef(function DialogContent2(props,
           {
             ref,
             unstyled: true,
-            className: cn(
+            className: ui.cn(
               // Base content styles
               "relative flex flex-col w-full p-6 outline-none text-base",
               "bg-dialog-bg text-dialog-fg shadow-lg rounded-xl",
@@ -3055,7 +3042,7 @@ var DialogHeader = React32__namespace.forwardRef(function DialogHeader2(props, r
     "div",
     {
       ref,
-      className: cn(
+      className: ui.cn(
         "flex-none p-0 mb-2 flex items-center gap-x-2 min-h-[40px]",
         className
       ),
@@ -3066,7 +3053,7 @@ var DialogHeader = React32__namespace.forwardRef(function DialogHeader2(props, r
           gui.Dialog.Title,
           {
             unstyled: true,
-            className: cn(
+            className: ui.cn(
               "text-base lg:text-lg font-medium",
               "whitespace-nowrap overflow-hidden text-ellipsis"
             ),
@@ -3089,7 +3076,7 @@ var DialogBody = React32__namespace.forwardRef(function DialogBody2({ className,
     "div",
     {
       ref,
-      className: cn("flex-1 p-0 overflow-auto", className),
+      className: ui.cn("flex-1 p-0 overflow-auto", className),
       style: Object.keys(bodyStyle).length > 0 ? bodyStyle : void 0,
       ...props
     }
@@ -3100,7 +3087,7 @@ var DialogFooter = React32__namespace.forwardRef(function DialogFooter2({ classN
     "div",
     {
       ref,
-      className: cn("flex items-center justify-start gap-6 p-0 mt-6", className),
+      className: ui.cn("flex items-center justify-start gap-6 p-0 mt-6", className),
       ...props
     }
   );
@@ -3279,9 +3266,18 @@ var Field = React32__namespace.forwardRef(
 );
 var TAG = { "1": gui.H1, "2": gui.H2, "3": gui.H3 };
 var RAMP = {
-  "1": { fontSize: 18, lineHeight: 24, fontWeight: "500", $lg: { fontSize: 32, lineHeight: 40, letterSpacing: -0.5 } },
-  "2": { fontSize: 16, lineHeight: 24, fontWeight: "500", $lg: { fontSize: 24, lineHeight: 32 } },
-  "3": { fontSize: 14, lineHeight: 20, fontWeight: "600", $lg: { fontSize: 18, lineHeight: 24, fontWeight: "500" } }
+  // Tokens, not numbers. `$n` publishes as `var(--text-*, <px>)` through the
+  // shared config, and @hanzo/design multiplies `--text-*` by `--type-scale` —
+  // so these three lines are what lets a person's type-size setting reach a
+  // heading at all. Written as `18` they would render identically today and
+  // never move again.
+  //
+  // lineHeight is deliberately absent: gui derives it from the resolved size,
+  // so it scales WITH the text. A fixed 24 next to an adjustable size is how
+  // you get 32px text in a 24px box.
+  "1": { fontSize: "$6", $lg: { fontSize: "$10", letterSpacing: -0.5 } },
+  "2": { fontSize: "$5", $lg: { fontSize: "$8" } },
+  "3": { fontSize: "$3", fontWeight: "600", $lg: { fontSize: "$6", fontWeight: "500" } }
 };
 var Heading = React32__namespace.default.forwardRef(
   function Heading2({ level, ...rest }, ref) {
@@ -3640,7 +3636,7 @@ var Image = React32__namespace.default.forwardRef(
           alt: alt || "",
           onError: handleLoadError,
           onLoad: handleLoadSuccess,
-          className: cn(className),
+          className: ui.cn(className),
           style: mergedStyle,
           ...extraProps
         }
@@ -3649,11 +3645,11 @@ var Image = React32__namespace.default.forwardRef(
   }
 );
 var SIZE5 = {
-  xs: { height: 24, paddingHorizontal: 8, fontSize: 12, borderRadius: 4 },
-  sm: { height: 32, paddingHorizontal: 12, fontSize: 14, borderRadius: 6 },
-  md: { height: 40, paddingHorizontal: 16, fontSize: 16, borderRadius: 6 },
-  lg: { height: 48, paddingHorizontal: 16, fontSize: 18, borderRadius: 8 },
-  "2xl": { height: 56, paddingHorizontal: 16, fontSize: 20, borderRadius: 8 }
+  xs: { height: 24, paddingHorizontal: 8, fontSize: "$1", borderRadius: 4 },
+  sm: { height: 32, paddingHorizontal: 12, fontSize: "$3", borderRadius: 6 },
+  md: { height: 40, paddingHorizontal: 16, fontSize: "$5", borderRadius: 6 },
+  lg: { height: 48, paddingHorizontal: 16, fontSize: "$6", borderRadius: 8 },
+  "2xl": { height: 56, paddingHorizontal: 16, fontSize: "$7", borderRadius: 8 }
 };
 var VARIANT3 = {
   outline: { borderWidth: 1, borderStyle: "solid" },
@@ -3843,7 +3839,7 @@ var BOX = {
   hoverStyle: { borderColor: "var(--color-input-border-hover)" },
   focusStyle: {
     borderColor: "var(--color-input-border-focus)",
-    boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+    boxShadow: "var(--shadow-md)"
   },
   disabledStyle: { opacity: 0.4 }
 };
@@ -4083,7 +4079,7 @@ var PopoverContent = React32__namespace.forwardRef(function PopoverContent2(prop
     {
       ref,
       unstyled: true,
-      className: cn(
+      className: ui.cn(
         "z-50 rounded-lg border border-[var(--color-popover-border,var(--color-border-divider))]",
         "bg-[var(--color-popover-bg,var(--color-dialog-bg))]",
         "shadow-[var(--shadow-popover)]",
@@ -4106,7 +4102,7 @@ var PopoverArrow = React32__namespace.forwardRef(function PopoverArrow2(props, r
     {
       ref,
       unstyled: true,
-      className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
+      className: ui.cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
       ...rest
     }
   );
@@ -4117,7 +4113,7 @@ var PopoverCloseTrigger = React32__namespace.forwardRef(function PopoverCloseTri
     gui.Popover.Close,
     {
       unstyled: true,
-      className: cn("absolute top-1 right-1", className),
+      className: ui.cn("absolute top-1 right-1", className),
       ...rest,
       asChild: true,
       ref,
@@ -4164,7 +4160,7 @@ var PopoverBody = React32__namespace.forwardRef(function PopoverBody2(props, ref
     "div",
     {
       ref,
-      className: cn("p-4", className),
+      className: ui.cn("p-4", className),
       style: Object.keys(bodyStyle).length > 0 ? bodyStyle : void 0,
       ...rest
     }
@@ -4176,7 +4172,7 @@ var PopoverHeader = React32__namespace.forwardRef(function PopoverHeader2(props,
     "div",
     {
       ref,
-      className: cn("px-4 pt-4 pb-0 font-semibold", className),
+      className: ui.cn("px-4 pt-4 pb-0 font-semibold", className),
       ...rest
     }
   );
@@ -4187,7 +4183,7 @@ var PopoverFooter = React32__namespace.forwardRef(function PopoverFooter2(props,
     "div",
     {
       ref,
-      className: cn("px-4 pb-4 pt-0", className),
+      className: ui.cn("px-4 pb-4 pt-0", className),
       ...rest
     }
   );
@@ -4198,7 +4194,7 @@ var PopoverTitle = React32__namespace.forwardRef(function PopoverTitle2(props, r
     "h3",
     {
       ref,
-      className: cn("text-base font-semibold", className),
+      className: ui.cn("text-base font-semibold", className),
       ...rest
     }
   );
@@ -4209,7 +4205,7 @@ var PopoverDescription = React32__namespace.forwardRef(function PopoverDescripti
     "p",
     {
       ref,
-      className: cn("text-sm", className),
+      className: ui.cn("text-sm", className),
       ...rest
     }
   );
@@ -4351,7 +4347,7 @@ var ProgressCircleRing = React32__namespace.forwardRef(function ProgressCircleRi
       width: size,
       height: size,
       viewBox: `0 0 ${size} ${size}`,
-      className: value === null ? cn("lux-spin", className) : className,
+      className: value === null ? ui.cn("lux-spin", className) : className,
       ...rest,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4601,7 +4597,7 @@ function FilterInput({ placeholder, initialValue = "", onChange }) {
       placeholder,
       value,
       onChange: handleChange,
-      className: cn(
+      className: ui.cn(
         "w-full px-3 py-2 text-sm outline-none",
         "bg-transparent border-b border-[var(--color-border-divider)]",
         "placeholder:text-[var(--color-input-placeholder)]"
@@ -4714,7 +4710,7 @@ var SelectRoot = React32__namespace.forwardRef(
           "div",
           {
             ref,
-            className: cn("relative inline-flex", className),
+            className: ui.cn("relative inline-flex", className),
             style: inlineStyle,
             "data-invalid": invalid || void 0,
             "data-disabled": disabled || void 0,
@@ -4739,7 +4735,7 @@ var SelectControl = React32__namespace.forwardRef(
         ref,
         asChild,
         unstyled: true,
-        className: cn(
+        className: ui.cn(
           "group peer inline-flex items-center gap-2 cursor-pointer",
           "rounded-lg text-sm transition-colors outline-none",
           "border border-[var(--color-input-border)] bg-[var(--color-input-bg)] text-[var(--color-input-fg)]",
@@ -4778,7 +4774,7 @@ var SelectClearTrigger = React32__namespace.forwardRef(
         ref,
         type: "button",
         onClick: handleClick,
-        className: cn("pointer-events-auto", className),
+        className: ui.cn("pointer-events-auto", className),
         "aria-label": "Clear selection",
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-5 w-5", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
@@ -4797,7 +4793,7 @@ var SelectContent = React32__namespace.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(gui.Select.Content, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
         gui.Select.Viewport,
         {
-          className: cn(
+          className: ui.cn(
             "min-w-[8rem] overflow-hidden rounded-lg p-1",
             "bg-[var(--color-popover-bg)] shadow-[var(--shadow-popover)]",
             "border border-[var(--color-border-divider)]",
@@ -4824,7 +4820,7 @@ var SelectItem = React32__namespace.forwardRef(
         ref,
         index: index ?? 0,
         value: item.value,
-        className: cn(
+        className: ui.cn(
           "relative flex cursor-pointer select-none items-center gap-2",
           "rounded-md px-3 py-2 text-sm outline-none",
           "text-[var(--color-text-primary)]",
@@ -4858,7 +4854,7 @@ var SelectValueText = React32__namespace.forwardRef(
         const label = size === "lg" ? /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: cn(
+            className: ui.cn(
               "text-xs block",
               invalid ? "text-[var(--color-text-error)]" : "text-[var(--color-input-placeholder)]"
             ),
@@ -4892,7 +4888,7 @@ var SelectValueText = React32__namespace.forwardRef(
       {
         ref,
         placeholder: placeholderText,
-        className: cn("flex flex-col justify-center min-w-0 truncate", className),
+        className: ui.cn("flex flex-col justify-center min-w-0 truncate", className),
         ...rest,
         children: content
       }
@@ -4902,7 +4898,7 @@ var SelectValueText = React32__namespace.forwardRef(
 var SelectItemGroup = React32__namespace.forwardRef(
   function SelectItemGroup2(props, ref) {
     const { children, label, className, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsxs(gui.Select.Group, { ref, className: cn("py-1", className), ...rest, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(gui.Select.Group, { ref, className: ui.cn("py-1", className), ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsx(gui.Select.Label, { className: "px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]", children: label }),
       children
     ] });
@@ -5091,7 +5087,7 @@ var Slider = React32__namespace.forwardRef(
                 borderWidth: 2,
                 borderColor: ACTIVE,
                 backgroundColor: WHITE,
-                boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+                boxShadow: "var(--shadow-sm)",
                 transition: "quick",
                 hoverStyle: { borderColor: ACTIVE_HOVER },
                 focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: ACTIVE, outlineOffset: 2 },
@@ -5216,7 +5212,7 @@ var SwitchBase = React32__namespace.forwardRef(
                     height: s.thumb,
                     borderRadius: 9999,
                     backgroundColor: WHITE2,
-                    boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+                    boxShadow: "var(--shadow-sm)",
                     children: thumbLabel && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { width: "100%", height: "100%", textAlign: "center", fontSize: 8, children: checkedState ? thumbLabel.on : thumbLabel.off })
                   }
                 )
@@ -5437,7 +5433,7 @@ var TableRoot = React32__namespace.forwardRef(
       "table",
       {
         ref,
-        className: cn("w-full border-collapse text-sm", className),
+        className: ui.cn("w-full border-collapse text-sm", className),
         style: merged,
         ...rest,
         children
@@ -5454,7 +5450,7 @@ var TableHeader = React32__namespace.forwardRef(
       "thead",
       {
         ref,
-        className: cn("", className),
+        className: ui.cn("", className),
         style: merged,
         ...rest,
         children
@@ -5471,7 +5467,7 @@ var TableBody = React32__namespace.forwardRef(
       "tbody",
       {
         ref,
-        className: cn("", className),
+        className: ui.cn("", className),
         style: merged,
         ...rest,
         children
@@ -5488,7 +5484,7 @@ var TableRow = React32__namespace.forwardRef(
       "tr",
       {
         ref,
-        className: cn("", className),
+        className: ui.cn("", className),
         style: merged,
         ...rest,
         children
@@ -5509,7 +5505,7 @@ var TableCell = React32__namespace.forwardRef(
       "td",
       {
         ref,
-        className: cn("px-3 py-2.5 align-top text-sm", className),
+        className: ui.cn("px-3 py-2.5 align-top text-sm", className),
         style: merged,
         ...rest,
         children
@@ -5530,7 +5526,7 @@ var TableColumnHeader = React32__namespace.forwardRef(
       "th",
       {
         ref,
-        className: cn(
+        className: ui.cn(
           "px-3 py-2 text-xs font-semibold uppercase tracking-wider",
           "bg-[var(--color-table-header-bg)] text-[var(--color-table-header-fg)]",
           className
@@ -5554,7 +5550,7 @@ var TableColumnHeaderSortable = (props) => {
       isActive && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: cn(
+          className: ui.cn(
             "absolute top-0 inline-flex h-full w-4 items-center",
             indicatorPosition === "left" ? "-left-5" : "-right-5",
             isAsc ? "-rotate-90" : "rotate-90"
@@ -5590,7 +5586,7 @@ var TableHeaderSticky = (props) => {
     TableHeader,
     {
       ref,
-      className: cn("sticky z-[1] bg-white dark:bg-black", className),
+      className: ui.cn("sticky z-[1] bg-white dark:bg-black", className),
       style: {
         top: top ? `${top}px` : 0,
         boxShadow: isStuck ? ACTION_BAR_SHADOW : "none",
@@ -5610,7 +5606,7 @@ var TableCaption = React32__namespace.forwardRef(
       "caption",
       {
         ref,
-        className: cn("px-3 py-2 text-sm text-[var(--color-table-header-fg)]", className),
+        className: ui.cn("px-3 py-2 text-sm text-[var(--color-table-header-fg)]", className),
         style: merged,
         ...rest,
         children
@@ -5627,7 +5623,7 @@ var TableFooter = React32__namespace.forwardRef(
       "tfoot",
       {
         ref,
-        className: cn("", className),
+        className: ui.cn("", className),
         style: merged,
         ...rest,
         children
@@ -5642,7 +5638,7 @@ var TableScrollWrapper = React32__namespace.forwardRef(
       "div",
       {
         ref,
-        className: cn("w-full overflow-x-auto", className),
+        className: ui.cn("w-full overflow-x-auto", className),
         ...rest,
         children
       }
@@ -5880,11 +5876,11 @@ var Tag = React32__namespace.forwardRef(
   }
 );
 var SIZE10 = {
-  xs: { paddingHorizontal: 8, paddingVertical: 4, fontSize: 12, borderRadius: 4 },
-  sm: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 14, borderRadius: 6 },
-  md: { paddingHorizontal: 16, paddingVertical: 8, fontSize: 16, borderRadius: 6 },
-  lg: { paddingHorizontal: 16, paddingVertical: 12, fontSize: 18, borderRadius: 8 },
-  "2xl": { paddingHorizontal: 16, paddingVertical: 12, fontSize: 20, borderRadius: 8 }
+  xs: { paddingHorizontal: 8, paddingVertical: 4, fontSize: "$1", borderRadius: 4 },
+  sm: { paddingHorizontal: 12, paddingVertical: 8, fontSize: "$3", borderRadius: 6 },
+  md: { paddingHorizontal: 16, paddingVertical: 8, fontSize: "$5", borderRadius: 6 },
+  lg: { paddingHorizontal: 16, paddingVertical: 12, fontSize: "$6", borderRadius: 8 },
+  "2xl": { paddingHorizontal: 16, paddingVertical: 12, fontSize: "$7", borderRadius: 8 }
 };
 var Textarea = React32__namespace.default.forwardRef(
   ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
@@ -7660,6 +7656,10 @@ var BankPage = gui.styled(gui.View, {
   padding: 16
 });
 
+Object.defineProperty(exports, "cn", {
+  enumerable: true,
+  get: function () { return ui.cn; }
+});
 exports.AccordionItem = AccordionItem;
 exports.AccordionItemContent = AccordionItemContent;
 exports.AccordionItemTrigger = AccordionItemTrigger;
@@ -7812,8 +7812,6 @@ exports.Toaster = Toaster;
 exports.Tooltip = Tooltip;
 exports.UserMenu = UserMenu;
 exports.bankColors = bankColors;
-exports.buttonVariants = buttonVariants;
-exports.cn = cn;
 exports.config = config;
 exports.createListCollection = createListCollection;
 exports.currentHost = currentHost;