@bluefly/openstandardagents 0.2.7 → 0.2.9

package/website/components/layout/Header.tsx

@@ -1,172 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { useState } from 'react';
-
-export function Header() {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const pathname = usePathname();
-  
-  const isActive = (path: string) => pathname === path || pathname?.startsWith(path + '/');
-
-  return (
-    <header className="bg-white border-b border-gray-300 sticky top-0 z-50">
-      <nav className="container mx-auto max-w-6xl px-4">
-        <div className="flex items-center justify-between h-16">
-          <Link href="/" className="flex items-center space-x-2 group">
-            <img
-              src="/assets/brand/ossa-logo.svg"
-              alt="OSSA Logo"
-              className="h-10 w-10 transition-transform group-hover:scale-110"
-            />
-            <span className="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
-              OSSA
-            </span>
-          </Link>
-
-          {/* Desktop Navigation */}
-          <div className="hidden md:flex items-center space-x-3 lg:space-x-6 text-sm lg:text-base">
-            <Link href="/about" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/about') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
-              About
-            </Link>
-            <Link href="/specification" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/specification') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
-              Specification
-            </Link>
-            <Link href="/schema" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/schema') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
-              Schema
-            </Link>
-            <Link href="/docs" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/docs') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
-              Docs
-            </Link>
-            <Link href="/blog" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/blog') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
-              Blog
-            </Link>
-            <Link href="/playground" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/playground') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
-              Playground
-            </Link>
-            <Link href="/examples" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/examples') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
-              Examples
-            </Link>
-            <a
-              href="https://github.com/blueflyio/openstandardagents"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-gray-600 hover:text-primary transition-colors flex items-center font-medium"
-              title="View on GitHub"
-            >
-              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
-              </svg>
-            </a>
-          </div>
-
-          {/* Mobile Menu Button */}
-          <button
-            className="md:hidden p-2 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded"
-            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-            aria-label="Toggle menu"
-            aria-expanded={mobileMenuOpen}
-            aria-controls="mobile-menu"
-          >
-            <svg
-              className="w-6 h-6"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              {mobileMenuOpen ? (
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              ) : (
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              )}
-            </svg>
-          </button>
-        </div>
-
-        {/* Mobile Navigation */}
-        <div
-          id="mobile-menu"
-          className={`md:hidden overflow-hidden transition-all duration-300 ease-in-out ${
-            mobileMenuOpen ? 'max-h-96 opacity-100 py-4 border-t border-gray-300' : 'max-h-0 opacity-0'
-          }`}
-          role="navigation"
-          aria-label="Mobile navigation"
-        >
-            <Link
-              href="/about"
-              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/about') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
-              onClick={() => setMobileMenuOpen(false)}
-            >
-              About
-            </Link>
-            <Link
-              href="/specification"
-              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/specification') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
-              onClick={() => setMobileMenuOpen(false)}
-            >
-              Specification
-            </Link>
-            <Link
-              href="/schema"
-              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/schema') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
-              onClick={() => setMobileMenuOpen(false)}
-            >
-              Schema
-            </Link>
-            <Link
-              href="/docs"
-              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/docs') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
-              onClick={() => setMobileMenuOpen(false)}
-            >
-              Docs
-            </Link>
-            <Link
-              href="/blog"
-              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/blog') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
-              onClick={() => setMobileMenuOpen(false)}
-            >
-              Blog
-            </Link>
-            <Link
-              href="/playground"
-              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/playground') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
-              onClick={() => setMobileMenuOpen(false)}
-            >
-              Playground
-            </Link>
-            <Link
-              href="/examples"
-              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/examples') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
-              onClick={() => setMobileMenuOpen(false)}
-            >
-              Examples
-            </Link>
-            <a
-              href="https://github.com/blueflyio/openstandardagents"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-2 py-2 text-gray-600 hover:text-primary transition-colors font-medium"
-              onClick={() => setMobileMenuOpen(false)}
-              title="View on GitHub"
-            >
-              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
-              </svg>
-            </a>
-          </div>
-      </nav>
-    </header>
-  );
-}
-

package/website/components/schema/SchemaComponentsAccordion.tsx

@@ -1,84 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-interface AccordionItemProps {
-  title: string;
-  children: React.ReactNode;
-  isOpen: boolean;
-  onToggle: () => void;
-  borderColor: string;
-  bgColor: string;
-}
-
-function AccordionItem({ title, children, isOpen, onToggle, borderColor, bgColor }: AccordionItemProps) {
-  return (
-    <div className={`bg-white rounded-lg border-l-4 ${borderColor} shadow-md transition-all`}>
-      <button
-        onClick={onToggle}
-        className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
-        aria-expanded={isOpen}
-      >
-        <h3 className="text-xl font-bold text-gray-900">{title}</h3>
-        <svg
-          className={`w-5 h-5 text-gray-600 transition-transform ${isOpen ? 'rotate-180' : ''}`}
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-        </svg>
-      </button>
-      {isOpen && (
-        <div className="px-6 pb-6 border-t border-gray-200">
-          <div className="pt-4">
-            {children}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-interface SchemaComponentsAccordionProps {
-  items: Array<{
-    id: string;
-    title: string;
-    content: React.ReactNode;
-    borderColor: string;
-  }>;
-}
-
-export function SchemaComponentsAccordion({ items }: SchemaComponentsAccordionProps) {
-  const [openItems, setOpenItems] = useState<Set<string>>(new Set([items[0]?.id]));
-
-  const toggleItem = (id: string) => {
-    setOpenItems(prev => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  };
-
-  return (
-    <div className="space-y-4">
-      {items.map((item) => (
-        <AccordionItem
-          key={item.id}
-          title={item.title}
-          isOpen={openItems.has(item.id)}
-          onToggle={() => toggleItem(item.id)}
-          borderColor={item.borderColor}
-          bgColor="bg-white"
-        >
-          {item.content}
-        </AccordionItem>
-      ))}
-    </div>
-  );
-}
-

package/website/components/schema/SchemaExplorer.tsx

@@ -1,213 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-
-interface SchemaExplorerProps {
-  schema: any;
-}
-
-interface PropertyInfo {
-  name: string;
-  type: string;
-  description?: string;
-  required?: boolean;
-  properties?: PropertyInfo[];
-}
-
-function extractProperties(schema: any, path = ''): PropertyInfo[] {
-  if (!schema || typeof schema !== 'object') {
-    return [];
-  }
-
-  const properties: PropertyInfo[] = [];
-
-  if (schema.properties) {
-    for (const [key, value] of Object.entries(schema.properties)) {
-      const prop = value as any;
-      const propInfo: PropertyInfo = {
-        name: key,
-        type: prop.type || 'object',
-        description: prop.description,
-        required: schema.required?.includes(key),
-      };
-
-      if (prop.properties || prop.items) {
-        propInfo.properties = extractProperties(
-          prop.properties || prop.items,
-          `${path}.${key}`
-        );
-      }
-
-      properties.push(propInfo);
-    }
-  }
-
-  return properties;
-}
-
-export function SchemaExplorer({ schema }: SchemaExplorerProps) {
-  const [selectedPath, setSelectedPath] = useState<string>('');
-  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(
-    new Set([''])
-  );
-
-  const rootProperties = extractProperties(schema);
-
-  const togglePath = (path: string): void => {
-    setExpandedPaths((prev) => {
-      const next = new Set(prev);
-      if (next.has(path)) {
-        next.delete(path);
-      } else {
-        next.add(path);
-      }
-      return next;
-    });
-  };
-
-  const renderProperty = (
-    prop: PropertyInfo,
-    depth = 0,
-    currentPath = ''
-  ) => {
-    const fullPath = currentPath ? `${currentPath}.${prop.name}` : prop.name;
-    const isExpanded = expandedPaths.has(fullPath);
-    const hasChildren = prop.properties && prop.properties.length > 0;
-
-    return (
-      <div key={prop.name} className="ml-4">
-        <div
-          className={`flex items-start py-2 ${
-            selectedPath === fullPath ? 'bg-primary/10' : ''
-          }`}
-        >
-          {hasChildren && (
-            <button
-              onClick={() => togglePath(fullPath)}
-              className="mr-2 text-gray-500 hover:text-gray-700"
-              aria-label={isExpanded ? 'Collapse' : 'Expand'}
-            >
-              {isExpanded ? '−' : '+'}
-            </button>
-          )}
-          <div
-            className="flex-1 cursor-pointer"
-            onClick={() => setSelectedPath(fullPath)}
-          >
-            <div className="flex items-center gap-2">
-              <span className="font-semibold text-gray-900">{prop.name}</span>
-              <span className="text-sm text-gray-500">({prop.type})</span>
-              {prop.required && (
-                <span className="text-xs bg-error/20 text-error px-2 py-0.5 rounded">
-                  required
-                </span>
-              )}
-            </div>
-            {prop.description && (
-              <p className="text-sm text-gray-600 mt-1">{prop.description}</p>
-            )}
-          </div>
-        </div>
-        {hasChildren && isExpanded && (
-          <div className="ml-6 border-l-2 border-gray-200">
-            {prop.properties?.map((child) =>
-              renderProperty(child, depth + 1, fullPath)
-            )}
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  const getPropertyAtPath = (path: string): any => {
-    const parts = path.split('.').filter(Boolean);
-    let current: any = schema;
-
-    for (const part of parts) {
-      if (current?.properties?.[part]) {
-        current = current.properties[part];
-      } else {
-        return null;
-      }
-    }
-
-    return current;
-  };
-
-  const selectedProperty = selectedPath
-    ? getPropertyAtPath(selectedPath)
-    : schema;
-
-  return (
-    <div className="space-y-6">
-      {/* Property Tree - Row 1 */}
-      <div className="card">
-        <h2 className="text-xl font-semibold mb-4">Schema Structure</h2>
-        <div className="space-y-1 max-h-[400px] overflow-y-auto">
-          {rootProperties.map((prop) => renderProperty(prop))}
-        </div>
-      </div>
-
-      {/* Property Details - Row 2 */}
-      <div className="card">
-        <h2 className="text-xl font-semibold mb-4">
-          {selectedPath || 'Schema Overview'}
-        </h2>
-        {selectedProperty && (
-          <div className="space-y-4">
-            <div>
-              <h3 className="font-semibold mb-2">Type</h3>
-              <p className="text-gray-700">{selectedProperty.type || 'object'}</p>
-            </div>
-
-            {selectedProperty.description && (
-              <div>
-                <h3 className="font-semibold mb-2">Description</h3>
-                <p className="text-gray-700">{selectedProperty.description}</p>
-              </div>
-            )}
-
-            {selectedProperty.enum && (
-              <div>
-                <h3 className="font-semibold mb-2">Allowed Values</h3>
-                <ul className="list-disc list-inside text-gray-700">
-                  {selectedProperty.enum.map((value: any, index: number) => (
-                    <li key={index}>{String(value)}</li>
-                  ))}
-                </ul>
-              </div>
-            )}
-
-            {selectedProperty.default !== undefined && (
-              <div>
-                <h3 className="font-semibold mb-2">Default Value</h3>
-                <p className="text-gray-700">
-                  {JSON.stringify(selectedProperty.default)}
-                </p>
-              </div>
-            )}
-
-            <div>
-              <h3 className="font-semibold mb-2">JSON Schema</h3>
-              <div className="border border-gray-300 rounded-lg overflow-hidden">
-                <SyntaxHighlighter
-                  language="json"
-                  style={vscDarkPlus}
-                  customStyle={{
-                    margin: 0,
-                    fontSize: '12px',
-                  }}
-                >
-                  {JSON.stringify(selectedProperty, null, 2)}
-                </SyntaxHighlighter>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-

package/website/components/ui/Badge.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-
-type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'primary' | 'secondary';
-type BadgeSize = 'sm' | 'md' | 'lg';
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /** Badge content */
-  children: React.ReactNode;
-  /** Visual variant */
-  variant?: BadgeVariant;
-  /** Size variant */
-  size?: BadgeSize;
-  /** Icon to display before text */
-  icon?: React.ReactNode;
-  /** Dot indicator instead of full background */
-  dot?: boolean;
-}
-
-const variantClasses: Record<BadgeVariant, string> = {
-  default: 'bg-gray-100 text-gray-800 border border-gray-300',
-  success: 'bg-success-100 text-success-800 border border-success-300',
-  warning: 'bg-warning-100 text-warning-800 border border-warning-300',
-  error: 'bg-error-100 text-error-800 border border-error-300',
-  info: 'bg-info-100 text-info-800 border border-info-300',
-  primary: 'bg-primary-100 text-primary-800 border border-primary-300',
-  secondary: 'bg-secondary-100 text-secondary-800 border border-secondary-300',
-};
-
-const sizeClasses: Record<BadgeSize, string> = {
-  sm: 'px-2 py-0.5 text-xs',
-  md: 'px-3 py-1 text-sm',
-  lg: 'px-4 py-1.5 text-base',
-};
-
-const dotVariantClasses: Record<BadgeVariant, string> = {
-  default: 'bg-gray-500',
-  success: 'bg-success-500',
-  warning: 'bg-warning-500',
-  error: 'bg-error-500',
-  info: 'bg-info-500',
-  primary: 'bg-primary-500',
-  secondary: 'bg-secondary-500',
-};
-
-export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
-  (
-    {
-      className = '',
-      variant = 'default',
-      size = 'md',
-      children,
-      icon,
-      dot = false,
-      ...props
-    },
-    ref
-  ) => {
-    const classes = [
-      'inline-flex items-center justify-center rounded-full font-semibold',
-      variantClasses[variant],
-      sizeClasses[size],
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    return (
-      <span ref={ref} className={classes} {...props}>
-        {dot && (
-          <span
-            className={`w-2 h-2 rounded-full mr-1.5 ${dotVariantClasses[variant]}`}
-            aria-hidden="true"
-          />
-        )}
-        {icon && <span className="mr-1">{icon}</span>}
-        {children}
-      </span>
-    );
-  }
-);
-
-Badge.displayName = 'Badge';

package/website/components/ui/Button.tsx

@@ -1,116 +0,0 @@
-import React from 'react';
-
-type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success';
-type ButtonSize = 'sm' | 'md' | 'lg';
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Button content */
-  children: React.ReactNode;
-  /** Visual variant */
-  variant?: ButtonVariant;
-  /** Size variant */
-  size?: ButtonSize;
-  /** Full width button */
-  fullWidth?: boolean;
-  /** Loading state */
-  loading?: boolean;
-  /** Icon to display before text */
-  iconLeft?: React.ReactNode;
-  /** Icon to display after text */
-  iconRight?: React.ReactNode;
-  /** Accessible label for screen readers */
-  ariaLabel?: string;
-}
-
-const variantClasses: Record<ButtonVariant, string> = {
-  primary:
-    'bg-gradient-to-r from-secondary via-primary to-accent text-white hover:shadow-lg hover:scale-105 focus:ring-primary/30',
-  secondary:
-    'bg-secondary text-white hover:bg-secondary/90 hover:shadow-md focus:ring-secondary/30',
-  outline:
-    'border-2 border-primary text-primary bg-transparent hover:bg-primary hover:text-white focus:ring-primary/30',
-  ghost:
-    'text-primary bg-transparent hover:bg-primary/10 focus:ring-primary/20',
-  danger:
-    'bg-error text-white hover:bg-error-600 hover:shadow-md focus:ring-error/30',
-  success:
-    'bg-success text-white hover:bg-success-600 hover:shadow-md focus:ring-success/30',
-};
-
-const sizeClasses: Record<ButtonSize, string> = {
-  sm: 'px-4 py-2 text-sm min-h-[36px]',
-  md: 'px-6 py-3 text-base min-h-[44px]',
-  lg: 'px-8 py-4 text-lg min-h-[52px]',
-};
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className = '',
-      variant = 'primary',
-      size = 'md',
-      fullWidth = false,
-      children,
-      loading = false,
-      iconLeft,
-      iconRight,
-      disabled,
-      ariaLabel,
-      ...props
-    },
-    ref
-  ) => {
-    const baseClasses =
-      'inline-flex items-center justify-center rounded-lg font-semibold transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
-
-    const classes = [
-      baseClasses,
-      variantClasses[variant],
-      sizeClasses[size],
-      fullWidth ? 'w-full' : 'w-auto',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    return (
-      <button
-        ref={ref}
-        className={classes}
-        disabled={disabled || loading}
-        aria-label={ariaLabel}
-        aria-busy={loading}
-        {...props}
-      >
-        {loading && (
-          <svg
-            className="animate-spin -ml-1 mr-3 h-5 w-5"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-          >
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-          </svg>
-        )}
-        {!loading && iconLeft && <span className="mr-2">{iconLeft}</span>}
-        {children}
-        {!loading && iconRight && <span className="ml-2">{iconRight}</span>}
-      </button>
-    );
-  }
-);
-
-Button.displayName = 'Button';