@luxfi/ui 7.4.11 → 7.4.12

package/dist/radio.js

@@ -1,40 +1,18 @@
 "use client";
-import { RadioGroup } from '@hanzo/gui';
+import { RadioGroup, Label, VisuallyHidden, Text } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/radio.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var SIZE_CLASSES = {
-  xs: {
-    root: "gap-1.5",
-    control: "h-3 w-3",
-    indicator: "h-1.5 w-1.5",
-    label: "text-xs"
-  },
-  sm: {
-    root: "gap-1.5",
-    control: "h-3.5 w-3.5",
-    indicator: "h-1.5 w-1.5",
-    label: "text-xs"
-  },
-  md: {
-    root: "gap-2",
-    control: "h-4 w-4",
-    indicator: "h-2 w-2",
-    label: "text-sm"
-  },
-  lg: {
-    root: "gap-2.5",
-    control: "h-5 w-5",
-    indicator: "h-2.5 w-2.5",
-    label: "text-base"
-  }
+var SIZE = {
+  xs: { rootGap: 6, control: 12, indicator: 6, label: 12 },
+  sm: { rootGap: 6, control: 14, indicator: 6, label: 12 },
+  md: { rootGap: 8, control: 16, indicator: 8, label: 14 },
+  lg: { rootGap: 10, control: 20, indicator: 10, label: 16 }
 };
+var INK = "var(--color-text-primary)";
+var RESTING_BORDER = "var(--color-input-border)";
+var OUTLINE = "var(--color-gray-500)";
 var RadioSizeContext = React.createContext("md");
 var RadioGroupBase = React.forwardRef(
   function RadioGroup$1(props, ref) {
@@ -51,7 +29,6 @@ var RadioGroupBase = React.forwardRef(
       value,
       onValueChange,
       size = "md",
-      className,
       ...rest
     } = props;
     const handleValueChange = React.useCallback(
@@ -73,11 +50,9 @@ var RadioGroupBase = React.forwardRef(
         defaultValue,
         value: value ?? void 0,
         onValueChange: handleValueChange,
-        className: cn(
-          "flex",
-          orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-6",
-          className
-        ),
+        display: "flex",
+        flexDirection: orientation === "vertical" ? "column" : "row",
+        gap: orientation === "vertical" ? 12 : 24,
         ...rest,
         children
       }
@@ -89,19 +64,20 @@ var NOOP = () => {
 };
 var RadioBase = React.forwardRef(
   function Radio(props, ref) {
-    const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
+    const { children, inputProps, rootRef, value, disabled, ...rest } = props;
     const size = React.useContext(RadioSizeContext);
-    const sizeClasses = SIZE_CLASSES[size];
+    const s = SIZE[size];
     return /* @__PURE__ */ jsxs(
-      "label",
+      Label,
       {
         ref: rootRef,
-        className: cn(
-          "inline-flex items-center cursor-pointer select-none",
-          sizeClasses.root,
-          disabled && "opacity-50 cursor-not-allowed",
-          className
-        ),
+        unstyled: true,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: s.rootGap,
+        cursor: disabled ? "not-allowed" : "pointer",
+        userSelect: "none",
+        opacity: disabled ? 0.5 : 1,
         "data-disabled": disabled || void 0,
         ...rest,
         children: [
@@ -111,32 +87,24 @@ var RadioBase = React.forwardRef(
               unstyled: true,
               value,
               disabled,
-              className: cn(
-                "inline-flex items-center justify-center shrink-0 rounded-full",
-                "border-2 border-current/30",
-                "data-[state=checked]:border-gray-800 dark:border-white",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
-                "transition-colors duration-150",
-                sizeClasses.control
-              ),
-              children: /* @__PURE__ */ jsx(
-                RadioGroup.Indicator,
-                {
-                  unstyled: true,
-                  className: cn(
-                    "block rounded-full bg-gray-800 dark:bg-white",
-                    sizeClasses.indicator
-                  )
-                }
-              )
+              flexShrink: 0,
+              alignItems: "center",
+              justifyContent: "center",
+              width: s.control,
+              height: s.control,
+              borderRadius: 9999,
+              borderWidth: 2,
+              borderColor: RESTING_BORDER,
+              transition: "quicker",
+              focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: OUTLINE, outlineOffset: 2 },
+              children: /* @__PURE__ */ jsx(RadioGroup.Indicator, { unstyled: true, borderRadius: 9999, width: s.indicator, height: s.indicator, backgroundColor: INK })
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
             "input",
             {
               ref,
               type: "radio",
-              className: "sr-only",
               value,
               disabled,
               tabIndex: -1,
@@ -144,8 +112,8 @@ var RadioBase = React.forwardRef(
               onChange: NOOP,
               ...inputProps
             }
-          ),
-          children != null && /* @__PURE__ */ jsx("span", { className: sizeClasses.label, children })
+          ) }),
+          children != null && /* @__PURE__ */ jsx(Text, { fontSize: s.label, children })
         ]
       }
     );

package/dist/slider.cjs

@@ -3,8 +3,6 @@
 
 var gui = require('@hanzo/gui');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -28,9 +26,11 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/slider.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
+var MUTED = "var(--color-text-secondary)";
+var TRACK = "var(--color-border-divider)";
+var ACTIVE = "var(--color-link-primary)";
+var ACTIVE_HOVER = "var(--color-link-primary-hover)";
+var WHITE = "var(--color-white)";
 var Slider = React__namespace.forwardRef(
   function Slider2(props, ref) {
     const {
@@ -63,21 +63,23 @@ var Slider = React__namespace.forwardRef(
     const handleSlideEnd = React__namespace.useCallback(() => {
       onValueCommit?.(latest.current);
     }, [onValueCommit]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
-      label && !showValue && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
-      label && showValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-text-secondary", children: (value ?? defaultValue ?? [])?.join(", ") })
+    return /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { className, gap: 4, children: [
+      label && !showValue && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 14, fontWeight: "500", color: MUTED, children: label }),
+      label && showValue && /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 14, fontWeight: "500", color: MUTED, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 14, color: MUTED, children: (value ?? defaultValue ?? [])?.join(", ") })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         gui.Slider,
         {
           ref,
           unstyled: true,
-          className: cn(
-            "relative flex w-full touch-none select-none items-center",
-            hasMarkLabel && "mb-6"
-          ),
+          position: "relative",
+          flexDirection: "row",
+          width: "100%",
+          userSelect: "none",
+          alignItems: "center",
+          marginBottom: hasMarkLabel ? 24 : 0,
           value,
           defaultValue,
           min,
@@ -89,33 +91,23 @@ var Slider = React__namespace.forwardRef(
           onValueChange: handleValueChange,
           onSlideEnd: handleSlideEnd,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              gui.Slider.Track,
-              {
-                unstyled: true,
-                className: "relative grow h-1.5 rounded-full bg-border-divider",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  gui.Slider.TrackActive,
-                  {
-                    unstyled: true,
-                    className: "absolute h-full rounded-full bg-link-primary"
-                  }
-                )
-              }
-            ),
+            /* @__PURE__ */ jsxRuntime.jsx(gui.Slider.Track, { unstyled: true, position: "relative", flexGrow: 1, height: 6, borderRadius: 9999, backgroundColor: TRACK, children: /* @__PURE__ */ jsxRuntime.jsx(gui.Slider.TrackActive, { unstyled: true, position: "absolute", height: "100%", borderRadius: 9999, backgroundColor: ACTIVE }) }),
             resolvedValue?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
               gui.Slider.Thumb,
               {
                 index,
                 unstyled: true,
-                className: cn(
-                  "block h-5 w-5",
-                  "rounded-full border-2 border-link-primary bg-white",
-                  "shadow-sm transition-colors",
-                  "hover:border-link-primary-hover",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-link-primary focus-visible:ring-offset-2",
-                  "disabled:pointer-events-none disabled:opacity-50"
-                )
+                width: 20,
+                height: 20,
+                borderRadius: 9999,
+                borderWidth: 2,
+                borderColor: ACTIVE,
+                backgroundColor: WHITE,
+                boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+                transition: "quick",
+                hoverStyle: { borderColor: ACTIVE_HOVER },
+                focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: ACTIVE, outlineOffset: 2 },
+                disabledStyle: { pointerEvents: "none", opacity: 0.5 }
               },
               index
             ))
@@ -130,20 +122,12 @@ function SliderMarks(props) {
   const { marks, min, max } = props;
   if (!marks?.length) return null;
   const range = max - min;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-4", children: marks.map((mark, index) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(gui.View, { position: "relative", width: "100%", height: 16, children: marks.map((mark, index) => {
     const percent = (mark.value - min) / range * 100;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "absolute flex flex-col items-center -translate-x-1/2",
-        style: { left: `${percent}%` },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-0.5 bg-border-divider" }),
-          mark.label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 text-xs text-text-secondary whitespace-nowrap", children: mark.label })
-        ]
-      },
-      index
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(gui.View, { position: "absolute", left: `${percent}%`, alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(gui.View, { width: 2, height: 6, backgroundColor: TRACK }),
+      mark.label != null && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { marginTop: 2, fontSize: 12, color: MUTED, children: mark.label })
+    ] }, index);
   }) });
 }
 

package/dist/slider.js

@@ -1,14 +1,14 @@
 "use client";
-import { Slider as Slider$1 } from '@hanzo/gui';
+import { YStack, Text, XStack, Slider as Slider$1, View } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/slider.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
+var MUTED = "var(--color-text-secondary)";
+var TRACK = "var(--color-border-divider)";
+var ACTIVE = "var(--color-link-primary)";
+var ACTIVE_HOVER = "var(--color-link-primary-hover)";
+var WHITE = "var(--color-white)";
 var Slider = React.forwardRef(
   function Slider2(props, ref) {
     const {
@@ -41,21 +41,23 @@ var Slider = React.forwardRef(
     const handleSlideEnd = React.useCallback(() => {
       onValueCommit?.(latest.current);
     }, [onValueCommit]);
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
-      label && !showValue && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
-      label && showValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary", children: (value ?? defaultValue ?? [])?.join(", ") })
+    return /* @__PURE__ */ jsxs(YStack, { className, gap: 4, children: [
+      label && !showValue && /* @__PURE__ */ jsx(Text, { fontSize: 14, fontWeight: "500", color: MUTED, children: label }),
+      label && showValue && /* @__PURE__ */ jsxs(XStack, { alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: 14, fontWeight: "500", color: MUTED, children: label }),
+        /* @__PURE__ */ jsx(Text, { fontSize: 14, color: MUTED, children: (value ?? defaultValue ?? [])?.join(", ") })
       ] }),
       /* @__PURE__ */ jsxs(
         Slider$1,
         {
           ref,
           unstyled: true,
-          className: cn(
-            "relative flex w-full touch-none select-none items-center",
-            hasMarkLabel && "mb-6"
-          ),
+          position: "relative",
+          flexDirection: "row",
+          width: "100%",
+          userSelect: "none",
+          alignItems: "center",
+          marginBottom: hasMarkLabel ? 24 : 0,
           value,
           defaultValue,
           min,
@@ -67,33 +69,23 @@ var Slider = React.forwardRef(
           onValueChange: handleValueChange,
           onSlideEnd: handleSlideEnd,
           children: [
-            /* @__PURE__ */ jsx(
-              Slider$1.Track,
-              {
-                unstyled: true,
-                className: "relative grow h-1.5 rounded-full bg-border-divider",
-                children: /* @__PURE__ */ jsx(
-                  Slider$1.TrackActive,
-                  {
-                    unstyled: true,
-                    className: "absolute h-full rounded-full bg-link-primary"
-                  }
-                )
-              }
-            ),
+            /* @__PURE__ */ jsx(Slider$1.Track, { unstyled: true, position: "relative", flexGrow: 1, height: 6, borderRadius: 9999, backgroundColor: TRACK, children: /* @__PURE__ */ jsx(Slider$1.TrackActive, { unstyled: true, position: "absolute", height: "100%", borderRadius: 9999, backgroundColor: ACTIVE }) }),
             resolvedValue?.map((_, index) => /* @__PURE__ */ jsx(
               Slider$1.Thumb,
               {
                 index,
                 unstyled: true,
-                className: cn(
-                  "block h-5 w-5",
-                  "rounded-full border-2 border-link-primary bg-white",
-                  "shadow-sm transition-colors",
-                  "hover:border-link-primary-hover",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-link-primary focus-visible:ring-offset-2",
-                  "disabled:pointer-events-none disabled:opacity-50"
-                )
+                width: 20,
+                height: 20,
+                borderRadius: 9999,
+                borderWidth: 2,
+                borderColor: ACTIVE,
+                backgroundColor: WHITE,
+                boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+                transition: "quick",
+                hoverStyle: { borderColor: ACTIVE_HOVER },
+                focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: ACTIVE, outlineOffset: 2 },
+                disabledStyle: { pointerEvents: "none", opacity: 0.5 }
               },
               index
             ))
@@ -108,20 +100,12 @@ function SliderMarks(props) {
   const { marks, min, max } = props;
   if (!marks?.length) return null;
   const range = max - min;
-  return /* @__PURE__ */ jsx("div", { className: "relative w-full h-4", children: marks.map((mark, index) => {
+  return /* @__PURE__ */ jsx(View, { position: "relative", width: "100%", height: 16, children: marks.map((mark, index) => {
     const percent = (mark.value - min) / range * 100;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "absolute flex flex-col items-center -translate-x-1/2",
-        style: { left: `${percent}%` },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "h-1.5 w-0.5 bg-border-divider" }),
-          mark.label != null && /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-xs text-text-secondary whitespace-nowrap", children: mark.label })
-        ]
-      },
-      index
-    );
+    return /* @__PURE__ */ jsxs(View, { position: "absolute", left: `${percent}%`, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(View, { width: 2, height: 6, backgroundColor: TRACK }),
+      mark.label != null && /* @__PURE__ */ jsx(Text, { marginTop: 2, fontSize: 12, color: MUTED, children: mark.label })
+    ] }, index);
   }) });
 }
 

package/dist/switch.cjs

@@ -3,8 +3,6 @@
 
 var gui = require('@hanzo/gui');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -28,28 +26,17 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/switch.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 var NOOP = () => {
 };
-var SIZE_CLASSES = {
-  sm: {
-    root: "h-4 w-7",
-    thumb: "h-3 w-3",
-    label: "text-xs"
-  },
-  md: {
-    root: "h-5 w-9",
-    thumb: "h-4 w-4",
-    label: "text-sm"
-  },
-  lg: {
-    root: "h-6 w-11",
-    thumb: "h-5 w-5",
-    label: "text-base"
-  }
+var SIZE = {
+  sm: { width: 28, height: 16, thumb: 12, label: 12 },
+  md: { width: 36, height: 20, thumb: 16, label: 14 },
+  lg: { width: 44, height: 24, thumb: 20, label: 16 }
 };
+var TRACK_ON = "var(--color-text-primary)";
+var TRACK_OFF = "var(--color-switch-bg)";
+var OUTLINE = "var(--color-gray-500)";
+var WHITE = "var(--color-white)";
 var SwitchBase = React__namespace.forwardRef(
   function Switch(props, ref) {
     const {
@@ -66,7 +53,6 @@ var SwitchBase = React__namespace.forwardRef(
       disabled = false,
       size = "md",
       direction,
-      className,
       ...rest
     } = props;
     const [internalChecked, setInternalChecked] = React__namespace.useState(defaultChecked ?? false);
@@ -81,18 +67,19 @@ var SwitchBase = React__namespace.forwardRef(
       },
       [isControlled, onCheckedChange]
     );
-    const sizeClasses = SIZE_CLASSES[size];
+    const s = SIZE[size];
     const isRtl = direction === "rtl";
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "label",
+      gui.Label,
       {
         ref: rootRef,
-        className: cn(
-          "inline-flex items-center cursor-pointer select-none gap-2",
-          isRtl && "flex-row-reverse",
-          disabled && "opacity-50 cursor-not-allowed",
-          className
-        ),
+        unstyled: true,
+        flexDirection: isRtl ? "row-reverse" : "row",
+        alignItems: "center",
+        gap: 8,
+        cursor: disabled ? "not-allowed" : "pointer",
+        userSelect: "none",
+        opacity: disabled ? 0.5 : 1,
         onChange,
         "data-disabled": disabled || void 0,
         ...rest,
@@ -104,38 +91,51 @@ var SwitchBase = React__namespace.forwardRef(
               checked: checkedState,
               onCheckedChange: handleCheckedChange,
               disabled,
-              className: cn(
-                "relative inline-flex shrink-0 items-center rounded-full",
-                "bg-gray-300 dark:bg-gray-600",
-                "data-[state=checked]:bg-gray-800 dark:bg-white",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
-                "transition-colors duration-200",
-                sizeClasses.root
-              ),
+              position: "relative",
+              flexShrink: 0,
+              alignItems: "center",
+              width: s.width,
+              height: s.height,
+              borderRadius: 9999,
+              backgroundColor: checkedState ? TRACK_ON : TRACK_OFF,
+              transition: "quick",
+              focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: OUTLINE, outlineOffset: 2 },
               children: [
-                trackLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-bold text-white pointer-events-none", children: checkedState ? trackLabel.on : trackLabel.off }),
+                trackLabel && /* @__PURE__ */ jsxRuntime.jsx(
+                  gui.Text,
+                  {
+                    position: "absolute",
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 8,
+                    fontWeight: "700",
+                    color: WHITE,
+                    pointerEvents: "none",
+                    children: checkedState ? trackLabel.on : trackLabel.off
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   gui.Switch.Thumb,
                   {
                     unstyled: true,
                     "data-thumb": true,
                     transition: "quicker",
-                    className: cn(
-                      "block rounded-full bg-white shadow-sm",
-                      sizeClasses.thumb
-                    ),
-                    children: thumbLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center h-full w-full text-[8px]", children: checkedState ? thumbLabel.on : thumbLabel.off })
+                    width: s.thumb,
+                    height: s.thumb,
+                    borderRadius: 9999,
+                    backgroundColor: WHITE,
+                    boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+                    children: thumbLabel && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { width: "100%", height: "100%", textAlign: "center", fontSize: 8, children: checkedState ? thumbLabel.on : thumbLabel.off })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(gui.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
               ref,
               type: "checkbox",
-              className: "sr-only",
               checked: checkedState,
               disabled,
               tabIndex: -1,
@@ -143,15 +143,8 @@ var SwitchBase = React__namespace.forwardRef(
               onChange: NOOP,
               ...inputProps
             }
-          ),
-          children != null && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              ...labelProps,
-              className: cn(sizeClasses.label, labelProps?.className),
-              children
-            }
-          )
+          ) }),
+          children != null && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { ...labelProps, fontSize: s.label, children })
         ]
       }
     );