@rdna/radiants 0.1.1 → 0.1.3

package/icons/DesktopIcons.tsx

@@ -0,0 +1,126 @@
+/**
+ * Radiants Desktop Icon Components (kept subset)
+ *
+ * Brand logos and special non-SVG icon components that can't be
+ * represented as static SVG files in assets/icons/.
+ */
+
+import type { IconProps } from './types';
+export { ICON_SIZE, type IconSize } from './types';
+
+// ============================================================================
+// Brand Icons
+// ============================================================================
+
+export function RadMarkIcon({ className = '', size = 65 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 65 65"
+      fill="none"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M29.6393 4.93988V0H34.5791V4.93988H39.519V9.87976H24.6994V4.93988H29.6393ZM59.2789 29.6392H64.2188V34.5791H59.2789V39.5189H54.339V24.6993H59.2789V29.6392ZM0 34.5797H4.93988V39.5196H9.87976V24.7H4.93988V29.6399H0V34.5797ZM14.8198 14.8189V19.7587H9.87988V9.87899H19.7596V14.8189H14.8198ZM44.4591 14.8189H49.399V19.7587H54.3389V9.87899H44.4591V14.8189ZM49.399 49.3981L49.399 44.4582H54.3389V54.338H44.4591V49.3981H49.399ZM19.7596 49.3981H14.8198V44.4582H9.87988V54.338H19.7596V49.3981ZM34.5797 59.279V64.2188H29.6398L29.6398 59.279H24.6999V54.3391H39.5195V59.279H34.5797ZM24.6991 14.8204H39.5187V19.7603H44.4586V24.7002H49.3985V39.5198H44.4586V44.4597H39.5187V49.3996H24.6991V44.4597H19.7592V39.5198H14.8193V24.7002H19.7592V19.7603H24.6991V14.8204Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+// ============================================================================
+// Special non-SVG icons
+// ============================================================================
+
+export function FontAaIcon({ className = '', size = 16 }: IconProps) {
+  const numSize = typeof size === 'string' ? parseFloat(size) || 16 : Number(size);
+  return (
+    <span
+      className={`font-mondwest font-bold ${className}`}
+      style={{ fontSize: numSize * 0.85, lineHeight: 1 }}
+    >
+      Aa
+    </span>
+  );
+}
+
+// ============================================================================
+// Wordmark Logos (require runtime color prop — can't be static SVGs)
+// ============================================================================
+
+type BrandLogoColor = 'cream' | 'black' | 'yellow' | 'currentColor';
+
+interface BrandLogoProps {
+  className?: string;
+  color?: BrandLogoColor;
+}
+
+const BRAND_LOGO_COLORS: Record<BrandLogoColor, string> = {
+  cream: '#FEF8E2',
+  black: '#0F0E0C',
+  yellow: '#FCE184',
+  currentColor: 'currentColor',
+};
+
+export function WordmarkLogo({
+  className = '',
+  color = 'currentColor',
+}: BrandLogoProps) {
+  const fill = BRAND_LOGO_COLORS[color];
+
+  return (
+    <svg viewBox="0 0 940 130" fill="none" className={className}>
+      <path d="M840 100V90H830V110H850V100H840Z" fill={fill} />
+      <path d="M850 30V20H830V40H840V30H850Z" fill={fill} />
+      <path d="M870 10H860V20H890V10H880V0H870V10Z" fill={fill} />
+      <path d="M890 110H860V120H870V130H880V120H890V110Z" fill={fill} />
+      <path d="M890 40V30H860V40H850V50H840V80H850V90H860V100H890V90H900V80H910V50H900V40H890Z" fill={fill} />
+      <path d="M900 100V110H920V90H910V100H900Z" fill={fill} />
+      <path d="M910 30V40H920V20H900V30H910Z" fill={fill} />
+      <path d="M920 80H930V70H940V60H930V50H920V80Z" fill={fill} />
+      <path d="M0 130H850V120H10V10C289.96 10 570.04 10 850 10V0C566.7 0 283.3 0 0 0V130Z" fill={fill} />
+      <path d="M70 80V90H80V110H110V90H100V70H110V30H100V20C73.72 20 46.28 20 20 20V110H40V80H70ZM50 60H40V40C56.03 40 73.97 40 90 40V60C77.47 60 62.53 60 50 60Z" fill={fill} />
+      <path d="M190 80V110H210V40H200V30H190V20H140V30H130V40H120V110H140V80H190ZM140 60V50H150V40H180V50H190V60H140Z" fill={fill} />
+      <path d="M300 110V100H310V30H300V20H220V110H300ZM290 40V90H240V40H290Z" fill={fill} />
+      <path d="M390 110V90H370V40H390V30H400V20H320V30H330V40H350V90H330V100H320V110H390Z" fill={fill} />
+      <path d="M470 80V110H490V40H480V30H470V20H420V30H410V40H400V110H420V80H470ZM420 60V50H430V40H460V50H470V60H420Z" fill={fill} />
+      <path d="M530 70H540V80H550V90H560V100H570V110H590V100H600V20H570V30H580V70H570V60H560V50H550V40H540V30H530V20H510V30H500V110H530V100H520V60H530V70Z" fill={fill} />
+      <path d="M670 110V40H700V30H710V20H610V40H640V110H670Z" fill={fill} />
+      <path d="M800 40V30H810V20H730V30H720V50H730V60H740V70H750V80H760V90H710V100H700V110H780V100H790V80H780V70H770V60H760V50H750V40H800Z" fill={fill} />
+      <path d="M830 50V80H820V70H810V60H820V50H830Z" fill={fill} />
+      <path d="M930 10V40H940V0H900V10H930Z" fill={fill} />
+      <path d="M930 120H900V130H940V90H930V120Z" fill={fill} />
+    </svg>
+  );
+}
+
+export function RadSunLogo({
+  className = '',
+  color = 'currentColor',
+}: BrandLogoProps) {
+  const fill = BRAND_LOGO_COLORS[color];
+
+  return (
+    <svg viewBox="0 0 450 130" fill="none" className={className}>
+      <path d="M339.35 50H329.35V60V70V80H339.35V50Z" fill={fill} />
+      <path d="M349.35 100V90H339.35V110H359.35V100H349.35Z" fill={fill} />
+      <path d="M359.35 30V20H339.35V40H349.35V30H359.35Z" fill={fill} />
+      <path d="M379.35 10H369.35V20H399.35V10H389.35V0H379.35V10Z" fill={fill} />
+      <path d="M399.35 110H369.35V120H379.35V130H389.35V120H399.35V110Z" fill={fill} />
+      <path d="M399.35 40V30H369.35V40H359.35V50H349.35V80H359.35V90H369.35V100H399.35V90H409.35V80H419.35V50H409.35V40H399.35Z" fill={fill} />
+      <path d="M409.35 100V110H429.35V90H419.35V100H409.35Z" fill={fill} />
+      <path d="M419.35 30V40H429.35V20H409.35V30H419.35Z" fill={fill} />
+      <path d="M429.35 80H439.35V70H449.35V60H439.35V50H429.35V80Z" fill={fill} />
+      <path d="M0 130H359.35V120H10V10H359.35V0H0V130Z" fill={fill} />
+      <path d="M70 80V90H80V110H110V90H100V70H110V30H100V20H20V110H40V80H70ZM40 60V40H90V60H40Z" fill={fill} />
+      <path d="M190 80V110H210V40H200V30H190V20H140V30H130V40H120V110H140V80H190ZM140 60V50H150V40H180V50H190V60H140Z" fill={fill} />
+      <path d="M300 110V100H310V30H300V20H220V110H300ZM290 40V90H240V40H290Z" fill={fill} />
+      <path d="M329.35 60H319.35V70H329.35V60Z" fill={fill} />
+      <path d="M439.35 10V40H449.35V0H409.35V10H439.35Z" fill={fill} />
+      <path d="M439.35 120H409.35V130H449.35V90H439.35V120Z" fill={fill} />
+    </svg>
+  );
+}

package/icons/Icon.tsx

@@ -0,0 +1,199 @@
+'use client';
+
+import { memo, useEffect, useState, type ComponentType } from 'react';
+
+import { getIconImporter, resolveIconRequest } from './resolve-icon';
+import type { IconProps as SvgIconProps, IconSet } from './types';
+
+interface IconProps {
+  /** Icon name (filename without .svg extension) */
+  name: string;
+  /** Render size in pixels (applies to both width and height) */
+  size?: number;
+  /**
+   * Which icon set to load from (16px pixel-art or 24px detailed).
+   * Defaults based on size: ≤20 → 16, >20 → 24.
+   * When switching sets, names are auto-translated through the size map.
+   * If no mapping exists, falls back to the 16px set.
+   */
+  iconSet?: IconSet;
+  /** Additional CSS classes for styling (use text-* for color) */
+  className?: string;
+  /** Accessible label for screen readers */
+  'aria-label'?: string;
+  /** Optional asset host/path override. Non-default values use fetched SVG compatibility loading. */
+  basePath?: string;
+}
+
+type LoadedIcon = ComponentType<SvgIconProps>;
+const DEFAULT_ICON_BASE_PATH = '/assets/icons';
+
+function normalizeBasePath(basePath: string): string {
+  return basePath.replace(/\/+$/, '') || DEFAULT_ICON_BASE_PATH;
+}
+
+function buildIconAssetUrl(basePath: string, name: string, iconSet: IconSet): string {
+  return `${normalizeBasePath(basePath)}/${iconSet}px/${name}.svg`;
+}
+
+function decorateFetchedSvg(svg: string, className: string): string {
+  if (typeof DOMParser === 'undefined' || typeof XMLSerializer === 'undefined') {
+    return svg;
+  }
+
+  const parsed = new DOMParser().parseFromString(svg, 'image/svg+xml');
+  const element = parsed.querySelector('svg');
+
+  if (!element) {
+    return svg;
+  }
+
+  element.setAttribute('width', '100%');
+  element.setAttribute('height', '100%');
+  element.setAttribute('focusable', 'false');
+  element.setAttribute('aria-hidden', 'true');
+
+  if (className) {
+    element.setAttribute('class', className);
+  } else {
+    element.removeAttribute('class');
+  }
+
+  return new XMLSerializer().serializeToString(element);
+}
+
+function renderPlaceholder(size: number, className: string, ariaLabel?: string) {
+  return (
+    <span
+      className={className}
+      aria-label={ariaLabel}
+      aria-hidden={!ariaLabel}
+      style={{
+        width: size,
+        height: size,
+        display: 'inline-block',
+      }}
+    />
+  );
+}
+
+/**
+ * Dynamic Icon component.
+ *
+ * The public API stays name-based. Default loading resolves through generated
+ * import maps, while non-default `basePath` values retain the fetched SVG
+ * compatibility path.
+ */
+function IconComponent({
+  name,
+  size = 16,
+  iconSet,
+  className = '',
+  'aria-label': ariaLabel,
+  basePath = DEFAULT_ICON_BASE_PATH,
+}: IconProps) {
+  const [LoadedIcon, setLoadedIcon] = useState<LoadedIcon | null>(null);
+  const [fetchedSvg, setFetchedSvg] = useState<string | null>(null);
+
+  const requestedSet: IconSet = iconSet ?? (size > 20 ? 24 : 16);
+  const { resolvedName, resolvedSet } = resolveIconRequest(name, requestedSet);
+  const normalizedBasePath = normalizeBasePath(basePath);
+  const shouldFetchFromBasePath = normalizedBasePath !== DEFAULT_ICON_BASE_PATH;
+
+  useEffect(() => {
+    let cancelled = false;
+
+    setLoadedIcon(null);
+    setFetchedSvg(null);
+
+    if (shouldFetchFromBasePath) {
+      fetch(buildIconAssetUrl(normalizedBasePath, resolvedName, resolvedSet))
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+          }
+          return response.text();
+        })
+        .then((svg) => {
+          if (cancelled) return;
+          setFetchedSvg(svg);
+        })
+        .catch((err) => {
+          if (cancelled) return;
+          console.error(
+            `Failed to fetch icon: ${name} (resolved: ${resolvedName}, set: ${resolvedSet}px, basePath: ${normalizedBasePath})`,
+            err,
+          );
+          setFetchedSvg(null);
+        });
+
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    const importer = getIconImporter(resolvedName, resolvedSet);
+
+    if (!importer) {
+      setLoadedIcon(null);
+      return;
+    }
+
+    importer()
+      .then((module) => {
+        if (cancelled) return;
+        if (typeof module.default !== 'function') {
+          throw new Error(`Icon module missing default export: ${resolvedName}`);
+        }
+        setLoadedIcon(() => module.default as LoadedIcon);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        console.error(
+          `Failed to load icon: ${name} (resolved: ${resolvedName}, set: ${resolvedSet}px)`,
+          err,
+        );
+        setLoadedIcon(null);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [name, normalizedBasePath, resolvedName, resolvedSet, shouldFetchFromBasePath]);
+
+  if (shouldFetchFromBasePath) {
+    if (!fetchedSvg) {
+      return renderPlaceholder(size, className, ariaLabel);
+    }
+
+    return (
+      <span
+        aria-label={ariaLabel}
+        aria-hidden={!ariaLabel}
+        style={{
+          width: size,
+          height: size,
+          display: 'inline-block',
+          lineHeight: 0,
+        }}
+        dangerouslySetInnerHTML={{ __html: decorateFetchedSvg(fetchedSvg, className) }}
+      />
+    );
+  }
+
+  if (!LoadedIcon) {
+    return renderPlaceholder(size, className, ariaLabel);
+  }
+
+  return (
+    <LoadedIcon
+      size={size}
+      className={className}
+      aria-label={ariaLabel}
+      aria-hidden={!ariaLabel}
+      focusable={ariaLabel ? undefined : false}
+    />
+  );
+}
+
+export const Icon = memo(IconComponent);

package/icons/generated/16/USDC.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const USDC = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M1 6H2V4H3V3H4V2H6V1H10V2H12V3H13V4H14V6H15V10H14V12H13V13H12V14H10V15H6V14H4V13H3V12H2V10H1V6ZM3 6V10H4V6H3ZM4 5V6H5V5H4ZM4 10V11H5V10H4ZM5 4V5H6V4H5ZM5 11V12H6V11H5ZM6 3V4H7V3H6ZM6 6V8H8V7H7V6H6ZM6 9V10H7V9H6ZM6 12V13H8V12H6ZM7 4V6H9V5H8V4H7ZM7 10V11H8V12H9V10H7ZM8 3V4H10V3H8ZM8 8V9H9V10H10V8H8ZM9 6V7H10V6H9ZM9 12V13H10V12H9ZM10 4V5H11V4H10ZM10 11V12H11V11H10ZM11 5V6H12V5H11ZM11 10V11H12V10H11ZM12 6V10H13V6H12Z" /></svg>;
+USDC.displayName = 'USDC';
+
+export default USDC;

package/icons/generated/16/broadcast-dish.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const BroadcastDish = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2 13H3V12H4V13H5V14H2V13ZM3 6H4V5H5V7H6V8H7V9H8V10H9V11H11V12H10V13H5V12H4V11H3V6ZM8 2H12V3H8V2ZM8 7H9V8H8V7ZM9 4H11V5H9V4ZM9 6H10V7H9V6ZM11 5H12V7H11V5ZM12 3H13V4H12V3ZM13 4H14V8H13V4Z" /></svg>;
+BroadcastDish.displayName = 'BroadcastDish';
+
+export default BroadcastDish;

package/icons/generated/16/broken-battery.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const BrokenBattery = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M5 4H6V6H5V4ZM5 9H6V13H5V9ZM6 3H7V2H9V3H10V4H6V3ZM6 6H7V5H10V6H9V7H8V8H10V9H9V10H8V9H6V6ZM6 13H10V14H6V13ZM7 10H8V11H7V10ZM10 4H11V5H10V4ZM10 6H11V8H10V6ZM10 9H11V13H10V9Z" /></svg>;
+BrokenBattery.displayName = 'BrokenBattery';
+
+export default BrokenBattery;

package/icons/generated/16/calendar.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Calendar = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2 2H14V14H2V2ZM3 3V4H13V3H3ZM3 5V7H6V5H3ZM3 8V10H6V8H3ZM3 11V13H6V11H3ZM7 5V7H9V5H7ZM7 8V10H9V8H7ZM7 11V13H9V11H7ZM10 5V7H13V5H10ZM10 8V10H13V8H10ZM10 11V13H13V11H10Z" /></svg>;
+Calendar.displayName = 'Calendar';
+
+export default Calendar;

package/icons/generated/16/calendar2.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Calendar2 = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2 2H14V14H2V2ZM3 3V5H13V3H3ZM3 6V7H4V6H3ZM3 8V9H4V8H3ZM3 10V11H4V10H3ZM3 12V13H4V12H3ZM5 6V7H6V6H5ZM5 8V9H6V8H5ZM5 10V11H6V10H5ZM5 12V13H6V12H5ZM7 6V7H8V6H7ZM7 8V9H8V8H7ZM7 10V11H8V10H7ZM7 12V13H8V12H7ZM9 6V7H10V6H9ZM9 8V9H10V8H9ZM9 10V11H10V10H9ZM9 12V13H10V12H9ZM11 6V7H12V6H11ZM11 8V9H12V8H11ZM11 10V11H12V10H11ZM11 12V13H12V12H11Z" /></svg>;
+Calendar2.displayName = 'Calendar2';
+
+export default Calendar2;

package/icons/generated/16/camera.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Camera = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M1 6H2V5H3V4H5V5H6V6H5V7H1V6ZM3 5V6H4V5H3ZM1 8H4V10H5V11H6V12H2V11H1V8ZM5 7H6V10H5V7ZM6 6H7V7H6V6ZM6 10H7V11H6V10ZM7 5H10V6H7V5ZM7 11H10V12H7V11ZM8 8H9V9H8V8ZM10 6H11V7H10V6ZM10 10H11V11H10V10ZM11 5H14V6H15V7H12V6H11V5ZM11 7H12V10H11V7ZM11 11H12V10H14V8H15V11H14V12H11V11Z" /></svg>;
+Camera.displayName = 'Camera';
+
+export default Camera;

package/icons/generated/16/cd-horizontal.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const CdHorizontal = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2 7H3V9H2V7ZM3 6H5V5H11V6H13V7H12V8H11V9H9V10H11V11H5V10H3V9H4V7H3V6ZM5 6V7H6V6H5ZM7 7V8H9V7H7ZM7 9V10H8V9H7ZM11 9H13V10H11V9ZM13 7H14V9H13V7Z" /></svg>;
+CdHorizontal.displayName = 'CdHorizontal';
+
+export default CdHorizontal;

package/icons/generated/16/cd.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Cd = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2 6H3V10H2V6ZM3 4H4V3H6V2H10V3H12V4H13V6H12V10H13V12H12V13H10V14H6V13H4V12H3V10H4V6H3V4ZM11 5V4H10V5H11ZM12 6V5H11V6H12ZM12 10H11V11H12V10ZM5 11V12H6V11H5ZM4 10V11H5V10H4ZM4 6H5V5H4V6ZM5 7V9H6V7H5ZM6 6V7H7V6H6ZM6 9V10H7V9H6ZM7 5V6H9V5H7ZM7 7V9H9V7H7ZM7 10V11H9V10H7ZM9 6V7H10V6H9ZM9 9V10H10V9H9ZM10 7V9H11V7H10ZM13 6H14V10H13V6Z" /></svg>;
+Cd.displayName = 'Cd';
+
+export default Cd;

package/icons/generated/16/cell-bars.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const CellBars = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2.5 9H4.5V13H2.5V9ZM5.5 7H7.5V13H5.5V7ZM8.5 5H10.5V13H8.5V5ZM11.5 3H13.5V13H11.5V3Z" /></svg>;
+CellBars.displayName = 'CellBars';
+
+export default CellBars;

package/icons/generated/16/checkmark.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Checkmark = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2 7.5H4V8.5H5V9.5H7V8.5H8V7.5H9V6.5H10V5.5H11V4.5H12V3.5H14V5.5H13V6.5H12V7.5H11V8.5H10V9.5H9V10.5H8V11.5H7V12.5H5V11.5H4V10.5H3V9.5H2V7.5Z" /></svg>;
+Checkmark.displayName = 'Checkmark';
+
+export default Checkmark;

package/icons/generated/16/chevron-down.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const ChevronDown = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M1 4H3V5H4V6H5V7H6V8H7V9H9V8H10V7H11V6H12V5H13V4H15V6H14V7H13V8H12V9H11V10H10V11H9V12H7V11H6V10H5V9H4V8H3V7H2V6H1V4Z" /></svg>;
+ChevronDown.displayName = 'ChevronDown';
+
+export default ChevronDown;

package/icons/generated/16/chevron-left.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const ChevronLeft = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M12 1H10V2H9V3H8V4H7V5H6V6H5V7H4V9H5V10H6V11H7V12H8V13H9V14H10V15H12V13H11V12H10V11H9V10H8V9H7V7H8V6H9V5H10V4H11V3H12V1Z" /></svg>;
+ChevronLeft.displayName = 'ChevronLeft';
+
+export default ChevronLeft;

package/icons/generated/16/chevron-right.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const ChevronRight = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M4 1H6V2H7V3H8V4H9V5H10V6H11V7H12V9H11V10H10V11H9V12H8V13H7V14H6V15H4V13H5V12H6V11H7V10H8V9H9V7H8V6H7V5H6V4H5V3H4V1Z" /></svg>;
+ChevronRight.displayName = 'ChevronRight';
+
+export default ChevronRight;

package/icons/generated/16/clock.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Clock = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M1.5 6.5H2.5V4.5H3.5V3.5H4.5V2.5H6.5V1.5H9.5V2.5H11.5V3.5H12.5V4.5H13.5V6.5H14.5V9.5H13.5V11.5H12.5V12.5H11.5V13.5H9.5V14.5H6.5V13.5H4.5V12.5H3.5V11.5H2.5V9.5H1.5V6.5ZM3.5 5.5V10.5H4.5V11.5H5.5V12.5H10.5V11.5H11.5V10.5H12.5V5.5H11.5V4.5H10.5V3.5H5.5V4.5H4.5V5.5H3.5ZM7.5 4.5H8.5V7.5H10.5V8.5H7.5V4.5Z" /></svg>;
+Clock.displayName = 'Clock';
+
+export default Clock;

package/icons/generated/16/close-filled.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const CloseFilled = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M1 6H2V4H3V3H4V2H6V1H10V2H12V3H13V4H14V6H15V10H14V12H13V13H12V14H10V15H6V14H4V13H3V12H2V10H1V6ZM4 4V6H5V7H6V9H5V10H4V12H6V11H7V10H9V11H10V12H12V10H11V9H10V7H11V6H12V4H10V5H9V6H7V5H6V4H4Z" /></svg>;
+CloseFilled.displayName = 'CloseFilled';
+
+export default CloseFilled;

package/icons/generated/16/close.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Close = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2.5 2.5H4.5V3.5H5.5V4.5H6.5V5.5H9.5V4.5H10.5V3.5H11.5V2.5H13.5V4.5H12.5V5.5H11.5V6.5H10.5V9.5H11.5V10.5H12.5V11.5H13.5V13.5H11.5V12.5H10.5V11.5H9.5V10.5H6.5V11.5H5.5V12.5H4.5V13.5H2.5V11.5H3.5V10.5H4.5V9.5H5.5V6.5H4.5V5.5H3.5V4.5H2.5V2.5Z" /></svg>;
+Close.displayName = 'Close';
+
+export default Close;

package/icons/generated/16/code-file.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const CodeFile = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2 0.75L10 0.75V1.75H9V4.75H12V3.75H13V5.75H8V1.75H3V14.25H12V10.75H13V15.25H2V0.75ZM5 7.75H6V8.75H5V7.75ZM6 6.75H7V7.75H6V6.75ZM6 8.75H7V9.75H6V8.75ZM8 8.75H9V9.75H8V8.75ZM9 7.75H10V8.75H9V7.75ZM10 1.75H11V2.75H10V1.75ZM10 6.75H11V7.75H10V6.75ZM11 2.75H12V3.75H11V2.75ZM12 6.75H13V7.75H12V6.75ZM12 8.75H13V9.75H12V8.75ZM13 7.75H14V8.75H13V7.75Z" /></svg>;
+CodeFile.displayName = 'CodeFile';
+
+export default CodeFile;

package/icons/generated/16/code-folder.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const CodeFolder = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M1 4H2V12H1V4ZM2 3H5V4H2V3ZM2 12H14V13H2V12ZM4 9H5V10H4V9ZM5 4H14V5H5V4ZM5 8H6V9H5V8ZM5 10H6V11H5V10ZM7 10H8V11H7V10ZM8 9H9V10H8V9ZM9 8H10V9H9V8ZM11 8H12V9H11V8ZM11 10H12V11H11V10ZM12 9H13V10H12V9ZM14 5H15V12H14V5Z" /></svg>;
+CodeFolder.displayName = 'CodeFolder';
+
+export default CodeFolder;

package/icons/generated/16/code-window-filled.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const CodeWindowFilled = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M1 4H2V3H14V4H15V12H14V13H2V12H1V4ZM4 6V7H5V6H4ZM4 10V11H5V10H4ZM5 7V8H6V7H5ZM5 9V10H6V9H5ZM6 8V9H7V8H6ZM8 4V5H9V4H8ZM8 10V11H12V10H8ZM10 4V5H11V4H10ZM12 4V5H13V4H12Z" /></svg>;
+CodeWindowFilled.displayName = 'CodeWindowFilled';
+
+export default CodeWindowFilled;

package/icons/generated/16/code-window.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const CodeWindow = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M1 3H15V13H1V3ZM2 5V12H14V5H2ZM4 6H5V7H4V6ZM4 10H5V11H4V10ZM5 7H6V8H5V7ZM5 9H6V10H5V9ZM6 8H7V9H6V8ZM8 10H12V11H8V10Z" /></svg>;
+CodeWindow.displayName = 'CodeWindow';
+
+export default CodeWindow;

package/icons/generated/16/coins.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Coins = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M3 4H4V5H6V6H10V5H11V6H12V7H10V8H6V7H4V6H3V4ZM3 7H4V8H6V9H10V8H11V9H12V10H10V11H6V10H4V9H3V7ZM3 10H4V11H6V12H10V11H11V12H12V13H10V14H6V13H4V12H3V10ZM4 3H6V4H4V3ZM6 2L10 2V3H6V2ZM10 3H12V4H10V3ZM12 4H13V6H12V4ZM12 7H13V9H12V7ZM12 10H13V12H12V10Z" /></svg>;
+Coins.displayName = 'Coins';
+
+export default Coins;

package/icons/generated/16/comments-blank.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const CommentsBlank = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2 12H3V13H2V12ZM3 10H4V4H5V3H13V4H14V10H13V11H5V12H3V10Z" /></svg>;
+CommentsBlank.displayName = 'CommentsBlank';
+
+export default CommentsBlank;

package/icons/generated/16/comments-typing.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const CommentsTyping = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2 12.5H3V13.5H2V12.5ZM3 10.5H4V3.5H5V2.5H13V3.5H14V10.5H13V11.5H5V12.5H3V10.5ZM5 6.5V7.5H6V6.5H5ZM7 6.5V7.5H8V6.5H7ZM9 6.5V7.5H10V6.5H9ZM11 6.5V7.5H12V6.5H11Z" /></svg>;
+CommentsTyping.displayName = 'CommentsTyping';
+
+export default CommentsTyping;

package/icons/generated/16/computer.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Computer = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M1 2H2V1H13V2H10V3H9V2H3V3H2V9H3V10H9V9H10V11H9V12H8V11H7V12H6V11H5V12H4V11H3V12H2V11H1V2ZM1 13H10V15H9V14H8V15H1V13ZM3 3H7V4H6V5H5V6H4V7H3V3ZM3 8H4V7H5V6H6V5H7V4H8V3H9V5H8V6H7V7H6V8H5V9H3V8ZM7 8H8V7H9V9H7V8ZM10 3H11V9H10V3ZM10 11H12V12H10V11ZM11 13H15V15H11V13ZM12 10H14V11H12V10ZM13 2H14V3H13V2ZM14 3H15V10H14V3Z" /></svg>;
+Computer.displayName = 'Computer';
+
+export default Computer;

package/icons/generated/16/copied-to-clipboard.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const CopiedToClipboard = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2 3.5H3V13.5H2V3.5ZM3 2.5H5V3.5H3V2.5ZM3 13.5H12V14.5H3V13.5ZM4 5.5H11V6.5H5V11.5H7V12.5H4V5.5ZM5 1.5H10V2.5H9V3.5H10V4.5H5V3.5H6V2.5H5V1.5ZM6 8.5H7V9.5H6V8.5ZM7 9.5H8V10.5H7V9.5ZM8 10.5H9V11.5H8V10.5ZM9 9.5H10V10.5H9V9.5ZM10 2.5H12V3.5H10V2.5ZM10 8.5H11V9.5H10V8.5ZM10 11.5H11V12.5H10V11.5ZM11 7.5H12V8.5H11V7.5ZM12 3.5H13V5.5H12V3.5ZM12 6.5H13V7.5H12V6.5ZM12 8.5H13V13.5H12V8.5ZM13 5.5H14V6.5H13V5.5Z" /></svg>;
+CopiedToClipboard.displayName = 'CopiedToClipboard';
+
+export default CopiedToClipboard;

package/icons/generated/16/copy-to-clipboard.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const CopyToClipboard = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M3 4H4V13H12V4H13V14H3V4ZM4 3H5V4H4V3ZM5 5H6V6H10V5H11V12H5V5ZM6 7V8H10V7H6ZM6 9V10H10V9H6ZM6 3H7V4H9V3H10V5H6V3ZM7 2H9V3H7V2ZM11 3H12V4H11V3Z" /></svg>;
+CopyToClipboard.displayName = 'CopyToClipboard';
+
+export default CopyToClipboard;

package/icons/generated/16/copy.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Copy = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2.5 3H3.5V13H12.5V14H2.5V3ZM4.5 2H9.5V6H13.5V12H4.5V2ZM10.5 2H11.5V3H12.5V4H13.5V5H10.5V2Z" /></svg>;
+Copy.displayName = 'Copy';
+
+export default Copy;

package/icons/generated/16/crosshair-3.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Crosshair3 = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2.5 7.5H5.5V8.5H2.5V7.5ZM4.5 4.5H5.5V5.5H4.5V4.5ZM4.5 10.5H5.5V11.5H4.5V10.5ZM7.5 2.5H8.5V5.5H7.5V2.5ZM7.5 7.5H8.5V8.5H7.5V7.5ZM7.5 10.5H8.5V13.5H7.5V10.5ZM10.5 4.5H11.5V5.5H10.5V4.5ZM10.5 7.5H13.5V8.5H10.5V7.5ZM10.5 10.5H11.5V11.5H10.5V10.5Z" /></svg>;
+Crosshair3.displayName = 'Crosshair3';
+
+export default Crosshair3;

package/icons/generated/16/crosshair1.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Crosshair1 = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M1 7H4V9H1V7ZM2 4H3V6H2V4ZM2 10H3V12H2V10ZM3 3H4V4H3V3ZM3 12H4V13H3V12ZM4 2H6V3H4V2ZM4 13H6V14H4V13ZM7 1H9V4H7V1ZM7 7H9V9H7V7ZM7 12H9V15H7V12ZM10 2H12V3H10V2ZM10 13H12V14H10V13ZM12 3H13V4H12V3ZM12 7H15V9H12V7ZM12 12H13V13H12V12ZM13 4H14V6H13V4ZM13 10H14V12H13V10Z" /></svg>;
+Crosshair1.displayName = 'Crosshair1';
+
+export default Crosshair1;

package/icons/generated/16/crosshair2-retro.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Crosshair2Retro = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M3 6H6V3H7V7H3V6ZM3 9H7V13H6V10H3V9ZM9 3H10V6H13V7H9V3ZM9 9H13V10H10V13H9V9Z" /></svg>;
+Crosshair2Retro.displayName = 'Crosshair2Retro';
+
+export default Crosshair2Retro;

package/icons/generated/16/crosshair2.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Crosshair2 = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2 7H5V9H2V7ZM7 2H9V5H7V2ZM7 7H9V9H7V7ZM7 11H9V14H7V11ZM11 7H14V9H11V7Z" /></svg>;
+Crosshair2.displayName = 'Crosshair2';
+
+export default Crosshair2;

package/icons/generated/16/crosshair4.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Crosshair4 = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2.5 7.5H3.5V8.5H2.5V7.5ZM4.5 7.5H6.5V6.5H7.5V3.5H8.5V6.5H9.5V7.5H11.5V8.5H9.5V9.5H8.5V12.5H7.5V9.5H6.5V8.5H4.5V7.5ZM7.5 7.5V8.5H8.5V7.5H7.5ZM7.5 1.5H8.5V2.5H7.5V1.5ZM7.5 13.5H8.5V14.5H7.5V13.5ZM12.5 7.5H13.5V8.5H12.5V7.5Z" /></svg>;
+Crosshair4.displayName = 'Crosshair4';
+
+export default Crosshair4;

package/icons/generated/16/cursor-text.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const CursorText = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M3.5 2H6.5V3H3.5V2ZM3.5 13H6.5V14H3.5V13ZM6.5 3H9.5V4H8.5V12H9.5V13H6.5V12H7.5V4H6.5V3ZM9.5 2H12.5V3H9.5V2ZM9.5 13H12.5V14H9.5V13Z" /></svg>;
+CursorText.displayName = 'CursorText';
+
+export default CursorText;

package/icons/generated/16/cursor2.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Cursor2 = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M4 1H5V2H6V3H7V4H8V5H9V6H10V7H11V8H12V9H9V11H10V13H11V15H9V14H8V12H7V10H6V11H5V12H4V1Z" /></svg>;
+Cursor2.displayName = 'Cursor2';
+
+export default Cursor2;

package/icons/generated/16/cut.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Cut = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2 7H3V9H2V7ZM3 6H5V7H3V6ZM3 9H5V10H3V9ZM5 7H8V8H9V11H7V10H8V9H7V8H6V9H5V7ZM6 11H7V13H6V11ZM7 13H9V14H7V13ZM8 3H9V2H10V5H9V6H8V3ZM9 6H14V7H13V8H9V6ZM9 11H10V13H9V11Z" /></svg>;
+Cut.displayName = 'Cut';
+
+export default Cut;

package/icons/generated/16/discord.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Discord = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M13.333 6V3.33333H11.9997V2H9.33301V3.33333H10.6663V4.66667H5.33301V3.33333H6.66634V2H3.99967V3.33333H2.66634V6H1.33301V12.6667H2.66634V14H6.66634V12.6667H9.33301V14H13.333V12.6667H14.6663V6H13.333ZM5.33301 10V7.33333H6.66634V10H5.33301ZM10.6663 10H9.33301V7.33333H10.6663V10Z" /></svg>;
+Discord.displayName = 'Discord';
+
+export default Discord;

package/icons/generated/16/document-image.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const DocumentImage = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M3 2H9V6H13V14H3V2ZM4 9V12H12V10H11V9H10V8H9V9H8V8H7V7H6V8H5V9H4ZM5 4V6H7V4H5ZM7 10V11H6V10H7ZM8 9V10H7V9H8ZM10 2H11V3H12V4H13V5H10V2Z" /></svg>;
+DocumentImage.displayName = 'DocumentImage';
+
+export default DocumentImage;

package/icons/generated/16/document.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Document = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M3 2H9V6H13V14H3V2ZM5 5V6H8V5H5ZM5 7V8H11V7H5ZM5 9V10H11V9H5ZM5 11V12H11V11H5ZM10 2H11V3H12V4H13V5H10V2Z" /></svg>;
+Document.displayName = 'Document';
+
+export default Document;

package/icons/generated/16/document2.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Document2 = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M3 2H11V3H10V5H12V4H13V14H3V2ZM4 3V13H12V6H9V3H4ZM11 3H12V4H11V3Z" /></svg>;
+Document2.displayName = 'Document2';
+
+export default Document2;

package/icons/generated/16/download.tsx

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types';
+export const Download = ({ size = 16, className = '', ...props }: IconProps) => <svg width={size} height={size} className={className} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...props}><path fill="currentColor" d="M2 9H3V12H4V13H12V12H13V9H14V13H13V14H3V13H2V9ZM5 8H7V2H9V8H11V9H10V10H9V11H7V10H6V9H5V8Z" /></svg>;
+Download.displayName = 'Download';
+
+export default Download;