Grabbed dndbeyond's source code

```
~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js
```

ddb_main/node_modules/@dndbeyond/ttui/components/Toast/Toast.tsx

@@ -0,0 +1,66 @@
+import clsx from "clsx";
+import { useEffect, useRef, type DialogHTMLAttributes, type FC } from "react";
+import styles from "./Toast.module.css";
+
+/**
+ * Toast Usage
+ * const [open, setOpen] = useState(false);
+ *
+ * const onClick = () => {
+ *  setOpen(true);
+ * };
+ *
+ * const onClose = () => {
+ *  setOpen(false);
+ * };
+ *
+ * <Button onClick={onClick}>Toast</Button>
+ * <Toast
+ *  open={open}
+ *  autoHideDuration={6000}
+ *  onClose={onClose}
+ *  message="Note Archived"
+ * />
+ **/
+
+interface ToastProps extends DialogHTMLAttributes<HTMLDialogElement> {
+  align?: "left" | "right";
+  autoHideDuration?: number;
+  onClose: () => void;
+}
+
+let timer: NodeJS.Timeout | undefined;
+
+export const Toast: FC<ToastProps> = ({
+  align = "left",
+  autoHideDuration = 6000,
+  children,
+  className,
+  onClose,
+  open,
+  ...props
+}) => {
+  const ref = useRef<HTMLDialogElement | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      // Prevent the Toast from grabbing focus
+      ref.current?.setAttribute("open", "open");
+      timer = setTimeout(onClose, autoHideDuration);
+    } else {
+      ref.current?.close?.();
+      timer = undefined;
+    }
+    return () => clearTimeout(timer);
+  }, [autoHideDuration, onClose, open]);
+
+  return (
+    <dialog
+      className={clsx([styles.toast, styles[align], className])}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </dialog>
+  );
+};