@adecore/ui 0.50.7 → 0.51.0

package/dist/Banner.js

@@ -2,7 +2,7 @@ import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 import { Icon } from "./Icon.js";
 import { Surface } from "./Surface.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const TONE = {
   attention: 'text-status-needs-you',
   error: 'text-status-error',
@@ -24,44 +24,50 @@ export function Banner(t0) {
   const placement = t1 === undefined ? "overlay" : t1;
   const t2 = TONE[tone];
   let t3;
-  if ($[0] !== t2) {
-    t3 = clsx("shrink-0", t2);
-    $[0] = t2;
-    $[1] = t3;
+  if ($[0] !== icon || $[1] !== t2) {
+    t3 = /*#__PURE__*/_jsx("span", {
+      className: "flex h-(--text-sm--line-height) shrink-0 items-center",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: icon,
+        size: 16,
+        className: t2
+      })
+    });
+    $[0] = icon;
+    $[1] = t2;
+    $[2] = t3;
   } else {
-    t3 = $[1];
+    t3 = $[2];
   }
   let t4;
-  if ($[2] !== icon || $[3] !== t3) {
-    t4 = /*#__PURE__*/_jsx(Icon, {
-      icon: icon,
-      size: 16,
-      className: t3
+  if ($[3] !== message) {
+    t4 = /*#__PURE__*/_jsx("span", {
+      className: "min-w-0 grow",
+      children: message
     });
-    $[2] = icon;
-    $[3] = t3;
+    $[3] = message;
     $[4] = t4;
   } else {
     t4 = $[4];
   }
   let t5;
-  if ($[5] !== message) {
-    t5 = /*#__PURE__*/_jsx("span", {
-      className: "grow",
-      children: message
+  if ($[5] !== t3 || $[6] !== t4) {
+    t5 = /*#__PURE__*/_jsxs("span", {
+      className: "flex min-w-0 grow items-start gap-3",
+      children: [t3, t4]
     });
-    $[5] = message;
-    $[6] = t5;
+    $[5] = t3;
+    $[6] = t4;
+    $[7] = t5;
   } else {
-    t5 = $[6];
+    t5 = $[7];
   }
   let t6;
-  if ($[7] !== children || $[8] !== t4 || $[9] !== t5) {
+  if ($[8] !== children || $[9] !== t5) {
     t6 = /*#__PURE__*/_jsxs(_Fragment, {
-      children: [t4, t5, children]
+      children: [t5, children]
     });
-    $[7] = children;
-    $[8] = t4;
+    $[8] = children;
     $[9] = t5;
     $[10] = t6;
   } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.50.7",
+  "version": "0.51.0",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/Banner.tsx

@@ -34,8 +34,13 @@ export interface BannerProps {
 export function Banner({ icon, tone, message, children, placement = 'overlay', className, ref }: BannerProps) {
     const line = (
         <>
-            <Icon icon={icon} size={16} className={clsx('shrink-0', TONE[tone])} />
-            <span className="grow">{message}</span>
+            {/* The mark sits at the first line, so a message that wraps does not pull it down to its middle. */}
+            <span className="flex min-w-0 grow items-start gap-3">
+                <span className="flex h-(--text-sm--line-height) shrink-0 items-center">
+                    <Icon icon={icon} size={16} className={TONE[tone]} />
+                </span>
+                <span className="min-w-0 grow">{message}</span>
+            </span>
             {children}
         </>
     );