@lolmath/ui 2.8.0 → 2.8.1

package/dist/index.cjs

@@ -31,7 +31,7 @@ __export(src_exports, {
   DialogTrigger: () => DialogTrigger,
   Heading: () => Heading,
   Item: () => Item,
-  Label: () => Label3,
+  Label: () => Label2,
   Modal: () => Modal,
   NumberField: () => NumberField,
   ProgressBar: () => ProgressBar,
@@ -40,7 +40,7 @@ __export(src_exports, {
   SearchField: () => SearchField,
   Select: () => Select,
   Slider: () => Slider,
-  SliderLabel: () => SliderLabel,
+  SliderOutput: () => SliderOutput,
   Spinner: () => Spinner,
   Switch: () => Switch,
   Tab: () => Tab,
@@ -228,69 +228,60 @@ var import_tailwind_merge3 = require("tailwind-merge");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function SearchField({
   inputProps = {},
+  borderProps = {},
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react_aria_components3.SearchField,
-    {
-      ...props,
-      className: (values) => {
-        return (0, import_tailwind_merge3.twMerge)(
-          "flex flex-col outline-none",
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_aria_components3.SearchField, { ...props, children: (values) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        ...borderProps,
+        className: (0, import_tailwind_merge3.twMerge)(
+          "outline-none p-px flex",
           borderGradient,
           "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
-          props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
-          resolveClassname(props.className, values)
-        );
-      },
-      children: ({ state, isDisabled }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        "div",
-        {
-          className: (0, import_tailwind_merge3.twMerge)(
-            "m-px bg-black flex flex-row focus-within:from-lol-gray-950 focus-within:to-lol-gray-900 focus-within:bg-gradient-to-b",
-            props.isDisabled && "bg-lol-gray-950"
-          ),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              import_react_aria_components3.Input,
-              {
-                ...inputProps,
-                className: (values) => {
-                  const finalClassName = resolveClassname(
-                    inputProps.className,
-                    values
-                  );
-                  return (0, import_tailwind_merge3.twMerge)(
-                    "bg-transparent grow py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel tracking-wide pl-6",
-                    props.isDisabled && "text-lol-gray-500",
-                    finalClassName
-                  );
-                },
-                type: "text",
-                style: {
-                  backgroundImage: "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAERElEQVR42uycz0tVQRTH54lamBakLUStQKhEW6V/gC2qhRgRqJURVJj9oBL7oWVBWFj0O/pd2EbJ3ARt2uW6tFUWZkhkiYQVSBZk6esc7rkgkXfm3rkzb957c+CL8Obcc+d+5vcPjESjUWZtdkuxCCwgC8gCsoAsIAvIArKArFlAASzVj/P46KuE+OgFuSvVAJKsqWWgclApaBkoDzSP0n+ARkCDoD5QD6gXNB1XNSiA5YP2graACjz85oAWgrBoN9JvH0GdoBugT4nWB2XThw2BmjhwZrMCenaIYmUnCqAq0ABoDyg9hHjpFAtjVsczIGyut0CPQDkK8ooxu+gdqfEGKAP0GFSvIc/19K6MeAGEpfkQVKGx5lfQO1PjAdB1UGUM+s9KerfRgLDT3OXDfxh0FrSWRqm5oCxQEWgdpb33EQ/fvUkloIifTft/ZtLZNLLkCILBIbsbNCVQaNUEa7FA7G+gFaAxFTNpmRp0WhDOE1AJ9RlTAv7T5FtMf3mGE8xW05oYluwOAb+roA2g7wHeMUEz8MsCvtsFa5s2QLtBaRwfnA81SK6nsP03UiwvS6M8GQEIn6kV6HN20gfKWpRiDXP8alWsDIIELKNFqJc1UxMJyzDWUYGFcZkJgFZz0j/QkiBs66bYXlZuAqBVnPQuRfs40wLgS00AtJyT3qNw3tYjmTctgHI56f0KAfVL5k0LoCxO+heFgMYk8xaz7Y6EtSCAeLPiHIX5XSSZNy2ARjnpxQoBlUjmTQugt5LzJBkrl8ybFkAvOenVivo2dxvEy/pMAMSbiyxlzslG2FZFsbXOwYIAesH4B3nnQJkh5jOTYnoZ5qnXBEA45e/g+ODezD1QJIQ8RigWb7+nQ8USJ2hfgSedkxyfGuZsdqVIwjlPsbxskvLETAGE1fm+gN8B5pxhZQVsVlgrGgV825mi83uZ0j0J+irgV0lrqBrB96WQ72vQZgH/cVCLSTNp1xDOPkFf7D9wAx6PdNpAa5hz/SWNlEe/Ydo78hXdY54P2qoKkMyxj2u3mb+zMVWGTfGSiKOuYx/X9jPnaCfWdhF0yMTVPI4geLr51ABIOOIdMXG74ydoPeiOAZBwQtlkGiC038y5moK1ScWm2S8fvm1hjWwqFpW4sV5EnfdkSE0YYy0BPfDxXCtNRYwDxKgG4UlnIVX5kQAxRujZQor1mTkHiO0+YpwixXSYFy0IPNTDvSI8NsJrwPkzFrQTNBMepO2UZ2z2a8C4/LhLsEQNL1qcCDLM67rrhx/6nCRrWKJ1FLNO8JkWKqTjpjQx1RalAeGmj2eOgc4kCyAXEi51RK/h4d2kN8kEyIWEM/lrAnC2MefmflIBciEdBF0JG06iAHIhNfxnsSoFJ5EAzVzRXwgLjs5hXqcdBv1hziZdp2ywRASE1hxWoIj95ybJ1QdZQBaQBWQBWUAWkDULyAKygPTYXwEGAArW2QJagQgvAAAAAElFTkSuQmCC')",
-                  backgroundRepeat: "no-repeat",
-                  backgroundPosition: "5px center",
-                  backgroundSize: "16px"
-                }
-              }
-            ),
-            state.value.length > 0 && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              import_react_aria_components3.Button,
-              {
-                className: (buttonValues) => (0, import_tailwind_merge3.twMerge)(
-                  "font-black text-[#cdbe91] text-xs px-4",
-                  buttonValues.isHovered && "text-lol-gold-100",
-                  buttonValues.isPressed && "text-[#463714]"
-                ),
-                children: "\u2715"
+          values.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
+          resolveClassname(borderProps?.className, values),
+          values.isDisabled && "bg-lol-gray-950"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_react_aria_components3.Input,
+            {
+              ...inputProps,
+              className: (values2) => (0, import_tailwind_merge3.twMerge)(
+                "bg-black w-full min-h-full py-2 px-3 outline-none pl-6",
+                "text-lol-gold-50 text-xs font-spiegel tracking-wide",
+                "focus-within:from-lol-gray-950 focus-within:to-lol-gray-900 focus-within:bg-gradient-to-b",
+                values2.isDisabled && "text-lol-gray-500",
+                resolveClassname(inputProps.className, values2)
+              ),
+              type: "text",
+              style: {
+                backgroundImage: "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAERElEQVR42uycz0tVQRTH54lamBakLUStQKhEW6V/gC2qhRgRqJURVJj9oBL7oWVBWFj0O/pd2EbJ3ARt2uW6tFUWZkhkiYQVSBZk6esc7rkgkXfm3rkzb957c+CL8Obcc+d+5vcPjESjUWZtdkuxCCwgC8gCsoAsIAvIArKArFlAASzVj/P46KuE+OgFuSvVAJKsqWWgclApaBkoDzSP0n+ARkCDoD5QD6gXNB1XNSiA5YP2graACjz85oAWgrBoN9JvH0GdoBugT4nWB2XThw2BmjhwZrMCenaIYmUnCqAq0ABoDyg9hHjpFAtjVsczIGyut0CPQDkK8ooxu+gdqfEGKAP0GFSvIc/19K6MeAGEpfkQVKGx5lfQO1PjAdB1UGUM+s9KerfRgLDT3OXDfxh0FrSWRqm5oCxQEWgdpb33EQ/fvUkloIifTft/ZtLZNLLkCILBIbsbNCVQaNUEa7FA7G+gFaAxFTNpmRp0WhDOE1AJ9RlTAv7T5FtMf3mGE8xW05oYluwOAb+roA2g7wHeMUEz8MsCvtsFa5s2QLtBaRwfnA81SK6nsP03UiwvS6M8GQEIn6kV6HN20gfKWpRiDXP8alWsDIIELKNFqJc1UxMJyzDWUYGFcZkJgFZz0j/QkiBs66bYXlZuAqBVnPQuRfs40wLgS00AtJyT3qNw3tYjmTctgHI56f0KAfVL5k0LoCxO+heFgMYk8xaz7Y6EtSCAeLPiHIX5XSSZNy2ARjnpxQoBlUjmTQugt5LzJBkrl8ybFkAvOenVivo2dxvEy/pMAMSbiyxlzslG2FZFsbXOwYIAesH4B3nnQJkh5jOTYnoZ5qnXBEA45e/g+ODezD1QJIQ8RigWb7+nQ8USJ2hfgSedkxyfGuZsdqVIwjlPsbxskvLETAGE1fm+gN8B5pxhZQVsVlgrGgV825mi83uZ0j0J+irgV0lrqBrB96WQ72vQZgH/cVCLSTNp1xDOPkFf7D9wAx6PdNpAa5hz/SWNlEe/Ydo78hXdY54P2qoKkMyxj2u3mb+zMVWGTfGSiKOuYx/X9jPnaCfWdhF0yMTVPI4geLr51ABIOOIdMXG74ydoPeiOAZBwQtlkGiC038y5moK1ScWm2S8fvm1hjWwqFpW4sV5EnfdkSE0YYy0BPfDxXCtNRYwDxKgG4UlnIVX5kQAxRujZQor1mTkHiO0+YpwixXSYFy0IPNTDvSI8NsJrwPkzFrQTNBMepO2UZ2z2a8C4/LhLsEQNL1qcCDLM67rrhx/6nCRrWKJ1FLNO8JkWKqTjpjQx1RalAeGmj2eOgc4kCyAXEi51RK/h4d2kN8kEyIWEM/lrAnC2MefmflIBciEdBF0JG06iAHIhNfxnsSoFJ5EAzVzRXwgLjs5hXqcdBv1hziZdp2ywRASE1hxWoIj95ybJ1QdZQBaQBWQBWUAWkDULyAKygPTYXwEGAArW2QJagQgvAAAAAElFTkSuQmCC')",
+                backgroundRepeat: "no-repeat",
+                backgroundPosition: "5px center",
+                backgroundSize: "16px"
               }
-            )
-          ]
-        }
-      )
-    }
-  );
+            }
+          ),
+          values.state.value.length > 0 && !values.isDisabled && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_react_aria_components3.Button,
+            {
+              className: (buttonValues) => (0, import_tailwind_merge3.twMerge)(
+                "font-black text-[#cdbe91] text-xs px-4 bg-black",
+                buttonValues.isHovered && "text-lol-gold-100",
+                buttonValues.isPressed && "text-[#463714]"
+              ),
+              children: "\u2715"
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
 }
 
 // src/components/slider/slider.tsx
@@ -408,11 +399,18 @@ function Slider({
     }
   );
 }
-function SliderLabel({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between font-spiegel text-xs text-lol-gray-300 font-normal tracking-wide", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components4.Label, { className: "", children }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components4.SliderOutput, { className: "", children: (sliderRenderProps) => sliderRenderProps.state.values.map((_, i) => sliderRenderProps.state.getThumbValueLabel(i)).join(" \u2013 ") })
-  ] });
+function SliderOutput(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_aria_components4.SliderOutput,
+    {
+      className: (values) => (0, import_tailwind_merge4.twMerge)(
+        "font-spiegel text-xs text-lol-gray-300 font-normal tracking-wide",
+        resolveClassname(props.className, values)
+      ),
+      children: (sliderRenderProps) => sliderRenderProps.state.values.map((_, i) => sliderRenderProps.state.getThumbValueLabel(i)).join(" \u2013 "),
+      ...props
+    }
+  );
 }
 
 // src/components/switch.tsx
@@ -635,44 +633,43 @@ var import_tailwind_merge8 = require("tailwind-merge");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function TextField({
   inputProps = {},
+  borderProps = {},
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_react_aria_components7.TextField,
-    {
-      ...props,
-      className: (values) => (0, import_tailwind_merge8.twMerge)(
-        "flex flex-col outline-none",
-        borderGradient,
-        "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
-        props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
-        resolveClassname(props.className, values)
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        "div",
-        {
-          className: (0, import_tailwind_merge8.twMerge)(
-            "m-px bg-black flex flex-row focus-within:from-lol-gray-950 focus-within:to-lol-gray-900 focus-within:bg-gradient-to-b",
-            props.isDisabled && "bg-lol-gray-950"
-          ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            import_react_aria_components7.Input,
-            {
-              ...inputProps,
-              className: (values) => {
-                return (0, import_tailwind_merge8.twMerge)(
-                  "bg-transparent grow py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel tracking-wide",
-                  values.isDisabled && "text-lol-gray-500",
-                  resolveClassname(inputProps.className, values)
-                );
-              },
-              type: "text"
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_aria_components7.TextField, { ...props, children: (values) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        ...borderProps,
+        className: (0, import_tailwind_merge8.twMerge)(
+          "outline-none p-px",
+          borderGradient,
+          "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
+          values.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
+          resolveClassname(borderProps?.className, values),
+          values.isDisabled && "bg-lol-gray-950"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_react_aria_components7.Input,
+          {
+            type: "text",
+            ...inputProps,
+            className: (values2) => {
+              return (0, import_tailwind_merge8.twMerge)(
+                "bg-black w-full min-h-full py-2 px-3 outline-none",
+                "text-lol-gold-50 text-xs font-spiegel tracking-wide",
+                "focus-within:from-lol-gray-950 focus-within:to-lol-gray-900 focus-within:bg-gradient-to-b",
+                values2.isDisabled && "text-lol-gray-500",
+                resolveClassname(inputProps.className, values2)
+              );
             }
-          )
-        }
-      )
-    }
-  );
+          }
+        )
+      }
+    )
+  ] }) });
 }
 
 // src/components/radio-group.tsx
@@ -722,7 +719,7 @@ function Radio({ ...props }) {
 var import_react_aria_components9 = require("react-aria-components");
 var import_tailwind_merge10 = require("tailwind-merge");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function Label3({ ...props }) {
+function Label2({ ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_react_aria_components9.Label,
     {
@@ -742,46 +739,59 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 function NumberField({
   inputProps = {},
   groupProps = {},
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_aria_components10.NumberField, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-    import_react_aria_components10.Group,
-    {
-      ...groupProps,
-      className: (values) => {
-        const finalClassName = resolveClassname(groupProps.className, values);
-        return (0, import_tailwind_merge11.twMerge)(
-          "grid grid-cols-[auto_1fr_auto] outline-none gap-px p-px",
-          borderGradient,
-          "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
-          props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
-          finalClassName
-        );
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_aria_components10.Button, { className: "text-lol-gray-50 px-2.5 bg-black", slot: "decrement", children: "-" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react_aria_components10.Input,
-          {
-            ...inputProps,
-            className: (values) => {
-              const finalClassName = resolveClassname(
-                inputProps.className,
-                values
-              );
-              return (0, import_tailwind_merge11.twMerge)(
-                "bg-black w-full py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel",
-                values.isDisabled && "text-lol-gray-500 bg-lol-gray-950",
-                values.isFocused && "from-lol-gray-950 to-lol-gray-900 bg-gradient-to-b",
-                finalClassName
-              );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_aria_components10.NumberField, { ...props, children: (values) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      import_react_aria_components10.Group,
+      {
+        ...groupProps,
+        className: (values2) => {
+          return (0, import_tailwind_merge11.twMerge)(
+            "grid grid-cols-[auto_1fr_auto] outline-none gap-px p-px",
+            borderGradient,
+            "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
+            props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
+            resolveClassname(groupProps.className, values2)
+          );
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_react_aria_components10.Button,
+            {
+              className: "text-lol-gray-50 px-2.5 bg-black",
+              slot: "decrement",
+              children: "-"
             }
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_aria_components10.Button, { className: "text-lol-gray-50 px-2.5 bg-black", slot: "increment", children: "+" })
-      ]
-    }
-  ) });
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_react_aria_components10.Input,
+            {
+              ...inputProps,
+              className: (values2) => {
+                return (0, import_tailwind_merge11.twMerge)(
+                  "bg-black w-full py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel",
+                  values2.isDisabled && "text-lol-gray-500 bg-lol-gray-950",
+                  values2.isFocused && "from-lol-gray-950 to-lol-gray-900 bg-gradient-to-b",
+                  resolveClassname(inputProps.className, values2)
+                );
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_react_aria_components10.Button,
+            {
+              className: "text-lol-gray-50 px-2.5 bg-black",
+              slot: "increment",
+              children: "+"
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
 }
 
 // src/components/spinner/spinner.tsx
@@ -1007,43 +1017,42 @@ var import_tailwind_merge16 = require("tailwind-merge");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function TextArea({
   textAreaProps = {},
+  borderProps = {},
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_react_aria_components14.TextField,
-    {
-      ...props,
-      className: (values) => (0, import_tailwind_merge16.twMerge)(
-        "flex flex-col outline-none",
-        borderGradient,
-        "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
-        props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
-        resolveClassname(props.className, values)
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        "div",
-        {
-          className: (0, import_tailwind_merge16.twMerge)(
-            "m-px bg-black flex flex-row focus-within:from-lol-gray-950 focus-within:to-lol-gray-900 focus-within:bg-gradient-to-b",
-            props.isDisabled && "bg-lol-gray-950"
-          ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            import_react_aria_components14.TextArea,
-            {
-              ...textAreaProps,
-              className: (values) => {
-                return (0, import_tailwind_merge16.twMerge)(
-                  "bg-transparent grow py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel tracking-wide",
-                  values.isDisabled && "text-lol-gray-500",
-                  resolveClassname(textAreaProps.className, values)
-                );
-              }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components14.TextField, { ...props, children: (values) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "div",
+      {
+        ...borderProps,
+        className: (0, import_tailwind_merge16.twMerge)(
+          "outline-none p-px flex",
+          borderGradient,
+          "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
+          values.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
+          resolveClassname(borderProps?.className, values),
+          values.isDisabled && "bg-lol-gray-950"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_react_aria_components14.TextArea,
+          {
+            ...textAreaProps,
+            className: (values2) => {
+              return (0, import_tailwind_merge16.twMerge)(
+                "bg-black w-full min-h-full py-2 px-3 outline-none",
+                "text-lol-gold-50 text-xs font-spiegel tracking-wide",
+                "focus-within:from-lol-gray-950 focus-within:to-lol-gray-900 focus-within:bg-gradient-to-b",
+                values2.isDisabled && "text-lol-gray-500",
+                resolveClassname(textAreaProps.className, values2)
+              );
             }
-          )
-        }
-      )
-    }
-  );
+          }
+        )
+      }
+    )
+  ] }) });
 }
 
 // src/components/tooltip.tsx
@@ -1158,7 +1167,7 @@ function borderInverted(r) {
   SearchField,
   Select,
   Slider,
-  SliderLabel,
+  SliderOutput,
   Spinner,
   Switch,
   Tab,