@trading-game/design-intelligence-layer 0.17.0 → 0.17.1

package/dist/index.js

@@ -456,7 +456,7 @@ function Alert(_a) {
     }, props), {
       children: [
         iconColumn,
-        /* @__PURE__ */ jsx4("div", { className: "col-span-2 col-start-2 row-start-1", children: body }),
+        /* @__PURE__ */ jsx4("div", { className: "col-start-2 row-start-1 min-w-0", children: body }),
         /* @__PURE__ */ jsx4("div", { className: "col-start-3 row-start-1", children: closeButton }),
         actions && actions.length > 0 ? /* @__PURE__ */ jsx4("div", { className: "col-span-3 col-start-2 row-start-2 mt-2 flex flex-wrap items-center justify-start gap-2", children: actions.slice(0, 2).map((node, i) => /* @__PURE__ */ jsx4(React.Fragment, { children: wrapAction(node, buttonVariant) }, i)) }) : null
       ]
@@ -821,9 +821,9 @@ function Badge(_a) {
 import * as React2 from "react";
 import { Gift, X as X2 } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var SURFACE_CLASSES = "w-full rounded-md border border-primary/[0.16] bg-primary/[0.08] px-4 py-3.5";
+var SURFACE_CLASSES = "w-full rounded-sm border border-primary/[0.16] bg-primary/[0.08] px-4 py-3.5";
 function IconBadge({ glyph }) {
-  return /* @__PURE__ */ jsx9("span", { className: "inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-on-primary", children: glyph });
+  return /* @__PURE__ */ jsx9("span", { className: "inline-flex size-10 shrink-0 items-center justify-center rounded-xs bg-primary text-on-primary", children: glyph });
 }
 function Banner(_a) {
   var _b = _a, {
@@ -933,7 +933,11 @@ function Banner(_a) {
         "data-layout": "inline",
         "data-clickable": isClickable ? "true" : void 0,
         className: cn(
-          "grid items-center gap-x-4",
+          "grid gap-x-4",
+          // Single-line banners vertically-centre the row (icon + title);
+          // multi-line banners top-align so the leading icon sits next to
+          // the title instead of floating mid-body.
+          hasDescription ? "items-start" : "items-center",
           gridCols,
           rowTemplate,
           SURFACE_CLASSES,
@@ -958,8 +962,10 @@ function Banner(_a) {
       "data-layout": "card",
       "data-clickable": isClickable ? "true" : void 0,
       className: cn(
-        "relative grid grid-cols-[auto_1fr] grid-rows-[auto_auto] items-center gap-x-4 gap-y-3 pr-12",
+        // Card layout is always multi-row — top-align the icon with the title.
+        "relative grid grid-cols-[auto_1fr] grid-rows-[auto_auto] items-start gap-x-4 gap-y-3",
         SURFACE_CLASSES,
+        "pr-12",
         clickableClasses,
         className
       )