@lolmath/ui 3.2.5 → 4.0.0

package/dist/es/components/text-area.js

@@ -3,59 +3,23 @@ import {
   TextArea as AriaTextArea,
   TextField as AriaTextField
 } from "react-aria-components";
-import { disabledGradient, goldGradient } from "../utilities/gradient.js";
 import { resolveClassName } from "../utilities/resolve-class-name.js";
-import { tv } from "../utilities/tv.js";
-const textAreaBorder = tv({
-  base: [
-    "flex bg-gradient-to-t p-px outline-none",
-    goldGradient,
-    "focus-within:from-lol-gold-400 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100"
-  ],
-  variants: {
-    isDisabled: {
-      true: [disabledGradient]
-    }
-  }
-});
-const textArea = tv({
-  base: [
-    "bg-lol-grey-hextech-black min-h-full w-full px-3 py-2 outline-none",
-    "text-lol-gold-100 font-spiegel text-xs tracking-wide",
-    "focus-within:from-lol-grey-200 focus-within:via-lol-grey-300 focus-within:to-lol-grey-300 focus-within:bg-gradient-to-t"
-  ],
-  variants: {
-    isDisabled: {
-      true: ["text-lol-grey-150"]
-    }
-  }
-});
+import { textField } from "./text-field.js";
 function TextArea({
   textAreaProps = {},
-  borderProps = {},
   children,
   ...props
 }) {
   return /* @__PURE__ */ jsx(AriaTextField, { ...props, children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
     typeof children === "function" ? children(values) : children,
     /* @__PURE__ */ jsx(
-      "div",
+      AriaTextArea,
       {
-        ...borderProps,
-        className: textAreaBorder({
-          ...values,
-          className: resolveClassName(borderProps?.className, values)
-        }),
-        children: /* @__PURE__ */ jsx(
-          AriaTextArea,
-          {
-            ...textAreaProps,
-            className: (values2) => textArea({
-              ...values2,
-              className: resolveClassName(textAreaProps?.className, values2)
-            })
-          }
-        )
+        ...textAreaProps,
+        className: (values2) => textField({
+          ...values2,
+          className: resolveClassName(textAreaProps?.className, values2)
+        })
       }
     )
   ] }) });

package/dist/es/components/text-area.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAmDI,mBASE,KATF;AA9CJ;AAAA,EACC,YAAY;AAAA,EACZ,aAAa;AAAA,OACP;AACP,SAAS,kBAAkB,oBAAoB;AAC/C,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAEnB,MAAM,iBAAiB,GAAG;AAAA,EACzB,MAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EACA,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM,CAAC,gBAAgB;AAAA,IACxB;AAAA,EACD;AACD,CAAC;AAED,MAAM,WAAW,GAAG;AAAA,EACnB,MAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EACA,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM,CAAC,mBAAmB;AAAA,IAC3B;AAAA,EACD;AACD,CAAC;AAEM,SAAS,SAAS;AAAA,EACxB,gBAAgB,CAAC;AAAA,EACjB,cAAc,CAAC;AAAA,EACf;AAAA,EACA,GAAG;AACJ,GAGG;AACF,SACC,oBAAC,iBAAe,GAAG,OACjB,WAAC,WACD,iCACE;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,eAAe;AAAA,UACzB,GAAG;AAAA,UACH,WAAW,iBAAiB,aAAa,WAAW,MAAM;AAAA,QAC3D,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACC,GAAG;AAAA,YACJ,WAAW,CAACA,YACX,SAAS;AAAA,cACR,GAAGA;AAAA,cACH,WAAW,iBAAiB,eAAe,WAAWA,OAAM;AAAA,YAC7D,CAAC;AAAA;AAAA,QAEH;AAAA;AAAA,IACD;AAAA,KACD,GAEF;AAEF","names":["values"],"ignoreList":[],"sources":["../../../src/components/text-area.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport type {\n\tTextFieldProps as AriaTextFieldProps,\n\tTextAreaProps,\n} from \"react-aria-components\";\nimport {\n\tTextArea as AriaTextArea,\n\tTextField as AriaTextField,\n} from \"react-aria-components\";\nimport { disabledGradient, goldGradient } from \"../utilities/gradient.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { tv } from \"../utilities/tv.js\";\n\nconst textAreaBorder = tv({\n\tbase: [\n\t\t\"flex bg-gradient-to-t p-px outline-none\",\n\t\tgoldGradient,\n\t\t\"focus-within:from-lol-gold-400 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100\",\n\t],\n\tvariants: {\n\t\tisDisabled: {\n\t\t\ttrue: [disabledGradient],\n\t\t},\n\t},\n});\n\nconst textArea = tv({\n\tbase: [\n\t\t\"bg-lol-grey-hextech-black min-h-full w-full px-3 py-2 outline-none\",\n\t\t\"text-lol-gold-100 font-spiegel text-xs tracking-wide\",\n\t\t\"focus-within:from-lol-grey-200 focus-within:via-lol-grey-300 focus-within:to-lol-grey-300 focus-within:bg-gradient-to-t\",\n\t],\n\tvariants: {\n\t\tisDisabled: {\n\t\t\ttrue: [\"text-lol-grey-150\"],\n\t\t},\n\t},\n});\n\nexport function TextArea({\n\ttextAreaProps = {},\n\tborderProps = {},\n\tchildren,\n\t...props\n}: AriaTextFieldProps & {\n\ttextAreaProps?: TextAreaProps;\n\tborderProps?: ComponentProps<\"div\">;\n}) {\n\treturn (\n\t\t<AriaTextField {...props}>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t{typeof children === \"function\" ? children(values) : children}\n\t\t\t\t\t<div\n\t\t\t\t\t\t{...borderProps}\n\t\t\t\t\t\tclassName={textAreaBorder({\n\t\t\t\t\t\t\t...values,\n\t\t\t\t\t\t\tclassName: resolveClassName(borderProps?.className, values),\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AriaTextArea\n\t\t\t\t\t\t\t{...textAreaProps}\n\t\t\t\t\t\t\tclassName={(values) =>\n\t\t\t\t\t\t\t\ttextArea({\n\t\t\t\t\t\t\t\t\t...values,\n\t\t\t\t\t\t\t\t\tclassName: resolveClassName(textAreaProps?.className, values),\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaTextField>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
+{"version":3,"mappings":"AAqBI,mBAEC,KAFD;AAjBJ;AAAA,EACC,YAAY;AAAA,EACZ,aAAa;AAAA,OACP;AACP,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAEnB,SAAS,SAAS;AAAA,EACxB,gBAAgB,CAAC;AAAA,EACjB;AAAA,EACA,GAAG;AACJ,GAEG;AACF,SACC,oBAAC,iBAAe,GAAG,OACjB,WAAC,WACD,iCACE;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,CAACA,YACX,UAAU;AAAA,UACT,GAAGA;AAAA,UACH,WAAW,iBAAiB,eAAe,WAAWA,OAAM;AAAA,QAC7D,CAAC;AAAA;AAAA,IAEH;AAAA,KACD,GAEF;AAEF","names":["values"],"ignoreList":[],"sources":["../../../src/components/text-area.tsx"],"sourcesContent":["import type {\n\tTextFieldProps as AriaTextFieldProps,\n\tTextAreaProps,\n} from \"react-aria-components\";\nimport {\n\tTextArea as AriaTextArea,\n\tTextField as AriaTextField,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { textField } from \"./text-field.js\";\n\nexport function TextArea({\n\ttextAreaProps = {},\n\tchildren,\n\t...props\n}: AriaTextFieldProps & {\n\ttextAreaProps?: TextAreaProps;\n}) {\n\treturn (\n\t\t<AriaTextField {...props}>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t{typeof children === \"function\" ? children(values) : children}\n\t\t\t\t\t<AriaTextArea\n\t\t\t\t\t\t{...textAreaProps}\n\t\t\t\t\t\tclassName={(values) =>\n\t\t\t\t\t\t\ttextField({\n\t\t\t\t\t\t\t\t...values,\n\t\t\t\t\t\t\t\tclassName: resolveClassName(textAreaProps?.className, values),\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaTextField>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/text-field.d.ts

@@ -1,5 +1,63 @@
 import type { ComponentProps } from "react";
 import type { TextFieldProps as AriaTextFieldProps, InputProps } from "react-aria-components";
+export declare const textField: (props?: ({
+    isDisabled?: boolean | undefined;
+    isFocused?: boolean | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
 export declare function TextField({ inputProps, borderProps, children, ...props }: AriaTextFieldProps & {
     inputProps?: InputProps;
     borderProps?: ComponentProps<"div">;

package/dist/es/components/text-field.js

@@ -3,30 +3,17 @@ import {
   Input as AriaInput,
   TextField as AriaTextField
 } from "react-aria-components";
-import { disabledGradient, goldGradient } from "../utilities/gradient.js";
 import { resolveClassName } from "../utilities/resolve-class-name.js";
-import { tv } from "../utilities/tv.js";
-const textFieldBorder = tv({
-  base: [
-    "flex bg-gradient-to-t p-px outline-none",
-    goldGradient,
-    "focus-within:from-lol-gold-400 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100"
-  ],
+import { cva } from "cva";
+import classes from "./text-field.module";
+const textField = cva({
+  base: classes.textField,
   variants: {
     isDisabled: {
-      true: [disabledGradient]
-    }
-  }
-});
-const textField = tv({
-  base: [
-    "bg-lol-grey-hextech-black min-h-full w-full px-3 py-2 outline-none",
-    "text-lol-gold-100 font-spiegel text-xs tracking-wide",
-    "focus-within:from-lol-grey-200 focus-within:via-lol-grey-300 focus-within:to-lol-grey-300 focus-within:bg-gradient-to-t"
-  ],
-  variants: {
-    isDisabled: {
-      true: ["text-lol-grey-150"]
+      true: classes.disabled
+    },
+    isFocused: {
+      true: classes.focus
     }
   }
 });
@@ -39,30 +26,21 @@ function TextField({
   return /* @__PURE__ */ jsx(AriaTextField, { ...props, children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
     typeof children === "function" ? children(values) : children,
     /* @__PURE__ */ jsx(
-      "div",
+      AriaInput,
       {
-        ...borderProps,
-        className: textFieldBorder({
-          ...values,
-          className: resolveClassName(borderProps?.className, values)
-        }),
-        children: /* @__PURE__ */ jsx(
-          AriaInput,
-          {
-            type: "text",
-            ...inputProps,
-            className: (values2) => textField({
-              ...values2,
-              className: resolveClassName(inputProps?.className, values2)
-            })
-          }
-        )
+        type: "text",
+        ...inputProps,
+        className: (values2) => textField({
+          ...values2,
+          className: resolveClassName(inputProps?.className, values2)
+        })
       }
     )
   ] }) });
 }
 export {
-  TextField
+  TextField,
+  textField
 };
 
 //# sourceMappingURL=text-field.js.map

package/dist/es/components/text-field.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAmDI,mBASE,KATF;AA9CJ;AAAA,EACC,SAAS;AAAA,EACT,aAAa;AAAA,OACP;AACP,SAAS,kBAAkB,oBAAoB;AAC/C,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAEnB,MAAM,kBAAkB,GAAG;AAAA,EAC1B,MAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EACA,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM,CAAC,gBAAgB;AAAA,IACxB;AAAA,EACD;AACD,CAAC;AAED,MAAM,YAAY,GAAG;AAAA,EACpB,MAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EACA,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM,CAAC,mBAAmB;AAAA,IAC3B;AAAA,EACD;AACD,CAAC;AAEM,SAAS,UAAU;AAAA,EACzB,aAAa,CAAC;AAAA,EACd,cAAc,CAAC;AAAA,EACf;AAAA,EACA,GAAG;AACJ,GAGG;AACF,SACC,oBAAC,iBAAe,GAAG,OACjB,WAAC,WACD,iCACE;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,gBAAgB;AAAA,UAC1B,GAAG;AAAA,UACH,WAAW,iBAAiB,aAAa,WAAW,MAAM;AAAA,QAC3D,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACJ,GAAG;AAAA,YACJ,WAAW,CAACA,YACX,UAAU;AAAA,cACT,GAAGA;AAAA,cACH,WAAW,iBAAiB,YAAY,WAAWA,OAAM;AAAA,YAC1D,CAAC;AAAA;AAAA,QAEH;AAAA;AAAA,IACD;AAAA,KACD,GAEF;AAEF","names":["values"],"ignoreList":[],"sources":["../../../src/components/text-field.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport type {\n\tTextFieldProps as AriaTextFieldProps,\n\tInputProps,\n} from \"react-aria-components\";\nimport {\n\tInput as AriaInput,\n\tTextField as AriaTextField,\n} from \"react-aria-components\";\nimport { disabledGradient, goldGradient } from \"../utilities/gradient.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { tv } from \"../utilities/tv.js\";\n\nconst textFieldBorder = tv({\n\tbase: [\n\t\t\"flex bg-gradient-to-t p-px outline-none\",\n\t\tgoldGradient,\n\t\t\"focus-within:from-lol-gold-400 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100\",\n\t],\n\tvariants: {\n\t\tisDisabled: {\n\t\t\ttrue: [disabledGradient],\n\t\t},\n\t},\n});\n\nconst textField = tv({\n\tbase: [\n\t\t\"bg-lol-grey-hextech-black min-h-full w-full px-3 py-2 outline-none\",\n\t\t\"text-lol-gold-100 font-spiegel text-xs tracking-wide\",\n\t\t\"focus-within:from-lol-grey-200 focus-within:via-lol-grey-300 focus-within:to-lol-grey-300 focus-within:bg-gradient-to-t\",\n\t],\n\tvariants: {\n\t\tisDisabled: {\n\t\t\ttrue: [\"text-lol-grey-150\"],\n\t\t},\n\t},\n});\n\nexport function TextField({\n\tinputProps = {},\n\tborderProps = {},\n\tchildren,\n\t...props\n}: AriaTextFieldProps & {\n\tinputProps?: InputProps;\n\tborderProps?: ComponentProps<\"div\">;\n}) {\n\treturn (\n\t\t<AriaTextField {...props}>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t{typeof children === \"function\" ? children(values) : children}\n\t\t\t\t\t<div\n\t\t\t\t\t\t{...borderProps}\n\t\t\t\t\t\tclassName={textFieldBorder({\n\t\t\t\t\t\t\t...values,\n\t\t\t\t\t\t\tclassName: resolveClassName(borderProps?.className, values),\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AriaInput\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t{...inputProps}\n\t\t\t\t\t\t\tclassName={(values) =>\n\t\t\t\t\t\t\t\ttextField({\n\t\t\t\t\t\t\t\t\t...values,\n\t\t\t\t\t\t\t\t\tclassName: resolveClassName(inputProps?.className, values),\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaTextField>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
+{"version":3,"mappings":"AAsCI,mBAGC,KAHD;AAjCJ;AAAA,EACC,SAAS;AAAA,EACT,aAAa;AAAA,OACP;AACP,SAAS,wBAAwB;AAEjC,SAAS,WAAW;AACpB,OAAO,aAAa;AAEb,MAAM,YAAY,IAAI;AAAA,EAC5B,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACV,MAAM,QAAQ;AAAA,IACf;AAAA,EACD;AACD,CAAC;AAEM,SAAS,UAAU;AAAA,EACzB,aAAa,CAAC;AAAA,EACd,cAAc,CAAC;AAAA,EACf;AAAA,EACA,GAAG;AACJ,GAGG;AACF,SACC,oBAAC,iBAAe,GAAG,OACjB,WAAC,WACD,iCACE;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IAErD;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ,WAAW,CAACA,YACX,UAAU;AAAA,UACT,GAAGA;AAAA,UACH,WAAW,iBAAiB,YAAY,WAAWA,OAAM;AAAA,QAC1D,CAAC;AAAA;AAAA,IAEH;AAAA,KACD,GAEF;AAEF","names":["values"],"ignoreList":[],"sources":["../../../src/components/text-field.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport type {\n\tTextFieldProps as AriaTextFieldProps,\n\tInputProps,\n} from \"react-aria-components\";\nimport {\n\tInput as AriaInput,\n\tTextField as AriaTextField,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\n\nimport { cva } from \"cva\";\nimport classes from \"./text-field.module\";\n\nexport const textField = cva({\n\tbase: classes.textField,\n\tvariants: {\n\t\tisDisabled: {\n\t\t\ttrue: classes.disabled,\n\t\t},\n\t\tisFocused: {\n\t\t\ttrue: classes.focus,\n\t\t},\n\t},\n});\n\nexport function TextField({\n\tinputProps = {},\n\tborderProps = {},\n\tchildren,\n\t...props\n}: AriaTextFieldProps & {\n\tinputProps?: InputProps;\n\tborderProps?: ComponentProps<\"div\">;\n}) {\n\treturn (\n\t\t<AriaTextField {...props}>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t{typeof children === \"function\" ? children(values) : children}\n\n\t\t\t\t\t<AriaInput\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t{...inputProps}\n\t\t\t\t\t\tclassName={(values) =>\n\t\t\t\t\t\t\ttextField({\n\t\t\t\t\t\t\t\t...values,\n\t\t\t\t\t\t\t\tclassName: resolveClassName(inputProps?.className, values),\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaTextField>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/text-field.module.js

@@ -0,0 +1,7 @@
+import "./text-field_module.css";
+var text_field_default = { "textField": "textField_32558", "disabled": "disabled_32558", "focus": "focus_32558" };
+export {
+  text_field_default as default
+};
+
+//# sourceMappingURL=text-field.module.js.map

package/dist/es/components/text-field.module.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO;AAA0B,IAAO,qBAAQ,EAAC,aAAY,mBAAkB,YAAW,kBAAiB,SAAQ,cAAa","names":[],"ignoreList":[],"sources":["../../../src/components/text-field.module.css"],"sourcesContent":["import \"./text-field_module.css\";export default {\"textField\":\"textField_32558\",\"disabled\":\"disabled_32558\",\"focus\":\"focus_32558\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/text-field_module.css

@@ -0,0 +1,33 @@
+.textField_32558 {
+	background:
+		var(--lol-input-background-gradient) padding-box,
+		var(--lol-input-border-gradient) border-box;
+
+	--lol-input-border-gradient: var(--lol-gradient-gold);
+	--lol-input-background-gradient: var(--lol-gradient-hextech-black);
+
+	border: 1px solid transparent;
+	grid-area: input;
+	padding: 0.5rem 0.75rem;
+	margin: 0;
+	font-size: 0.75rem;
+	line-height: 1rem;
+	color: var(--field-text-color);
+	outline: none;
+	font-family: var(--lol-font-family-spiegel);
+	font-weight: 500;
+	letter-spacing: 0.025em;
+
+	color: var(--lol-color-gold-100);
+
+	display: flex;
+	width: 100%;
+}
+.textField_32558.disabled_32558 {
+		--lol-input-border-gradient: var(--lol-gradient-disabled);
+		color: var(--lol-color-grey-150);
+	}
+.textField_32558.focus_32558 {
+		--lol-input-border-gradient: var(--lol-gradient-gold-hover);
+		--lol-input-background-gradient: var(--lol-gradient-grey-focus);
+	}

package/dist/es/components/toggle-button.d.ts

@@ -1,12 +1,10 @@
-import type { ComponentProps } from "react";
 import { type ToggleButtonProps as AriaToggleButtonProps } from "react-aria-components";
 export type ToggleButtonShape = "round" | "square" | "normal";
-export type ToggleButtonPreset = "gold" | "hextech" | "dimmed";
+export type ToggleButtonPreset = "secondary" | "hextech" | "dimmed";
 interface ToggleButtonProps extends AriaToggleButtonProps {
-    innerProps?: ComponentProps<"span">;
     preset?: ToggleButtonPreset;
     thin?: boolean;
     shape?: ToggleButtonShape;
 }
-export declare function ToggleButton({ children, className, innerProps, preset, shape, thin, ...props }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleButton({ children, className, preset, shape, thin, ...props }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/es/components/toggle-button.js

@@ -1,171 +1,47 @@
 import { jsx } from "react/jsx-runtime";
+import { cva } from "cva";
 import {
   ToggleButton as AriaToggleButton
 } from "react-aria-components";
-import {
-  dimmedGradient,
-  disabledGradient,
-  goldGradient,
-  goldGradientHover,
-  goldGradientPressed,
-  hextechGradient,
-  hextechGradientHover,
-  hextechGradientPressed
-} from "../utilities/gradient.js";
 import { resolveClassName } from "../utilities/resolve-class-name.js";
-import { tv } from "../utilities/tv.js";
-const toggleButtonBorder = tv({
-  base: "bg-gradient-to-t p-0.5 outline-none transition-colors duration-200",
+import classes from "./button.module";
+const button = cva({
+  base: classes.button,
   variants: {
     preset: {
-      gold: "",
-      hextech: "",
-      dimmed: dimmedGradient
-    },
-    shape: {
-      round: "aspect-square rounded-full",
-      square: "aspect-square",
-      normal: ""
+      secondary: classes.secondary,
+      hextech: classes.hextech,
+      dimmed: classes.dimmed
     },
     isHovered: {
-      true: ""
+      true: classes.hover
     },
     isPressed: {
-      true: ""
+      true: classes.press
     },
     isDisabled: {
-      true: ""
-    },
-    isFocused: {
-      true: ""
+      true: classes.disabled
     },
     isFocusVisible: {
-      true: ""
+      true: classes.focusVisible
     },
-    isSelected: {
-      true: ""
+    shape: {
+      round: classes.round,
+      square: classes.square,
+      normal: classes.normal
     },
     thin: {
-      true: "p-px"
-    }
-  },
-  compoundVariants: [
-    {
-      preset: ["dimmed"],
-      isSelected: true,
-      class: [goldGradient]
-    },
-    {
-      preset: ["gold"],
-      class: goldGradient
-    },
-    {
-      preset: ["gold", "dimmed"],
-      isHovered: true,
-      class: goldGradientHover
-    },
-    {
-      preset: ["gold", "dimmed"],
-      isPressed: true,
-      class: goldGradientPressed
-    },
-    {
-      preset: ["gold", "dimmed"],
-      isDisabled: true,
-      class: disabledGradient
-    },
-    {
-      preset: ["gold"],
-      isFocusVisible: true,
-      class: "outline outline-offset-2 outline-yellow-50"
-    },
-    {
-      preset: ["hextech"],
-      class: hextechGradient
-    },
-    {
-      preset: ["hextech"],
-      isHovered: true,
-      class: hextechGradientHover
-    },
-    {
-      preset: ["hextech"],
-      isPressed: true,
-      class: hextechGradientPressed
-    },
-    {
-      preset: ["hextech"],
-      isDisabled: true,
-      class: disabledGradient
-    }
-  ]
-});
-const toggleButton = tv({
-  base: "text-lol-gold-300 font-beaufort block font-bold uppercase tracking-wide transition-colors duration-200",
-  variants: {
-    preset: {
-      gold: "bg-lol-grey-300",
-      hextech: "text-lol-blue-100 bg-lol-grey-300",
-      dimmed: "bg-lol-grey-hextech-black"
-    },
-    isHovered: {
-      true: "text-lol-gold-100"
-    },
-    isPressed: {
-      true: "text-lol-grey-150"
-    },
-    isDisabled: {
-      true: "text-lol-grey-150"
-    },
-    isFocused: {
-      true: ""
+      true: classes.thin
     },
     isSelected: {
-      true: [
-        hextechGradient,
-        "text-lol-blue-100 shadow-lol-grey-300 bg-gradient-to-t shadow shadow-inner"
-      ]
-    },
-    isFocusVisible: {
-      true: ""
-    },
-    shape: {
-      round: "rounded-full",
-      square: "",
-      normal: ""
-    }
-  },
-  compoundVariants: [
-    {
-      preset: ["gold", "hextech", "dimmed"],
-      class: "px-4 py-2"
-    },
-    {
-      preset: ["hextech"],
-      isHovered: true,
-      class: "text-lol-blue-100"
-    },
-    {
-      preset: ["hextech"],
-      isPressed: true,
-      class: "text-lol-blue-400"
-    },
-    {
-      preset: ["hextech"],
-      isSelected: true,
-      class: ""
-    },
-    {
-      shape: ["round", "square"],
-      class: "flex aspect-square h-7 items-center justify-center p-0 font-black leading-none"
+      true: classes.selected
     }
-  ]
+  }
 });
 function ToggleButton({
   children,
   className,
-  innerProps = {},
-  preset = "gold",
+  preset = "secondary",
   shape = "normal",
   thin = preset === "dimmed",
   ...props
@@ -174,30 +50,14 @@ function ToggleButton({
     AriaToggleButton,
     {
       ...props,
-      className: (values) => toggleButtonBorder({
+      className: (values) => button({
         ...values,
         preset,
         shape,
         thin,
         className: resolveClassName(className, values)
       }),
-      children: (values) => /* @__PURE__ */ jsx(
-        "span",
-        {
-          ...innerProps,
-          className: toggleButton({
-            ...values,
-            preset,
-            shape,
-            className: resolveClassName(innerProps.className, values)
-          }),
-          style: {
-            // backgroundImage: hextechMagic,
-            // backgroundPosition: "center",
-          },
-          children: typeof children === "function" ? children(values) : children
-        }
-      )
+      children
     }
   );
 }

package/dist/es/components/toggle-button.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":[],"ignoreList":[],"sources":["../../../src/components/toggle-button.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport {\n\tToggleButton as AriaToggleButton,\n\ttype ToggleButtonProps as AriaToggleButtonProps,\n} from \"react-aria-components\";\nimport {\n\tdimmedGradient,\n\tdisabledGradient,\n\tgoldGradient,\n\tgoldGradientHover,\n\tgoldGradientPressed,\n\thextechGradient,\n\thextechGradientHover,\n\thextechGradientPressed,\n} from \"../utilities/gradient.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { tv } from \"../utilities/tv.js\";\n\nexport type ToggleButtonShape = \"round\" | \"square\" | \"normal\";\nexport type ToggleButtonPreset = \"gold\" | \"hextech\" | \"dimmed\";\n\nconst toggleButtonBorder = tv({\n\tbase: \"bg-gradient-to-t p-0.5 outline-none transition-colors duration-200\",\n\tvariants: {\n\t\tpreset: {\n\t\t\tgold: \"\",\n\t\t\thextech: \"\",\n\t\t\tdimmed: dimmedGradient,\n\t\t},\n\t\tshape: {\n\t\t\tround: \"aspect-square rounded-full\",\n\t\t\tsquare: \"aspect-square\",\n\t\t\tnormal: \"\",\n\t\t},\n\t\tisHovered: {\n\t\t\ttrue: \"\",\n\t\t},\n\t\tisPressed: {\n\t\t\ttrue: \"\",\n\t\t},\n\t\tisDisabled: {\n\t\t\ttrue: \"\",\n\t\t},\n\t\tisFocused: {\n\t\t\ttrue: \"\",\n\t\t},\n\t\tisFocusVisible: {\n\t\t\ttrue: \"\",\n\t\t},\n\t\tisSelected: {\n\t\t\ttrue: \"\",\n\t\t},\n\t\tthin: {\n\t\t\ttrue: \"p-px\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tpreset: [\"dimmed\"],\n\t\t\tisSelected: true,\n\t\t\tclass: [goldGradient],\n\t\t},\n\t\t{\n\t\t\tpreset: [\"gold\"],\n\t\t\tclass: goldGradient,\n\t\t},\n\t\t{\n\t\t\tpreset: [\"gold\", \"dimmed\"],\n\t\t\tisHovered: true,\n\t\t\tclass: goldGradientHover,\n\t\t},\n\t\t{\n\t\t\tpreset: [\"gold\", \"dimmed\"],\n\t\t\tisPressed: true,\n\t\t\tclass: goldGradientPressed,\n\t\t},\n\t\t{\n\t\t\tpreset: [\"gold\", \"dimmed\"],\n\t\t\tisDisabled: true,\n\t\t\tclass: disabledGradient,\n\t\t},\n\t\t{\n\t\t\tpreset: [\"gold\"],\n\t\t\tisFocusVisible: true,\n\t\t\tclass: \"outline outline-offset-2 outline-yellow-50\",\n\t\t},\n\t\t{\n\t\t\tpreset: [\"hextech\"],\n\t\t\tclass: hextechGradient,\n\t\t},\n\t\t{\n\t\t\tpreset: [\"hextech\"],\n\t\t\tisHovered: true,\n\t\t\tclass: hextechGradientHover,\n\t\t},\n\t\t{\n\t\t\tpreset: [\"hextech\"],\n\t\t\tisPressed: true,\n\t\t\tclass: hextechGradientPressed,\n\t\t},\n\t\t{\n\t\t\tpreset: [\"hextech\"],\n\t\t\tisDisabled: true,\n\t\t\tclass: disabledGradient,\n\t\t},\n\t],\n});\nconst toggleButton = tv({\n\tbase: \"text-lol-gold-300 font-beaufort block font-bold uppercase tracking-wide transition-colors duration-200\",\n\tvariants: {\n\t\tpreset: {\n\t\t\tgold: \"bg-lol-grey-300\",\n\t\t\thextech: \"text-lol-blue-100 bg-lol-grey-300\",\n\t\t\tdimmed: \"bg-lol-grey-hextech-black\",\n\t\t},\n\t\tisHovered: {\n\t\t\ttrue: \"text-lol-gold-100\",\n\t\t},\n\t\tisPressed: {\n\t\t\ttrue: \"text-lol-grey-150\",\n\t\t},\n\t\tisDisabled: {\n\t\t\ttrue: \"text-lol-grey-150\",\n\t\t},\n\t\tisFocused: {\n\t\t\ttrue: \"\",\n\t\t},\n\t\tisSelected: {\n\t\t\ttrue: [\n\t\t\t\thextechGradient,\n\t\t\t\t\"text-lol-blue-100 shadow-lol-grey-300 bg-gradient-to-t shadow shadow-inner\",\n\t\t\t],\n\t\t},\n\t\tisFocusVisible: {\n\t\t\ttrue: \"\",\n\t\t},\n\t\tshape: {\n\t\t\tround: \"rounded-full\",\n\t\t\tsquare: \"\",\n\t\t\tnormal: \"\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tpreset: [\"gold\", \"hextech\", \"dimmed\"],\n\t\t\tclass: \"px-4 py-2\",\n\t\t},\n\t\t{\n\t\t\tpreset: [\"hextech\"],\n\t\t\tisHovered: true,\n\t\t\tclass: \"text-lol-blue-100\",\n\t\t},\n\t\t{\n\t\t\tpreset: [\"hextech\"],\n\t\t\tisPressed: true,\n\t\t\tclass: \"text-lol-blue-400\",\n\t\t},\n\t\t{\n\t\t\tpreset: [\"hextech\"],\n\t\t\tisSelected: true,\n\t\t\tclass: \"\",\n\t\t},\n\n\t\t{\n\t\t\tshape: [\"round\", \"square\"],\n\t\t\tclass:\n\t\t\t\t\"flex aspect-square h-7 items-center justify-center p-0 font-black leading-none\",\n\t\t},\n\t],\n});\n\ninterface ToggleButtonProps extends AriaToggleButtonProps {\n\tinnerProps?: ComponentProps<\"span\">;\n\tpreset?: ToggleButtonPreset;\n\tthin?: boolean;\n\tshape?: ToggleButtonShape;\n}\n\nexport function ToggleButton({\n\tchildren,\n\tclassName,\n\tinnerProps = {},\n\tpreset = \"gold\",\n\tshape = \"normal\",\n\tthin = preset === \"dimmed\",\n\t...props\n}: ToggleButtonProps) {\n\treturn (\n\t\t<AriaToggleButton\n\t\t\t{...props}\n\t\t\tclassName={(values) =>\n\t\t\t\ttoggleButtonBorder({\n\t\t\t\t\t...values,\n\t\t\t\t\tpreset,\n\t\t\t\t\tshape,\n\t\t\t\t\tthin,\n\t\t\t\t\tclassName: resolveClassName(className, values),\n\t\t\t\t})\n\t\t\t}\n\t\t>\n\t\t\t{(values) => (\n\t\t\t\t<span\n\t\t\t\t\t{...innerProps}\n\t\t\t\t\tclassName={toggleButton({\n\t\t\t\t\t\t...values,\n\t\t\t\t\t\tpreset,\n\t\t\t\t\t\tshape,\n\t\t\t\t\t\tclassName: resolveClassName(innerProps.className, values),\n\t\t\t\t\t})}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t// backgroundImage: hextechMagic,\n\t\t\t\t\t\t\t// backgroundPosition: \"center\",\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{typeof children === \"function\" ? children(values) : children}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</AriaToggleButton>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
+{"version":3,"mappings":"AA2DE;AA3DF,SAAS,WAAW;AACpB;AAAA,EACC,gBAAgB;AAAA,OAEV;AACP,SAAS,wBAAwB;AACjC,OAAO,aAAa;AAKpB,MAAM,SAAS,IAAI;AAAA,EAClB,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,QAAQ;AAAA,MACP,WAAW,QAAQ;AAAA,MACnB,SAAS,QAAQ;AAAA,MACjB,QAAQ,QAAQ;AAAA,IACjB;AAAA,IACA,WAAW;AAAA,MACV,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACV,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,YAAY;AAAA,MACX,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,gBAAgB;AAAA,MACf,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,OAAO;AAAA,MACN,OAAO,QAAQ;AAAA,MACf,QAAQ,QAAQ;AAAA,MAChB,QAAQ,QAAQ;AAAA,IACjB;AAAA,IACA,MAAM;AAAA,MACL,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,YAAY;AAAA,MACX,MAAM,QAAQ;AAAA,IACf;AAAA,EACD;AACD,CAAC;AAOM,SAAS,aAAa;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO,WAAW;AAAA,EAClB,GAAG;AACJ,GAAsB;AACrB,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,WACX,OAAO;AAAA,QACN,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,iBAAiB,WAAW,MAAM;AAAA,MAC9C,CAAC;AAAA,MAGD;AAAA;AAAA,EACF;AAEF","names":[],"ignoreList":[],"sources":["../../../src/components/toggle-button.tsx"],"sourcesContent":["import { cva } from \"cva\";\nimport {\n\tToggleButton as AriaToggleButton,\n\ttype ToggleButtonProps as AriaToggleButtonProps,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport classes from \"./button.module\";\n\nexport type ToggleButtonShape = \"round\" | \"square\" | \"normal\";\nexport type ToggleButtonPreset = \"secondary\" | \"hextech\" | \"dimmed\";\n\nconst button = cva({\n\tbase: classes.button,\n\tvariants: {\n\t\tpreset: {\n\t\t\tsecondary: classes.secondary,\n\t\t\thextech: classes.hextech,\n\t\t\tdimmed: classes.dimmed,\n\t\t},\n\t\tisHovered: {\n\t\t\ttrue: classes.hover,\n\t\t},\n\t\tisPressed: {\n\t\t\ttrue: classes.press,\n\t\t},\n\t\tisDisabled: {\n\t\t\ttrue: classes.disabled,\n\t\t},\n\t\tisFocusVisible: {\n\t\t\ttrue: classes.focusVisible,\n\t\t},\n\t\tshape: {\n\t\t\tround: classes.round,\n\t\t\tsquare: classes.square,\n\t\t\tnormal: classes.normal,\n\t\t},\n\t\tthin: {\n\t\t\ttrue: classes.thin,\n\t\t},\n\t\tisSelected: {\n\t\t\ttrue: classes.selected,\n\t\t},\n\t},\n});\ninterface ToggleButtonProps extends AriaToggleButtonProps {\n\tpreset?: ToggleButtonPreset;\n\tthin?: boolean;\n\tshape?: ToggleButtonShape;\n}\n\nexport function ToggleButton({\n\tchildren,\n\tclassName,\n\tpreset = \"secondary\",\n\tshape = \"normal\",\n\tthin = preset === \"dimmed\",\n\t...props\n}: ToggleButtonProps) {\n\treturn (\n\t\t<AriaToggleButton\n\t\t\t{...props}\n\t\t\tclassName={(values) =>\n\t\t\t\tbutton({\n\t\t\t\t\t...values,\n\t\t\t\t\tpreset,\n\t\t\t\t\tshape,\n\t\t\t\t\tthin,\n\t\t\t\t\tclassName: resolveClassName(className, values),\n\t\t\t\t})\n\t\t\t}\n\t\t>\n\t\t\t{children}\n\t\t</AriaToggleButton>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/tooltip.js

@@ -1,46 +1,40 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "cva";
 import { Tooltip as AriaTooltip, OverlayArrow } from "react-aria-components";
-import { goldGradient } from "../utilities/gradient.js";
 import { resolveClassName } from "../utilities/resolve-class-name.js";
-import { tv } from "../utilities/tv.js";
-const tooltipBorder = tv({
-  base: ["w-[280px] bg-gradient-to-t p-0.5 drop-shadow-lg", goldGradient],
+import classes from "./tooltip.module";
+const tooltipBorder = cva({
+  base: classes.tooltip,
   variants: {
-    isEntering: {
-      true: "animate-in fade-in data-[placement=bottom]:slide-in-from-top-1 data-[placement=top]:slide-in-from-bottom-1 fill-mode-forwards duration-200 ease-out"
-    },
-    isExiting: {
-      true: "animate-out fade-out data-[placement=bottom]:slide-out-to-top-1 data-[placement=top]:slide-out-to-bottom-1 fill-mode-forwards duration-150 ease-in"
-    },
     placement: {
-      bottom: "mt-2",
-      top: "mb-2",
-      center: "",
-      left: "",
-      right: ""
+      bottom: classes.bottom,
+      top: classes.top,
+      left: classes.left,
+      right: classes.right,
+      center: ""
     }
   }
 });
-const tooltipArrowBorder = tv({
-  base: "fill-lol-gold-500 absolute block h-5 w-5",
+const tooltipArrowBorder = cva({
+  base: classes.arrowBorder,
   variants: {
     placement: {
-      top: "-left-0.5 -translate-y-[1px]",
-      bottom: "fill-lol-gold-200 -left-0.5 -translate-y-[3px] rotate-180",
-      left: "fill-lol-gold-400 -top-0.5 -translate-x-px -rotate-90",
-      right: "fill-lol-gold-400 -top-0.5 -translate-x-[3px] rotate-90",
+      top: classes.top,
+      bottom: classes.bottom,
+      left: classes.left,
+      right: classes.right,
       center: ""
     }
   }
 });
-const tooltipArrow = tv({
-  base: "fill-lol-grey-300 block h-4 w-4",
+const tooltipArrow = cva({
+  base: classes.arrow,
   variants: {
     placement: {
-      top: "-translate-y-0.5",
-      bottom: "translate-y-0.5 rotate-180",
-      left: "-translate-x-0.5 -rotate-90",
-      right: "translate-x-0.5 rotate-90",
+      top: classes.top,
+      bottom: classes.bottom,
+      left: classes.left,
+      right: classes.right,
       center: ""
     }
   }
@@ -59,7 +53,7 @@ function Tooltip({ children, ...props }) {
           /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", className: tooltipArrowBorder(values2), children: /* @__PURE__ */ jsx("path", { d: "M0 0,L6 6,L12 0" }) }),
           /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", className: tooltipArrow(values2), children: /* @__PURE__ */ jsx("path", { d: "M0 0,L6 6,L12 0" }) })
         ] }) }),
-        /* @__PURE__ */ jsx("div", { className: "bg-lol-grey-300", children: typeof children === "function" ? children(values) : children })
+        typeof children === "function" ? children(values) : children
       ] })
     }
   );