@lolmath/ui 3.2.1 → 3.2.2

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

@@ -0,0 +1,67 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  TextField as AriaTextField,
+  TextArea as AriaTextArea
+} from "react-aria-components";
+import { goldGradient, disabledGradient } from "../utilities/gradient";
+import { resolveClassName } from "../utilities/resolve-class-name";
+import { tv } from "../utilities/tv";
+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"]
+    }
+  }
+});
+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",
+      {
+        ...borderProps,
+        className: textAreaBorder({
+          ...values,
+          className: resolveClassName(borderProps?.className, values)
+        }),
+        children: /* @__PURE__ */ jsx(
+          AriaTextArea,
+          {
+            ...textAreaProps,
+            className: (values2) => textArea({
+              ...values2,
+              className: resolveClassName(textAreaProps?.className, values2)
+            })
+          }
+        )
+      }
+    )
+  ] }) });
+}
+export {
+  TextArea
+};
+
+//# sourceMappingURL=text-area.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAmDQ,mBASI,KATJ;AA/CR;AAAA,EACE,aAAa;AAAA,EACb,YAAY;AAAA,OACP;AACP,SAAS,cAAc,wBAAwB;AAC/C,SAAS,wBAAwB;AAEjC,SAAS,UAAU;AAEnB,MAAM,iBAAiB,GAAG;AAAA,EACxB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC,gBAAgB;AAAA,IACzB;AAAA,EACF;AACF,CAAC;AAED,MAAM,WAAW,GAAG;AAAA,EAClB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC,mBAAmB;AAAA,IAC5B;AAAA,EACF;AACF,CAAC;AAEM,SAAS,SAAS;AAAA,EACvB,gBAAgB,CAAC;AAAA,EACjB,cAAc,CAAC;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAGG;AACD,SACE,oBAAC,iBAAe,GAAG,OAChB,WAAC,WACA,iCACG;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,eAAe;AAAA,UACxB,GAAG;AAAA,UACH,WAAW,iBAAiB,aAAa,WAAW,MAAM;AAAA,QAC5D,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,WAAW,CAACA,YACV,SAAS;AAAA,cACP,GAAGA;AAAA,cACH,WAAW,iBAAiB,eAAe,WAAWA,OAAM;AAAA,YAC9D,CAAC;AAAA;AAAA,QAEL;AAAA;AAAA,IACF;AAAA,KACF,GAEJ;AAEJ","names":["values"],"sources":["../../../src/components/text-area.tsx"],"sourcesContent":["import type {\n  TextFieldProps as AriaTextFieldProps,\n  TextAreaProps,\n} from \"react-aria-components\";\nimport {\n  TextField as AriaTextField,\n  TextArea as AriaTextArea,\n} from \"react-aria-components\";\nimport { goldGradient, disabledGradient } from \"../utilities/gradient\";\nimport { resolveClassName } from \"../utilities/resolve-class-name\";\nimport { ComponentProps } from \"react\";\nimport { tv } from \"../utilities/tv\";\n\nconst textAreaBorder = tv({\n  base: [\n    \"flex bg-gradient-to-t p-px outline-none\",\n    goldGradient,\n    \"focus-within:from-lol-gold-400 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100\",\n  ],\n  variants: {\n    isDisabled: {\n      true: [disabledGradient],\n    },\n  },\n});\n\nconst textArea = tv({\n  base: [\n    \"bg-lol-grey-hextech-black min-h-full w-full px-3 py-2 outline-none\",\n    \"text-lol-gold-100 font-spiegel text-xs tracking-wide\",\n    \"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  ],\n  variants: {\n    isDisabled: {\n      true: [\"text-lol-grey-150\"],\n    },\n  },\n});\n\nexport function TextArea({\n  textAreaProps = {},\n  borderProps = {},\n  children,\n  ...props\n}: AriaTextFieldProps & {\n  textAreaProps?: TextAreaProps;\n  borderProps?: ComponentProps<\"div\">;\n}) {\n  return (\n    <AriaTextField {...props}>\n      {(values) => (\n        <>\n          {typeof children === \"function\" ? children(values) : children}\n          <div\n            {...borderProps}\n            className={textAreaBorder({\n              ...values,\n              className: resolveClassName(borderProps?.className, values),\n            })}\n          >\n            <AriaTextArea\n              {...textAreaProps}\n              className={(values) =>\n                textArea({\n                  ...values,\n                  className: resolveClassName(textAreaProps?.className, values),\n                })\n              }\n            />\n          </div>\n        </>\n      )}\n    </AriaTextField>\n  );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}

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

@@ -0,0 +1,6 @@
+import type { TextFieldProps as AriaTextFieldProps, InputProps } from "react-aria-components";
+import { ComponentProps } from "react";
+export declare function TextField({ inputProps, borderProps, children, ...props }: AriaTextFieldProps & {
+    inputProps?: InputProps;
+    borderProps?: ComponentProps<"div">;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,68 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  TextField as AriaTextField,
+  Input as AriaInput
+} from "react-aria-components";
+import { goldGradient, disabledGradient } from "../utilities/gradient";
+import { resolveClassName } from "../utilities/resolve-class-name";
+import { tv } from "../utilities/tv";
+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"
+  ],
+  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"]
+    }
+  }
+});
+function TextField({
+  inputProps = {},
+  borderProps = {},
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AriaTextField, { ...props, children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...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)
+            })
+          }
+        )
+      }
+    )
+  ] }) });
+}
+export {
+  TextField
+};
+
+//# sourceMappingURL=text-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAmDQ,mBASI,KATJ;AA/CR;AAAA,EACE,aAAa;AAAA,EACb,SAAS;AAAA,OACJ;AACP,SAAS,cAAc,wBAAwB;AAC/C,SAAS,wBAAwB;AAEjC,SAAS,UAAU;AAEnB,MAAM,kBAAkB,GAAG;AAAA,EACzB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC,gBAAgB;AAAA,IACzB;AAAA,EACF;AACF,CAAC;AAED,MAAM,YAAY,GAAG;AAAA,EACnB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC,mBAAmB;AAAA,IAC5B;AAAA,EACF;AACF,CAAC;AAEM,SAAS,UAAU;AAAA,EACxB,aAAa,CAAC;AAAA,EACd,cAAc,CAAC;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAGG;AACD,SACE,oBAAC,iBAAe,GAAG,OAChB,WAAC,WACA,iCACG;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,gBAAgB;AAAA,UACzB,GAAG;AAAA,UACH,WAAW,iBAAiB,aAAa,WAAW,MAAM;AAAA,QAC5D,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACJ,GAAG;AAAA,YACJ,WAAW,CAACA,YACV,UAAU;AAAA,cACR,GAAGA;AAAA,cACH,WAAW,iBAAiB,YAAY,WAAWA,OAAM;AAAA,YAC3D,CAAC;AAAA;AAAA,QAEL;AAAA;AAAA,IACF;AAAA,KACF,GAEJ;AAEJ","names":["values"],"sources":["../../../src/components/text-field.tsx"],"sourcesContent":["import type {\n  TextFieldProps as AriaTextFieldProps,\n  InputProps,\n} from \"react-aria-components\";\nimport {\n  TextField as AriaTextField,\n  Input as AriaInput,\n} from \"react-aria-components\";\nimport { goldGradient, disabledGradient } from \"../utilities/gradient\";\nimport { resolveClassName } from \"../utilities/resolve-class-name\";\nimport { ComponentProps } from \"react\";\nimport { tv } from \"../utilities/tv\";\n\nconst textFieldBorder = tv({\n  base: [\n    \"flex bg-gradient-to-t p-px outline-none\",\n    goldGradient,\n    \"focus-within:from-lol-gold-400 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100\",\n  ],\n  variants: {\n    isDisabled: {\n      true: [disabledGradient],\n    },\n  },\n});\n\nconst textField = tv({\n  base: [\n    \"bg-lol-grey-hextech-black min-h-full w-full px-3 py-2 outline-none\",\n    \"text-lol-gold-100 font-spiegel text-xs tracking-wide\",\n    \"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  ],\n  variants: {\n    isDisabled: {\n      true: [\"text-lol-grey-150\"],\n    },\n  },\n});\n\nexport function TextField({\n  inputProps = {},\n  borderProps = {},\n  children,\n  ...props\n}: AriaTextFieldProps & {\n  inputProps?: InputProps;\n  borderProps?: ComponentProps<\"div\">;\n}) {\n  return (\n    <AriaTextField {...props}>\n      {(values) => (\n        <>\n          {typeof children === \"function\" ? children(values) : children}\n          <div\n            {...borderProps}\n            className={textFieldBorder({\n              ...values,\n              className: resolveClassName(borderProps?.className, values),\n            })}\n          >\n            <AriaInput\n              type=\"text\"\n              {...inputProps}\n              className={(values) =>\n                textField({\n                  ...values,\n                  className: resolveClassName(inputProps?.className, values),\n                })\n              }\n            />\n          </div>\n        </>\n      )}\n    </AriaTextField>\n  );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}

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

@@ -0,0 +1,12 @@
+import { ComponentProps } from "react";
+import { type ToggleButtonProps as AriaToggleButtonProps } from "react-aria-components";
+export type ToggleButtonShape = "round" | "square" | "normal";
+export type ToggleButtonPreset = "gold" | "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 {};

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

@@ -0,0 +1,208 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  ToggleButton as AriaToggleButton
+} from "react-aria-components";
+import { tv } from "../utilities/tv";
+import { resolveClassName } from "../utilities/resolve-class-name";
+import {
+  dimmedGradient,
+  goldGradient,
+  goldGradientHover,
+  goldGradientPressed,
+  hextechGradient,
+  hextechGradientHover,
+  hextechGradientPressed,
+  disabledGradient
+} from "../utilities/gradient";
+const toggleButtonBorder = tv({
+  base: "bg-gradient-to-t p-0.5 outline-none transition-colors duration-200",
+  variants: {
+    preset: {
+      gold: "",
+      hextech: "",
+      dimmed: dimmedGradient
+    },
+    shape: {
+      round: "aspect-square rounded-full",
+      square: "aspect-square",
+      normal: ""
+    },
+    isHovered: {
+      true: ""
+    },
+    isPressed: {
+      true: ""
+    },
+    isDisabled: {
+      true: ""
+    },
+    isFocused: {
+      true: ""
+    },
+    isFocusVisible: {
+      true: ""
+    },
+    isSelected: {
+      true: ""
+    },
+    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: ""
+    },
+    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"
+    }
+  ]
+});
+function ToggleButton({
+  children,
+  className,
+  innerProps = {},
+  preset = "gold",
+  shape = "normal",
+  thin = preset === "dimmed" ? true : false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AriaToggleButton,
+    {
+      ...props,
+      className: (values) => toggleButtonBorder({
+        ...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
+        }
+      )
+    }
+  );
+}
+export {
+  ToggleButton
+};
+
+//# sourceMappingURL=toggle-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"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","names":[],"sources":["../../../src/components/toggle-button.tsx"],"sourcesContent":["import { ComponentProps } from \"react\";\nimport {\n  ToggleButton as AriaToggleButton,\n  type ToggleButtonProps as AriaToggleButtonProps,\n} from \"react-aria-components\";\nimport { tv } from \"../utilities/tv\";\nimport { resolveClassName } from \"../utilities/resolve-class-name\";\nimport {\n  dimmedGradient,\n  goldGradient,\n  goldGradientHover,\n  goldGradientPressed,\n  hextechGradient,\n  hextechGradientHover,\n  hextechGradientPressed,\n  disabledGradient,\n} from \"../utilities/gradient\";\n\nexport type ToggleButtonShape = \"round\" | \"square\" | \"normal\";\nexport type ToggleButtonPreset = \"gold\" | \"hextech\" | \"dimmed\";\n\nconst toggleButtonBorder = tv({\n  base: \"bg-gradient-to-t p-0.5 outline-none transition-colors duration-200\",\n  variants: {\n    preset: {\n      gold: \"\",\n      hextech: \"\",\n      dimmed: dimmedGradient,\n    },\n    shape: {\n      round: \"aspect-square rounded-full\",\n      square: \"aspect-square\",\n      normal: \"\",\n    },\n    isHovered: {\n      true: \"\",\n    },\n    isPressed: {\n      true: \"\",\n    },\n    isDisabled: {\n      true: \"\",\n    },\n    isFocused: {\n      true: \"\",\n    },\n    isFocusVisible: {\n      true: \"\",\n    },\n    isSelected: {\n      true: \"\",\n    },\n    thin: {\n      true: \"p-px\",\n    },\n  },\n  compoundVariants: [\n    {\n      preset: [\"dimmed\"],\n      isSelected: true,\n      class: [goldGradient],\n    },\n    {\n      preset: [\"gold\"],\n      class: goldGradient,\n    },\n    {\n      preset: [\"gold\", \"dimmed\"],\n      isHovered: true,\n      class: goldGradientHover,\n    },\n    {\n      preset: [\"gold\", \"dimmed\"],\n      isPressed: true,\n      class: goldGradientPressed,\n    },\n    {\n      preset: [\"gold\", \"dimmed\"],\n      isDisabled: true,\n      class: disabledGradient,\n    },\n    {\n      preset: [\"gold\"],\n      isFocusVisible: true,\n      class: \"outline outline-offset-2 outline-yellow-50\",\n    },\n    {\n      preset: [\"hextech\"],\n      class: hextechGradient,\n    },\n    {\n      preset: [\"hextech\"],\n      isHovered: true,\n      class: hextechGradientHover,\n    },\n    {\n      preset: [\"hextech\"],\n      isPressed: true,\n      class: hextechGradientPressed,\n    },\n    {\n      preset: [\"hextech\"],\n      isDisabled: true,\n      class: disabledGradient,\n    },\n  ],\n});\nconst toggleButton = tv({\n  base: \"text-lol-gold-300 font-beaufort block font-bold uppercase tracking-wide transition-colors duration-200\",\n  variants: {\n    preset: {\n      gold: \"bg-lol-grey-300\",\n      hextech: \"text-lol-blue-100 bg-lol-grey-300\",\n      dimmed: \"bg-lol-grey-hextech-black\",\n    },\n    isHovered: {\n      true: \"text-lol-gold-100\",\n    },\n    isPressed: {\n      true: \"text-lol-grey-150\",\n    },\n    isDisabled: {\n      true: \"text-lol-grey-150\",\n    },\n    isFocused: {\n      true: \"\",\n    },\n    isSelected: {\n      true: [\n        hextechGradient,\n        \"text-lol-blue-100 shadow-lol-grey-300 bg-gradient-to-t shadow shadow-inner\",\n      ],\n    },\n    isFocusVisible: {\n      true: \"\",\n    },\n    shape: {\n      round: \"rounded-full\",\n      square: \"\",\n      normal: \"\",\n    },\n  },\n  compoundVariants: [\n    {\n      preset: [\"gold\", \"hextech\", \"dimmed\"],\n      class: \"px-4 py-2\",\n    },\n    {\n      preset: [\"hextech\"],\n      isHovered: true,\n      class: \"text-lol-blue-100\",\n    },\n    {\n      preset: [\"hextech\"],\n      isPressed: true,\n      class: \"text-lol-blue-400\",\n    },\n    {\n      preset: [\"hextech\"],\n      isSelected: true,\n      class: \"\",\n    },\n\n    {\n      shape: [\"round\", \"square\"],\n      class:\n        \"flex aspect-square h-7 items-center justify-center p-0 font-black leading-none\",\n    },\n  ],\n});\n\ninterface ToggleButtonProps extends AriaToggleButtonProps {\n  innerProps?: ComponentProps<\"span\">;\n  preset?: ToggleButtonPreset;\n  thin?: boolean;\n  shape?: ToggleButtonShape;\n}\n\nexport function ToggleButton({\n  children,\n  className,\n  innerProps = {},\n  preset = \"gold\",\n  shape = \"normal\",\n  thin = preset === \"dimmed\" ? true : false,\n  ...props\n}: ToggleButtonProps) {\n  return (\n    <AriaToggleButton\n      {...props}\n      className={(values) =>\n        toggleButtonBorder({\n          ...values,\n          preset,\n          shape,\n          thin,\n          className: resolveClassName(className, values),\n        })\n      }\n    >\n      {(values) => (\n        <span\n          {...innerProps}\n          className={toggleButton({\n            ...values,\n            preset,\n            shape,\n            className: resolveClassName(innerProps.className, values),\n          })}\n          style={\n            {\n              // backgroundImage: hextechMagic,\n              // backgroundPosition: \"center\",\n            }\n          }\n        >\n          {typeof children === \"function\" ? children(values) : children}\n        </span>\n      )}\n    </AriaToggleButton>\n  );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}

package/dist/es/components/tooltip.d.ts

@@ -0,0 +1,3 @@
+import type { TooltipProps } from "react-aria-components";
+export declare function Tooltip({ children, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export { TooltipTrigger } from "react-aria-components";

package/dist/es/components/tooltip.js

@@ -0,0 +1,73 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip as AriaTooltip, OverlayArrow } from "react-aria-components";
+import { goldGradient } from "../utilities/gradient";
+import { resolveClassName } from "../utilities/resolve-class-name";
+import { tv } from "../utilities/tv";
+const tooltipBorder = tv({
+  base: ["w-[280px] bg-gradient-to-t p-0.5 drop-shadow-lg", goldGradient],
+  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: ""
+    }
+  }
+});
+const tooltipArrowBorder = tv({
+  base: "fill-lol-gold-500 absolute block h-5 w-5",
+  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",
+      center: ""
+    }
+  }
+});
+const tooltipArrow = tv({
+  base: "fill-lol-grey-300 block h-4 w-4",
+  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",
+      center: ""
+    }
+  }
+});
+function Tooltip({ children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AriaTooltip,
+    {
+      ...props,
+      className: (values) => tooltipBorder({
+        ...values,
+        className: resolveClassName(props?.className, values)
+      }),
+      children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(OverlayArrow, { className: "translate-y-1 transform", children: (values2) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__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 })
+      ] })
+    }
+  );
+}
+import { TooltipTrigger } from "react-aria-components";
+export {
+  Tooltip,
+  TooltipTrigger
+};
+
+//# sourceMappingURL=tooltip.js.map

package/dist/es/components/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAkEc,mBAEI,KAFJ;AAjEd,SAAS,WAAW,aAAa,oBAAoB;AACrD,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAEnB,MAAM,gBAAgB,GAAG;AAAA,EACvB,MAAM,CAAC,mDAAmD,YAAY;AAAA,EACtE,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AACF,CAAC;AAED,MAAM,qBAAqB,GAAG;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW;AAAA,MACT,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;AAED,MAAM,eAAe,GAAG;AAAA,EACtB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW;AAAA,MACT,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;AAEM,SAAS,QAAQ,EAAE,UAAU,GAAG,MAAM,GAAiB;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,CAAC,WACV,cAAc;AAAA,QACZ,GAAG;AAAA,QACH,WAAW,iBAAiB,OAAO,WAAW,MAAM;AAAA,MACtD,CAAC;AAAA,MAGF,WAAC,WACA,iCACE;AAAA,4BAAC,gBAAa,WAAU,2BACrB,WAACA,YACA,iCACE;AAAA,8BAAC,SAAI,SAAQ,aAAY,WAAW,mBAAmBA,OAAM,GAC3D,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;AAAA,UACA,oBAAC,SAAI,SAAQ,aAAY,WAAW,aAAaA,OAAM,GACrD,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;AAAA,WACF,GAEJ;AAAA,QACA,oBAAC,SAAI,WAAU,mBACZ,iBAAO,aAAa,aAAa,SAAS,MAAM,IAAI,UACvD;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,SAAS,sBAAsB","names":["values"],"sources":["../../../src/components/tooltip.tsx"],"sourcesContent":["import type { TooltipProps } from \"react-aria-components\";\nimport { Tooltip as AriaTooltip, OverlayArrow } from \"react-aria-components\";\nimport { goldGradient } from \"../utilities/gradient\";\nimport { resolveClassName } from \"../utilities/resolve-class-name\";\nimport { tv } from \"../utilities/tv\";\n\nconst tooltipBorder = tv({\n  base: [\"w-[280px] bg-gradient-to-t p-0.5 drop-shadow-lg\", goldGradient],\n  variants: {\n    isEntering: {\n      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\",\n    },\n    isExiting: {\n      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\",\n    },\n    placement: {\n      bottom: \"mt-2\",\n      top: \"mb-2\",\n      center: \"\",\n      left: \"\",\n      right: \"\",\n    },\n  },\n});\n\nconst tooltipArrowBorder = tv({\n  base: \"fill-lol-gold-500 absolute block h-5 w-5\",\n  variants: {\n    placement: {\n      top: \"-left-0.5 -translate-y-[1px]\",\n      bottom: \"fill-lol-gold-200 -left-0.5 -translate-y-[3px] rotate-180\",\n      left: \"fill-lol-gold-400 -top-0.5 -translate-x-px -rotate-90\",\n      right: \"fill-lol-gold-400 -top-0.5 -translate-x-[3px] rotate-90\",\n      center: \"\",\n    },\n  },\n});\n\nconst tooltipArrow = tv({\n  base: \"fill-lol-grey-300 block h-4 w-4\",\n  variants: {\n    placement: {\n      top: \"-translate-y-0.5\",\n      bottom: \"translate-y-0.5 rotate-180\",\n      left: \"-translate-x-0.5 -rotate-90\",\n      right: \"translate-x-0.5 rotate-90\",\n      center: \"\",\n    },\n  },\n});\n\nexport function Tooltip({ children, ...props }: TooltipProps) {\n  return (\n    <AriaTooltip\n      {...props}\n      className={(values) =>\n        tooltipBorder({\n          ...values,\n          className: resolveClassName(props?.className, values),\n        })\n      }\n    >\n      {(values) => (\n        <>\n          <OverlayArrow className=\"translate-y-1 transform\">\n            {(values) => (\n              <>\n                <svg viewBox=\"0 0 12 12\" className={tooltipArrowBorder(values)}>\n                  <path d=\"M0 0,L6 6,L12 0\" />\n                </svg>\n                <svg viewBox=\"0 0 12 12\" className={tooltipArrow(values)}>\n                  <path d=\"M0 0,L6 6,L12 0\" />\n                </svg>\n              </>\n            )}\n          </OverlayArrow>\n          <div className=\"bg-lol-grey-300\">\n            {typeof children === \"function\" ? children(values) : children}\n          </div>\n        </>\n      )}\n    </AriaTooltip>\n  );\n}\n\nexport { TooltipTrigger } from \"react-aria-components\";\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}

package/dist/es/components/typography/heading.d.ts

@@ -0,0 +1,9 @@
+export type HeadingColor = "gold-100" | "gold-200" | "gold-400" | "grey-100";
+export type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5";
+interface HeadingProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> {
+    preset?: HeadingElement;
+    color?: HeadingColor;
+    as?: HeadingElement | "span";
+}
+export declare function Heading({ as, preset, color, className, ...rest }: HeadingProps): JSX.Element;
+export {};

package/dist/es/components/typography/heading.js

@@ -0,0 +1,38 @@
+import { createElement } from "react";
+import { tv } from "../../utilities/tv";
+const heading = tv({
+  base: "font-beaufort scroll-m-20 uppercase",
+  variants: {
+    color: {
+      "gold-100": "text-lol-gold-100",
+      "gold-200": "text-lol-gold-200",
+      "gold-400": "text-lol-gold-400",
+      "grey-100": "text-lol-grey-100"
+    },
+    preset: {
+      h1: "text-lol-h1",
+      h2: "text-lol-h2",
+      h3: "text-lol-h3",
+      h4: "text-lol-h4",
+      h5: "text-lol-h5"
+    }
+  }
+});
+function Heading({
+  as,
+  preset = "h1",
+  color = "gold-100",
+  className,
+  ...rest
+}) {
+  const resultAs = as ?? preset;
+  return createElement(resultAs, {
+    ...rest,
+    className: heading({ preset, color, className })
+  });
+}
+export {
+  Heading
+};
+
+//# sourceMappingURL=heading.js.map

package/dist/es/components/typography/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AAenB,MAAM,UAAU,GAAG;AAAA,EACjB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,EACF;AACF,CAAC;AAEM,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA8B;AAC5B,QAAM,WAAW,MAAM;AAEvB,SAAO,cAAc,UAAU;AAAA,IAC7B,GAAG;AAAA,IACH,WAAW,QAAQ,EAAE,QAAQ,OAAO,UAAU,CAAC;AAAA,EACjD,CAAC;AACH","names":[],"sources":["../../../../src/components/typography/heading.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport { tv } from \"../../utilities/tv\";\n\nexport type HeadingColor = \"gold-100\" | \"gold-200\" | \"gold-400\" | \"grey-100\";\nexport type HeadingElement = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\";\n\ninterface HeadingProps\n  extends React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLHeadingElement>,\n    HTMLHeadingElement\n  > {\n  preset?: HeadingElement;\n  color?: HeadingColor;\n  as?: HeadingElement | \"span\";\n}\n\nconst heading = tv({\n  base: \"font-beaufort scroll-m-20 uppercase\",\n  variants: {\n    color: {\n      \"gold-100\": \"text-lol-gold-100\",\n      \"gold-200\": \"text-lol-gold-200\",\n      \"gold-400\": \"text-lol-gold-400\",\n      \"grey-100\": \"text-lol-grey-100\",\n    },\n    preset: {\n      h1: \"text-lol-h1\",\n      h2: \"text-lol-h2\",\n      h3: \"text-lol-h3\",\n      h4: \"text-lol-h4\",\n      h5: \"text-lol-h5\",\n    },\n  },\n});\n\nexport function Heading({\n  as,\n  preset = \"h1\",\n  color = \"gold-100\",\n  className,\n  ...rest\n}: HeadingProps): JSX.Element {\n  const resultAs = as ?? preset;\n\n  return createElement(resultAs, {\n    ...rest,\n    className: heading({ preset, color, className }),\n  });\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}

package/dist/es/components/typography/text.d.ts

@@ -0,0 +1,17 @@
+import { type LabelProps as AriaLabelProps } from "react-aria-components";
+export type TextColor = "grey-100" | "grey-150" | "gold-100";
+export type TextElement = "p" | "span" | "div";
+export type TextPreset = "sm" | "base" | "md" | "lg" | "large-number" | "stat";
+interface TextProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+    preset?: TextPreset;
+    color?: TextColor;
+    as?: TextElement;
+}
+export declare function Text({ as, preset, color, className, ...rest }: TextProps): JSX.Element;
+interface LabelProps extends AriaLabelProps {
+    preset?: TextPreset | 'label';
+    color?: TextColor;
+    as?: TextElement;
+}
+export declare function Label({ preset, color, className, ...rest }: LabelProps): JSX.Element;
+export {};

package/dist/es/components/typography/text.js

@@ -0,0 +1,62 @@
+import { createElement } from "react";
+import { tv } from "../../utilities/tv";
+import {
+  Label as AriaLabel
+} from "react-aria-components";
+const presetElements = {
+  sm: "p",
+  base: "p",
+  md: "p",
+  lg: "p",
+  "large-number": "span",
+  stat: "span"
+};
+const text = tv({
+  base: "font-spiegel",
+  variants: {
+    color: {
+      "grey-100": "text-lol-grey-100",
+      "grey-150": "text-lol-grey-150",
+      "gold-100": "text-lol-gold-100"
+    },
+    preset: {
+      sm: "text-lol-sm",
+      base: "text-lol-base",
+      md: "text-lol-md",
+      lg: "text-lol-lg",
+      label: "text-lol-label",
+      "large-number": "text-lol-large-number font-beaufort italic",
+      stat: "text-lol-stat font-beaufort"
+    }
+  }
+});
+function Text({
+  as = "p",
+  preset = "base",
+  color = "grey-100",
+  className,
+  ...rest
+}) {
+  const elementType = as ?? presetElements[preset];
+  return createElement(elementType, {
+    ...rest,
+    className: text({ preset, color, className })
+  });
+}
+function Label({
+  preset = "sm",
+  color = "grey-100",
+  className,
+  ...rest
+}) {
+  return createElement(AriaLabel, {
+    ...rest,
+    className: text({ preset, color, className })
+  });
+}
+export {
+  Label,
+  Text
+};
+
+//# sourceMappingURL=text.js.map

package/dist/es/components/typography/text.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AACnB;AAAA,EAEE,SAAS;AAAA,OACJ;AAYP,MAAM,iBAAkD;AAAA,EACtD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,gBAAgB;AAAA,EAChB,MAAM;AACR;AAEA,MAAM,OAAO,GAAG;AAAA,EACd,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,MAAM;AAAA,IACR;AAAA,EACF;AACF,CAAC;AAWM,SAAS,KAAK;AAAA,EACnB,KAAK;AAAA,EACL,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,cAAc,MAAM,eAAe,MAAM;AAC/C,SAAO,cAAc,aAAa;AAAA,IAChC,GAAG;AAAA,IACH,WAAW,KAAK,EAAE,QAAQ,OAAO,UAAU,CAAC;AAAA,EAC9C,CAAC;AACH;AAOO,SAAS,MAAM;AAAA,EACpB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,SAAO,cAAc,WAAW;AAAA,IAC9B,GAAG;AAAA,IACH,WAAW,KAAK,EAAE,QAAQ,OAAO,UAAU,CAAC;AAAA,EAC9C,CAAC;AACH","names":[],"sources":["../../../../src/components/typography/text.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport { tv } from \"../../utilities/tv\";\nimport {\n  type LabelProps as AriaLabelProps,\n  Label as AriaLabel,\n} from \"react-aria-components\";\n\nexport type TextColor = \"grey-100\" | \"grey-150\" | \"gold-100\";\nexport type TextElement = \"p\" | \"span\" | \"div\";\nexport type TextPreset =\n  | \"sm\"\n  | \"base\"\n  | \"md\"\n  | \"lg\"\n  | \"large-number\"\n  | \"stat\";\n\nconst presetElements: Record<TextPreset, TextElement> = {\n  sm: \"p\",\n  base: \"p\",\n  md: \"p\",\n  lg: \"p\",\n  \"large-number\": \"span\",\n  stat: \"span\",\n};\n\nconst text = tv({\n  base: \"font-spiegel\",\n  variants: {\n    color: {\n      \"grey-100\": \"text-lol-grey-100\",\n      \"grey-150\": \"text-lol-grey-150\",\n      \"gold-100\": \"text-lol-gold-100\",\n    },\n    preset: {\n      sm: \"text-lol-sm\",\n      base: \"text-lol-base\",\n      md: \"text-lol-md\",\n      lg: \"text-lol-lg\",\n      label: \"text-lol-label\",\n      \"large-number\": \"text-lol-large-number font-beaufort italic\",\n      stat: \"text-lol-stat font-beaufort\",\n    },\n  },\n});\n\ninterface TextProps\n  extends React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLElement>,\n    HTMLElement\n  > {\n  preset?: TextPreset;\n  color?: TextColor;\n  as?: TextElement;\n}\nexport function Text({\n  as = \"p\",\n  preset = \"base\",\n  color = \"grey-100\",\n  className,\n  ...rest\n}: TextProps): JSX.Element {\n  const elementType = as ?? presetElements[preset];\n  return createElement(elementType, {\n    ...rest,\n    className: text({ preset, color, className }),\n  });\n}\n\ninterface LabelProps extends AriaLabelProps {\n  preset?: TextPreset | 'label';\n  color?: TextColor;\n  as?: TextElement;\n}\nexport function Label({\n  preset = \"sm\",\n  color = \"grey-100\",\n  className,\n  ...rest\n}: LabelProps): JSX.Element {\n  return createElement(AriaLabel, {\n    ...rest,\n    className: text({ preset, color, className }),\n  });\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}

package/dist/es/index.d.ts

@@ -0,0 +1,23 @@
+export * from "./components/accordion";
+export * from "./components/button";
+export * from "./components/card";
+export * from "./components/checkbox";
+export * from "./components/divider";
+export * from "./components/modal";
+export * from "./components/number-field";
+export * from "./components/progress-bar";
+export * from "./components/radio-group";
+export * from "./components/search-field";
+export * from "./components/select";
+export * from "./components/slider/slider";
+export * from "./components/spinner/spinner";
+export * from "./components/switch";
+export * from "./components/tabs";
+export * from "./components/text-area";
+export * from "./components/text-field";
+export * from "./components/toggle-button";
+export * from "./components/tooltip";
+export * from "./components/typography/heading";
+export * from "./components/typography/text";
+export * from "./utilities/gradient";
+export * from "./utilities/tv";