@luxfi/ui 7.4.11 → 7.4.13

package/dist/strategy-builder.js

@@ -1,12 +1,8 @@
 "use client";
+import { YStack, XStack, Text, 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';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 function findATM(strikes, spot) {
   if (strikes.length === 0) return spot;
   return strikes.reduce(
@@ -115,84 +111,145 @@ var STRATEGY_PRESETS = [
     ]
   }
 ];
+var MONO = "monospace";
+var CONTROL_BOX = {
+  backgroundColor: "var(--color-input-bg)",
+  borderWidth: 1,
+  borderColor: "var(--color-input-border)",
+  outlineWidth: 0,
+  focusStyle: { borderColor: "var(--color-input-border-focus)" }
+};
+var CONTROL_INK = { color: "var(--color-input-fg)" };
 function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemove }) {
   const update = (patch) => {
     onChange(index, { ...leg, ...patch });
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md bg-zinc-800/50 px-2 py-1.5", children: [
-    /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-zinc-500 w-4 shrink-0", children: index + 1 }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "px-2 py-0.5 rounded text-xs font-semibold transition-colors",
-          leg.action === "buy" ? "bg-emerald-900/60 text-emerald-400" : "bg-red-900/60 text-red-400"
+  return /* @__PURE__ */ jsxs(
+    XStack,
+    {
+      alignItems: "center",
+      gap: 8,
+      borderRadius: 6,
+      backgroundColor: "var(--color-tag-subtle-bg)",
+      paddingHorizontal: 8,
+      paddingVertical: 6,
+      children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: 10, style: { fontFamily: MONO }, flexShrink: 0, width: 16, color: "var(--color-text-secondary)", children: index + 1 }),
+        /* @__PURE__ */ jsx(
+          XStack,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("button", { type: "button" }),
+            onClick: () => update({ action: leg.action === "buy" ? "sell" : "buy" }),
+            paddingHorizontal: 8,
+            paddingVertical: 2,
+            borderRadius: 4,
+            borderWidth: 0,
+            cursor: "pointer",
+            transition: "quick",
+            backgroundColor: leg.action === "buy" ? "color-mix(in srgb, var(--color-status-good) 20%, transparent)" : "color-mix(in srgb, var(--color-status-bad) 20%, transparent)",
+            children: /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", color: leg.action === "buy" ? "var(--color-status-good)" : "var(--color-status-bad)", children: leg.action === "buy" ? "BUY" : "SELL" })
+          }
         ),
-        onClick: () => update({ action: leg.action === "buy" ? "sell" : "buy" }),
-        children: leg.action === "buy" ? "BUY" : "SELL"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "px-2 py-0.5 rounded text-xs font-medium transition-colors",
-          // Call vs put is a rank difference, not a hue difference.
-          leg.type === "call" ? "bg-[var(--secondary)] text-[var(--foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"
+        /* @__PURE__ */ jsx(
+          XStack,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("button", { type: "button" }),
+            onClick: () => update({ type: leg.type === "call" ? "put" : "call" }),
+            paddingHorizontal: 8,
+            paddingVertical: 2,
+            borderRadius: 4,
+            borderWidth: 0,
+            cursor: "pointer",
+            transition: "quick",
+            backgroundColor: leg.type === "call" ? "var(--secondary)" : "var(--muted)",
+            children: /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "500", color: leg.type === "call" ? "var(--foreground)" : "var(--muted-foreground)", children: leg.type === "call" ? "CALL" : "PUT" })
+          }
         ),
-        onClick: () => update({ type: leg.type === "call" ? "put" : "call" }),
-        children: leg.type === "call" ? "CALL" : "PUT"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "select",
-      {
-        value: leg.strike,
-        onChange: (e) => update({ strike: Number(e.target.value) }),
-        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs font-mono text-zinc-200 outline-none focus:border-zinc-500 min-w-[72px]",
-        children: strikes.map((s) => /* @__PURE__ */ jsx("option", { value: s, children: s.toFixed(2) }, s))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "select",
-      {
-        value: leg.expiration,
-        onChange: (e) => update({ expiration: e.target.value }),
-        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs text-zinc-200 outline-none focus:border-zinc-500 min-w-[80px]",
-        children: expirations.map((exp) => /* @__PURE__ */ jsx("option", { value: exp, children: exp }, exp))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "number",
-        min: 1,
-        max: 999,
-        value: leg.quantity,
-        onChange: (e) => update({ quantity: Math.max(1, parseInt(e.target.value, 10) || 1) }),
-        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs font-mono text-zinc-200 outline-none focus:border-zinc-500 w-[48px] text-center"
-      }
-    ),
-    leg.premium !== void 0 && /* @__PURE__ */ jsxs("span", { className: cn(
-      "font-mono tabular-nums text-xs ml-auto",
-      leg.premium >= 0 ? "text-emerald-400" : "text-red-400"
-    ), children: [
-      leg.premium >= 0 ? "+" : "",
-      leg.premium.toFixed(2)
-    ] }),
-    removable && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => onRemove(index),
-        className: "ml-auto p-0.5 text-zinc-500 hover:text-red-400 transition-colors",
-        "aria-label": "Remove leg",
-        children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
-      }
-    )
-  ] });
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("select", { value: leg.strike, onChange: (e) => update({ strike: Number(e.target.value) }) }),
+            ...CONTROL_BOX,
+            borderRadius: 4,
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+            minWidth: 72,
+            style: { ...CONTROL_INK, fontFamily: MONO, fontSize: 12 },
+            children: strikes.map((s) => /* @__PURE__ */ jsx("option", { value: s, children: s.toFixed(2) }, s))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("select", { value: leg.expiration, onChange: (e) => update({ expiration: e.target.value }) }),
+            ...CONTROL_BOX,
+            borderRadius: 4,
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+            minWidth: 80,
+            style: { ...CONTROL_INK, fontSize: 12 },
+            children: expirations.map((exp) => /* @__PURE__ */ jsx("option", { value: exp, children: exp }, exp))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                max: 999,
+                value: leg.quantity,
+                onChange: (e) => update({ quantity: Math.max(1, parseInt(e.target.value, 10) || 1) })
+              }
+            ),
+            ...CONTROL_BOX,
+            borderRadius: 4,
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+            width: 48,
+            style: { ...CONTROL_INK, fontFamily: MONO, fontSize: 12, textAlign: "center" }
+          }
+        ),
+        leg.premium !== void 0 && /* @__PURE__ */ jsxs(
+          Text,
+          {
+            fontSize: 12,
+            style: { fontFamily: MONO },
+            fontVariant: ["tabular-nums"],
+            marginLeft: "auto",
+            color: leg.premium >= 0 ? "var(--color-status-good)" : "var(--color-status-bad)",
+            children: [
+              leg.premium >= 0 ? "+" : "",
+              leg.premium.toFixed(2)
+            ]
+          }
+        ),
+        removable && /* @__PURE__ */ jsx(
+          XStack,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Remove leg" }),
+            onClick: () => onRemove(index),
+            marginLeft: "auto",
+            padding: 2,
+            borderWidth: 0,
+            cursor: "pointer",
+            transition: "quick",
+            style: { color: "var(--color-text-secondary)" },
+            hoverStyle: { opacity: 0.7 },
+            children: /* @__PURE__ */ jsx("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+          }
+        )
+      ]
+    }
+  );
 }
 var StrategyBuilder = React.forwardRef(
   function StrategyBuilder2(props, ref) {
@@ -262,37 +319,46 @@ var StrategyBuilder = React.forwardRef(
       });
     }, [onSubmit, strategyType, legs, netPremium]);
     const currentPreset = STRATEGY_PRESETS.find((p) => p.value === strategyType);
+    const netColor = netPremium > 0 ? "var(--color-status-good)" : netPremium < 0 ? "var(--color-status-bad)" : "var(--color-text-secondary)";
     return /* @__PURE__ */ jsxs(
-      "div",
+      YStack,
       {
         ref,
-        className: cn(
-          "flex flex-col gap-3 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3",
-          className
-        ),
+        gap: 12,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: "var(--color-border-divider)",
+        backgroundColor: "var(--card)",
+        padding: 12,
+        className,
         ...rest,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-zinc-500", children: "Strategy" }),
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-200", children: underlying })
+          /* @__PURE__ */ jsxs(XStack, { alignItems: "center", justifyContent: "space-between", gap: 12, children: [
+            /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 8, children: [
+              /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.6, color: "var(--color-text-secondary)", children: "Strategy" }),
+              /* @__PURE__ */ jsx(Text, { fontSize: 14, fontWeight: "500", color: "var(--color-text-primary)", children: underlying })
             ] }),
-            /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+            /* @__PURE__ */ jsxs(Text, { fontSize: 10, color: "var(--color-text-secondary)", children: [
               "Spot: ",
-              /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums text-zinc-300", children: spotPrice.toFixed(2) })
+              /* @__PURE__ */ jsx(Text, { style: { fontFamily: MONO }, fontVariant: ["tabular-nums"], color: "var(--color-text-primary)", children: spotPrice.toFixed(2) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(
-            "select",
+          /* @__PURE__ */ jsx(XStack, { alignItems: "center", gap: 8, children: /* @__PURE__ */ jsx(
+            View,
             {
-              value: strategyType,
-              onChange: handleStrategyChange,
-              className: "flex-1 bg-zinc-900 border border-zinc-700 rounded-md px-2.5 py-1.5 text-sm text-zinc-200 outline-none focus:border-zinc-500",
+              unstyled: true,
+              render: /* @__PURE__ */ jsx("select", { value: strategyType, onChange: handleStrategyChange }),
+              flex: 1,
+              ...CONTROL_BOX,
+              borderRadius: 6,
+              paddingHorizontal: 10,
+              paddingVertical: 6,
+              style: { ...CONTROL_INK, fontSize: 14 },
               children: STRATEGY_PRESETS.map((preset) => /* @__PURE__ */ jsx("option", { value: preset.value, children: preset.label }, preset.value))
             }
           ) }),
-          currentPreset && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-zinc-500 -mt-1", children: currentPreset.description }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: legs.map((leg, i) => /* @__PURE__ */ jsx(
+          currentPreset && /* @__PURE__ */ jsx(Text, { fontSize: 11, marginTop: -4, color: "var(--color-text-secondary)", children: currentPreset.description }),
+          /* @__PURE__ */ jsx(YStack, { gap: 6, children: legs.map((leg, i) => /* @__PURE__ */ jsx(
             LegRow,
             {
               leg,
@@ -306,40 +372,53 @@ var StrategyBuilder = React.forwardRef(
             i
           )) }),
           strategyType === "custom" && legs.length < 4 && /* @__PURE__ */ jsxs(
-            "button",
+            XStack,
             {
-              type: "button",
+              unstyled: true,
+              render: /* @__PURE__ */ jsx("button", { type: "button" }),
               onClick: handleAddLeg,
-              className: "flex items-center justify-center gap-1 rounded-md border border-dashed border-zinc-700 py-1 text-xs text-zinc-500 hover:text-zinc-300 hover:border-zinc-500 transition-colors",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 4,
+              borderRadius: 6,
+              borderWidth: 1,
+              paddingVertical: 4,
+              cursor: "pointer",
+              transition: "quick",
+              borderColor: "var(--color-border-divider)",
+              hoverStyle: { borderColor: "var(--color-hover)" },
+              style: { color: "var(--color-text-secondary)", borderStyle: "dashed" },
               children: [
-                /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
-                "Add Leg"
+                /* @__PURE__ */ jsx("svg", { width: 12, height: 12, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
+                /* @__PURE__ */ jsx(Text, { fontSize: 12, color: "var(--color-text-secondary)", children: "Add Leg" })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-1 border-t border-zinc-800", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500", children: "Net:" }),
-              /* @__PURE__ */ jsxs("span", { className: cn(
-                "font-mono tabular-nums text-sm font-semibold",
-                netPremium > 0 ? "text-emerald-400" : netPremium < 0 ? "text-red-400" : "text-zinc-400"
-              ), children: [
+          /* @__PURE__ */ jsxs(XStack, { alignItems: "center", justifyContent: "space-between", paddingTop: 4, borderTopWidth: 1, borderColor: "var(--color-border-divider)", children: [
+            /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 8, children: [
+              /* @__PURE__ */ jsx(Text, { fontSize: 12, color: "var(--color-text-secondary)", children: "Net:" }),
+              /* @__PURE__ */ jsxs(Text, { fontSize: 14, fontWeight: "600", style: { fontFamily: MONO }, fontVariant: ["tabular-nums"], color: netColor, children: [
                 netPremium > 0 ? "Credit " : netPremium < 0 ? "Debit " : "",
                 netPremium !== 0 ? `$${Math.abs(netPremium).toFixed(2)}` : "-"
               ] })
             ] }),
             /* @__PURE__ */ jsx(
-              "button",
+              XStack,
               {
-                type: "button",
+                unstyled: true,
+                render: /* @__PURE__ */ jsx("button", { type: "button" }),
                 onClick: handleSubmit,
                 disabled: legs.length === 0,
-                className: cn(
-                  "px-4 py-1.5 rounded-md text-xs font-semibold transition-colors",
-                  "bg-blue-600 text-white hover:bg-blue-500",
-                  "disabled:opacity-40 disabled:cursor-not-allowed"
-                ),
-                children: "Review Order"
+                paddingHorizontal: 16,
+                paddingVertical: 6,
+                borderRadius: 6,
+                borderWidth: 0,
+                cursor: "pointer",
+                transition: "quick",
+                backgroundColor: "var(--color-button-solid-bg)",
+                hoverStyle: { backgroundColor: "var(--color-hover)" },
+                disabledStyle: { opacity: 0.4, cursor: "not-allowed" },
+                children: /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", color: "var(--color-button-solid-text)", children: "Review Order" })
               }
             )
           ] })

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 })
         ]
       }
     );