auramaxx 0.0.1

package/src/components/design-system/Modal.tsx

@@ -0,0 +1,296 @@
+'use client';
+
+import React, { useEffect, useState, useCallback, useId, useRef } from 'react';
+import { X } from 'lucide-react';
+import { createPortal } from 'react-dom';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg';
+  hideHeader?: boolean;
+  hideTitle?: boolean;
+  contentClassName?: string;
+  headerAction?: React.ReactNode;
+  headerActionPosition?: 'left' | 'right';
+  footer?: React.ReactNode;
+  footerClassName?: string;
+  showBottomStripe?: boolean;
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  subtitle,
+  children,
+  icon,
+  size = 'sm',
+  hideHeader = false,
+  hideTitle: _hideTitle = false,
+  contentClassName,
+  headerAction,
+  headerActionPosition = 'right',
+  footer,
+  footerClassName,
+  showBottomStripe = true,
+}) => {
+  const [visible, setVisible] = useState(false);
+  const [closing, setClosing] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const dialogRef = useRef<HTMLDivElement | null>(null);
+  const titleId = useId();
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      setVisible(true);
+      setClosing(false);
+    } else if (visible) {
+      setClosing(true);
+    }
+  }, [isOpen, visible]);
+
+  const handleAnimationEnd = useCallback(() => {
+    if (closing) {
+      setVisible(false);
+      setClosing(false);
+    }
+  }, [closing]);
+
+  // Lock body scroll when open
+  useEffect(() => {
+    if (visible && !closing) {
+      document.body.style.overflow = 'hidden';
+    } else if (!visible) {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [visible, closing]);
+
+  // Close on escape
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    if (visible && !closing) {
+      window.addEventListener('keydown', handleEscape);
+    }
+    return () => window.removeEventListener('keydown', handleEscape);
+  }, [visible, closing, onClose]);
+
+  // Focus management + keyboard trap
+  useEffect(() => {
+    if (!visible || closing) return;
+
+    const dialogEl = dialogRef.current;
+    if (!dialogEl) return;
+
+    const previousActive = document.activeElement as HTMLElement | null;
+    const focusableSelector = [
+      'a[href]',
+      'button:not([disabled])',
+      'textarea:not([disabled])',
+      'input:not([disabled])',
+      'select:not([disabled])',
+      '[tabindex]:not([tabindex="-1"])',
+    ].join(',');
+
+    const getFocusable = () => Array.from(dialogEl.querySelectorAll<HTMLElement>(focusableSelector))
+      .filter((el) => !el.hasAttribute('disabled') && el.tabIndex !== -1);
+
+    const initialFocusable = getFocusable();
+    const priorityFocus = initialFocusable.find((el) => {
+      // 1. Check for explicit autoFocus first (highest priority)
+      if (el.hasAttribute('autofocus')) return true;
+      // 2. Check for form inputs if no autoFocus found
+      return ['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName);
+    });
+    (priorityFocus ?? initialFocusable[0] ?? dialogEl).focus();
+
+    const handleTabTrap = (event: KeyboardEvent) => {
+      if (event.key !== 'Tab') return;
+      const focusable = getFocusable();
+      if (focusable.length === 0) {
+        event.preventDefault();
+        dialogEl.focus();
+        return;
+      }
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement as HTMLElement | null;
+
+      if (event.shiftKey) {
+        if (!active || active === first || !dialogEl.contains(active)) {
+          event.preventDefault();
+          last.focus();
+        }
+      } else if (!active || active === last || !dialogEl.contains(active)) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    dialogEl.addEventListener('keydown', handleTabTrap);
+
+    return () => {
+      dialogEl.removeEventListener('keydown', handleTabTrap);
+      previousActive?.focus();
+    };
+  }, [visible, closing]);
+
+  const sizeStyles = {
+    sm: 'min(100%, calc(24rem * var(--ui-scale-factor, 1)))',
+    md: 'min(100%, calc(28rem * var(--ui-scale-factor, 1)))',
+    lg: 'min(100%, calc(32rem * var(--ui-scale-factor, 1)))',
+  };
+  const headerTitle = title || subtitle || 'System_Message';
+
+  if (!visible || !mounted) return null;
+
+  return createPortal(
+    <>
+      {/* Backdrop */}
+      <div className="fixed inset-0 z-[120] overflow-y-auto overflow-x-hidden">
+        <div
+          className={`absolute inset-0 bg-[var(--color-background-alt,#f4f4f5)]/95 ${closing ? 'animate-fade-out' : 'animate-fade-in'}`}
+          onClick={onClose}
+          onAnimationEnd={handleAnimationEnd}
+        >
+          <div className="absolute inset-0 opacity-[0.1] bg-[radial-gradient(var(--color-text,#000)_1px,transparent_1px)] bg-[size:3px_3px]" />
+        </div>
+
+        <div
+          data-testid="modal-dismiss-layer"
+          className="relative z-10 min-h-full flex items-start sm:items-center justify-center p-[var(--space-3)] sm:p-[var(--space-4)]"
+          onClick={onClose}
+        >
+          {/* Modal */}
+          <div
+            ref={dialogRef}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={!hideHeader && headerTitle ? titleId : undefined}
+            tabIndex={-1}
+            className={`w-full max-h-[calc(100vh-2rem)] max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100vh-4rem)] sm:max-h-[calc(100dvh-4rem)] flex flex-col overflow-hidden clip-specimen border-mech bg-[var(--color-surface,#ffffff)] shadow-mech font-mono text-[var(--color-text,#0a0a0a)] corner-marks ${closing ? 'animate-terminal-close' : 'animate-terminal'}`}
+            style={{ maxWidth: sizeStyles[size] }}
+            onClick={(event) => event.stopPropagation()}
+          >
+            {/* Extra corner marks: top-right + bottom-left */}
+            <div className="absolute top-[-1px] right-[-1px] w-2 h-2 border-t-2 border-r-2 border-[var(--color-border-focus,#0a0a0a)] pointer-events-none z-20" />
+            <div className="absolute bottom-[-1px] left-[-1px] w-2 h-2 border-b-2 border-l-2 border-[var(--color-border-focus,#0a0a0a)] pointer-events-none z-20" />
+
+            {!hideHeader && (
+              <div className="shrink-0 border-b border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface-alt,#fafafa)] px-[var(--space-4)] py-[var(--space-3)] flex items-center justify-between gap-[var(--space-3)]">
+                <div className="flex items-center gap-[var(--space-2)]">
+                  {headerActionPosition === 'left' ? headerAction : null}
+                  {icon && (
+                    <div className="w-6 h-6 border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#ffffff)] flex items-center justify-center shrink-0">
+                      {icon}
+                    </div>
+                  )}
+                  <h3
+                    id={titleId}
+                    className="font-mono text-[length:var(--font-size-xs)] font-bold text-[var(--color-text-muted,#6b7280)] uppercase tracking-[0.25em]"
+                  >
+                    {headerTitle}
+                  </h3>
+                </div>
+                <div className="flex items-center gap-2">
+                  {headerActionPosition !== 'left' ? headerAction : null}
+                  <button
+                    onClick={onClose}
+                    className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors"
+                  >
+                    <X style={{ width: 'var(--font-size-md)', height: 'var(--font-size-md)' }} />
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* Content */}
+            <div className={`p-[var(--space-6)] flex-1 relative overflow-y-auto overflow-x-hidden min-h-0 ${contentClassName ?? ''}`}>
+              {/* Children */}
+              <div className="relative z-10 font-mono text-sm tracking-[0.05em] text-[var(--color-text,#0a0a0a)]">
+                {children}
+              </div>
+            </div>
+
+            {footer && (
+              <div className={`shrink-0 border-t border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface-alt,#fafafa)] px-[var(--space-4)] py-2 flex items-center gap-3 ${footerClassName ?? ''}`}>
+                {showBottomStripe && (
+                  <div className="h-4 flex-1 bg-[repeating-linear-gradient(90deg,var(--color-text,#000),var(--color-text,#000)_1px,transparent_1px,transparent_3px)] opacity-30" />
+                )}
+                <div className="shrink-0">
+                  {footer}
+                </div>
+              </div>
+            )}
+
+          </div>
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes terminal-open {
+          0% {
+            opacity: 0;
+            transform: scaleY(0) scaleX(0.95);
+            filter: blur(4px);
+          }
+          100% {
+            opacity: 1;
+            transform: scaleY(1) scaleX(1);
+            filter: blur(0);
+          }
+        }
+        @keyframes terminal-close {
+          0% {
+            opacity: 1;
+            transform: scaleY(1) scaleX(1);
+            filter: blur(0);
+          }
+          100% {
+            opacity: 0;
+            transform: scaleY(0) scaleX(0.95);
+            filter: blur(4px);
+          }
+        }
+        @keyframes fade-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes fade-out {
+          from { opacity: 1; }
+          to { opacity: 0; }
+        }
+        .animate-terminal {
+          animation: terminal-open 0.15s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+          transform-origin: center;
+        }
+        .animate-terminal-close {
+          animation: terminal-close 0.12s cubic-bezier(0.55, 0, 1, 0.45) forwards;
+          transform-origin: center;
+        }
+        .animate-fade-in {
+          animation: fade-in 0.2s ease-out forwards;
+        }
+        .animate-fade-out {
+          animation: fade-out 0.15s ease-in forwards;
+        }
+      `}</style>
+    </>,
+    document.body,
+  );
+};

package/src/components/design-system/Popover.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+interface PopoverProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
+  anchor?: 'left' | 'right';
+  /** Element to position the popover relative to (enables portal mode) */
+  anchorEl?: HTMLElement | null;
+}
+
+export const Popover: React.FC<PopoverProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  className = '',
+  anchor = 'right',
+  anchorEl,
+}) => {
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState<{ top?: number; bottom?: number; left: number } | null>(null);
+  const [mounted, setMounted] = useState(false);
+
+  // Ensure we're on the client
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Calculate position based on anchor element (auto-flips above if not enough space below)
+  useEffect(() => {
+    if (isOpen && anchorEl) {
+      const rect = anchorEl.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const flipUp = spaceBelow < 250;
+      const left = anchor === 'left' ? rect.left : rect.right;
+
+      if (flipUp) {
+        setPosition({ bottom: window.innerHeight - rect.top + 4, left });
+      } else {
+        setPosition({ top: rect.bottom + 4, left });
+      }
+    }
+  }, [isOpen, anchorEl, anchor]);
+
+  // Close on click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      // Delay to prevent immediate close
+      setTimeout(() => {
+        document.addEventListener('mousedown', handleClickOutside);
+      }, 0);
+    }
+
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen, onClose]);
+
+  // Close on escape
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    if (isOpen) {
+      window.addEventListener('keydown', handleEscape);
+    }
+    return () => window.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  // Use portal when anchorEl is provided (for proper z-index stacking)
+  const usePortal = !!anchorEl && mounted;
+
+  const popoverContent = (
+    <div
+      ref={popoverRef}
+      className={`
+        bg-[var(--color-surface)] border border-[var(--color-border-focus,#0a0a0a)] shadow-mech
+        min-w-[200px] animate-popover
+        ${usePortal ? 'fixed z-[9999]' : `absolute z-50 ${anchor === 'right' ? 'right-0' : 'left-0'}`}
+        ${className}
+      `}
+      style={usePortal && position ? {
+        ...(position.top !== undefined ? { top: position.top } : {}),
+        ...(position.bottom !== undefined ? { bottom: position.bottom } : {}),
+        left: anchor === 'left' ? position.left : undefined,
+        right: anchor === 'right' ? window.innerWidth - position.left : undefined,
+      } : undefined}
+    >
+      {title && (
+        <div className="flex items-center justify-between px-[var(--space-3)] py-[var(--space-2)] border-b border-[var(--color-border)]">
+          <span className="text-[length:var(--font-size-xs)] font-mono text-[var(--color-text-muted)] uppercase tracking-widest">{title}</span>
+          <div className="flex gap-[2px]">
+            <div className="w-1 h-1 bg-[var(--color-text-muted)]" />
+            <div className="w-1 h-1 bg-[var(--color-border)]" />
+          </div>
+        </div>
+      )}
+
+      <div className="p-[var(--space-3)]">
+        {children}
+      </div>
+
+      {/* Decorative corners */}
+      <div className="absolute top-0 right-0 w-2 h-2 border-t border-r border-[var(--color-border-focus,#0a0a0a)]" />
+      <div className="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-[var(--color-border-focus,#0a0a0a)]" />
+
+      <style jsx>{`
+        @keyframes popover-open {
+          0% {
+            opacity: 0;
+            transform: translateY(-4px) scale(0.98);
+          }
+          100% {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+          }
+        }
+        .animate-popover {
+          animation: popover-open 0.12s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+        }
+      `}</style>
+    </div>
+  );
+
+  if (usePortal) {
+    return createPortal(popoverContent, document.body);
+  }
+
+  return popoverContent;
+};

package/src/components/design-system/TextInput.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: boolean;
+  errorMessage?: string;
+  hint?: string;
+  leftElement?: React.ReactNode;
+  rightElement?: React.ReactNode;
+  compact?: boolean;
+  inputRef?: React.Ref<HTMLInputElement>;
+}
+
+export const TextInput: React.FC<TextInputProps> = ({
+  label,
+  error,
+  errorMessage,
+  hint,
+  leftElement,
+  rightElement,
+  compact = false,
+  inputRef,
+  className = '',
+  ...props
+}) => {
+  const hasLabel = label && label.length > 0;
+  const hasError = error && (errorMessage || !errorMessage);
+
+  return (
+    <div className={`flex flex-col gap-[var(--space-1)] w-full group ${className}`}>
+      {(hasLabel || hasError) && (
+        <div className="flex justify-between items-end px-[var(--space-1)]">
+          {hasLabel && (
+            <label className="font-mono text-[length:var(--font-size-xs)] font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] group-focus-within:text-[var(--color-text,#0a0a0a)] transition-colors">
+              {label}
+            </label>
+          )}
+          {error && errorMessage && (
+            <span className="font-mono text-[length:var(--font-size-xs)] text-[var(--color-danger,#ef4444)] uppercase">{errorMessage}</span>
+          )}
+          {error && !errorMessage && (
+            <span className="font-mono text-[length:var(--font-size-xs)] text-[var(--color-warning,#ff4d00)] font-bold">ERR_NULL</span>
+          )}
+        </div>
+      )}
+
+      <div className="relative flex">
+        {leftElement && (
+          <div className="absolute left-0 top-0 h-full flex items-center pl-[var(--space-2)] pointer-events-none text-[var(--color-text-muted,#6b7280)]">
+            {leftElement}
+          </div>
+        )}
+        <input
+          ref={inputRef}
+          className={`
+            w-full ${compact ? 'h-[var(--control-height-sm)] text-[length:var(--font-size-xs)]' : 'h-[calc(var(--control-height-lg)+var(--space-2))] text-[length:var(--font-size-md)]'} bg-[var(--color-background-alt,#f4f4f5)] border outline-none font-mono text-[var(--color-text,#0a0a0a)] placeholder-[var(--color-text-muted,#6b7280)]
+            transition-all duration-200
+            border-[var(--color-border,#d4d4d8)]
+            hover:border-[var(--color-border-muted,#a1a1aa)] hover:bg-[var(--color-surface,#ffffff)]
+            focus:border-[var(--color-border-focus,#0a0a0a)] focus:bg-[var(--color-surface,#ffffff)] focus:shadow-[2px_2px_0_rgba(0,0,0,0.08)]
+            ${error ? 'border-[var(--color-danger,#ef4444)]/50 focus:border-[var(--color-danger,#ef4444)] bg-[var(--color-danger,#ef4444)]/5' : ''}
+            ${leftElement ? 'pl-[calc(var(--space-4)+var(--space-3))]' : 'px-[var(--space-3)]'}
+            ${rightElement ? 'pr-[calc(var(--space-4)+var(--space-4))]' : 'pr-[var(--space-3)]'}
+          `}
+          {...props}
+        />
+
+        {rightElement && (
+          <div className="absolute right-0 top-0 h-full flex items-center pr-[var(--space-2)]">
+            {rightElement}
+          </div>
+        )}
+
+        <div className={`absolute top-0 right-0 w-1.5 h-1.5 border-t border-r transition-opacity ${error ? 'border-[var(--color-danger,#ef4444)] opacity-100' : 'border-[var(--color-border-focus,#0a0a0a)] opacity-0 group-focus-within:opacity-100'
+          }`} />
+        <div className={`absolute bottom-0 left-0 w-1.5 h-1.5 border-b border-l transition-opacity ${error ? 'border-[var(--color-danger,#ef4444)] opacity-100' : 'border-[var(--color-border-focus,#0a0a0a)] opacity-0 group-focus-within:opacity-100'
+          }`} />
+      </div>
+
+      {hint && (
+        <span className="font-mono text-[length:var(--font-size-xs)] text-[var(--color-text-muted,#6b7280)] px-[var(--space-1)]">{hint}</span>
+      )}
+    </div>
+  );
+};

package/src/components/design-system/Toggle.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import React from 'react';
+
+interface ToggleProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+  size?: 'sm' | 'md';
+}
+
+export const Toggle: React.FC<ToggleProps> = ({
+  checked,
+  onChange,
+  label,
+  disabled = false,
+  size = 'md',
+}) => {
+  const compact = size === 'sm';
+  const trackWidth = compact ? 'calc(var(--space-4) * 2)' : 'calc(var(--space-4) * 2 + var(--space-2))';
+  const trackHeight = compact ? 'var(--space-4)' : 'calc(var(--space-4) + var(--space-1))';
+  const knobSize = compact ? 'calc(var(--space-4) - var(--space-1))' : 'calc(var(--space-4) - 2px)';
+  const knobTranslate = compact ? 'var(--space-4)' : 'calc(var(--space-4) + var(--space-1))';
+
+  return (
+    <label
+      className={`flex items-center gap-[var(--space-2)] ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+    >
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={() => onChange(!checked)}
+        className={`
+          rounded-full relative transition-colors duration-200 flex-shrink-0
+          ${checked
+            ? 'bg-[var(--color-accent,#ccff00)]'
+            : 'bg-[var(--color-border,#d4d4d8)]'
+          }
+          ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
+        `}
+        style={{ width: trackWidth, height: trackHeight }}
+      >
+        <span
+          className={`
+            rounded-full absolute top-1/2 left-[2px]
+            bg-[var(--color-text,#0a0a0a)] transition-transform duration-200
+          `}
+          style={{
+            width: knobSize,
+            height: knobSize,
+            transform: checked ? `translate(${knobTranslate}, -50%)` : 'translate(0, -50%)',
+          }}
+        />
+      </button>
+      {label && (
+        <span className="font-mono tracking-widest uppercase text-[length:var(--font-size-xs)] text-[var(--color-text,#0a0a0a)] select-none">
+          {label}
+        </span>
+      )}
+    </label>
+  );
+};

package/src/components/design-system/TyvekCollapsibleSection.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import React from 'react';
+import { ChevronDown } from 'lucide-react';
+
+interface TyvekCollapsibleSectionProps {
+  title: string;
+  icon?: React.ReactNode;
+  isOpen: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+  tone?: 'default' | 'warning';
+  className?: string;
+  headerClassName?: string;
+  contentClassName?: string;
+}
+
+export const TyvekCollapsibleSection: React.FC<TyvekCollapsibleSectionProps> = ({
+  title,
+  icon,
+  isOpen,
+  onToggle,
+  children,
+  tone = 'default',
+  className = '',
+  headerClassName = '',
+  contentClassName = '',
+}) => {
+  const toneClass = tone === 'warning' ? 'text-[var(--color-warning)]' : 'text-[var(--color-text-muted)]';
+
+  return (
+    <div className={`bg-[var(--color-surface)] border-mech clip-specimen-sm shadow-mech !rounded-none ${className}`}>
+      <button
+        type="button"
+        onClick={onToggle}
+        className={`w-full flex items-center justify-between px-4 py-3 bg-transparent hover:bg-[var(--color-background-alt,#f4f4f5)] transition-colors ${headerClassName}`}
+      >
+        <div className="flex items-center gap-2 min-w-0">
+          {icon ? <span className={toneClass}>{icon}</span> : null}
+          <span className={`font-mono text-[10px] tracking-widest ${toneClass}`}>{title}</span>
+        </div>
+        <ChevronDown
+          size={12}
+          className={`${toneClass} transition-transform flex-shrink-0 ml-2 ${isOpen ? 'rotate-180' : ''}`}
+        />
+      </button>
+
+      {isOpen && (
+        <div className={contentClassName}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/design-system/index.ts

@@ -0,0 +1,14 @@
+export { Button } from './Button';
+export { TextInput } from './TextInput';
+export { FilterDropdown } from './FilterDropdown';
+export { Drawer } from './Drawer';
+export { Modal } from './Modal';
+export { Popover } from './Popover';
+export { ConfirmationModal } from './ConfirmationModal';
+export { ConfirmationPopover } from './ConfirmationPopover';
+export { ChainIndicator } from './ChainIndicator';
+export { ChainSelector } from './ChainSelector';
+export { Toggle } from './Toggle';
+export { ItemPicker } from './ItemPicker';
+export { TyvekCollapsibleSection } from './TyvekCollapsibleSection';
+export { DownloadButton } from './DownloadButton';