snapshot of https://github.com/tldraw/tldraw.git (main, 2026-09-23; blobs > 131072B omitted)

apps/docs/components/content/callout.tsx

@@ -0,0 +1,44 @@
+import {
+	ExclamationCircleIcon,
+	ExclamationTriangleIcon,
+	InformationCircleIcon,
+} from '@heroicons/react/20/solid'
+import { cn } from '@/utils/cn'
+
+export function Callout({
+	type = 'info',
+	children,
+}: {
+	type?: 'info' | 'warning' | 'critical' | 'quote'
+	children: React.ReactNode
+}) {
+	return (
+		<div
+			className={cn(
+				'py-1 -mx-5 md:mx-0',
+				type === 'info' && 'md:px-1 md:rounded-2xl bg-blue-50 dark:bg-blue-950/75',
+				type === 'warning' && 'md:px-1 md:rounded-2xl bg-amber-50 dark:bg-amber-900/50',
+				type === 'critical' && 'md:px-1 md:rounded-2xl bg-rose-50 dark:bg-rose-950/50'
+			)}
+		>
+			<div
+				className={cn(
+					'flex flex-col sm:flex-row gap-4 w-full p-5 ',
+					type === 'quote' && 'border-right border-zinc-400 dark:border-zinc-700 border-l-4',
+					type === 'info' && 'md:rounded-xl shadow dark:bg-blue-900/25',
+					type === 'warning' && 'md:rounded-xl shadow dark:bg-amber-900/25',
+					type === 'critical' && 'md:rounded-xl shadow dark:bg-rose-900/25'
+				)}
+			>
+				{type === 'info' && <InformationCircleIcon className="size-5 shrink-0 text-blue-500" />}
+				{type === 'warning' && (
+					<ExclamationTriangleIcon className="size-5 shrink-0 text-amber-500 dark:text-amber-400" />
+				)}
+				{type === 'critical' && (
+					<ExclamationCircleIcon className="size-5 shrink-0 text-rose-500 dark:text-rose-400" />
+				)}
+				<div className="-mt-0.5 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">{children}</div>
+			</div>
+		</div>
+	)
+}