@lolmath/ui 3.2.4 → 4.0.0

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

@@ -1,203 +1,63 @@
 import { jsx } from "react/jsx-runtime";
+import { cva } from "cva";
 import {
   ToggleButton as AriaToggleButton
 } from "react-aria-components";
-import { tv } from "../utilities/tv.js";
 import { resolveClassName } from "../utilities/resolve-class-name.js";
-import {
-  dimmedGradient,
-  goldGradient,
-  goldGradientHover,
-  goldGradientPressed,
-  hextechGradient,
-  hextechGradientHover,
-  hextechGradientPressed,
-  disabledGradient
-} from "../utilities/gradient.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" ? true : false,
+  thin = preset === "dimmed",
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     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":[],"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.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport {\n  dimmedGradient,\n  goldGradient,\n  goldGradientHover,\n  goldGradientPressed,\n  hextechGradient,\n  hextechGradientHover,\n  hextechGradientPressed,\n  disabledGradient,\n} from \"../utilities/gradient.js\";\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="]}
+{"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
       ] })
     }
   );

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

@@ -1 +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.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { tv } from \"../utilities/tv.js\";\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="]}
+{"version":3,"mappings":"AA4DO,mBAEE,KAFF;AA5DP,SAAS,WAAW;AAEpB,SAAS,WAAW,aAAa,oBAAoB;AACrD,SAAS,wBAAwB;AACjC,OAAO,aAAa;AAEpB,MAAM,gBAAgB,IAAI;AAAA,EACzB,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,WAAW;AAAA,MACV,QAAQ,QAAQ;AAAA,MAChB,KAAK,QAAQ;AAAA,MACb,MAAM,QAAQ;AAAA,MACd,OAAO,QAAQ;AAAA,MACf,QAAQ;AAAA,IACT;AAAA,EACD;AACD,CAAC;AAED,MAAM,qBAAqB,IAAI;AAAA,EAC9B,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,WAAW;AAAA,MACV,KAAK,QAAQ;AAAA,MACb,QAAQ,QAAQ;AAAA,MAChB,MAAM,QAAQ;AAAA,MACd,OAAO,QAAQ;AAAA,MACf,QAAQ;AAAA,IACT;AAAA,EACD;AACD,CAAC;AAED,MAAM,eAAe,IAAI;AAAA,EACxB,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,WAAW;AAAA,MACV,KAAK,QAAQ;AAAA,MACb,QAAQ,QAAQ;AAAA,MAChB,MAAM,QAAQ;AAAA,MACd,OAAO,QAAQ;AAAA,MACf,QAAQ;AAAA,IACT;AAAA,EACD;AACD,CAAC;AAEM,SAAS,QAAQ,EAAE,UAAU,GAAG,MAAM,GAAiB;AAC7D,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,WACX,cAAc;AAAA,QACb,GAAG;AAAA,QACH,WAAW,iBAAiB,OAAO,WAAW,MAAM;AAAA,MACrD,CAAC;AAAA,MAGD,WAAC,WACD,iCACC;AAAA,4BAAC,gBAAa,WAAU,2BACtB,WAACA,YACD,iCACC;AAAA,8BAAC,SAAI,SAAQ,aAAY,WAAW,mBAAmBA,OAAM,GAC5D,8BAAC,UAAK,GAAE,mBAAkB,GAC3B;AAAA,UACA,oBAAC,SAAI,SAAQ,aAAY,WAAW,aAAaA,OAAM,GACtD,8BAAC,UAAK,GAAE,mBAAkB,GAC3B;AAAA,WACD,GAEF;AAAA,QACC,OAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,SACtD;AAAA;AAAA,EAEF;AAEF;AAEA,SAAS,sBAAsB","names":["values"],"ignoreList":[],"sources":["../../../src/components/tooltip.tsx"],"sourcesContent":["import { cva } from \"cva\";\nimport type { TooltipProps } from \"react-aria-components\";\nimport { Tooltip as AriaTooltip, OverlayArrow } from \"react-aria-components\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport classes from \"./tooltip.module\";\n\nconst tooltipBorder = cva({\n\tbase: classes.tooltip,\n\tvariants: {\n\t\tplacement: {\n\t\t\tbottom: classes.bottom,\n\t\t\ttop: classes.top,\n\t\t\tleft: classes.left,\n\t\t\tright: classes.right,\n\t\t\tcenter: \"\",\n\t\t},\n\t},\n});\n\nconst tooltipArrowBorder = cva({\n\tbase: classes.arrowBorder,\n\tvariants: {\n\t\tplacement: {\n\t\t\ttop: classes.top,\n\t\t\tbottom: classes.bottom,\n\t\t\tleft: classes.left,\n\t\t\tright: classes.right,\n\t\t\tcenter: \"\",\n\t\t},\n\t},\n});\n\nconst tooltipArrow = cva({\n\tbase: classes.arrow,\n\tvariants: {\n\t\tplacement: {\n\t\t\ttop: classes.top,\n\t\t\tbottom: classes.bottom,\n\t\t\tleft: classes.left,\n\t\t\tright: classes.right,\n\t\t\tcenter: \"\",\n\t\t},\n\t},\n});\n\nexport function Tooltip({ children, ...props }: TooltipProps) {\n\treturn (\n\t\t<AriaTooltip\n\t\t\t{...props}\n\t\t\tclassName={(values) =>\n\t\t\t\ttooltipBorder({\n\t\t\t\t\t...values,\n\t\t\t\t\tclassName: resolveClassName(props?.className, values),\n\t\t\t\t})\n\t\t\t}\n\t\t>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t<OverlayArrow className=\"translate-y-1 transform\">\n\t\t\t\t\t\t{(values) => (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<svg viewBox=\"0 0 12 12\" className={tooltipArrowBorder(values)}>\n\t\t\t\t\t\t\t\t\t<path d=\"M0 0,L6 6,L12 0\" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t<svg viewBox=\"0 0 12 12\" className={tooltipArrow(values)}>\n\t\t\t\t\t\t\t\t\t<path d=\"M0 0,L6 6,L12 0\" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</OverlayArrow>\n\t\t\t\t\t{typeof children === \"function\" ? children(values) : children}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaTooltip>\n\t);\n}\n\nexport { TooltipTrigger } from \"react-aria-components\";\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

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

@@ -0,0 +1,7 @@
+import "./tooltip_module.css";
+var tooltip_default = { "tooltip": "tooltip_8d3f1", "top": "top_8d3f1", "bottom": "bottom_8d3f1", "arrowBorder": "arrowBorder_8d3f1", "left": "left_8d3f1", "right": "right_8d3f1", "arrow": "arrow_8d3f1" };
+export {
+  tooltip_default as default
+};
+
+//# sourceMappingURL=tooltip.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO;AAAuB,IAAO,kBAAQ,EAAC,WAAU,iBAAgB,OAAM,aAAY,UAAS,gBAAe,eAAc,qBAAoB,QAAO,cAAa,SAAQ,eAAc,SAAQ,cAAa","names":[],"ignoreList":[],"sources":["../../../src/components/tooltip.module.css"],"sourcesContent":["import \"./tooltip_module.css\";export default {\"tooltip\":\"tooltip_8d3f1\",\"top\":\"top_8d3f1\",\"bottom\":\"bottom_8d3f1\",\"arrowBorder\":\"arrowBorder_8d3f1\",\"left\":\"left_8d3f1\",\"right\":\"right_8d3f1\",\"arrow\":\"arrow_8d3f1\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/tooltip_module.css

@@ -0,0 +1,66 @@
+.tooltip_8d3f1 {
+	padding: 2px;
+	box-shadow: 0 2px 4px 0 var(--lol-color-grey-300);
+
+	border: 2px solid transparent;
+	background: var(--lol-button-background-gradient) padding-box,
+		var(--lol-button-border-gradient) border-box;
+	--lol-button-border-gradient: var(--lol-gradient-gold-press);
+	--lol-button-background-gradient: var(--lol-gradient-grey-300);
+}
+
+.tooltip_8d3f1 .top_8d3f1 {
+		margin-bottom: 0.5rem;
+	}
+
+.tooltip_8d3f1 .bottom_8d3f1 {
+		margin-top: 0.5rem;
+	}
+
+.arrowBorder_8d3f1 {
+	fill: var(--lol-color-gold-600);
+	position: absolute;
+	display: block;
+	height: 20px;
+	width: 20px;
+}
+
+.arrowBorder_8d3f1.top_8d3f1 {
+		transform: translateY(-0px) translateX(-4px);
+	}
+
+.arrowBorder_8d3f1.bottom_8d3f1 {
+		transform: translateY(-4px) rotate(180deg) translateX(4px);
+		fill: var(--lol-color-gold-500);
+	}
+
+.arrowBorder_8d3f1.left_8d3f1 {
+		transform: translateY(-4px) translateX(0px) rotate(-90deg);
+	}
+
+.arrowBorder_8d3f1.right_8d3f1 {
+		transform: translateY(-4px) translateX(-4px) rotate(90deg);
+	}
+
+.arrow_8d3f1 {
+	fill: var(--lol-color-grey-300);
+	display: block;
+	height: 16px;
+	width: 16px;
+}
+
+.arrow_8d3f1.top_8d3f1 {
+		transform: translateY(0px) translateX(-2px);
+	}
+
+.arrow_8d3f1.bottom_8d3f1 {
+		transform: translateY(-0px) translateX(-2px) rotate(180deg);
+	}
+
+.arrow_8d3f1.left_8d3f1 {
+		transform: translateY(-2px) translateX(0px) rotate(-90deg);
+	}
+
+.arrow_8d3f1.right_8d3f1 {
+		transform: translateY(-2px) translateX(0px) rotate(90deg);
+	}

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

@@ -1,9 +1,67 @@
-export type HeadingColor = "gold-100" | "gold-200" | "gold-400" | "grey-100";
+export type HeadingColor = "gold100" | "gold200" | "gold400" | "grey100";
 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 const heading: (props?: ({
+    color?: "grey100" | "gold100" | "gold200" | "gold400" | undefined;
+    preset?: "h1" | "h2" | "h3" | "h4" | "h5" | 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 Heading({ as, preset, color, className, ...rest }: HeadingProps): JSX.Element;
 export {};

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

@@ -1,27 +1,28 @@
 import { createElement } from "react";
-import { tv } from "../../utilities/tv.js";
-const heading = tv({
-  base: "font-beaufort scroll-m-20 uppercase",
+import classes from "./heading.module";
+import { cva } from "cva";
+const heading = cva({
+  base: classes.heading,
   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"
+      gold100: classes.gold100,
+      gold200: classes.gold200,
+      gold400: classes.gold400,
+      grey100: classes.grey100
     },
     preset: {
-      h1: "text-lol-h1",
-      h2: "text-lol-h2",
-      h3: "text-lol-h3",
-      h4: "text-lol-h4",
-      h5: "text-lol-h5"
+      h1: classes.h1,
+      h2: classes.h2,
+      h3: classes.h3,
+      h4: classes.h4,
+      h5: classes.h5
     }
   }
 });
 function Heading({
   as,
   preset = "h1",
-  color = "gold-100",
+  color = "gold100",
   className,
   ...rest
 }) {
@@ -32,7 +33,8 @@ function Heading({
   });
 }
 export {
-  Heading
+  Heading,
+  heading
 };
 
 //# sourceMappingURL=heading.js.map

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

@@ -1 +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.js\";\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="]}
+{"version":3,"mappings":"AAAA,SAAS,qBAAqB;AAC9B,OAAO,aAAa;AACpB,SAAS,WAAW;AAeb,MAAM,UAAU,IAAI;AAAA,EAC1B,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,OAAO;AAAA,MACN,SAAS,QAAQ;AAAA,MACjB,SAAS,QAAQ;AAAA,MACjB,SAAS,QAAQ;AAAA,MACjB,SAAS,QAAQ;AAAA,IAClB;AAAA,IACA,QAAQ;AAAA,MACP,IAAI,QAAQ;AAAA,MACZ,IAAI,QAAQ;AAAA,MACZ,IAAI,QAAQ;AAAA,MACZ,IAAI,QAAQ;AAAA,MACZ,IAAI,QAAQ;AAAA,IACb;AAAA,EACD;AACD,CAAC;AAEM,SAAS,QAAQ;AAAA,EACvB;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACJ,GAA8B;AAC7B,QAAM,WAAW,MAAM;AAEvB,SAAO,cAAc,UAAU;AAAA,IAC9B,GAAG;AAAA,IACH,WAAW,QAAQ,EAAE,QAAQ,OAAO,UAAU,CAAC;AAAA,EAChD,CAAC;AACF","names":[],"ignoreList":[],"sources":["../../../../src/components/typography/heading.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport classes from \"./heading.module\";\nimport { cva } from \"cva\";\n\nexport type HeadingColor = \"gold100\" | \"gold200\" | \"gold400\" | \"grey100\";\nexport type HeadingElement = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\";\n\ninterface HeadingProps\n\textends React.DetailedHTMLProps<\n\t\tReact.HTMLAttributes<HTMLHeadingElement>,\n\t\tHTMLHeadingElement\n\t> {\n\tpreset?: HeadingElement;\n\tcolor?: HeadingColor;\n\tas?: HeadingElement | \"span\";\n}\n\nexport const heading = cva({\n\tbase: classes.heading,\n\tvariants: {\n\t\tcolor: {\n\t\t\tgold100: classes.gold100,\n\t\t\tgold200: classes.gold200,\n\t\t\tgold400: classes.gold400,\n\t\t\tgrey100: classes.grey100,\n\t\t},\n\t\tpreset: {\n\t\t\th1: classes.h1,\n\t\t\th2: classes.h2,\n\t\t\th3: classes.h3,\n\t\t\th4: classes.h4,\n\t\t\th5: classes.h5,\n\t\t},\n\t},\n});\n\nexport function Heading({\n\tas,\n\tpreset = \"h1\",\n\tcolor = \"gold100\",\n\tclassName,\n\t...rest\n}: HeadingProps): JSX.Element {\n\tconst resultAs = as ?? preset;\n\n\treturn createElement(resultAs, {\n\t\t...rest,\n\t\tclassName: heading({ preset, color, className }),\n\t});\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

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

@@ -0,0 +1,7 @@
+import "./heading_module.css";
+var heading_default = { "heading": "heading_1c9d4", "h1": "h1_1c9d4", "h2": "h2_1c9d4", "h3": "h3_1c9d4", "h4": "h4_1c9d4", "h5": "h5_1c9d4", "grey100": "grey100_1c9d4", "gold100": "gold100_1c9d4", "gold200": "gold200_1c9d4", "gold400": "gold400_1c9d4" };
+export {
+  heading_default as default
+};
+
+//# sourceMappingURL=heading.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO;AAAuB,IAAO,kBAAQ,EAAC,WAAU,iBAAgB,MAAK,YAAW,MAAK,YAAW,MAAK,YAAW,MAAK,YAAW,MAAK,YAAW,WAAU,iBAAgB,WAAU,iBAAgB,WAAU,iBAAgB,WAAU,gBAAe","names":[],"ignoreList":[],"sources":["../../../../src/components/typography/heading.module.css"],"sourcesContent":["import \"./heading_module.css\";export default {\"heading\":\"heading_1c9d4\",\"h1\":\"h1_1c9d4\",\"h2\":\"h2_1c9d4\",\"h3\":\"h3_1c9d4\",\"h4\":\"h4_1c9d4\",\"h5\":\"h5_1c9d4\",\"grey100\":\"grey100_1c9d4\",\"gold100\":\"gold100_1c9d4\",\"gold200\":\"gold200_1c9d4\",\"gold400\":\"gold400_1c9d4\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/typography/heading_module.css

@@ -0,0 +1,56 @@
+.heading_1c9d4 {
+	font-family: var(--lol-font-family-beaufort);
+	scroll-margin-top: 5rem;
+	text-transform: uppercase;
+}
+
+.h1_1c9d4 {
+	font-size: var(--lol-font-size-h1);
+	line-height: var(--lol-line-height-h1);
+	letter-spacing: var(--lol-letter-spacing-h1);
+	font-weight: var(--lol-font-weight-h1);
+}
+
+.h2_1c9d4 {
+	font-size: var(--lol-font-size-h2);
+	line-height: var(--lol-line-height-h2);
+	letter-spacing: var(--lol-letter-spacing-h2);
+	font-weight: var(--lol-font-weight-h2);
+}
+
+.h3_1c9d4 {
+	font-size: var(--lol-font-size-h3);
+	line-height: var(--lol-line-height-h3);
+	letter-spacing: var(--lol-letter-spacing-h3);
+	font-weight: var(--lol-font-weight-h3);
+}
+
+.h4_1c9d4 {
+	font-size: var(--lol-font-size-h4);
+	line-height: var(--lol-line-height-h4);
+	letter-spacing: var(--lol-letter-spacing-h4);
+	font-weight: var(--lol-font-weight-h4);
+}
+
+.h5_1c9d4 {
+	font-size: var(--lol-font-size-h5);
+	line-height: var(--lol-line-height-h5);
+	letter-spacing: var(--lol-letter-spacing-h5);
+	font-weight: var(--lol-font-weight-h5);
+}
+
+.grey100_1c9d4 {
+	color: var(--lol-color-grey-100);
+}
+
+.gold100_1c9d4 {
+	color: var(--lol-color-gold-100);
+}
+
+.gold200_1c9d4 {
+	color: var(--lol-color-gold-200);
+}
+
+.gold400_1c9d4 {
+	color: var(--lol-color-gold-400);
+}