@nous-research/ui 0.15.0 → 0.17.0

package/src/ui/components/graphs/utils.tsx

@@ -0,0 +1,265 @@
+'use client'
+
+import {
+  type ComponentType,
+  type HTMLAttributes,
+  type RefObject,
+  useEffect,
+  useState
+} from 'react'
+
+import { useSmoothControls } from '../../../hooks/use-smooth-controls'
+import {
+  type BlendColors,
+  type BlendModeProps
+} from '../blend-mode'
+
+export const accessor = <T, R>(key: ((d: T) => R) | keyof T) =>
+  typeof key === 'function' ? key : (d: T) => d[key] as R
+
+export const CHART_MARGINS = {
+  marginBottom: 24,
+  marginLeft: 36,
+  marginRight: 12,
+  marginTop: 8
+} as const
+
+export const CHART_STYLE = {
+  background: 'transparent',
+  color: 'var(--midground)',
+  fontFamily: 'var(--font-mono), monospace',
+  fontSize: '11px',
+  overflow: 'hidden'
+} as const
+
+export const stylePlot = (plot: HTMLElement) => {
+  plot.querySelectorAll('[aria-label*="grid"] line').forEach(el =>
+    Object.assign((el as SVGLineElement).style, {
+      stroke: 'currentColor',
+      strokeDasharray: '2,4',
+      strokeOpacity: '0.3'
+    })
+  )
+
+  plot.querySelectorAll('text').forEach(el =>
+    Object.assign((el as SVGTextElement).style, {
+      fontSize: '11px',
+      fontWeight: '600'
+    })
+  )
+
+  plot
+    .querySelectorAll('[aria-label*="label"] text')
+    .forEach(el => ((el as SVGTextElement).style.opacity = '0.4'))
+
+  const svg = plot.querySelector('svg')
+  svg && (svg.style.display = 'block')
+}
+
+export const useDims = (ref: RefObject<HTMLElement | null>) => {
+  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
+}: CrosshairState & {
+  color?: string
+  containerWidth: number
+  height: number
+}) => {
+  if (x === null) {
+    return null
+  }
+
+  const nearRight = x > containerWidth * 0.7
+
+  return (
+    <>
+      <div
+        className="pointer-events-none absolute top-0 w-px"
+        style={{ background: color, height, left: x, opacity: 0.4 }}
+      />
+
+      {points?.map((pt, i) => (
+        <div
+          className="pointer-events-none absolute size-2 -translate-x-1/2 -translate-y-1/2 rounded-full"
+          key={i}
+          style={{ background: color, left: x, top: pt.dotY }}
+        />
+      ))}
+
+      {points?.map((pt, i) => (
+        <div
+          className="tooltip absolute -translate-y-1/2"
+          key={i}
+          style={{
+            left: nearRight ? undefined : x + 12,
+            right: nearRight ? containerWidth - x + 12 : undefined,
+            top: pt.dotY
+          }}
+        >
+          {pt.tooltip}
+        </div>
+      ))}
+    </>
+  )
+}
+
+export 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
+) => {
+  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<unknown, T[]>())
+
+  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: MouseEvent) => {
+    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))
+                ] as const
+              })()
+
+      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 = <P extends BlendModeProps>(
+  Component: ComponentType<P>
+) => {
+  const Wrapped = (props: Omit<P, keyof BlendColors>) => {
+    const { color } = useSmoothControls(
+      'Charts',
+      { color: { value: '#709fea' } },
+      { collapsed: true }
+    )
+
+    return <Component {...(props as P)} color={color} />
+  }
+
+  Wrapped.displayName = `withChartBlend(${Component.displayName ?? Component.name})`
+
+  return Wrapped
+}
+
+export type DataPoint = Record<string, unknown>
+
+export interface CrosshairPoint {
+  dotY: number
+  tooltip: string
+}
+
+export interface CrosshairState {
+  points?: CrosshairPoint[]
+  x: null | number
+}
+
+export interface ChartProps<T = DataPoint>
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  data?: T[]
+  formatTooltip?: (d: T) => string
+  formatX?: (v: unknown) => string
+  formatY?: (v: number) => string
+  height?: number
+  x?: ((d: T) => unknown) | keyof T
+  xTicks?: number | number[]
+  y?: ((d: T) => number) | keyof T
+  yDomain?: [number, number]
+  yTicks?: number | number[]
+}

package/src/ui/components/grid/grid.css

@@ -0,0 +1,79 @@
+.g {
+  @apply grid grid-cols-1 border-l border-current/20;
+
+  &:has(> .gc:nth-child(3)):not(:has(> .gc:nth-child(4))) > .gc:nth-child(2) {
+    @apply -order-1;
+  }
+
+  @media (width >= 40rem) {
+    &:has(> .gc:nth-child(2)) {
+      @apply grid-cols-2;
+    }
+
+    &:has(> .gc:nth-child(3)):not(:has(> .gc:nth-child(4)))
+      > .gc:nth-child(2) {
+      @apply -order-1 col-span-full;
+    }
+  }
+
+  @media (width >= 64rem) {
+    &:has(> .gc:nth-child(3)) {
+      @apply grid-cols-3;
+    }
+
+    &:has(> .gc:nth-child(4)) {
+      @apply grid-cols-4;
+    }
+
+    &:has(> .gc:nth-child(5)) {
+      @apply grid-cols-5;
+    }
+
+    &:has(> .gc:nth-child(6)) {
+      @apply grid-cols-6;
+    }
+
+    &:has(> .gc:nth-child(3)):not(:has(> .gc:nth-child(4))) {
+      grid-template-columns: 1fr 2fr 1fr;
+
+      > .gc:nth-child(2) {
+        @apply order-none col-auto;
+      }
+    }
+  }
+
+  &:last-child {
+    @apply border-b;
+  }
+
+  &:first-child,
+  + .g > .gc,
+  > .g {
+    @apply border-t;
+  }
+
+  .g {
+    @apply border-l-0;
+  }
+
+  &:not(:last-child) .gc:last-child {
+    @apply border-b-0;
+  }
+
+  .gc {
+    min-width: 0;
+    @apply border-r border-inherit p-4;
+
+    &:has(> .gc) {
+      @apply p-0;
+
+      > .gc {
+        @apply border-r-0 not-first:border-t last:border-b-0;
+      }
+    }
+  }
+
+  .post.gc {
+    @apply lg:p-12;
+  }
+}

package/src/ui/components/grid/index.tsx

@@ -0,0 +1,19 @@
+import { createElement } from 'react'
+
+import { cn, polyRef } from '../../../utils'
+
+export const Grid = polyRef<'div'>(({ as, className, ...rest }, ref) =>
+  createElement((as ?? 'div') as React.ElementType, {
+    ...rest,
+    className: cn('g', className),
+    ref
+  })
+)
+
+export const Cell = polyRef<'div'>(({ as, className, ...rest }, ref) =>
+  createElement((as ?? 'div') as React.ElementType, {
+    ...rest,
+    className: cn('gc', className),
+    ref
+  })
+)

package/src/ui/components/hover-bg.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { HoverBg } from './hover-bg'
+import { Typography } from './typography'
+
+const meta = {
+  component: HoverBg,
+  title: 'Components/Layout/HoverBg'
+} satisfies Meta<typeof HoverBg>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Row: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      {['Alpha', 'Beta', 'Gamma'].map(label => (
+        <div
+          className="group relative flex items-center justify-center px-6 py-3"
+          key={label}
+        >
+          <Typography mono>{label}</Typography>
+          <HoverBg />
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/ui/components/hover-bg.tsx

@@ -0,0 +1,15 @@
+import { createElement } from 'react'
+
+import { cn, polyRef } from '../../utils'
+
+export const HoverBg = polyRef<'span'>(({ as, className, ...rest }, ref) =>
+  createElement((as ?? 'span') as React.ElementType, {
+    ...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
+    ),
+    ref
+  })
+)

package/src/ui/components/icons/arrow.tsx

@@ -0,0 +1,42 @@
+import type { SVGProps } from 'react'
+
+import { cn } from '../../../utils'
+
+export function ArrowIcon({
+  className,
+  direction = 'down',
+  ...props
+}: ArrowIconProps) {
+  return (
+    <svg
+      className={cn(
+        direction === 'up' && 'rotate-180',
+        direction === 'left' && 'rotate-90',
+        direction === 'right' && '-rotate-90',
+        'origin-center',
+        className
+      )}
+      fill="none"
+      viewBox="0 0 13 15"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M5 15V0h2.50075v15z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+
+      <path
+        clipRule="evenodd"
+        d="M10 12.5007H2.5V9.99998H10zM12.4976 9.99951H9.99805v-2.4996h2.49955zM2.4996 9.99951H0v-2.4996h2.4996z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+interface ArrowIconProps extends SVGProps<SVGSVGElement> {
+  direction?: 'down' | 'left' | 'right' | 'up'
+}

package/src/ui/components/icons/check.tsx

@@ -0,0 +1,14 @@
+import type { SVGProps } from 'react'
+
+export function CheckIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" viewBox="0 0 12 12" {...props}>
+      <path
+        clipRule="evenodd"
+        d="M10.28 2.22a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06 0L1.72 6.28a.75.75 0 1 1 1.06-1.06L4.5 6.94l4.72-4.72a.75.75 0 0 1 1.06 0Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}

package/src/ui/components/icons/chevron.tsx

@@ -0,0 +1,45 @@
+import type { SVGProps } from 'react'
+
+import { cn } from '../../../utils'
+
+export function ChevronIcon({
+  className,
+  direction = 'left',
+  ...props
+}: ChevronIconProps) {
+  return (
+    <svg
+      className={cn(
+        direction === 'left' && 'rotate-90',
+        direction === 'right' && '-rotate-90',
+        className
+      )}
+      fill="none"
+      viewBox="0 0 8 13"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M0 7.49765h5V4.9969H1e-7z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="M2.5 2.49765v7.5h2.50075v-7.5z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="M5 .0000031V2.4996h2.4996V.0000032zM5 9.99805v2.49965h2.4996V9.99805z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+interface ChevronIconProps extends SVGProps<SVGSVGElement> {
+  direction?: 'left' | 'right'
+}

package/src/ui/components/icons/discord.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from 'react'
+
+import { cn } from '../../../utils'
+
+export function DiscordIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      className={cn('size-4', className)}
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
+    </svg>
+  )
+}

package/src/ui/components/icons/eye.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react'
+
+export function EyeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" viewBox="0 0 26 17" {...props}>
+      <g clipRule="evenodd" fill="currentColor" fillRule="evenodd">
+        <path d="M2.36308 9.45484H0V7.09067h2.36308zM23.6387 9.45484h2.3631V7.09067h-2.3631zM4.73047 2.36462h3.54519v2.36309H4.73047zM8.27539 0h9.45451v2.36417H8.27539zM8.27539 14.1808h9.45451v2.3641H8.27539zM4.73047 14.1808h3.54519v-2.3631H4.73047zM21.2718 2.36462h-3.5452v2.36309h3.5452zM21.2718 14.1808h-3.5452v-2.3631h3.5452zM2.36719 4.72751h2.36308v2.36308H2.36719zM2.36719 11.8179h2.36308V9.45486H2.36719z" />
+        <path d="M23.6346 4.72751h-2.3631v2.36308h2.3631zM23.6346 11.8179h-2.3631V9.45486h2.3631zM14.7716 6.50014h-3.5452V4.13705h3.5452zm0 0v3.54516h-3.5452v2.3631h3.5452v-2.3631h2.363V6.50014zm-3.5452 0v3.54516H8.86328V6.50014z" />
+      </g>
+    </svg>
+  )
+}

package/src/ui/components/icons/gear.tsx

@@ -0,0 +1,51 @@
+import {
+  isValidElement,
+  type PropsWithChildren,
+  type ReactNode,
+  type SVGProps
+} from 'react'
+
+const VIEWBOX = '0 0 34 38'
+
+const GEAR_PATH =
+  'M10.1249 3.37446h5.0624v3.37446h-5.0624zM23.6262 3.37446h-5.0625v3.37446h5.0625zM18.5637 0v3.37446h-3.3764L15.1877 0zM3.3762 6.74879l6.7487.00013.0003 3.37588h-6.749zM30.3748 6.74879l-6.7486.00013-.0003 3.37588h6.7489zM0 26.9988v-16.874h3.3762l-.00019 16.874zM33.7505 26.9988v-16.874h-3.3757l-.0003 16.874zM10.1248 30.3751H3.37586l.00015-3.3763 6.74879.0003zM23.6262 30.3751h6.749l-.0007-3.3763-6.7483.0003zM15.1873 33.7495h-5.0624l-.0001-3.3744 5.0625-.0001zM18.5637 33.7495h5.0625v-3.3744l-5.0625-.0001zM15.1874 37.1245l-.0001-3.375h3.3764l-.0003 3.375z'
+
+export function GearIcon({
+  children,
+  innerScale = 0.55,
+  ...props
+}: GearIconProps) {
+  const isSvg = isValidElement(children) && children.type === 'svg'
+
+  const viewBox = isSvg
+    ? ((children.props as { viewBox?: string }).viewBox ?? VIEWBOX)
+    : VIEWBOX
+
+  const inner = isSvg
+    ? (children.props as { children?: ReactNode }).children
+    : children
+
+  return (
+    <svg fill="none" viewBox={VIEWBOX} {...props}>
+      <g clipRule="evenodd" fill="currentColor" fillRule="evenodd">
+        <path d={GEAR_PATH} />
+      </g>
+
+      {children && (
+        <svg
+          height={26 * innerScale}
+          width={26 * innerScale}
+          x={17 - (26 * innerScale) / 2}
+          y={19 - (26 * innerScale) / 2}
+          {...{ viewBox }}
+        >
+          {inner}
+        </svg>
+      )}
+    </svg>
+  )
+}
+
+interface GearIconProps extends PropsWithChildren<SVGProps<SVGSVGElement>> {
+  innerScale?: number
+}

package/src/ui/components/icons/github.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from 'react'
+
+import { cn } from '../../../utils'
+
+export function GitHubIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      className={cn('size-4', className)}
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
+    </svg>
+  )
+}

package/src/ui/components/icons/hamburger.tsx

@@ -0,0 +1,52 @@
+import type { SVGProps } from 'react'
+
+import { cn } from '../../../utils'
+
+export function HamburgerIcon({
+  className,
+  open = false,
+  ...props
+}: HamburgerIconProps) {
+  return (
+    <svg
+      className={cn('size-5', className)}
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeWidth={1.5}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <line
+        className="origin-center transition-transform duration-200 ease-out"
+        style={{ transform: open ? 'rotate(45deg)' : 'translateY(-4px)' }}
+        x1={4}
+        x2={20}
+        y1={12}
+        y2={12}
+      />
+
+      <line
+        className="transition-opacity duration-200 ease-out"
+        style={{ opacity: open ? 0 : 1 }}
+        x1={4}
+        x2={20}
+        y1={12}
+        y2={12}
+      />
+
+      <line
+        className="origin-center transition-transform duration-200 ease-out"
+        style={{ transform: open ? 'rotate(-45deg)' : 'translateY(4px)' }}
+        x1={4}
+        x2={20}
+        y1={12}
+        y2={12}
+      />
+    </svg>
+  )
+}
+
+interface HamburgerIconProps extends SVGProps<SVGSVGElement> {
+  open?: boolean
+}

package/src/ui/components/icons/heart.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react'
+
+export function HeartIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" viewBox="0 0 14 12" {...props}>
+      <path
+        d="M13.2 0v5.65714h-1.8857v1.88572H9.42857v1.88571H7.54286v1.88573H5.65714V9.42857H3.77143V7.54286H1.88571V5.65714H0V0h5.65714v1.88571h1.88572V0z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/src/ui/components/icons/index.ts

@@ -0,0 +1,12 @@
+export * from './arrow'
+export * from './check'
+export * from './chevron'
+export * from './discord'
+export * from './eye'
+export * from './gear'
+export * from './github'
+export * from './hamburger'
+export * from './heart'
+export * from './link'
+export * from './minus'
+export * from './search'