small tweaks

Author: mydea

docs/contributing/pages/components.mdx

@@ -20,6 +20,10 @@ This is a warning alert. Use these for items that MUST be well understood before
 This is an alert without title.
 </Alert>
 
+<Alert>
+This is a multi-line alert without title.  Use these for information that's critical to know; it's important for users to read, but won't cause a catastrophic problem if they don't read it. These include versions that introduce breaking changes or feature limitations. Use infrequently.
+</Alert>
+
 <Alert title="List">
 <ul>
 <li>Item 1</li>

src/components/alert/index.tsx

@@ -16,7 +16,7 @@ export function Alert({title, children, level = 'info'}: AlertProps) {
 
   return (
     <div className={`alert ${'alert-' + level}`} role="alert">
-      <Icon className='alert-icon' />
+      <Icon className="alert-icon" />
       <div className="alert-content">
         {title && <h5 className="alert-header">{title}</h5>}
         <div className="alert-body content-flush-bottom">{children}</div>
@@ -30,9 +30,5 @@ type NoteProps = {
 };
 
 export function Note({children}: NoteProps) {
-  return (
-    <div role="note" className="alert">
-      <div className="alert-body">{children}</div>
-    </div>
-  );
+  return <Alert>{children}</Alert>;
 }