Move banner to ui package

packages/ui/src/components/Banner.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+
+export interface BannerProps {
+  children: ReactNode;
+  className?: string;
+  color?: 'primary' | 'secondary' | 'success' | 'notice' | 'warning' | 'danger' | 'info';
+}
+
+export function Banner({ children, className, color }: BannerProps) {
+  return (
+    <div className="w-auto grid grid-rows-1 max-h-full flex-0">
+      <div
+        className={classNames(
+          className,
+          color && 'bg-surface',
+          `x-theme-banner--${color}`,
+          'border border-border border-dashed',
+          'px-4 py-2 rounded-lg select-auto cursor-auto',
+          'overflow-auto text-text',
+          'mb-auto', // Don't stretch all the way down if the parent is in grid or flexbox
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}