claudmax 2.0.0 → 2.0.1

package/src/components/Footer.tsx

@@ -1,120 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { useState, useEffect } from 'react';
-import { BookOpen, Activity, FileText, Github, Mail, MessageCircle, HelpCircle, PenLine } from 'lucide-react';
-
-export default function Footer() {
-  const year = new Date().getFullYear();
-  const [supportEnabled, setSupportEnabled] = useState(true);
-
-  useEffect(() => {
-    fetch('/api/admin/settings')
-      .then(r => r.ok ? r.json() : { supportEnabled: true })
-      .then(d => setSupportEnabled(d.supportEnabled ?? true))
-      .catch(() => setSupportEnabled(true));
-  }, []);
-
-  const baseFooterLinks = [
-    {
-      Product: [
-        { href: '/docs', label: 'Documentation' },
-        { href: '/blog', label: 'Blog' },
-        { href: '/faq', label: 'FAQ' },
-        { href: '/support', label: 'Support', show: supportEnabled },
-        { href: '/status', label: 'API Status' },
-      ],
-    },
-    {
-      Resources: [
-        { href: '/docs?section=claude_code', label: 'Claude Code Setup' },
-        { href: '/docs?section=cursor', label: 'Cursor Setup' },
-        { href: '/docs?section=limits', label: 'Rate Limits' },
-        { href: '/docs?section=auth', label: 'Authentication' },
-      ],
-    },
-    {
-      Company: [
-        { href: '/check-usage', label: 'Check Usage' },
-        { href: '/docs?section=troubleshooting', label: 'Troubleshooting' },
-        { href: '/docs?section=mcp', label: 'MCP Tools' },
-        { href: '/docs?section=models', label: 'Models' },
-      ],
-    },
-  ];
-
-  const footerLinks = baseFooterLinks.map(group => {
-    const [[category, links]] = Object.entries(group);
-    return {
-      [category]: links.filter((l: any) => l.show !== false),
-    };
-  });
-
-  const socialLinks: never[] = [];
-
-  return (
-    <footer className="bg-white border-t border-gray-200 mt-auto">
-      {/* Main footer */}
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-12">
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 lg:gap-12">
-          {/* Brand */}
-          <div className="col-span-2 md:col-span-1">
-            <Link href="/" className="flex items-center gap-2.5 mb-4">
-              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#5244F3] to-[#6B63E8] flex items-center justify-center">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-white">
-                  <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="currentColor"/>
-                </svg>
-              </div>
-              <span className="text-[#111827] font-bold text-base">ClaudMax</span>
-            </Link>
-            <p className="text-[#9CA3AF] text-sm leading-relaxed mb-4">
-              Claude API gateway powered by OpenRouter. Works with Claude Code, Cursor, Windsurf, and every Anthropic SDK.
-            </p>
-            <div />
-          </div>
-
-          {/* Links */}
-          {footerLinks.map((group, i) => (
-            <div key={i}>
-              {Object.entries(group).map(([category, links]) => (
-                <div key={category}>
-                  <p className="text-[#111827] text-xs font-bold uppercase tracking-widest mb-4">
-                    {category}
-                  </p>
-                  <ul className="space-y-2.5">
-                    {(links as any[]).map((link) => (
-                      <li key={link.href}>
-                        <Link
-                          href={link.href}
-                          className="text-[#6B7280] hover:text-[#5244F3] text-sm transition-colors"
-                        >
-                          {link.label}
-                        </Link>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              ))}
-            </div>
-          ))}
-        </div>
-
-        {/* Bottom bar */}
-        <div className="mt-10 pt-8 border-t border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-4">
-          <div className="flex flex-wrap items-center gap-4 text-xs text-[#9CA3AF]">
-            <span>© {year} ClaudMax. All rights reserved.</span>
-            <span className="hidden sm:inline text-gray-200">·</span>
-            <span>API Base: <code className="font-mono text-[#6B7280]">https://api.claudmax.pro</code></span>
-          </div>
-          <div className="flex items-center gap-4 text-xs text-[#9CA3AF]">
-            <Link href="/docs" className="hover:text-[#5244F3] transition-colors">Docs</Link>
-            <Link href="/blog" className="hover:text-[#5244F3] transition-colors">Blog</Link>
-            <Link href="/faq" className="hover:text-[#5244F3] transition-colors">FAQ</Link>
-            {supportEnabled && <Link href="/support" className="hover:text-[#5244F3] transition-colors">Support</Link>}
-            <Link href="/status" className="hover:text-[#5244F3] transition-colors">Status</Link>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-}

package/src/components/Header.tsx

@@ -1,131 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { useState, useEffect } from 'react';
-import { BookOpen, Activity, FileText, MessageCircle, HelpCircle, PenLine, X, Menu } from 'lucide-react';
-
-export default function Header() {
-  const pathname = usePathname();
-  const [mobileOpen, setMobileOpen] = useState(false);
-  const [supportEnabled, setSupportEnabled] = useState(true);
-
-  useEffect(() => {
-    fetch('/api/admin/settings')
-      .then(r => r.ok ? r.json() : { supportEnabled: true })
-      .then(d => setSupportEnabled(d.supportEnabled ?? true))
-      .catch(() => setSupportEnabled(true));
-  }, []);
-
-  const baseLinks = [
-    { href: '/docs', label: 'Documentation', icon: <BookOpen className="w-4 h-4" /> },
-    { href: '/blog', label: 'Blog', icon: <PenLine className="w-4 h-4" /> },
-    { href: '/faq', label: 'FAQ', icon: <HelpCircle className="w-4 h-4" /> },
-    { href: '/support', label: 'Support', icon: <MessageCircle className="w-4 h-4" />, show: supportEnabled },
-    { href: '/status', label: 'Status', icon: <Activity className="w-4 h-4" /> },
-    { href: '/check-usage', label: 'Usage', icon: <FileText className="w-4 h-4" /> },
-  ];
-
-  const navLinks = baseLinks.filter(l => l.show !== false);
-
-  const isActive = (href: string) => {
-    if (href === '/') return pathname === '/';
-    return pathname.startsWith(href);
-  };
-
-  return (
-    <>
-      <header className="sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-gray-200 shrink-0">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 h-14 flex items-center justify-between gap-4">
-          {/* Logo */}
-          <Link href="/" className="flex items-center gap-2.5 shrink-0">
-            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#5244F3] to-[#6B63E8] flex items-center justify-center shadow-sm">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-white">
-                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="currentColor"/>
-              </svg>
-            </div>
-            <span className="text-[#111827] font-bold text-base tracking-tight">ClaudMax</span>
-          </Link>
-
-          {/* Desktop nav */}
-          <nav className="hidden md:flex items-center gap-1">
-            {navLinks.map((link) => (
-              <Link
-                key={link.href}
-                href={link.href}
-                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
-                  isActive(link.href)
-                    ? 'bg-purple-50 text-purple-700'
-                    : 'text-[#6B7280] hover:text-[#111827] hover:bg-gray-100'
-                }`}
-              >
-                {link.icon}
-                {link.label}
-              </Link>
-            ))}
-          </nav>
-
-          {/* Desktop CTA */}
-          <div className="hidden md:flex items-center gap-2 shrink-0">
-            <Link href="/check-usage">
-              <button className="bg-white hover:bg-gray-50 text-[#374151] border border-gray-200 rounded-full px-4 py-1.5 text-sm font-medium transition-all">
-                Check Usage
-              </button>
-            </Link>
-            <Link href="/docs">
-              <button className="bg-[#5244F3] hover:bg-[#4338CA] text-white rounded-full px-4 py-1.5 text-sm font-semibold transition-all shadow-sm">
-                Get Started
-              </button>
-            </Link>
-          </div>
-
-          {/* Mobile hamburger */}
-          <button
-            onClick={() => setMobileOpen(!mobileOpen)}
-            className="md:hidden w-9 h-9 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
-            aria-label="Toggle menu"
-          >
-            {mobileOpen ? (
-              <X className="w-5 h-5 text-[#374151]" />
-            ) : (
-              <Menu className="w-5 h-5 text-[#374151]" />
-            )}
-          </button>
-        </div>
-      </header>
-
-      {/* Mobile menu */}
-      {mobileOpen && (
-        <div className="md:hidden bg-white border-b border-gray-200 px-4 py-3 space-y-1">
-          {navLinks.map((link) => (
-            <Link
-              key={link.href}
-              href={link.href}
-              onClick={() => setMobileOpen(false)}
-              className={`flex items-center gap-2.5 px-3 py-2.5 rounded-lg text-sm font-medium transition-all ${
-                isActive(link.href)
-                  ? 'bg-purple-50 text-purple-700'
-                  : 'text-[#6B7280] hover:text-[#111827] hover:bg-gray-50'
-              }`}
-            >
-              {link.icon}
-              {link.label}
-            </Link>
-          ))}
-          <div className="flex items-center gap-2 pt-2 border-t border-gray-100 mt-2">
-            <Link href="/check-usage" onClick={() => setMobileOpen(false)} className="flex-1">
-              <button className="w-full bg-white hover:bg-gray-50 text-[#374151] border border-gray-200 rounded-full px-4 py-2 text-sm font-medium transition-all">
-                Check Usage
-              </button>
-            </Link>
-            <Link href="/docs" onClick={() => setMobileOpen(false)} className="flex-1">
-              <button className="w-full bg-[#5244F3] hover:bg-[#4338CA] text-white rounded-full px-4 py-2 text-sm font-semibold transition-all">
-                Get Started
-              </button>
-            </Link>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}

package/src/components/landing/features.tsx

@@ -1,99 +0,0 @@
-'use client';
-
-import { Code2, Globe, Zap, Shield, KeyRound, BarChart3, Terminal } from 'lucide-react';
-import { useEffect, useState, useRef } from 'react';
-
-const features = [
-  {
-    icon: Globe,
-    title: 'OpenAI-Compatible',
-    description:
-      'Drop-in replacement for OpenAI API. Change your baseURL and add your API key — everything works instantly.',
-    color: 'from-blue-500 to-cyan-500',
-  },
-  {
-    icon: Code2,
-    title: 'Claude Code Models',
-    description:
-      'Access the full lineup: Claude 3.5 Haiku, Sonnet, and Opus. All the power of Claude Code in your IDE.',
-    color: 'from-purple-500 to-pink-500',
-  },
-  {
-    icon: Zap,
-    title: 'Blazing Fast',
-    description:
-      'Optimized proxy infrastructure with sub-200ms latency. No rate limit headaches, just productive coding.',
-    color: 'from-amber-500 to-orange-500',
-  },
-  {
-    icon: KeyRound,
-    title: 'Simple API Keys',
-    description:
-      'Generate keys in seconds from your dashboard. Use them in Cursor, Cline, OpenClau, Continue.dev, and 50+ tools.',
-    color: 'from-emerald-500 to-teal-500',
-  },
-  {
-    icon: BarChart3,
-    title: 'Usage Analytics',
-    description:
-      'Track every request, token, and cost in real-time. Know exactly what you\'re spending and optimize accordingly.',
-    color: 'from-indigo-500 to-violet-500',
-  },
-  {
-    icon: Shield,
-    title: 'Secure by Default',
-    description:
-      'Keys are hashed, never logged in plaintext. Per-key rate limits and usage caps keep your account safe.',
-    color: 'from-rose-500 to-red-500',
-  },
-];
-
-export function Features() {
-  const [visible, setVisible] = useState(false);
-  const ref = useRef<HTMLElement>(null);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => { if (entry.isIntersecting) setVisible(true); },
-      { threshold: 0.1 }
-    );
-    if (ref.current) observer.observe(ref.current);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <section ref={ref} id="features" className="py-24 relative">
-      <div className="absolute inset-0 grid-bg" />
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-        <div className={`text-center mb-16 transition-all duration-700 ${visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-          <h2 className="text-3xl sm:text-4xl font-bold mb-4">
-            Everything you need to{' '}
-            <span className="gradient-text">ship faster</span>
-          </h2>
-          <p className="text-muted-foreground text-lg max-w-xl mx-auto">
-            Built for developers who want Claude\'s intelligence without the complexity.
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-          {features.map((feature, i) => {
-            const Icon = feature.icon;
-            return (
-              <div
-                key={feature.title}
-                className={`group relative rounded-2xl border border-border/50 bg-card/50 backdrop-blur p-6 hover:border-purple-500/30 transition-all duration-500 hover:shadow-lg hover:shadow-purple-500/5 ${visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}
-                style={{ transitionDelay: `${i * 80}ms` }}
-              >
-                <div className={`inline-flex p-2.5 rounded-xl bg-gradient-to-br ${feature.color} shadow-lg mb-4`}>
-                  <Icon className="w-5 h-5 text-white" />
-                </div>
-                <h3 className="text-lg font-bold mb-2">{feature.title}</h3>
-                <p className="text-sm text-muted-foreground leading-relaxed">{feature.description}</p>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </section>
-  );
-}

package/src/components/ui/badge.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default: 'border-transparent bg-primary text-primary-foreground',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground',
-        destructive: 'border-transparent bg-destructive text-destructive-foreground',
-        outline: 'text-foreground',
-        success: 'border-transparent bg-emerald-500/20 text-emerald-400',
-        warning: 'border-transparent bg-amber-500/20 text-amber-400',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };

package/src/components/ui/button.tsx

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-semibold ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:opacity-90 shadow-lg shadow-primary/25',
-        destructive: 'bg-destructive text-destructive-foreground hover:opacity-90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-10 px-5 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-12 rounded-xl px-8 text-base',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
-  }
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };

package/src/components/ui/card.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('rounded-xl border bg-card text-card-foreground shadow-sm', className)}
-      {...props}
-    />
-  )
-);
-Card.displayName = 'Card';
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-  )
-);
-CardHeader.displayName = 'CardHeader';
-
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3 ref={ref} className={cn('text-2xl font-bold leading-none tracking-tight', className)} {...props} />
-  )
-);
-CardTitle.displayName = 'CardTitle';
-
-const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-  )
-);
-CardDescription.displayName = 'CardDescription';
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-  )
-);
-CardContent.displayName = 'CardContent';
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
-  )
-);
-CardFooter.displayName = 'CardFooter';
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/src/components/ui/dialog.tsx

@@ -1,97 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
-const DialogPortal = DialogPrimitive.Portal;
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-2xl',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
-);
-DialogHeader.displayName = 'DialogHeader';
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
-);
-DialogFooter.displayName = 'DialogFooter';
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};