@the-portland-company/shell 0.75.0 → 0.75.2

package/dist/index.cjs

@@ -802,7 +802,7 @@ var SYSTEM_MONO = 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "
 var fonts = {
   heading: `var(--font-family, ${SYSTEM_SANS})`,
   body: `var(--font-family, ${SYSTEM_SANS})`,
-  mono: `var(--type-mono-family, ${SYSTEM_MONO})`
+  mono: `var(--font-mono, ${SYSTEM_MONO})`
 };
 var politogyTheme = react.extendTheme({
   config,
@@ -851,6 +851,11 @@ function Card({
 function FormColumn({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-shell-form-column": "", className: clsx2__default.default("w-full max-w-[960px]", className), children });
 }
+var MODE_EYEBROW_LABEL = {
+  relationship: "Relationship mode",
+  campaign: "Campaign mode",
+  petition: "Petition mode"
+};
 var resolveMaxWidthClass = (maxW) => {
   if (maxW === "full") return "max-w-none";
   if (maxW === "container.lg") return "max-w-6xl";
@@ -859,6 +864,10 @@ var resolveMaxWidthClass = (maxW) => {
 };
 function PageHeader({
   title,
+  mode,
+  eyebrow,
+  showEyebrow = true,
+  subtitle,
   breadcrumbs = [],
   actions = null,
   tabBar = null,
@@ -873,7 +882,8 @@ function PageHeader({
   if (breadcrumbsWithoutCurrent.length > 1 && normalizedTitle && last && last.label.trim().toLowerCase() === normalizedTitle) {
     breadcrumbsWithoutCurrent.pop();
   }
-  if (!title && breadcrumbsWithoutCurrent.length === 0 && !actions && !tabBar) {
+  const eyebrowText = showEyebrow ? eyebrow ?? (mode ? MODE_EYEBROW_LABEL[mode] : void 0) : void 0;
+  if (!title && !eyebrowText && breadcrumbsWithoutCurrent.length === 0 && !actions && !tabBar) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -886,7 +896,27 @@ function PageHeader({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx2__default.default("w-full px-4", maxWClass), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-nowrap items-start justify-between gap-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-            title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-lg font-semibold text-white", children: title }) }) : null,
+            eyebrowText ? /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "truncate text-[11px] font-bold uppercase leading-[1.2] tracking-[0.09em]",
+                style: { color: "var(--mode-accent, var(--color-accent, #E63946))" },
+                children: eyebrowText
+              }
+            ) : null,
+            title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "truncate font-bold text-white",
+                style: {
+                  fontFamily: "var(--font-family, ui-sans-serif, system-ui, sans-serif)",
+                  fontSize: "var(--type-h2-size, 1.875rem)",
+                  lineHeight: "var(--type-h2-line-height, 1.25)"
+                },
+                children: title
+              }
+            ) }) : null,
+            subtitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 truncate text-[15px] text-[color:var(--color-g4,#929599)]", children: subtitle }) : null,
             breadcrumbsWithoutCurrent.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
               "nav",
               {