anti-fraud-system-nevaeh/dist/types/index.d.ts.map

Anti-fraud system SDK for high-value money transfers

{"version":3,"file":"index.d.ts","sources":["../../src/components/AntiFraudSystem.tsx","../../src/components/ui/button.tsx","../../src/components/ui/card.tsx","../../src/components/ui/input.tsx","../../src/components/ui/label.tsx","../../src/components/ui/progress.tsx","../../src/components/ui/alert.tsx","../../src/components/ui/dialog.tsx"],"sourcesContent":["\"use client\"\n\nimport type React from \"react\"\nimport { useState } from \"react\"\nimport { AlertTriangle, CheckCircle, XCircle, DollarSign } from \"lucide-react\"\nimport { Button } from \"./ui/button\"\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from \"./ui/card\"\nimport { Input } from \"./ui/input\"\nimport { Label } from \"./ui/label\"\nimport { Progress } from \"./ui/progress\"\nimport { Alert, AlertDescription } from \"./ui/alert\"\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from \"./ui/dialog\"\n\nexport interface AntiFraudConfig {\n  riskThreshold?: number\n  questions?: Question[]\n  onTransferComplete?: (data: TransferData) => void\n  onRiskAssessment?: (assessment: RiskAssessment) => void\n}\n\nexport interface Question {\n  id: number\n  question: string\n  placeholder: string\n  riskKeywords: string[]\n}\n\nexport interface TransferData {\n  amount: number\n  recipient: string\n  riskLevel: \"low\" | \"medium\" | \"high\"\n  answers?: string[]\n}\n\nexport interface RiskAssessment {\n  level: \"low\" | \"medium\" | \"high\"\n  score: number\n  answers: string[]\n  recommendation: string\n}\n\nconst defaultQuestions: Question[] = [\n  {\n    id: 1,\n    question: \"Do you personally know the person or organization you are transferring money to?\",\n    placeholder: \"Please describe your relationship with the recipient...\",\n    riskKeywords: [\"no\", \"don't know\", \"stranger\", \"online\", \"met online\", \"never met\"],\n  },\n  {\n    id: 2,\n    question: \"Did someone ask you to keep this transfer secret or claim it's urgent/emergency?\",\n    placeholder: \"Please explain the circumstances of this transfer request...\",\n    riskKeywords: [\"yes\", \"secret\", \"urgent\", \"emergency\", \"don't tell\", \"hurry\", \"quickly\"],\n  },\n  {\n    id: 3,\n    question: \"Have you verified this transfer request through official channels (phone, email, in-person)?\",\n    placeholder: \"Please describe how you verified this request...\",\n    riskKeywords: [\"no\", \"haven't\", \"didn't verify\", \"can't reach\", \"only text\", \"only message\"],\n  },\n]\n\nexport interface AntiFraudSystemProps extends AntiFraudConfig {\n  className?: string\n}\n\nexport function AntiFraudSystem({\n  riskThreshold = 100000,\n  questions = defaultQuestions,\n  onTransferComplete,\n  onRiskAssessment,\n  className,\n}: AntiFraudSystemProps) {\n  const [amount, setAmount] = useState(\"\")\n  const [recipient, setRecipient] = useState(\"\")\n  const [showSecurityCheck, setShowSecurityCheck] = useState(false)\n  const [currentQuestion, setCurrentQuestion] = useState(0)\n  const [answers, setAnswers] = useState<string[]>([])\n  const [currentAnswer, setCurrentAnswer] = useState(\"\")\n  const [isComplete, setIsComplete] = useState(false)\n  const [riskLevel, setRiskLevel] = useState<\"low\" | \"medium\" | \"high\">(\"low\")\n  const [showResult, setShowResult] = useState(false)\n\n  const handleTransferSubmit = (e: React.FormEvent) => {\n    e.preventDefault()\n    const numericAmount = Number.parseFloat(amount.replace(/,/g, \"\"))\n\n    if (numericAmount >= riskThreshold) {\n      setShowSecurityCheck(true)\n    } else {\n      // For amounts below threshold, proceed without security check\n      const transferData: TransferData = {\n        amount: numericAmount,\n        recipient,\n        riskLevel: \"low\",\n      }\n      onTransferComplete?.(transferData)\n    }\n  }\n\n  const handleSubmitAnswer = () => {\n    if (!currentAnswer.trim()) return\n\n    const newAnswers = [...answers, currentAnswer]\n    setAnswers(newAnswers)\n\n    if (currentQuestion < questions.length - 1) {\n      setCurrentQuestion(currentQuestion + 1)\n      setCurrentAnswer(\"\")\n    } else {\n      // Calculate risk level based on answers\n      const assessment = calculateRiskScore(newAnswers)\n      setRiskLevel(assessment.level)\n      setIsComplete(true)\n      setShowSecurityCheck(false)\n      setShowResult(true)\n      onRiskAssessment?.(assessment)\n    }\n  }\n\n  const calculateRiskScore = (allAnswers: string[]): RiskAssessment => {\n    let riskCount = 0\n\n    allAnswers.forEach((answer, index) => {\n      const lowerAnswer = answer.toLowerCase()\n      const hasRiskKeywords = questions[index].riskKeywords.some((keyword) => lowerAnswer.includes(keyword))\n      if (hasRiskKeywords) riskCount++\n    })\n\n    const level: \"low\" | \"medium\" | \"high\" = riskCount >= 2 ? \"high\" : riskCount === 1 ? \"medium\" : \"low\"\n\n    let recommendation = \"\"\n    if (level === \"high\") {\n      recommendation =\n        \"We strongly recommend you DO NOT proceed with this transfer. This situation shows multiple red flags commonly associated with fraud.\"\n    } else if (level === \"medium\") {\n      recommendation =\n        \"Please exercise caution. We recommend verifying the recipient through multiple official channels before proceeding.\"\n    } else {\n      recommendation =\n        \"Your transfer appears to be legitimate based on the information provided. However, always remain vigilant.\"\n    }\n\n    return {\n      level,\n      score: riskCount,\n      answers: allAnswers,\n      recommendation,\n    }\n  }\n\n  const resetSystem = () => {\n    setCurrentQuestion(0)\n    setAnswers([])\n    setCurrentAnswer(\"\")\n    setIsComplete(false)\n    setRiskLevel(\"low\")\n    setShowResult(false)\n    setAmount(\"\")\n    setRecipient(\"\")\n  }\n\n  const getRiskColor = () => {\n    switch (riskLevel) {\n      case \"high\":\n        return \"text-red-600\"\n      case \"medium\":\n        return \"text-yellow-600\"\n      default:\n        return \"text-green-600\"\n    }\n  }\n\n  const getRiskIcon = () => {\n    switch (riskLevel) {\n      case \"high\":\n        return <XCircle className=\"h-6 w-6 text-red-600\" />\n      case \"medium\":\n        return <AlertTriangle className=\"h-6 w-6 text-yellow-600\" />\n      default:\n        return <CheckCircle className=\"h-6 w-6 text-green-600\" />\n    }\n  }\n\n  const formatCurrency = (value: string) => {\n    const numericValue = value.replace(/[^0-9.]/g, \"\")\n    const parts = numericValue.split(\".\")\n    parts[0] = parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")\n    return parts.join(\".\")\n  }\n\n  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value\n    setAmount(formatCurrency(value))\n  }\n\n  const handleProceedTransfer = () => {\n    const transferData: TransferData = {\n      amount: Number.parseFloat(amount.replace(/,/g, \"\")),\n      recipient,\n      riskLevel,\n      answers,\n    }\n    onTransferComplete?.(transferData)\n    setShowResult(false)\n  }\n\n  return (\n    <div className={className}>\n      <Card className=\"w-full max-w-2xl mx-auto\">\n        <CardHeader>\n          <CardTitle className=\"text-2xl\">Money Transfer</CardTitle>\n          <CardDescription>Enter transfer details below</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form onSubmit={handleTransferSubmit} className=\"space-y-6\">\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"recipient\">Recipient Name/Account</Label>\n              <Input\n                id=\"recipient\"\n                placeholder=\"Enter recipient name or account\"\n                value={recipient}\n                onChange={(e) => setRecipient(e.target.value)}\n                required\n              />\n            </div>\n\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"amount\">Transfer Amount</Label>\n              <div className=\"relative\">\n                <DollarSign className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500\" />\n                <Input\n                  id=\"amount\"\n                  className=\"pl-10\"\n                  placeholder=\"0.00\"\n                  value={amount}\n                  onChange={handleAmountChange}\n                  required\n                />\n              </div>\n              {Number.parseFloat(amount.replace(/,/g, \"\")) >= riskThreshold && (\n                <p className=\"text-xs text-amber-600 flex items-center gap-1 mt-1\">\n                  <AlertTriangle className=\"h-3 w-3\" />\n                  High-value transfer will require security verification\n                </p>\n              )}\n            </div>\n\n            <Button type=\"submit\" className=\"w-full\">\n              Continue Transfer\n            </Button>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex justify-center border-t pt-4\">\n          <p className=\"text-xs text-gray-500 text-center\">\n            Transfers are subject to security verification. Large transfers may require additional verification steps.\n          </p>\n        </CardFooter>\n      </Card>\n\n      {/* Security Check Dialog */}\n      <Dialog open={showSecurityCheck} onOpenChange={setShowSecurityCheck}>\n        <DialogContent className=\"sm:max-w-2xl\">\n          <DialogHeader>\n            <div className=\"flex items-center gap-2\">\n              <AlertTriangle className=\"h-5 w-5 text-orange-500\" />\n              <DialogTitle>Fraud Prevention Security Check</DialogTitle>\n            </div>\n            <DialogDescription>\n              Please answer these security questions before proceeding with your transfer\n            </DialogDescription>\n            <div className=\"mt-4\">\n              <div className=\"flex justify-between text-sm text-gray-600 mb-2\">\n                <span>\n                  Question {currentQuestion + 1} of {questions.length}\n                </span>\n                <span>{Math.round((currentQuestion / questions.length) * 100)}% Complete</span>\n              </div>\n              <Progress value={(currentQuestion / questions.length) * 100} className=\"h-2\" />\n            </div>\n          </DialogHeader>\n\n          <div className=\"space-y-6 py-4\">\n            <div className=\"p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500\">\n              <Label className=\"text-base font-medium text-blue-900\">{questions[currentQuestion].question}</Label>\n            </div>\n\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"answer\" className=\"text-sm font-medium\">\n                Your Answer\n              </Label>\n              <Input\n                id=\"answer\"\n                value={currentAnswer}\n                onChange={(e) => setCurrentAnswer(e.target.value)}\n                placeholder={questions[currentQuestion].placeholder}\n                className=\"min-h-[100px]\"\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\" && e.ctrlKey) {\n                    handleSubmitAnswer()\n                  }\n                }}\n              />\n              <p className=\"text-xs text-gray-500\">Press Ctrl+Enter to submit or click the button below</p>\n            </div>\n          </div>\n\n          <DialogFooter className=\"flex-col sm:flex-row sm:justify-between gap-2\">\n            <Alert className=\"sm:max-w-[70%]\">\n              <AlertTriangle className=\"h-4 w-4\" />\n              <AlertDescription className=\"text-xs\">\n                <strong>Remember:</strong> Legitimate organizations will never pressure you to transfer money quickly or\n                ask you to keep transfers secret.\n              </AlertDescription>\n            </Alert>\n\n            <div className=\"flex gap-2\">\n              {currentQuestion > 0 && (\n                <Button\n                  variant=\"outline\"\n                  onClick={() => {\n                    setCurrentQuestion(currentQuestion - 1)\n                    setCurrentAnswer(answers[currentQuestion - 1] || \"\")\n                    setAnswers(answers.slice(0, -1))\n                  }}\n                >\n                  Previous\n                </Button>\n              )}\n              <Button onClick={handleSubmitAnswer} disabled={!currentAnswer.trim()}>\n                {currentQuestion === questions.length - 1 ? \"Complete\" : \"Next\"}\n              </Button>\n            </div>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n\n      {/* Results Dialog */}\n      <Dialog open={showResult} onOpenChange={setShowResult}>\n        <DialogContent className=\"sm:max-w-2xl\">\n          <DialogHeader>\n            <div className=\"flex justify-center mb-4\">{getRiskIcon()}</div>\n            <DialogTitle className={`text-2xl text-center ${getRiskColor()}`}>\n              Fraud Risk Assessment Complete\n            </DialogTitle>\n            <DialogDescription className=\"text-center\">\n              Based on your answers, here's our security recommendation\n            </DialogDescription>\n          </DialogHeader>\n\n          <div className=\"space-y-6 py-4\">\n            <Alert\n              className={`border-l-4 ${\n                riskLevel === \"high\"\n                  ? \"border-red-500 bg-red-50\"\n                  : riskLevel === \"medium\"\n                    ? \"border-yellow-500 bg-yellow-50\"\n                    : \"border-green-500 bg-green-50\"\n              }`}\n            >\n              <AlertDescription className=\"text-sm\">\n                <div>\n                  <strong\n                    className={\n                      riskLevel === \"high\"\n                        ? \"text-red-700\"\n                        : riskLevel === \"medium\"\n                          ? \"text-yellow-700\"\n                          : \"text-green-700\"\n                    }\n                  >\n                    {riskLevel.toUpperCase()} RISK DETECTED\n                  </strong>\n                  <p className=\"mt-2\">\n                    {riskLevel === \"high\" &&\n                      \"We strongly recommend you DO NOT proceed with this transfer. This situation shows multiple red flags commonly associated with fraud. Please contact your bank or local authorities if you feel pressured.\"}\n                    {riskLevel === \"medium\" &&\n                      \"Please exercise caution. We recommend verifying the recipient through multiple official channels before proceeding. Take time to double-check all details.\"}\n                    {riskLevel === \"low\" &&\n                      \"Your transfer appears to be legitimate based on the information provided. However, always remain vigilant and trust your instincts.\"}\n                  </p>\n                </div>\n              </AlertDescription>\n            </Alert>\n\n            <div className=\"space-y-4\">\n              <h3 className=\"font-semibold\">Your Responses:</h3>\n              {questions.map((q, index) => (\n                <div key={q.id} className=\"border-l-2 border-gray-200 pl-4\">\n                  <p className=\"text-sm font-medium text-gray-700\">{q.question}</p>\n                  <p className=\"text-sm text-gray-600 mt-1\">{answers[index]}</p>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <DialogFooter>\n            <div className=\"flex gap-4 w-full\">\n              <Button onClick={resetSystem} variant=\"outline\" className=\"flex-1\">\n                New Transfer\n              </Button>\n              <Button\n                onClick={handleProceedTransfer}\n                className=\"flex-1\"\n                variant={riskLevel === \"high\" ? \"destructive\" : \"default\"}\n              >\n                {riskLevel === \"high\" ? \"Cancel Transfer\" : \"Proceed Carefully\"}\n              </Button>\n            </div>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </div>\n  )\n}\n","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"../../lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline: \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />\n  },\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n","import * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\n\nconst Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"rounded-lg border bg-card text-card-foreground shadow-sm\", className)} {...props} />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex flex-col space-y-1.5 p-6\", className)} {...props} />\n  ),\n)\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  ({ className, ...props }, ref) => (\n    <h3 ref={ref} className={cn(\"text-2xl font-semibold leading-none tracking-tight\", className)} {...props} />\n  ),\n)\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => (\n    <p ref={ref} className={cn(\"text-sm text-muted-foreground\", className)} {...props} />\n  ),\n)\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />,\n)\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex items-center p-6 pt-0\", className)} {...props} />\n  ),\n)\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n","import * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {\n  return (\n    <input\n      type={type}\n      className={cn(\n        \"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\nInput.displayName = \"Input\"\n\nexport { Input }\n","import * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\n\nconst Label = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(\n  ({ className, ...props }, ref) => (\n    <label\n      ref={ref}\n      className={cn(\n        \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nLabel.displayName = \"Label\"\n\nexport { Label }\n","import * as React from \"react\"\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\nimport { cn } from \"../../lib/utils\"\n\nconst Progress = React.forwardRef<\n  React.ElementRef<typeof ProgressPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, value, ...props }, ref) => (\n  <ProgressPrimitive.Root\n    ref={ref}\n    className={cn(\"relative h-4 w-full overflow-hidden rounded-full bg-secondary\", className)}\n    {...props}\n  >\n    <ProgressPrimitive.Indicator\n      className=\"h-full w-full flex-1 bg-primary transition-all\"\n      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n    />\n  </ProgressPrimitive.Root>\n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n","import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"../../lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n        destructive: \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n)\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div ref={ref} role=\"alert\" className={cn(alertVariants({ variant }), className)} {...props} />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"text-sm [&_p]:leading-relaxed\", className)} {...props} />\n  ),\n)\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertDescription }\n","import * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { cn } from \"../../lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-background/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\",\n      className,\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg 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-lg\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex flex-col space-y-1.5 text-center sm:text-left\", className)} {...props} />\n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", className)} {...props} />\n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description ref={ref} className={cn(\"text-sm text-muted-foreground\", className)} {...props} />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"],"names":[],"mappings":";;;;;;;AACO;AACP;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACO;;AC1BP;AACA;AACA;AACA;AACO;AACP;AACA;AACA;;ACRA;AACA;AACA;AACA;AACA;AACA;;ACLO;AACP;AACA;;ACFA;;ACCA;;ACAA;AACA;AACA;AACA;;ACHA;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;"}