Alert

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5 
6// USWDS-style filled circle icons (black background, white symbol)
7const AlertInfoIcon = () => (
8  <svg className="size-7 shrink-0" viewBox="0 0 20 20" fill="none">
9    <circle cx="10" cy="10" r="10" fill="var(--treasury-ink)" />
10    <text x="10" y="14.5" textAnchor="middle" fill="white" fontSize="12" fontWeight="bold" fontFamily="system-ui">i</text>
11  </svg>
12)
13 
14const AlertWarningIcon = () => (
15  <svg className="size-7 shrink-0" viewBox="0 0 20 20" fill="none">
16    <circle cx="10" cy="10" r="10" fill="var(--treasury-ink)" />
17    <text x="10" y="14.5" textAnchor="middle" fill="white" fontSize="13" fontWeight="bold" fontFamily="system-ui">!</text>
18  </svg>
19)
20 
21const AlertErrorIcon = () => (
22  <svg className="size-7 shrink-0" viewBox="0 0 20 20" fill="none">
23    <circle cx="10" cy="10" r="10" fill="var(--treasury-ink)" />
24    <path d="M7 7L13 13M13 7L7 13" stroke="white" strokeWidth="2" strokeLinecap="round" />
25  </svg>
26)
27 
28const AlertSuccessIcon = () => (
29  <svg className="size-7 shrink-0" viewBox="0 0 20 20" fill="none">
30    <circle cx="10" cy="10" r="10" fill="var(--treasury-ink)" />
31    <path d="M6 10L9 13L14 7" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
32  </svg>
33)
34 
35const alertVariants = cva(
36  "flex gap-3 border-l-8 px-4 py-3 text-left text-sm w-full relative group/alert text-treasury-ink",
37  {
38    variants: {
39      variant: {
40        default: "border-l-treasury-base bg-treasury-base-lightest",
41        info: "border-l-treasury-primary-light bg-treasury-primary-lightest",
42        warning: "border-l-treasury-accent bg-treasury-accent-lightest",
43        error: "border-l-treasury-warning bg-treasury-warning-lightest",
44        success: "border-l-treasury-secondary bg-treasury-secondary-lightest",
45      },
46    },
47    defaultVariants: {
48      variant: "default",
49    },
50  }
51)
52 
53function Alert({
54  className,
55  variant,
56  children,
57  ...props
58}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
59  const IconComponent = {
60    default: null,
61    info: AlertInfoIcon,
62    warning: AlertWarningIcon,
63    error: AlertErrorIcon,
64    success: AlertSuccessIcon,
65  }[variant || "default"]
66 
67  return (
68    <div
69      data-slot="alert"
70      role="alert"
71      className={cn(alertVariants({ variant }), className)}
72      {...props}
73    >
74      {IconComponent && <IconComponent />}
75// … truncated