fix: Vertically center Banner text content when action or close button is present

src/banner/banner.module.css

@@ -32,7 +32,7 @@
 
 .content {
     padding: var(--reactist-spacing-large);
-    align-items: flex-start;
+    align-items: center;
 }
 
 .title,
@@ -63,6 +63,11 @@
     display: block;
 }
 
+.icon {
+    align-self: flex-start;
+    padding-top: calc(var(--reactist-spacing-xsmall) / 2);
+}
+
 /* The close button is invisible in this resolution, so we're hiding the container to prevent flex-gap from making extra space */
 .icon:empty,
 .icon:has(.closeButton:only-child) {

src/banner/banner.tsx

@@ -166,7 +166,7 @@ const Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(
                         className={styles.topContent}
                         display="flex"
                         gap="small"
-                        alignItems="flexStart"
+                        alignItems="center"
                     >
                         <Box
                             className={styles.copy}