@nous-research/ui 0.13.2 → 0.14.0

package/dist/ui/components/tier-card.js

@@ -1,25 +1,145 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { cn } from '../../utils';
-import { ImageDistortion } from './image-distortion';
-import { Typography } from './typography';
-/**
- * Selectable tier / pricing card. Full-bleed distorted image background,
- * readable overlay text, and an animated `.arc-border` shimmer on the
- * selected state. Fully presentational — the consumer owns the data
- * (tier schema, price formatting, tier imagery / tints).
- *
- * Visual states:
- * - `selected`: brightens the distortion, activates `.arc-border`, and
- *   composites the headline / price with `mix-blend-mode: plus-lighter`
- *   so the text lifts off the image regardless of tint.
- * - `isCurrent`: subtle midground-tinted border hint (suppressed when
- *   `selected` wins).
- * - `overlay`: optional top-layer color blended with `mix-blend-mode:
- *   color` — used for the "highest tier" red treatment on top of any
- *   base tint.
- */
-export function TierCard({ badge, bullets, className, image, isCurrent = false, onSelect, overlay, price, selected = false, tint, tintStrength, title }) {
-    return (_jsxs("button", { className: cn('group relative flex w-full cursor-pointer flex-col border border-current/20', 'text-left transition-colors duration-300', selected && 'border-midground/60', isCurrent && !selected && 'border-midground/30', className), onClick: onSelect, type: "button", children: [_jsx("span", { "aria-hidden": true, className: cn('arc-border transition-opacity duration-200', selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100') }), _jsxs("div", { className: "relative aspect-[3/4] min-h-0 w-full flex-1 overflow-hidden", style: { backgroundColor: 'var(--background)' }, children: [_jsx(ImageDistortion, { active: selected, src: image, tint: tint, tintStrength: tintStrength }), overlay && (_jsx("div", { className: "pointer-events-none absolute inset-0", style: { backgroundColor: overlay, mixBlendMode: 'color' } })), _jsxs("div", { className: "pointer-events-none absolute inset-0 z-[1] flex flex-col justify-between p-3", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsxs(Typography, { variant: "sm", className: cn('block drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)] text-[1.2rem]', 'transition-colors', selected && 'text-midground'), style: selected ? { mixBlendMode: 'plus-lighter' } : undefined, children: [title, badge && _jsx("span", { className: "ml-1 opacity-50", children: badge })] }), price.secondary ? (_jsxs(_Fragment, { children: [_jsxs(Typography, { className: "block text-md line-through opacity-50 drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]", expanded: true, style: { mixBlendMode: 'plus-lighter' }, children: [price.secondary, price.secondarySuffix && (_jsx("span", { className: "text-[1rem]", children: price.secondarySuffix }))] }), _jsxs(Typography, { className: "block text-xl font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]", expanded: true, style: { mixBlendMode: 'plus-lighter' }, children: [price.primary, price.primarySuffix && (_jsxs("span", { className: "text-[1rem] opacity-60", children: [' ', price.primarySuffix] }))] })] })) : (_jsxs(Typography, { className: "block text-xl font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]", expanded: true, style: { mixBlendMode: 'plus-lighter' }, children: [price.primary, price.primarySuffix && (_jsx("span", { className: "text-[1rem] opacity-60", children: price.primarySuffix }))] }))] }), bullets.length > 0 && (_jsx("ul", { className: "flex flex-col gap-1", children: bullets.map((bullet, i) => (_jsxs("li", { className: cn('font-courier text-[1rem] leading-tight tracking-tight uppercase', 'drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]'), children: ["\u00B7 ", bullet] }, typeof bullet === 'string' ? bullet : i))) }))] })] })] }));
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/index.js";
+import { ImageDistortion } from "./image-distortion.js";
+import { Typography } from "./typography/index.js";
+export function TierCard({
+  badge,
+  bullets,
+  className,
+  image,
+  isCurrent = false,
+  onSelect,
+  overlay,
+  price,
+  selected = false,
+  tint,
+  tintStrength,
+  title
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        "group relative flex w-full cursor-pointer flex-col border border-current/20",
+        "text-left transition-colors duration-300",
+        selected && "border-midground/60",
+        isCurrent && !selected && "border-midground/30",
+        className
+      ),
+      onClick: onSelect,
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "arc-border transition-opacity duration-200",
+              selected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative aspect-[3/4] min-h-0 w-full flex-1 overflow-hidden",
+            style: { backgroundColor: "var(--background)" },
+            children: [
+              /* @__PURE__ */ jsx(
+                ImageDistortion,
+                {
+                  active: selected,
+                  src: image,
+                  tint,
+                  tintStrength
+                }
+              ),
+              overlay && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "pointer-events-none absolute inset-0",
+                  style: { backgroundColor: overlay, mixBlendMode: "color" }
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-0 z-[1] flex flex-col justify-between p-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+                  /* @__PURE__ */ jsxs(
+                    Typography,
+                    {
+                      variant: "sm",
+                      className: cn(
+                        "block drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)] text-[1.2rem]",
+                        "transition-colors",
+                        selected && "text-midground"
+                      ),
+                      style: selected ? { mixBlendMode: "plus-lighter" } : void 0,
+                      children: [
+                        title,
+                        badge && /* @__PURE__ */ jsx("span", { className: "ml-1 opacity-50", children: badge })
+                      ]
+                    }
+                  ),
+                  price.secondary ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs(
+                      Typography,
+                      {
+                        className: "block text-md line-through opacity-50 drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]",
+                        expanded: true,
+                        style: { mixBlendMode: "plus-lighter" },
+                        children: [
+                          price.secondary,
+                          price.secondarySuffix && /* @__PURE__ */ jsx("span", { className: "text-[1rem]", children: price.secondarySuffix })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      Typography,
+                      {
+                        className: "block text-xl font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]",
+                        expanded: true,
+                        style: { mixBlendMode: "plus-lighter" },
+                        children: [
+                          price.primary,
+                          price.primarySuffix && /* @__PURE__ */ jsxs("span", { className: "text-[1rem] opacity-60", children: [
+                            " ",
+                            price.primarySuffix
+                          ] })
+                        ]
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsxs(
+                    Typography,
+                    {
+                      className: "block text-xl font-bold drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]",
+                      expanded: true,
+                      style: { mixBlendMode: "plus-lighter" },
+                      children: [
+                        price.primary,
+                        price.primarySuffix && /* @__PURE__ */ jsx("span", { className: "text-[1rem] opacity-60", children: price.primarySuffix })
+                      ]
+                    }
+                  )
+                ] }),
+                bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: bullets.map((bullet, i) => /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    className: cn(
+                      "font-courier text-[1rem] leading-tight tracking-tight uppercase",
+                      "drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]"
+                    ),
+                    children: [
+                      "\xB7 ",
+                      bullet
+                    ]
+                  },
+                  typeof bullet === "string" ? bullet : i
+                )) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
-//# sourceMappingURL=tier-card.js.map

package/dist/ui/components/tv.d.ts

@@ -1,4 +1,3 @@
 export declare function TV({ className }: {
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=tv.d.ts.map
+}): import("react").JSX.Element;

package/dist/ui/components/tv.js

@@ -1,8 +1,13 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-const VERT = /* glsl */ `attribute vec2 a;void main(){gl_Position=vec4(a,0,1);}`;
-const FRAG = /* glsl */ `precision highp float;
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+const VERT = (
+  /* glsl */
+  `attribute vec2 a;void main(){gl_Position=vec4(a,0,1);}`
+);
+const FRAG = (
+  /* glsl */
+  `precision highp float;
 uniform float t;
 uniform vec2 r;
 
@@ -99,92 +104,135 @@ void main() {
   c *= 1. - edge * max(step(.45, rowNoise), step(.3, h(vec2(gl_FragCoord.x + scanY * 7., floor(t * 45.)))) * step(.2, rowNoise));
 
   gl_FragColor = vec4(clamp(c, 0., 1.), 1.);
-}`;
+}`
+);
 function useGL(ref) {
-    const raf = useRef(0);
-    useEffect(() => {
-        const c = ref.current;
-        if (!c) {
-            return;
-        }
-        const gl = c.getContext('webgl');
-        if (!gl) {
-            return;
-        }
-        const sh = (type, src) => {
-            const s = gl.createShader(type);
-            gl.shaderSource(s, src);
-            gl.compileShader(s);
-            return s;
-        };
-        const p = gl.createProgram();
-        gl.attachShader(p, sh(gl.VERTEX_SHADER, VERT));
-        gl.attachShader(p, sh(gl.FRAGMENT_SHADER, FRAG));
-        gl.linkProgram(p);
-        gl.useProgram(p);
-        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
-        const a = gl.getAttribLocation(p, 'a');
-        gl.enableVertexAttribArray(a);
-        gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0);
-        const uT = gl.getUniformLocation(p, 't');
-        const uR = gl.getUniformLocation(p, 'r');
-        const resize = () => {
-            const rect = c.getBoundingClientRect();
-            const dpr = Math.min(devicePixelRatio, 2);
-            c.width = rect.width * dpr;
-            c.height = rect.height * dpr;
-            gl.viewport(0, 0, c.width, c.height);
-        };
-        resize();
-        const ro = new ResizeObserver(resize);
-        ro.observe(c);
-        const t0 = performance.now();
-        let visible = !document.hidden;
-        let inView = true;
-        let raf2 = 0;
-        const tick = () => {
-            gl.uniform1f(uT, (performance.now() - t0) / 1e3);
-            gl.uniform2f(uR, c.width, c.height);
-            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-            raf2 = requestAnimationFrame(tick);
-        };
-        const start = () => {
-            if (visible && inView && !raf2) {
-                raf2 = requestAnimationFrame(tick);
-            }
-        };
-        const stop = () => {
-            if (raf2) {
-                cancelAnimationFrame(raf2);
-                raf2 = 0;
-            }
-        };
-        const onVisibility = () => {
-            visible = !document.hidden;
-            visible ? start() : stop();
-        };
-        const io = new IntersectionObserver(entries => {
-            inView = entries.some(e => e.isIntersecting);
-            inView ? start() : stop();
-        }, { threshold: 0 });
-        io.observe(c);
-        document.addEventListener('visibilitychange', onVisibility);
-        start();
-        raf.current = raf2;
-        return () => {
-            stop();
-            io.disconnect();
-            document.removeEventListener('visibilitychange', onVisibility);
-            ro.disconnect();
-        };
-    }, [ref]);
+  const raf = useRef(0);
+  useEffect(() => {
+    const c = ref.current;
+    if (!c) {
+      return;
+    }
+    const gl = c.getContext("webgl");
+    if (!gl) {
+      return;
+    }
+    const sh = (type, src) => {
+      const s = gl.createShader(type);
+      gl.shaderSource(s, src);
+      gl.compileShader(s);
+      return s;
+    };
+    const p = gl.createProgram();
+    gl.attachShader(p, sh(gl.VERTEX_SHADER, VERT));
+    gl.attachShader(p, sh(gl.FRAGMENT_SHADER, FRAG));
+    gl.linkProgram(p);
+    gl.useProgram(p);
+    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+      gl.STATIC_DRAW
+    );
+    const a = gl.getAttribLocation(p, "a");
+    gl.enableVertexAttribArray(a);
+    gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0);
+    const uT = gl.getUniformLocation(p, "t");
+    const uR = gl.getUniformLocation(p, "r");
+    const resize = () => {
+      const rect = c.getBoundingClientRect();
+      const dpr = Math.min(devicePixelRatio, 2);
+      c.width = rect.width * dpr;
+      c.height = rect.height * dpr;
+      gl.viewport(0, 0, c.width, c.height);
+    };
+    resize();
+    const ro = new ResizeObserver(resize);
+    ro.observe(c);
+    const t0 = performance.now();
+    let visible = !document.hidden;
+    let inView = true;
+    let raf2 = 0;
+    const tick = () => {
+      gl.uniform1f(uT, (performance.now() - t0) / 1e3);
+      gl.uniform2f(uR, c.width, c.height);
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+      raf2 = requestAnimationFrame(tick);
+    };
+    const start = () => {
+      if (visible && inView && !raf2) {
+        raf2 = requestAnimationFrame(tick);
+      }
+    };
+    const stop = () => {
+      if (raf2) {
+        cancelAnimationFrame(raf2);
+        raf2 = 0;
+      }
+    };
+    const onVisibility = () => {
+      visible = !document.hidden;
+      visible ? start() : stop();
+    };
+    const io = new IntersectionObserver(
+      (entries) => {
+        inView = entries.some((e) => e.isIntersecting);
+        inView ? start() : stop();
+      },
+      { threshold: 0 }
+    );
+    io.observe(c);
+    document.addEventListener("visibilitychange", onVisibility);
+    start();
+    raf.current = raf2;
+    return () => {
+      stop();
+      io.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+      ro.disconnect();
+    };
+  }, [ref]);
 }
 export function TV({ className }) {
-    const canvasRef = useRef(null);
-    useGL(canvasRef);
-    return (_jsxs("div", { className: ['relative', className].filter(Boolean).join(' '), children: [_jsxs("svg", { className: "relative h-full w-full", fill: "none", viewBox: "0 0 210 173", children: [_jsx("path", { d: "M30.8342 2.44471 6.08268 36.683c-.24437.338-.38254.7412-.39689 1.158L1.57754 157.126c-.03891 1.129.82339 2.087 1.95096 2.167l162.4835 11.463c.433.031.866-.074 1.238-.3l35.718-21.69c.607-.369.986-1.02 1.008-1.73l4.102-130.9871c.035-1.1269-.826-2.0806-1.951-2.1604L32.6847 1.58029c-.7248-.05144-1.4247.27551-1.8505.86442Z", fill: "#FDFD0D", stroke: "#FDFD0D", strokeWidth: "3.15" }), _jsx("path", { d: "M203.09 17.1483 35.6844 5.83395l-4.2 121.94805 168.4906 13.076z", fill: "#000", stroke: "#FDFD0D", strokeWidth: "4.2" }), _jsx("path", { d: "M190.491 29.7483 48.2859 18.434l-4.2 98.848 143.2901 10.976z", fill: "#FDFD0D" })] }), _jsx("canvas", { className: "absolute inset-0 h-full w-full", ref: canvasRef, style: {
-                    clipPath: 'polygon(23% 10.65%, 90.71% 17.2%, 89.23% 74.13%, 20.99% 67.79%)'
-                } })] }));
+  const canvasRef = useRef(null);
+  useGL(canvasRef);
+  return /* @__PURE__ */ jsxs("div", { className: ["relative", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs("svg", { className: "relative h-full w-full", fill: "none", viewBox: "0 0 210 173", children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M30.8342 2.44471 6.08268 36.683c-.24437.338-.38254.7412-.39689 1.158L1.57754 157.126c-.03891 1.129.82339 2.087 1.95096 2.167l162.4835 11.463c.433.031.866-.074 1.238-.3l35.718-21.69c.607-.369.986-1.02 1.008-1.73l4.102-130.9871c.035-1.1269-.826-2.0806-1.951-2.1604L32.6847 1.58029c-.7248-.05144-1.4247.27551-1.8505.86442Z",
+          fill: "#FDFD0D",
+          stroke: "#FDFD0D",
+          strokeWidth: "3.15"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M203.09 17.1483 35.6844 5.83395l-4.2 121.94805 168.4906 13.076z",
+          fill: "#000",
+          stroke: "#FDFD0D",
+          strokeWidth: "4.2"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M190.491 29.7483 48.2859 18.434l-4.2 98.848 143.2901 10.976z",
+          fill: "#FDFD0D"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        className: "absolute inset-0 h-full w-full",
+        ref: canvasRef,
+        style: {
+          clipPath: "polygon(23% 10.65%, 90.71% 17.2%, 89.23% 74.13%, 20.99% 67.79%)"
+        }
+      }
+    )
+  ] });
 }
-//# sourceMappingURL=tv.js.map

package/dist/ui/components/typography/h1.d.ts

@@ -9,4 +9,3 @@ export declare const H1: import("react").ForwardRefExoticComponent<{
     sans?: boolean | null | undefined;
     variant?: "lg" | "md" | "sm" | "xl" | null | undefined;
 } & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">, "as" | "expanded" | "compressed" | "courier" | "mondwest" | "mono" | "sans" | "variant"> & import("react").RefAttributes<HTMLHeadingElement>>;
-//# sourceMappingURL=h1.d.ts.map

package/dist/ui/components/typography/h1.js

@@ -1,8 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { cn } from '../../../utils';
-import { Typography } from '.';
-export const H1 = forwardRef(({ className, ...props }, ref) => {
-    return (_jsx(Typography, { as: "h1", className: cn('font-bold', className), variant: "xl", ref, ...props }));
-});
-//# sourceMappingURL=h1.js.map
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+import { Typography } from "./index.js";
+export const H1 = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        as: "h1",
+        className: cn("font-bold", className),
+        variant: "xl",
+        ...{ ref, ...props }
+      }
+    );
+  }
+);

package/dist/ui/components/typography/h2.d.ts

@@ -9,4 +9,3 @@ export declare const H2: import("react").ForwardRefExoticComponent<{
     sans?: boolean | null | undefined;
     variant?: "lg" | "md" | "sm" | "xl" | null | undefined;
 } & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">, "as" | "expanded" | "compressed" | "courier" | "mondwest" | "mono" | "sans" | "variant"> & import("react").RefAttributes<HTMLHeadingElement>>;
-//# sourceMappingURL=h2.d.ts.map

package/dist/ui/components/typography/h2.js

@@ -1,8 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { cn } from '../../../utils';
-import { Typography } from '.';
-export const H2 = forwardRef(({ className, ...props }, ref) => {
-    return (_jsx(Typography, { as: "h2", className: cn('font-bold', className), variant: "lg", ref, ...props }));
-});
-//# sourceMappingURL=h2.js.map
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+import { Typography } from "./index.js";
+export const H2 = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        as: "h2",
+        className: cn("font-bold", className),
+        variant: "lg",
+        ...{ ref, ...props }
+      }
+    );
+  }
+);

package/dist/ui/components/typography/index.d.ts

@@ -13,4 +13,3 @@ export declare const Typography: import("../../..").PolyComponent<"span", OwnPro
 type OwnProps = VariantProps<typeof typographyVariants>;
 export type TypographyProps<T extends React.ElementType = 'span'> = PolyProps<T, OwnProps>;
 export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/ui/components/typography/index.js

@@ -1,29 +1,40 @@
-import { cva } from 'class-variance-authority';
-import { createElement } from 'react';
-import { cn, polyRef } from '../../../utils';
-const typographyVariants = cva('font-sans', {
-    variants: {
-        compressed: { true: 'font-compressed' },
-        courier: { true: 'font-courier' },
-        expanded: { true: 'font-expanded' },
-        mondwest: { true: 'font-mondwest tracking-[0.1875rem]' },
-        mono: { true: 'font-mono' },
-        sans: { true: 'font-sans' },
-        variant: {
-            lg: 'text-[2.625rem] leading-[1] tracking-[0.0525rem]',
-            md: 'text-[2.625rem] leading-[1] tracking-[0.0525rem]',
-            sm: 'leading-1.4 text-[.9375rem] tracking-[0.1875rem]',
-            xl: 'text-[4.5rem] leading-[1] tracking-[0.135rem]'
-        }
+import { cva } from "class-variance-authority";
+import { createElement } from "react";
+import { cn, polyRef } from "../../../utils/index.js";
+const typographyVariants = cva("font-sans", {
+  variants: {
+    compressed: { true: "font-compressed" },
+    courier: { true: "font-courier" },
+    expanded: { true: "font-expanded" },
+    mondwest: { true: "font-mondwest tracking-[0.1875rem]" },
+    mono: { true: "font-mono" },
+    sans: { true: "font-sans" },
+    variant: {
+      lg: "text-[2.625rem] leading-[1] tracking-[0.0525rem]",
+      md: "text-[2.625rem] leading-[1] tracking-[0.0525rem]",
+      sm: "leading-1.4 text-[.9375rem] tracking-[0.1875rem]",
+      xl: "text-[4.5rem] leading-[1] tracking-[0.135rem]"
     }
+  }
 });
-export const Typography = polyRef(({ as, className, compressed, courier, expanded, mondwest, mono, variant, ...rest }, ref) => {
+export const Typography = polyRef(
+  ({
+    as,
+    className,
+    compressed,
+    courier,
+    expanded,
+    mondwest,
+    mono,
+    variant,
+    ...rest
+  }, ref) => {
     const fonts = { compressed, courier, expanded, mondwest, mono };
     const fontVariant = { ...fonts, sans: !Object.values(fonts).some(Boolean) };
-    return createElement((as ?? 'span'), {
-        ...rest,
-        className: cn(typographyVariants({ ...fontVariant, variant }), className),
-        ref
+    return createElement(as ?? "span", {
+      ...rest,
+      className: cn(typographyVariants({ ...fontVariant, variant }), className),
+      ref
     });
-});
-//# sourceMappingURL=index.js.map
+  }
+);

package/dist/ui/components/typography/legend.d.ts

@@ -1,7 +1,6 @@
-export declare function Legend({ children, className, label, sub, ...props }: LegendProps): import("react/jsx-runtime").JSX.Element;
+export declare function Legend({ children, className, label, sub, ...props }: LegendProps): import("react").JSX.Element;
 interface LegendProps extends React.ComponentProps<'hgroup'> {
     label: React.ReactNode;
     sub?: React.ReactNode;
 }
 export {};
-//# sourceMappingURL=legend.d.ts.map

package/dist/ui/components/typography/legend.js

@@ -1,7 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../../utils';
-import { Small } from './small';
-export function Legend({ children, className, label, sub, ...props }) {
-    return (_jsxs("hgroup", { className: cn('flex flex-col gap-2', className), ...props, children: [_jsx(Small, { children: label }), sub && _jsxs(Small, { className: "opacity-50", children: ["- ", sub] }), children] }));
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/index.js";
+import { Small } from "./small.js";
+export function Legend({
+  children,
+  className,
+  label,
+  sub,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("hgroup", { className: cn("flex flex-col gap-2", className), ...props, children: [
+    /* @__PURE__ */ jsx(Small, { children: label }),
+    sub && /* @__PURE__ */ jsxs(Small, { className: "opacity-50", children: [
+      "- ",
+      sub
+    ] }),
+    children
+  ] });
 }
-//# sourceMappingURL=legend.js.map

package/dist/ui/components/typography/small.d.ts

@@ -1,3 +1,2 @@
 import { type TypographyProps } from '.';
 export declare const Small: import("react").ForwardRefExoticComponent<Omit<TypographyProps<any>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-//# sourceMappingURL=small.d.ts.map

package/dist/ui/components/typography/small.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { Typography } from '.';
-export const Small = forwardRef((props, ref) => {
-    return (_jsx(Typography, { as: "small", mondwest: true, variant: "sm", ref, ...props }));
-});
-//# sourceMappingURL=small.js.map
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Typography } from "./index.js";
+export const Small = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(Typography, { as: "small", mondwest: true, variant: "sm", ...{ ref, ...props } });
+  }
+);

package/dist/ui/components/watchlist.d.ts

@@ -1,4 +1,4 @@
-export declare function Watchlist({ className, counter, items, scramble, ...props }: WatchlistProps): import("react/jsx-runtime").JSX.Element;
+export declare function Watchlist({ className, counter, items, scramble, ...props }: WatchlistProps): import("react").JSX.Element;
 interface WatchlistProps extends React.ComponentProps<'div'> {
     counter?: boolean;
     items: {
@@ -9,4 +9,3 @@ interface WatchlistProps extends React.ComponentProps<'div'> {
     scramble?: boolean;
 }
 export {};
-//# sourceMappingURL=watchlist.d.ts.map