@moving-walls/design-system 1.0.10 → 1.0.12

package/dist/index.js

@@ -49203,28 +49203,52 @@ var AgGridTable = AgGridTableInner;
 
 function PageHeader(_a) {
   var title = _a.title,
-    subtitle = _a.subtitle,
+    description = _a.description,
+    subtitle = _a.subtitle;
+    _a.titleKey;
+    _a.descriptionKey;
+    var leftAction = _a.leftAction,
     actions = _a.actions,
     className = _a.className,
-    props = __rest$1(_a, ["title", "subtitle", "actions", "className"]);
+    props = __rest$1(_a, ["title", "description", "subtitle", "titleKey", "descriptionKey", "leftAction", "actions", "className"]);
+  var desc = description !== null && description !== void 0 ? description : subtitle;
+  var headerId = "page-header-".concat(title.toLowerCase().trim().split(/\s+/).join('-'));
+  var baseClass = 'bg-white flex flex-col justify-start items-start gap-4 border-b border-container-border pt-4 pb-3 dark:bg-mw-neutral-900 dark:border-mw-neutral-800';
+  var combinedClass = className ? "".concat(baseClass, " ").concat(className) : baseClass;
   return require$$1.jsx("div", Object.assign({
-    className: clsx('pb-4 mb-6 border-b border-mw-neutral-200 dark:border-mw-neutral-700', className)
+    id: headerId,
+    className: combinedClass
   }, props, {
     children: require$$1.jsxs("div", {
-      className: "flex flex-row items-center justify-between px-6",
+      className: "self-stretch px-4 inline-flex justify-start items-start",
       children: [require$$1.jsxs("div", {
-        className: "space-y-1",
-        children: [require$$1.jsx("h1", {
-          className: "text-xl font-semibold leading-[2rem] tracking-tight text-mw-neutral-900 dark:text-white",
-          children: title
-        }), subtitle && (/* Figma: 14px font, 400 weight, 18px line-height, #717171 */
-        require$$1.jsx("p", {
-          className: "text-sm leading-[1.125rem] text-mw-neutral-500 dark:text-mw-neutral-400",
-          children: subtitle
-        }))]
-      }), actions && require$$1.jsx("div", {
-        className: "flex flex-wrap items-center gap-2",
-        children: actions
+        className: "pt-2 flex justify-start items-start gap-2",
+        children: [leftAction && require$$1.jsx("div", {
+          id: "".concat(headerId, "-left-action"),
+          className: "p-2 flex justify-center items-center gap-1",
+          children: require$$1.jsx("div", {
+            className: "relative overflow-hidden",
+            children: leftAction
+          })
+        }), require$$1.jsxs("div", {
+          className: "self-stretch inline-flex flex-col justify-start items-start gap-1",
+          children: [require$$1.jsx("div", {
+            id: "".concat(headerId, "-title"),
+            className: "self-stretch justify-start text-xl font-semibold leading-loose text-mw-neutral-900 dark:text-white",
+            children: title
+          }), desc && require$$1.jsx("div", {
+            id: "".concat(headerId, "-description"),
+            className: "self-stretch justify-start text-neutral-500 text-sm font-normal leading-none dark:text-mw-neutral-400",
+            children: desc
+          })]
+        })]
+      }), require$$1.jsx("div", {
+        id: "".concat(headerId, "-actions"),
+        className: "flex-1 self-stretch flex justify-end items-end gap-2",
+        children: actions && require$$1.jsx("div", {
+          className: "flex items-center gap-4",
+          children: actions
+        })
       })]
     })
   }));
@@ -57125,6 +57149,7 @@ exports.List = List;
 exports.ListItem = ListItem;
 exports.Loading = Loading;
 exports.MWBounceLoader = MWBounceLoader;
+exports.MWBrandLoader = MWBrandLoader;
 exports.MWDotsLoader = MWDotsLoader;
 exports.MWHeartbeatLoader = MWHeartbeatLoader;
 exports.MWLoader = MWLoader;