@luxfi/ui 7.4.10 → 7.4.12

package/dist/expiration-selector.js

@@ -1,12 +1,8 @@
 "use client";
+import { YStack, Text, XStack } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 function formatExpDate(date) {
   const d = new Date(date);
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
@@ -17,28 +13,53 @@ var GROUP_LABELS = {
   monthly: "Monthly",
   quarterly: "Quarterly"
 };
+var SHAPE = {
+  selected: {
+    borderColor: "transparent",
+    backgroundColor: "var(--color-selected-control-bg)",
+    color: "var(--color-selected-control-text)"
+  },
+  resting: {
+    borderColor: "var(--color-border-divider)",
+    backgroundColor: "var(--card)",
+    color: "var(--color-text-secondary)",
+    hoverStyle: { borderColor: "var(--color-hover)", color: "var(--color-hover)" }
+  }
+};
 function ExpirationPill({ exp, isSelected, onClick }) {
+  const shape = isSelected ? SHAPE.selected : SHAPE.resting;
+  const dteColor = exp.dte <= 7 && !isSelected ? "var(--color-status-warn)" : isSelected ? "var(--color-selected-control-text)" : "var(--muted-foreground)";
   return /* @__PURE__ */ jsxs(
-    "button",
+    YStack,
     {
-      type: "button",
+      unstyled: true,
+      render: /* @__PURE__ */ jsx("button", { type: "button" }),
       onClick,
-      className: cn(
-        "flex flex-col items-center gap-0.5 rounded-md px-3 py-1.5 transition-colors shrink-0",
-        "border text-xs",
-        isSelected ? "border-blue-500/60 bg-blue-900/30 text-blue-300" : "border-zinc-800 bg-zinc-900/50 text-zinc-400 hover:border-zinc-600 hover:text-zinc-200"
-      ),
+      alignItems: "center",
+      gap: 2,
+      borderRadius: 6,
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      flexShrink: 0,
+      borderWidth: 1,
+      borderStyle: "solid",
+      cursor: "pointer",
+      ...shape,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "font-medium whitespace-nowrap", children: formatExpDate(exp.date) }),
-        /* @__PURE__ */ jsxs("span", { className: cn(
-          "font-mono tabular-nums text-[10px]",
-          isSelected ? "text-[var(--foreground)]" : "text-[var(--muted-foreground)]",
-          // Near expiry is a notice, and a notice in Lux is the loudest neutral.
-          exp.dte <= 7 && !isSelected && "text-[var(--color-status-warn)]"
-        ), children: [
-          exp.dte,
-          "d"
-        ] })
+        /* @__PURE__ */ jsx(Text, { unstyled: true, fontSize: 12, fontWeight: "500", style: { whiteSpace: "nowrap" }, children: formatExpDate(exp.date) }),
+        /* @__PURE__ */ jsxs(
+          Text,
+          {
+            fontVariant: ["tabular-nums"],
+            style: { fontFamily: "monospace" },
+            fontSize: 10,
+            color: dteColor,
+            children: [
+              exp.dte,
+              "d"
+            ]
+          }
+        )
       ]
     }
   );
@@ -68,49 +89,23 @@ var ExpirationSelector = React.forwardRef(
         label: GROUP_LABELS[type],
         items: expirations.filter((e) => e.type === type)
       })).filter((g) => g.items.length > 0);
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref,
-          className: cn("flex flex-col gap-2", className),
-          ...rest,
-          children: grouped.map((group) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-zinc-600 px-1", children: group.label }),
-            /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 overflow-x-auto no-scrollbar", children: group.items.map((exp) => /* @__PURE__ */ jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsx(
-              ExpirationPill,
-              {
-                exp,
-                isSelected: exp.date === selected,
-                onClick: () => onSelect(exp.date)
-              }
-            ) }, exp.date)) })
-          ] }, group.type))
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex items-center gap-1", className),
-        ...rest,
-        children: /* @__PURE__ */ jsx(
-          "div",
+      return /* @__PURE__ */ jsx(YStack, { ref, gap: 8, className, ...rest, children: grouped.map((group) => /* @__PURE__ */ jsxs(YStack, { gap: 4, children: [
+        /* @__PURE__ */ jsx(
+          Text,
           {
-            ref: scrollRef,
-            className: "flex gap-1.5 overflow-x-auto no-scrollbar",
-            children: expirations.map((exp) => /* @__PURE__ */ jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsx(
-              ExpirationPill,
-              {
-                exp,
-                isSelected: exp.date === selected,
-                onClick: () => onSelect(exp.date)
-              }
-            ) }, exp.date))
+            fontSize: 10,
+            fontWeight: "600",
+            textTransform: "uppercase",
+            letterSpacing: 0.5,
+            paddingHorizontal: 4,
+            color: "var(--color-text-secondary)",
+            children: group.label
           }
-        )
-      }
-    );
+        ),
+        /* @__PURE__ */ jsx(XStack, { gap: 6, overflowX: "auto", overflowY: "hidden", className: "lux-no-scrollbar", children: group.items.map((exp) => /* @__PURE__ */ jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsx(ExpirationPill, { exp, isSelected: exp.date === selected, onClick: () => onSelect(exp.date) }) }, exp.date)) })
+      ] }, group.type)) });
+    }
+    return /* @__PURE__ */ jsx(XStack, { ref, alignItems: "center", gap: 4, className, ...rest, children: /* @__PURE__ */ jsx(XStack, { ref: scrollRef, gap: 6, overflowX: "auto", overflowY: "hidden", className: "lux-no-scrollbar", children: expirations.map((exp) => /* @__PURE__ */ jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsx(ExpirationPill, { exp, isSelected: exp.date === selected, onClick: () => onSelect(exp.date) }) }, exp.date)) }) });
   }
 );
 

package/dist/field.cjs

@@ -1,10 +1,8 @@
 "use client";
 'use strict';
 
-var LabelPrimitive = require('@radix-ui/react-label');
+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) {
@@ -25,19 +23,26 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/field.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 var space = String.fromCharCode(32);
 function getComponentDisplayName(type) {
   if (typeof type === "string") return void 0;
   if ("displayName" in type) return type.displayName;
   return void 0;
 }
+var ERROR = "var(--color-text-error)";
+var MUTED = "var(--color-text-secondary)";
+var Marks = ({ required, optionalText, errorText }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  required && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { color: ERROR, "aria-hidden": true, children: "*" }),
+  !required && optionalText && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 14, color: MUTED, children: optionalText }),
+  errorText && /* @__PURE__ */ jsxRuntime.jsxs(gui.Text, { fontSize: 14, color: ERROR, children: [
+    "-",
+    space,
+    errorText
+  ] })
+] });
 var Field = React__namespace.forwardRef(
   function Field2(props, ref) {
     const {
@@ -56,127 +61,73 @@ var Field = React__namespace.forwardRef(
       className,
       style
     } = props;
+    const flags = {
+      "data-disabled": disabled || void 0,
+      "data-readonly": readOnly || void 0,
+      "data-invalid": invalid || void 0
+    };
     if (floating && label) {
-      const injectedProps2 = {
-        className: "peer",
-        placeholder: " ",
-        size,
-        floating,
-        disabled,
-        readOnly
-      };
+      const injectedProps = { className: "lux-field-control", placeholder: " ", size, floating, disabled, readOnly };
       const labelElement = /* @__PURE__ */ jsxRuntime.jsxs(
-        LabelPrimitive__namespace.Root,
+        gui.Label,
         {
-          className: cn(
-            "absolute left-3 top-1/2 -translate-y-1/2",
-            "text-[var(--color-input-placeholder,theme(colors.gray.400))]",
-            "pointer-events-none select-none",
-            "origin-top-left transition-all duration-150",
-            "peer-focus:top-1 peer-focus:translate-y-0 peer-focus:scale-75",
-            "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:scale-75"
-          ),
           htmlFor: id,
+          position: "absolute",
+          left: 12,
+          top: "50%",
+          pointerEvents: "none",
+          userSelect: "none",
+          flexDirection: "row",
+          gap: 4,
+          color: "var(--color-input-placeholder)",
+          className: "lux-field-float",
           children: [
             label,
-            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
-            !required && optionalText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm", children: optionalText }),
-            errorText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))] text-sm", children: [
-              "-",
-              space,
-              errorText
-            ] })
+            /* @__PURE__ */ jsxRuntime.jsx(Marks, { required, optionalText, errorText })
           ]
         }
       );
-      const helperTextElement = helperText ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }) : null;
+      const helperTextElement = helperText ? /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { marginTop: 6, fontSize: 12, color: MUTED, children: helperText }) : null;
       const child2 = React__namespace.Children.only(children);
       const isInputGroup = getComponentDisplayName(child2.type) === "InputGroup";
       if (isInputGroup) {
-        const inputElement2 = React__namespace.cloneElement(
+        const inputElement = React__namespace.cloneElement(
           React__namespace.Children.only(child2.props.children),
-          injectedProps2
-        );
-        const groupInputElement = React__namespace.cloneElement(
-          child2,
-          {},
-          inputElement2,
-          labelElement
-        );
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            ref,
-            id,
-            className: cn("relative w-full", className),
-            style,
-            "data-disabled": disabled || void 0,
-            "data-readonly": readOnly || void 0,
-            "data-invalid": invalid || void 0,
-            children: [
-              groupInputElement,
-              helperTextElement
-            ]
-          }
+          injectedProps
         );
+        return /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { ref, id, position: "relative", width: "100%", className, style, ...flags, children: [
+          React__namespace.cloneElement(child2, {}, inputElement, labelElement),
+          helperTextElement
+        ] });
       }
-      const inputElement = React__namespace.cloneElement(child2, injectedProps2);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
+      return /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { ref, id, position: "relative", width: "100%", className, style, ...flags, children: [
+        React__namespace.cloneElement(child2, injectedProps),
+        labelElement,
+        helperTextElement
+      ] });
+    }
+    const child = React__namespace.Children.only(children);
+    return /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { ref, id, gap: 4, className, style, ...flags, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsxs(
+        gui.Label,
         {
-          ref,
-          id,
-          className: cn("relative w-full", className),
-          style,
-          "data-disabled": disabled || void 0,
-          "data-readonly": readOnly || void 0,
-          "data-invalid": invalid || void 0,
+          htmlFor: id,
+          flexDirection: "row",
+          gap: 4,
+          fontSize: 14,
+          fontWeight: "500",
+          color: "var(--color-text-primary)",
+          opacity: disabled ? 0.4 : 1,
           children: [
-            inputElement,
-            labelElement,
-            helperTextElement
+            label,
+            /* @__PURE__ */ jsxRuntime.jsx(Marks, { required, optionalText })
           ]
         }
-      );
-    }
-    const injectedProps = {
-      size
-    };
-    const child = React__namespace.Children.only(children);
-    const clonedChild = React__namespace.cloneElement(child, injectedProps);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        id,
-        className: cn("flex flex-col gap-1", className),
-        style,
-        "data-disabled": disabled || void 0,
-        "data-readonly": readOnly || void 0,
-        "data-invalid": invalid || void 0,
-        children: [
-          label && /* @__PURE__ */ jsxRuntime.jsxs(
-            LabelPrimitive__namespace.Root,
-            {
-              className: cn(
-                "text-sm font-medium text-[var(--color-field-label,theme(colors.gray.700))]",
-                "dark:text-[var(--color-field-label,theme(colors.gray.300))]",
-                disabled && "opacity-40"
-              ),
-              htmlFor: id,
-              children: [
-                label,
-                required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
-                !required && optionalText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm font-normal", children: optionalText })
-              ]
-            }
-          ),
-          clonedChild,
-          helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }),
-          errorText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--color-fg-error,theme(colors.red.500))]", children: errorText })
-        ]
-      }
-    );
+      ),
+      React__namespace.cloneElement(child, { size }),
+      helperText && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 12, color: MUTED, children: helperText }),
+      errorText && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 12, color: ERROR, children: errorText })
+    ] });
   }
 );
 

package/dist/field.d.cts

@@ -14,7 +14,6 @@ interface FieldProps {
     readonly readOnly?: boolean;
     readonly invalid?: boolean;
     readonly floating?: boolean;
-    readonly bgColor?: string | Record<string, string>;
     readonly id?: string;
     readonly className?: string;
     readonly style?: React.CSSProperties;

package/dist/field.d.ts

@@ -14,7 +14,6 @@ interface FieldProps {
     readonly readOnly?: boolean;
     readonly invalid?: boolean;
     readonly floating?: boolean;
-    readonly bgColor?: string | Record<string, string>;
     readonly id?: string;
     readonly className?: string;
     readonly style?: React.CSSProperties;

package/dist/field.js

@@ -1,20 +1,26 @@
 "use client";
-import * as LabelPrimitive from '@radix-ui/react-label';
+import { YStack, Label, Text } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/field.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var space = String.fromCharCode(32);
 function getComponentDisplayName(type) {
   if (typeof type === "string") return void 0;
   if ("displayName" in type) return type.displayName;
   return void 0;
 }
+var ERROR = "var(--color-text-error)";
+var MUTED = "var(--color-text-secondary)";
+var Marks = ({ required, optionalText, errorText }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  required && /* @__PURE__ */ jsx(Text, { color: ERROR, "aria-hidden": true, children: "*" }),
+  !required && optionalText && /* @__PURE__ */ jsx(Text, { fontSize: 14, color: MUTED, children: optionalText }),
+  errorText && /* @__PURE__ */ jsxs(Text, { fontSize: 14, color: ERROR, children: [
+    "-",
+    space,
+    errorText
+  ] })
+] });
 var Field = React.forwardRef(
   function Field2(props, ref) {
     const {
@@ -33,127 +39,73 @@ var Field = React.forwardRef(
       className,
       style
     } = props;
+    const flags = {
+      "data-disabled": disabled || void 0,
+      "data-readonly": readOnly || void 0,
+      "data-invalid": invalid || void 0
+    };
     if (floating && label) {
-      const injectedProps2 = {
-        className: "peer",
-        placeholder: " ",
-        size,
-        floating,
-        disabled,
-        readOnly
-      };
+      const injectedProps = { className: "lux-field-control", placeholder: " ", size, floating, disabled, readOnly };
       const labelElement = /* @__PURE__ */ jsxs(
-        LabelPrimitive.Root,
+        Label,
         {
-          className: cn(
-            "absolute left-3 top-1/2 -translate-y-1/2",
-            "text-[var(--color-input-placeholder,theme(colors.gray.400))]",
-            "pointer-events-none select-none",
-            "origin-top-left transition-all duration-150",
-            "peer-focus:top-1 peer-focus:translate-y-0 peer-focus:scale-75",
-            "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:scale-75"
-          ),
           htmlFor: id,
+          position: "absolute",
+          left: 12,
+          top: "50%",
+          pointerEvents: "none",
+          userSelect: "none",
+          flexDirection: "row",
+          gap: 4,
+          color: "var(--color-input-placeholder)",
+          className: "lux-field-float",
           children: [
             label,
-            required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
-            !required && optionalText && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm", children: optionalText }),
-            errorText && /* @__PURE__ */ jsxs("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))] text-sm", children: [
-              "-",
-              space,
-              errorText
-            ] })
+            /* @__PURE__ */ jsx(Marks, { required, optionalText, errorText })
           ]
         }
       );
-      const helperTextElement = helperText ? /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }) : null;
+      const helperTextElement = helperText ? /* @__PURE__ */ jsx(Text, { marginTop: 6, fontSize: 12, color: MUTED, children: helperText }) : null;
       const child2 = React.Children.only(children);
       const isInputGroup = getComponentDisplayName(child2.type) === "InputGroup";
       if (isInputGroup) {
-        const inputElement2 = React.cloneElement(
+        const inputElement = React.cloneElement(
           React.Children.only(child2.props.children),
-          injectedProps2
-        );
-        const groupInputElement = React.cloneElement(
-          child2,
-          {},
-          inputElement2,
-          labelElement
-        );
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref,
-            id,
-            className: cn("relative w-full", className),
-            style,
-            "data-disabled": disabled || void 0,
-            "data-readonly": readOnly || void 0,
-            "data-invalid": invalid || void 0,
-            children: [
-              groupInputElement,
-              helperTextElement
-            ]
-          }
+          injectedProps
         );
+        return /* @__PURE__ */ jsxs(YStack, { ref, id, position: "relative", width: "100%", className, style, ...flags, children: [
+          React.cloneElement(child2, {}, inputElement, labelElement),
+          helperTextElement
+        ] });
       }
-      const inputElement = React.cloneElement(child2, injectedProps2);
-      return /* @__PURE__ */ jsxs(
-        "div",
+      return /* @__PURE__ */ jsxs(YStack, { ref, id, position: "relative", width: "100%", className, style, ...flags, children: [
+        React.cloneElement(child2, injectedProps),
+        labelElement,
+        helperTextElement
+      ] });
+    }
+    const child = React.Children.only(children);
+    return /* @__PURE__ */ jsxs(YStack, { ref, id, gap: 4, className, style, ...flags, children: [
+      label && /* @__PURE__ */ jsxs(
+        Label,
         {
-          ref,
-          id,
-          className: cn("relative w-full", className),
-          style,
-          "data-disabled": disabled || void 0,
-          "data-readonly": readOnly || void 0,
-          "data-invalid": invalid || void 0,
+          htmlFor: id,
+          flexDirection: "row",
+          gap: 4,
+          fontSize: 14,
+          fontWeight: "500",
+          color: "var(--color-text-primary)",
+          opacity: disabled ? 0.4 : 1,
           children: [
-            inputElement,
-            labelElement,
-            helperTextElement
+            label,
+            /* @__PURE__ */ jsx(Marks, { required, optionalText })
           ]
         }
-      );
-    }
-    const injectedProps = {
-      size
-    };
-    const child = React.Children.only(children);
-    const clonedChild = React.cloneElement(child, injectedProps);
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        id,
-        className: cn("flex flex-col gap-1", className),
-        style,
-        "data-disabled": disabled || void 0,
-        "data-readonly": readOnly || void 0,
-        "data-invalid": invalid || void 0,
-        children: [
-          label && /* @__PURE__ */ jsxs(
-            LabelPrimitive.Root,
-            {
-              className: cn(
-                "text-sm font-medium text-[var(--color-field-label,theme(colors.gray.700))]",
-                "dark:text-[var(--color-field-label,theme(colors.gray.300))]",
-                disabled && "opacity-40"
-              ),
-              htmlFor: id,
-              children: [
-                label,
-                required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
-                !required && optionalText && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm font-normal", children: optionalText })
-              ]
-            }
-          ),
-          clonedChild,
-          helperText && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }),
-          errorText && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--color-fg-error,theme(colors.red.500))]", children: errorText })
-        ]
-      }
-    );
+      ),
+      React.cloneElement(child, { size }),
+      helperText && /* @__PURE__ */ jsx(Text, { fontSize: 12, color: MUTED, children: helperText }),
+      errorText && /* @__PURE__ */ jsx(Text, { fontSize: 12, color: ERROR, children: errorText })
+    ] });
   }
 );