@nous-research/ui 0.13.2 → 0.14.0

package/dist/ui/components/graphs/line-chart.js

@@ -1,117 +1,174 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as Plot from '@observablehq/plot';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { cn } from '../../../utils';
-import { accessor, CHART_MARGINS, CHART_STYLE, Crosshair, setupCrosshair, stylePlot, useDims, withChartBlend } from './utils';
-export const LineChart = withChartBlend(({ backgroundColor: _, className, color: strokeColor, curve = 'natural', data = [], formatTooltip, formatX: formatXProp, formatY: formatYProp, series = 'series', showArea = false, x = 'label', xTicks, y = 'value', yDomain = [0, 0.5], yTicks = 4, ...props }) => {
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Plot from "@observablehq/plot";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "../../../utils/index.js";
+import {
+  accessor,
+  CHART_MARGINS,
+  CHART_STYLE,
+  Crosshair,
+  setupCrosshair,
+  stylePlot,
+  useDims,
+  withChartBlend
+} from "./utils.js";
+export const LineChart = withChartBlend(
+  ({
+    backgroundColor: _,
+    className,
+    color: strokeColor,
+    curve = "natural",
+    data = [],
+    formatTooltip,
+    formatX: formatXProp,
+    formatY: formatYProp,
+    series = "series",
+    showArea = false,
+    x = "label",
+    xTicks,
+    y = "value",
+    yDomain = [0, 0.5],
+    yTicks = 4,
+    ...props
+  }) => {
     const ref = useRef(null);
     const plotRef = useRef(null);
     const [hovered, setHovered] = useState(null);
     const [crosshair, setCrosshair] = useState({ x: null });
     const dims = useDims(ref);
-    const formatX = useCallback((v) => formatXProp?.(v) ??
-        (v >= 1e3 ? `${v / 1e3}k` : `${v}`), [formatXProp]);
-    const formatY = useCallback((v) => formatYProp?.(v) ?? `${Math.round(v * 100)}%`, [formatYProp]);
+    const formatX = useCallback(
+      (v) => formatXProp?.(v) ?? (v >= 1e3 ? `${v / 1e3}k` : `${v}`),
+      [formatXProp]
+    );
+    const formatY = useCallback(
+      (v) => formatYProp?.(v) ?? `${Math.round(v * 100)}%`,
+      [formatYProp]
+    );
     const getX = useMemo(() => accessor(x), [x]);
     const getY = useMemo(() => accessor(y), [y]);
     const getZ = useCallback((d) => d[series], [series]);
     useEffect(() => {
-        if (!ref.current ||
-            !plotRef.current ||
-            !data.length ||
-            !dims.h ||
-            !dims.w) {
-            return;
+      if (!ref.current || !plotRef.current || !data.length || !dims.h || !dims.w) {
+        return;
+      }
+      plotRef.current.innerHTML = "";
+      const hasSeries = data.some((d) => d[series] !== void 0);
+      const seriesIdx = hasSeries ? data.reduce(
+        (acc, d, i) => (acc[d[series]] ??= i, acc),
+        {}
+      ) : {};
+      const n = Object.keys(seriesIdx).length;
+      const opacity = (d) => {
+        if (!hasSeries) {
+          return 1;
         }
-        plotRef.current.innerHTML = '';
-        const hasSeries = data.some(d => d[series] !== undefined);
-        const seriesIdx = hasSeries
-            ? data.reduce((acc, d, i) => { var _a; return ((acc[_a = d[series]] ?? (acc[_a] = i)), acc); }, {})
-            : {};
-        const n = Object.keys(seriesIdx).length;
-        const opacity = (d) => {
-            if (!hasSeries) {
-                return 1;
-            }
-            if (hovered) {
-                return d[series] === hovered[series] ? 1 : 0.2;
-            }
-            return 1 - (seriesIdx[d[series]] / Math.max(n - 1, 1)) * 0.2;
-        };
-        const lineOpts = {
-            curve,
-            x: getX,
-            y: getY,
-            ...(hasSeries && { z: getZ })
-        };
-        const plot = Plot.plot({
-            ...CHART_MARGINS,
-            height: dims.h,
-            marks: [
-                ...(showArea
-                    ? [
-                        Plot.areaY(data, {
-                            ...lineOpts,
-                            fill: strokeColor,
-                            fillOpacity: 0.15,
-                            y1: yDomain[0]
-                        })
-                    ]
-                    : []),
-                Plot.lineY(data, {
-                    ...lineOpts,
-                    stroke: 'transparent',
-                    strokeWidth: 16
-                }),
-                Plot.lineY(data, {
-                    ...lineOpts,
-                    stroke: strokeColor,
-                    strokeOpacity: opacity,
-                    strokeWidth: 1.5
-                })
-            ],
-            style: { ...CHART_STYLE, fontStretch: 'expanded' },
-            width: dims.w,
-            x: { label: null, tickFormat: formatX, ticks: xTicks },
-            y: {
-                domain: yDomain,
-                grid: true,
-                label: null,
-                tickFormat: formatY,
-                ticks: yTicks
-            }
-        });
-        plot.addEventListener('input', () => setHovered(plot.value));
-        stylePlot(plot);
-        plot.querySelectorAll('g[aria-label="line"] path').forEach(el => Object.assign(el.style, {
-            transition: 'stroke-opacity 0.2s'
-        }));
-        plotRef.current.appendChild(plot);
-        const cleanup = setupCrosshair(ref.current, data, d => getX(d), getY, yDomain, d => formatTooltip?.(d) ?? `${formatX(getX(d))}: ${formatY(getY(d))}`, setCrosshair, hasSeries ? d => getZ(d) : undefined);
-        return () => {
-            cleanup();
-            plot.parentNode && plot.remove();
-        };
-    }, [
+        if (hovered) {
+          return d[series] === hovered[series] ? 1 : 0.2;
+        }
+        return 1 - seriesIdx[d[series]] / Math.max(n - 1, 1) * 0.2;
+      };
+      const lineOpts = {
         curve,
+        x: getX,
+        y: getY,
+        ...hasSeries && { z: getZ }
+      };
+      const plot = Plot.plot({
+        ...CHART_MARGINS,
+        height: dims.h,
+        marks: [
+          ...showArea ? [
+            Plot.areaY(data, {
+              ...lineOpts,
+              fill: strokeColor,
+              fillOpacity: 0.15,
+              y1: yDomain[0]
+            })
+          ] : [],
+          Plot.lineY(data, {
+            ...lineOpts,
+            stroke: "transparent",
+            strokeWidth: 16
+          }),
+          Plot.lineY(data, {
+            ...lineOpts,
+            stroke: strokeColor,
+            strokeOpacity: opacity,
+            strokeWidth: 1.5
+          })
+        ],
+        style: { ...CHART_STYLE, fontStretch: "expanded" },
+        width: dims.w,
+        x: { label: null, tickFormat: formatX, ticks: xTicks },
+        y: {
+          domain: yDomain,
+          grid: true,
+          label: null,
+          tickFormat: formatY,
+          ticks: yTicks
+        }
+      });
+      plot.addEventListener("input", () => setHovered(plot.value));
+      stylePlot(plot);
+      plot.querySelectorAll('g[aria-label="line"] path').forEach(
+        (el) => Object.assign(el.style, {
+          transition: "stroke-opacity 0.2s"
+        })
+      );
+      plotRef.current.appendChild(plot);
+      const cleanup = setupCrosshair(
+        ref.current,
         data,
-        dims.h,
-        dims.w,
-        formatTooltip,
-        formatX,
-        formatY,
-        getX,
+        (d) => getX(d),
         getY,
-        getZ,
-        hovered,
-        series,
-        showArea,
-        strokeColor,
-        xTicks,
         yDomain,
-        yTicks
+        (d) => formatTooltip?.(d) ?? `${formatX(getX(d))}: ${formatY(getY(d))}`,
+        setCrosshair,
+        hasSeries ? (d) => getZ(d) : void 0
+      );
+      return () => {
+        cleanup();
+        plot.parentNode && plot.remove();
+      };
+    }, [
+      curve,
+      data,
+      dims.h,
+      dims.w,
+      formatTooltip,
+      formatX,
+      formatY,
+      getX,
+      getY,
+      getZ,
+      hovered,
+      series,
+      showArea,
+      strokeColor,
+      xTicks,
+      yDomain,
+      yTicks
     ]);
-    return (_jsxs("div", { className: cn('relative aspect-4/1 w-full overflow-clip', className), ref: ref, ...props, children: [_jsx("div", { className: "absolute inset-0", ref: plotRef }), _jsx(Crosshair, { color: strokeColor, containerWidth: dims.w, height: dims.h, ...crosshair })] }));
-});
-//# sourceMappingURL=line-chart.js.map
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("relative aspect-4/1 w-full overflow-clip", className),
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0", ref: plotRef }),
+          /* @__PURE__ */ jsx(
+            Crosshair,
+            {
+              color: strokeColor,
+              containerWidth: dims.w,
+              height: dims.h,
+              ...crosshair
+            }
+          )
+        ]
+      }
+    );
+  }
+);

package/dist/ui/components/graphs/utils.d.ts

@@ -23,10 +23,10 @@ export declare const Crosshair: ({ color, containerWidth, height, points, x }: C
     color?: string;
     containerWidth: number;
     height: number;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => import("react").JSX.Element | null;
 export declare const setupCrosshair: <T extends DataPoint>(container: HTMLElement, data: T[], getX: (d: T) => number, getY: (d: T) => number, yDomain: [number, number], formatTooltip: (d: T) => string, onUpdate: (state: CrosshairState) => void, getZ?: (d: T) => unknown) => () => void;
 export declare const withChartBlend: <P extends BlendModeProps>(Component: ComponentType<P>) => {
-    (props: Omit<P, keyof BlendColors>): import("react/jsx-runtime").JSX.Element;
+    (props: Omit<P, keyof BlendColors>): import("react").JSX.Element;
     displayName: string;
 };
 export type DataPoint = Record<string, unknown>;
@@ -50,4 +50,3 @@ export interface ChartProps<T = DataPoint> extends Omit<HTMLAttributes<HTMLDivEl
     yDomain?: [number, number];
     yTicks?: number | number[];
 }
-//# sourceMappingURL=utils.d.ts.map

package/dist/ui/components/graphs/utils.js

@@ -1,128 +1,161 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { useSmoothControls } from '../../../hooks/use-smooth-controls';
-export const accessor = (key) => typeof key === 'function' ? key : (d) => d[key];
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useEffect,
+  useState
+} from "react";
+import { useSmoothControls } from "../../../hooks/use-smooth-controls.js";
+export const accessor = (key) => typeof key === "function" ? key : (d) => d[key];
 export const CHART_MARGINS = {
-    marginBottom: 24,
-    marginLeft: 36,
-    marginRight: 12,
-    marginTop: 8
+  marginBottom: 24,
+  marginLeft: 36,
+  marginRight: 12,
+  marginTop: 8
 };
 export const CHART_STYLE = {
-    background: 'transparent',
-    color: 'var(--midground)',
-    fontFamily: 'var(--font-mono), monospace',
-    fontSize: '11px',
-    overflow: 'hidden'
+  background: "transparent",
+  color: "var(--midground)",
+  fontFamily: "var(--font-mono), monospace",
+  fontSize: "11px",
+  overflow: "hidden"
 };
 export const stylePlot = (plot) => {
-    plot.querySelectorAll('[aria-label*="grid"] line').forEach(el => Object.assign(el.style, {
-        stroke: 'currentColor',
-        strokeDasharray: '2,4',
-        strokeOpacity: '0.3'
-    }));
-    plot.querySelectorAll('text').forEach(el => Object.assign(el.style, {
-        fontSize: '11px',
-        fontWeight: '600'
-    }));
-    plot
-        .querySelectorAll('[aria-label*="label"] text')
-        .forEach(el => (el.style.opacity = '0.4'));
-    const svg = plot.querySelector('svg');
-    svg && (svg.style.display = 'block');
+  plot.querySelectorAll('[aria-label*="grid"] line').forEach(
+    (el) => Object.assign(el.style, {
+      stroke: "currentColor",
+      strokeDasharray: "2,4",
+      strokeOpacity: "0.3"
+    })
+  );
+  plot.querySelectorAll("text").forEach(
+    (el) => Object.assign(el.style, {
+      fontSize: "11px",
+      fontWeight: "600"
+    })
+  );
+  plot.querySelectorAll('[aria-label*="label"] text').forEach((el) => el.style.opacity = "0.4");
+  const svg = plot.querySelector("svg");
+  svg && (svg.style.display = "block");
 };
 export const useDims = (ref) => {
-    const [dims, setDims] = useState({ h: 0, w: 0 });
-    useEffect(() => {
-        if (!ref.current) {
-            return;
-        }
-        const update = () => {
-            const { height: h, width: w } = ref.current.getBoundingClientRect();
-            const [rh, rw] = [Math.round(h), Math.round(w)];
-            rh &&
-                rw &&
-                setDims(st => (st.h === rh && st.w === rw ? st : { h: rh, w: rw }));
-        };
-        update();
-        const ro = new ResizeObserver(update);
-        ro.observe(ref.current);
-        return () => ro.disconnect();
-    }, [ref]);
-    return dims;
-};
-export const Crosshair = ({ color = 'var(--foreground)', containerWidth, height, points, x }) => {
-    if (x === null) {
-        return null;
+  const [dims, setDims] = useState({ h: 0, w: 0 });
+  useEffect(() => {
+    if (!ref.current) {
+      return;
     }
-    const nearRight = x > containerWidth * 0.7;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "pointer-events-none absolute top-0 w-px", style: { background: color, height, left: x, opacity: 0.4 } }), points?.map((pt, i) => (_jsx("div", { className: "pointer-events-none absolute size-2 -translate-x-1/2 -translate-y-1/2 rounded-full", style: { background: color, left: x, top: pt.dotY } }, i))), points?.map((pt, i) => (_jsx("div", { className: "tooltip absolute -translate-y-1/2", style: {
-                    left: nearRight ? undefined : x + 12,
-                    right: nearRight ? containerWidth - x + 12 : undefined,
-                    top: pt.dotY
-                }, children: pt.tooltip }, i)))] }));
+    const update = () => {
+      const { height: h, width: w } = ref.current.getBoundingClientRect();
+      const [rh, rw] = [Math.round(h), Math.round(w)];
+      rh && rw && setDims((st) => st.h === rh && st.w === rw ? st : { h: rh, w: rw });
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(ref.current);
+    return () => ro.disconnect();
+  }, [ref]);
+  return dims;
+};
+export const Crosshair = ({
+  color = "var(--foreground)",
+  containerWidth,
+  height,
+  points,
+  x
+}) => {
+  if (x === null) {
+    return null;
+  }
+  const nearRight = x > containerWidth * 0.7;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute top-0 w-px",
+        style: { background: color, height, left: x, opacity: 0.4 }
+      }
+    ),
+    points?.map((pt, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute size-2 -translate-x-1/2 -translate-y-1/2 rounded-full",
+        style: { background: color, left: x, top: pt.dotY }
+      },
+      i
+    )),
+    points?.map((pt, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "tooltip absolute -translate-y-1/2",
+        style: {
+          left: nearRight ? void 0 : x + 12,
+          right: nearRight ? containerWidth - x + 12 : void 0,
+          top: pt.dotY
+        },
+        children: pt.tooltip
+      },
+      i
+    ))
+  ] });
 };
 export const setupCrosshair = (container, data, getX, getY, yDomain, formatTooltip, onUpdate, getZ) => {
-    if (!data.length) {
-        return () => { };
-    }
-    const { marginBottom, marginLeft, marginRight, marginTop } = CHART_MARGINS;
-    const seriesMap = data.reduce((m, d) => {
-        const key = getZ?.(d) ?? '__single__';
-        m.set(key, [...(m.get(key) ?? []), d]);
-        return m;
-    }, new Map());
-    const sortedSeries = [...seriesMap.values()].map(s => [...s].sort((a, b) => getX(a) - getX(b)));
-    const allX = data.map(getX);
-    const [xMin, xMax] = [Math.min(...allX), Math.max(...allX)];
-    const onMove = (e) => {
-        const rect = container.getBoundingClientRect();
-        const [localX, localY] = [e.clientX - rect.left, e.clientY - rect.top];
-        if (localX < 0 ||
-            localX > rect.width ||
-            localY < 0 ||
-            localY > rect.height) {
-            return onUpdate({ x: null });
-        }
-        const [chartLeft, chartRight] = [marginLeft, rect.width - marginRight];
-        const [chartTop, chartBottom] = [marginTop, rect.height - marginBottom];
-        if (localX < chartLeft || localX > chartRight) {
-            return onUpdate({ x: null });
-        }
-        const pct = (localX - chartLeft) / (chartRight - chartLeft);
-        const xVal = xMin + pct * (xMax - xMin);
-        const points = sortedSeries.map(sorted => {
-            const idx = sorted.findIndex(d => getX(d) >= xVal);
-            const [closest, yVal] = idx <= 0
-                ? [sorted[0], getY(sorted[0])]
-                : idx >= sorted.length
-                    ? [sorted.at(-1), getY(sorted.at(-1))]
-                    : (() => {
-                        const [left, right] = [sorted[idx - 1], sorted[idx]];
-                        const t = (xVal - getX(left)) / (getX(right) - getX(left));
-                        return [
-                            t < 0.5 ? left : right,
-                            getY(left) + t * (getY(right) - getY(left))
-                        ];
-                    })();
-            const yPct = (yVal - yDomain[0]) / (yDomain[1] - yDomain[0]);
-            return {
-                dotY: chartBottom - yPct * (chartBottom - chartTop),
-                tooltip: formatTooltip(closest)
-            };
-        });
-        onUpdate({ points, x: localX });
+  if (!data.length) {
+    return () => {
     };
-    document.addEventListener('mousemove', onMove);
-    return () => document.removeEventListener('mousemove', onMove);
+  }
+  const { marginBottom, marginLeft, marginRight, marginTop } = CHART_MARGINS;
+  const seriesMap = data.reduce((m, d) => {
+    const key = getZ?.(d) ?? "__single__";
+    m.set(key, [...m.get(key) ?? [], d]);
+    return m;
+  }, /* @__PURE__ */ new Map());
+  const sortedSeries = [...seriesMap.values()].map(
+    (s) => [...s].sort((a, b) => getX(a) - getX(b))
+  );
+  const allX = data.map(getX);
+  const [xMin, xMax] = [Math.min(...allX), Math.max(...allX)];
+  const onMove = (e) => {
+    const rect = container.getBoundingClientRect();
+    const [localX, localY] = [e.clientX - rect.left, e.clientY - rect.top];
+    if (localX < 0 || localX > rect.width || localY < 0 || localY > rect.height) {
+      return onUpdate({ x: null });
+    }
+    const [chartLeft, chartRight] = [marginLeft, rect.width - marginRight];
+    const [chartTop, chartBottom] = [marginTop, rect.height - marginBottom];
+    if (localX < chartLeft || localX > chartRight) {
+      return onUpdate({ x: null });
+    }
+    const pct = (localX - chartLeft) / (chartRight - chartLeft);
+    const xVal = xMin + pct * (xMax - xMin);
+    const points = sortedSeries.map((sorted) => {
+      const idx = sorted.findIndex((d) => getX(d) >= xVal);
+      const [closest, yVal] = idx <= 0 ? [sorted[0], getY(sorted[0])] : idx >= sorted.length ? [sorted.at(-1), getY(sorted.at(-1))] : (() => {
+        const [left, right] = [sorted[idx - 1], sorted[idx]];
+        const t = (xVal - getX(left)) / (getX(right) - getX(left));
+        return [
+          t < 0.5 ? left : right,
+          getY(left) + t * (getY(right) - getY(left))
+        ];
+      })();
+      const yPct = (yVal - yDomain[0]) / (yDomain[1] - yDomain[0]);
+      return {
+        dotY: chartBottom - yPct * (chartBottom - chartTop),
+        tooltip: formatTooltip(closest)
+      };
+    });
+    onUpdate({ points, x: localX });
+  };
+  document.addEventListener("mousemove", onMove);
+  return () => document.removeEventListener("mousemove", onMove);
 };
 export const withChartBlend = (Component) => {
-    const Wrapped = (props) => {
-        const { color } = useSmoothControls('Charts', { color: { value: '#709fea' } }, { collapsed: true });
-        return _jsx(Component, { ...props, color: color });
-    };
-    Wrapped.displayName = `withChartBlend(${Component.displayName ?? Component.name})`;
-    return Wrapped;
+  const Wrapped = (props) => {
+    const { color } = useSmoothControls(
+      "Charts",
+      { color: { value: "#709fea" } },
+      { collapsed: true }
+    );
+    return /* @__PURE__ */ jsx(Component, { ...props, color });
+  };
+  Wrapped.displayName = `withChartBlend(${Component.displayName ?? Component.name})`;
+  return Wrapped;
 };
-//# sourceMappingURL=utils.js.map

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

@@ -1,3 +1,2 @@
 export declare const Grid: import("../../..").PolyComponent<"div", object>;
 export declare const Cell: import("../../..").PolyComponent<"div", object>;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,13 +1,16 @@
-import { createElement } from 'react';
-import { cn, polyRef } from '../../../utils';
-export const Grid = polyRef(({ as, className, ...rest }, ref) => createElement((as ?? 'div'), {
+import { createElement } from "react";
+import { cn, polyRef } from "../../../utils/index.js";
+export const Grid = polyRef(
+  ({ as, className, ...rest }, ref) => createElement(as ?? "div", {
     ...rest,
-    className: cn('g', className),
+    className: cn("g", className),
     ref
-}));
-export const Cell = polyRef(({ as, className, ...rest }, ref) => createElement((as ?? 'div'), {
+  })
+);
+export const Cell = polyRef(
+  ({ as, className, ...rest }, ref) => createElement(as ?? "div", {
     ...rest,
-    className: cn('gc', className),
+    className: cn("gc", className),
     ref
-}));
-//# sourceMappingURL=index.js.map
+  })
+);

package/dist/ui/components/hover-bg.d.ts

@@ -1,2 +1 @@
 export declare const HoverBg: import("../..").PolyComponent<"span", object>;
-//# sourceMappingURL=hover-bg.d.ts.map

package/dist/ui/components/hover-bg.js

@@ -1,8 +1,13 @@
-import { createElement } from 'react';
-import { cn, polyRef } from '../../utils';
-export const HoverBg = polyRef(({ as, className, ...rest }, ref) => createElement((as ?? 'span'), {
+import { createElement } from "react";
+import { cn, polyRef } from "../../utils/index.js";
+export const HoverBg = polyRef(
+  ({ as, className, ...rest }, ref) => createElement(as ?? "span", {
     ...rest,
-    className: cn('absolute inset-1 bg-midground pointer-events-none', 'opacity-5 transition-opacity duration-250 group-hover:opacity-5 opacity-0 group-hover:duration-0', className),
+    className: cn(
+      "absolute inset-1 bg-midground pointer-events-none",
+      "opacity-5 transition-opacity duration-250 group-hover:opacity-5 opacity-0 group-hover:duration-0",
+      className
+    ),
     ref
-}));
-//# sourceMappingURL=hover-bg.js.map
+  })
+);

package/dist/ui/components/icons/arrow.d.ts

@@ -1,7 +1,6 @@
 import type { SVGProps } from 'react';
-export declare function ArrowIcon({ className, direction, ...props }: ArrowIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowIcon({ className, direction, ...props }: ArrowIconProps): import("react").JSX.Element;
 interface ArrowIconProps extends SVGProps<SVGSVGElement> {
     direction?: 'down' | 'left' | 'right' | 'up';
 }
 export {};
-//# sourceMappingURL=arrow.d.ts.map