Sonner

1"use client"
2 
3import { useTheme } from "next-themes"
4import { Toaster as Sonner, type ToasterProps } from "sonner"
5import { Loader2Icon } from "lucide-react"
6 
7// USWDS-style filled circle icons (black background, white symbol)
8const InfoIcon = () => (
9  <svg className="size-6 shrink-0" viewBox="0 0 20 20" fill="none">
10    <circle cx="10" cy="10" r="10" fill="var(--treasury-ink)" />
11    <text x="10" y="14.5" textAnchor="middle" fill="white" fontSize="12" fontWeight="bold" fontFamily="system-ui">i</text>
12  </svg>
13)
14 
15const WarningIcon = () => (
16  <svg className="size-6 shrink-0" viewBox="0 0 20 20" fill="none">
17    <circle cx="10" cy="10" r="10" fill="var(--treasury-ink)" />
18    <text x="10" y="14.5" textAnchor="middle" fill="white" fontSize="13" fontWeight="bold" fontFamily="system-ui">!</text>
19  </svg>
20)
21 
22const ErrorIcon = () => (
23  <svg className="size-6 shrink-0" viewBox="0 0 20 20" fill="none">
24    <circle cx="10" cy="10" r="10" fill="var(--treasury-ink)" />
25    <path d="M7 7L13 13M13 7L7 13" stroke="white" strokeWidth="2" strokeLinecap="round" />
26  </svg>
27)
28 
29const SuccessIcon = () => (
30  <svg className="size-6 shrink-0" viewBox="0 0 20 20" fill="none">
31    <circle cx="10" cy="10" r="10" fill="var(--treasury-ink)" />
32    <path d="M6 10L9 13L14 7" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
33  </svg>
34)
35 
36const Toaster = ({ ...props }: ToasterProps) => {
37  const { theme = "system" } = useTheme()
38 
39  return (
40    <Sonner
41      theme={theme as ToasterProps["theme"]}
42      className="toaster group"
43      icons={{
44        success: <SuccessIcon />,
45        info: <InfoIcon />,
46        warning: <WarningIcon />,
47        error: <ErrorIcon />,
48        loading: <Loader2Icon className="size-5 animate-spin text-treasury-primary" />,
49      }}
50      style={
51        {
52          "--normal-bg": "var(--popover)",
53          "--normal-text": "var(--popover-foreground)",
54          "--normal-border": "var(--border)",
55        } as React.CSSProperties
56      }
57      toastOptions={{
58        unstyled: true,
59        classNames: {
60          toast: "flex items-center gap-3 w-full min-w-[360px] px-4 py-3 text-treasury-ink border-l-8 border-treasury-base-light bg-treasury-base-lightest shadow-sm",
61          title: "text-base font-normal",
62          description: "text-base text-treasury-ink",
63          actionButton: "bg-treasury-primary text-white px-3 py-1.5 text-sm font-medium hover:bg-treasury-primary-dark",
64// … truncated