@homebound/beam 3.11.0 → 3.12.0

package/dist/index.js

@@ -21142,11 +21142,41 @@ function MaxLines({
   ] });
 }
 
+// src/components/PageHeader.tsx
+import { trussProps as trussProps84 } from "@homebound/truss/runtime";
+import { jsx as jsx167, jsxs as jsxs87 } from "react/jsx-runtime";
+function PageHeader2(props) {
+  const {
+    title,
+    rightSlot,
+    ...otherProps
+  } = props;
+  const tid = useTestIds(otherProps, "pageHeader");
+  return /* @__PURE__ */ jsx167("header", { ...tid, ...trussProps84({
+    display: "df",
+    flexDirection: "fdc",
+    paddingTop: "pt3",
+    paddingRight: "pr3",
+    paddingLeft: "pl3",
+    borderBottomStyle: "bbs_solid",
+    borderBottomWidth: "bbw_1px",
+    borderColor: ["bc_var", {
+      "--borderColor": "var(--b-surface-separator)"
+    }],
+    backgroundColor: ["bgColor_var", {
+      "--backgroundColor": "var(--b-surface)"
+    }]
+  }), children: /* @__PURE__ */ jsxs87("div", { className: "df jcsb mb2 w100 gap1", children: [
+    /* @__PURE__ */ jsx167("div", { children: /* @__PURE__ */ jsx167("h1", { ...tid.title, className: "fw6 fz_20px lh_28px", children: title }) }),
+    /* @__PURE__ */ jsx167("div", { children: rightSlot })
+  ] }) });
+}
+
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver7 } from "@react-aria/utils";
 import { useCallback as useCallback27, useMemo as useMemo49, useRef as useRef53, useState as useState48 } from "react";
-import { trussProps as trussProps84, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
-import { jsx as jsx167, jsxs as jsxs87 } from "react/jsx-runtime";
+import { trussProps as trussProps85, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
+import { jsx as jsx168, jsxs as jsxs88 } from "react/jsx-runtime";
 function ScrollShadows(props) {
   const {
     children,
@@ -21236,7 +21266,7 @@ function ScrollShadows(props) {
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ jsxs87("div", { ...trussProps84({
+  return /* @__PURE__ */ jsxs88("div", { ...trussProps85({
     display: "df",
     flexDirection: ["fd_var", {
       "--flexDirection": maybeCssVar46(!horizontal ? "column" : "row")
@@ -21252,7 +21282,7 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ jsx167("div", { ...trussProps84({
+    /* @__PURE__ */ jsx168("div", { ...trussProps85({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -21260,7 +21290,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx167("div", { ...trussProps84({
+    /* @__PURE__ */ jsx168("div", { ...trussProps85({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -21268,7 +21298,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx167("div", { ...trussProps84({
+    /* @__PURE__ */ jsx168("div", { ...trussProps85({
       ...xss,
       ...{
         overflow: "oa",
@@ -21314,25 +21344,25 @@ function useSideNavLinkGroupExpanded(linkGroup) {
 }
 
 // src/components/SideNav/SideNavLinkGroup.tsx
-import { Fragment as Fragment38, jsx as jsx168 } from "react/jsx-runtime";
+import { Fragment as Fragment38, jsx as jsx169 } from "react/jsx-runtime";
 function SideNavLinkGroupView(props) {
   const { linkGroup, panelCollapsed } = props;
   const tid = useTestIds(props, "linkGroup");
   if (panelCollapsed) {
-    return /* @__PURE__ */ jsx168(Fragment38, { children: linkGroup.links.map((link) => /* @__PURE__ */ jsx168(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid.link }, link.label)) });
+    return /* @__PURE__ */ jsx169(Fragment38, { children: linkGroup.links.map((link) => /* @__PURE__ */ jsx169(NavLink, { variant: "side", ...link, iconOnly: !!link.icon, ...tid.link }, link.label)) });
   }
-  return /* @__PURE__ */ jsx168(SideNavLinkGroupDisclosure, { ...props });
+  return /* @__PURE__ */ jsx169(SideNavLinkGroupDisclosure, { ...props });
 }
 function SideNavLinkGroupDisclosure(props) {
   const { linkGroup } = props;
   const { expanded, onToggle } = useSideNavLinkGroupExpanded(linkGroup);
   const tid = useTestIds(props, "linkGroup");
-  return /* @__PURE__ */ jsx168(NavGroup, { label: linkGroup.label, links: linkGroup.links, expanded, onClick: onToggle, ...tid });
+  return /* @__PURE__ */ jsx169(NavGroup, { label: linkGroup.label, links: linkGroup.links, expanded, onClick: onToggle, ...tid });
 }
 
 // src/components/SideNav/SideNavSectionView.tsx
-import { trussProps as trussProps85 } from "@homebound/truss/runtime";
-import { jsx as jsx169, jsxs as jsxs88 } from "react/jsx-runtime";
+import { trussProps as trussProps86 } from "@homebound/truss/runtime";
+import { jsx as jsx170, jsxs as jsxs89 } from "react/jsx-runtime";
 function SideNavSectionView(props) {
   const {
     section,
@@ -21341,7 +21371,7 @@ function SideNavSectionView(props) {
     ...scopeProps
   } = props;
   const tid = useTestIds(scopeProps);
-  return /* @__PURE__ */ jsxs88("div", { ...trussProps85({
+  return /* @__PURE__ */ jsxs89("div", { ...trussProps86({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt2",
@@ -21354,7 +21384,7 @@ function SideNavSectionView(props) {
       paddingBottom: "pb2"
     } : {}
   }), ...tid, children: [
-    section.label && !panelCollapsed && /* @__PURE__ */ jsx169("div", { ...trussProps85({
+    section.label && !panelCollapsed && /* @__PURE__ */ jsx170("div", { ...trussProps86({
       fontWeight: "fw6",
       fontSize: "fz_10px",
       lineHeight: "lh_14px",
@@ -21366,7 +21396,7 @@ function SideNavSectionView(props) {
       paddingBottom: "pb1",
       textTransform: "ttu"
     }), ...tid.label, children: section.label }),
-    /* @__PURE__ */ jsx169(SideNavItems, { ...scopeProps, items: section.items, panelCollapsed })
+    /* @__PURE__ */ jsx170(SideNavItems, { ...scopeProps, items: section.items, panelCollapsed })
   ] });
 }
 
@@ -21393,13 +21423,13 @@ function entryHasIcons(item) {
 }
 
 // src/components/SideNav/SideNavItems.tsx
-import { Fragment as Fragment39, jsx as jsx170 } from "react/jsx-runtime";
+import { Fragment as Fragment39, jsx as jsx171 } from "react/jsx-runtime";
 function SideNavItems(props) {
   const { items, panelCollapsed } = props;
   const tid = useTestIds(props, "sideNav");
-  return /* @__PURE__ */ jsx170(Fragment39, { children: items.map((item, idx) => {
+  return /* @__PURE__ */ jsx171(Fragment39, { children: items.map((item, idx) => {
     if (isSideNavLink(item)) {
-      return /* @__PURE__ */ jsx170(
+      return /* @__PURE__ */ jsx171(
         NavLink,
         {
           variant: "side",
@@ -21411,7 +21441,7 @@ function SideNavItems(props) {
       );
     }
     if (isSideNavLinkGroup(item)) {
-      return /* @__PURE__ */ jsx170(
+      return /* @__PURE__ */ jsx171(
         SideNavLinkGroupView,
         {
           linkGroup: item,
@@ -21421,7 +21451,7 @@ function SideNavItems(props) {
         sideNavItemKey(item)
       );
     }
-    return /* @__PURE__ */ jsx170(
+    return /* @__PURE__ */ jsx171(
       SideNavSectionView,
       {
         section: item,
@@ -21443,7 +21473,7 @@ import {
   useRef as useRef54,
   useState as useState50
 } from "react";
-import { jsx as jsx171 } from "react/jsx-runtime";
+import { jsx as jsx172 } from "react/jsx-runtime";
 var SIDE_NAV_LAYOUT_STATE_STORAGE_KEY = "beam.sideNavLayout.navState";
 function loadStoredNavState() {
   try {
@@ -21490,7 +21520,7 @@ function SideNavLayoutProvider(props) {
       return next;
     });
   }, []);
-  return /* @__PURE__ */ jsx171(SideNavLayoutContext.Provider, { value: { navState, setNavState }, children: props.children });
+  return /* @__PURE__ */ jsx172(SideNavLayoutContext.Provider, { value: { navState, setNavState }, children: props.children });
 }
 function useSideNavLayoutContext() {
   return useContext22(SideNavLayoutContext) ?? { navState: "expanded", setNavState: () => {
@@ -21501,8 +21531,8 @@ function useHasSideNavLayoutProvider() {
 }
 
 // src/components/SideNav/SideNav.tsx
-import { trussProps as trussProps86 } from "@homebound/truss/runtime";
-import { jsx as jsx172, jsxs as jsxs89 } from "react/jsx-runtime";
+import { trussProps as trussProps87 } from "@homebound/truss/runtime";
+import { jsx as jsx173, jsxs as jsxs90 } from "react/jsx-runtime";
 function SideNav(props) {
   const {
     top,
@@ -21515,8 +21545,8 @@ function SideNav(props) {
   const tid = useTestIds(props, "sideNav");
   const panelCollapsed = navState === "collapse";
   const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
-  return /* @__PURE__ */ jsxs89("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    top !== void 0 && /* @__PURE__ */ jsx172("div", { ...trussProps86({
+  return /* @__PURE__ */ jsxs90("nav", { className: "df fdc h100 fs0", ...tid, children: [
+    top !== void 0 && /* @__PURE__ */ jsx173("div", { ...trussProps87({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -21527,7 +21557,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ jsx172("div", { ...trussProps86({
+    /* @__PURE__ */ jsx173("div", { ...trussProps87({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -21539,8 +21569,8 @@ function SideNav(props) {
       ...top === void 0 ? {
         paddingTop: "pt5"
       } : {}
-    }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ jsx172(SideNavItems, { items, panelCollapsed }) }),
-    footer !== void 0 && /* @__PURE__ */ jsx172("div", { ...trussProps86({
+    }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ jsx173(SideNavItems, { items, panelCollapsed }) }),
+    footer !== void 0 && /* @__PURE__ */ jsx173("div", { ...trussProps87({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -21617,8 +21647,8 @@ var snackbarId = 1;
 // src/components/Stepper.tsx
 import { useRef as useRef55 } from "react";
 import { useButton as useButton12, useFocusRing as useFocusRing15, useHover as useHover19 } from "react-aria";
-import { trussProps as trussProps87, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
-import { jsx as jsx173, jsxs as jsxs90 } from "react/jsx-runtime";
+import { trussProps as trussProps88, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
+import { jsx as jsx174, jsxs as jsxs91 } from "react/jsx-runtime";
 import { createElement as createElement4 } from "react";
 var __maybeInc14 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -21637,8 +21667,8 @@ function Stepper(props) {
   const maxStepWidth = 200;
   const minStepWidth = 100;
   const gap = 8;
-  return /* @__PURE__ */ jsxs90("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ jsx173("ol", { ...trussProps87({
+  return /* @__PURE__ */ jsxs91("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
+    /* @__PURE__ */ jsx174("ol", { ...trussProps88({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -21648,7 +21678,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ createElement4("li", { ...trussProps87({
+      return /* @__PURE__ */ createElement4("li", { ...trussProps88({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -21658,9 +21688,9 @@ function Stepper(props) {
         minWidth: ["mw_var", {
           "--minWidth": `${minStepWidth}px`
         }]
-      }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx173(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
+      }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx174(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ jsx173("div", { ...trussProps87({
+    /* @__PURE__ */ jsx174("div", { ...trussProps88({
       marginTop: "mt1",
       backgroundColor: "bgGray300",
       height: "h_4px",
@@ -21671,7 +21701,7 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ jsx173("div", { ...trussProps87({
+    }), children: /* @__PURE__ */ jsx174("div", { ...trussProps88({
       backgroundColor: "bgBlue600",
       transition: "transition_width_200ms",
       height: "h100",
@@ -21712,7 +21742,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ jsxs90("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps87({
+  return /* @__PURE__ */ jsxs91("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps88({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -21764,7 +21794,7 @@ function StepButton(props) {
     } : {},
     ...isFocusVisible ? focusRingStyles2 : {}
   }), ...tid[defaultTestId(label)], children: [
-    /* @__PURE__ */ jsx173("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ jsx173(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
+    /* @__PURE__ */ jsx174("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ jsx174(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
     label
   ] });
 }
@@ -21775,12 +21805,12 @@ function StepIcon({
   isCurrent = false
 }) {
   if (state === "error") {
-    return /* @__PURE__ */ jsx173(Icon, { icon: "errorCircle" });
+    return /* @__PURE__ */ jsx174(Icon, { icon: "errorCircle" });
   }
   if (state === "complete") {
-    return /* @__PURE__ */ jsx173(Icon, { icon: "check" });
+    return /* @__PURE__ */ jsx174(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ jsx173("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx173("div", { ...trussProps87({
+  return /* @__PURE__ */ jsx174("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx174("div", { ...trussProps88({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -21795,8 +21825,8 @@ function StepIcon({
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 import { createPortal as createPortal6 } from "react-dom";
-import { trussProps as trussProps88 } from "@homebound/truss/runtime";
-import { jsx as jsx174, jsxs as jsxs91 } from "react/jsx-runtime";
+import { trussProps as trussProps89 } from "@homebound/truss/runtime";
+import { jsx as jsx175, jsxs as jsxs92 } from "react/jsx-runtime";
 function SuperDrawerHeader(props) {
   const {
     hideControls
@@ -21813,20 +21843,20 @@ function SuperDrawerHeader(props) {
   const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
   const isDetail = currentContent !== firstContent;
   const tid = useTestIds({}, "superDrawerHeader");
-  return createPortal6(/* @__PURE__ */ jsxs91("div", { className: "df aic jcsb gap3", ...tid, children: [
-    isStructuredProps(props) ? /* @__PURE__ */ jsxs91("div", { className: "df jcsb aic gap2 fg1", children: [
-      /* @__PURE__ */ jsxs91("div", { className: "fg1 df aic gap2", children: [
-        /* @__PURE__ */ jsx174("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
+  return createPortal6(/* @__PURE__ */ jsxs92("div", { className: "df aic jcsb gap3", ...tid, children: [
+    isStructuredProps(props) ? /* @__PURE__ */ jsxs92("div", { className: "df jcsb aic gap2 fg1", children: [
+      /* @__PURE__ */ jsxs92("div", { className: "fg1 df aic gap2", children: [
+        /* @__PURE__ */ jsx175("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
         props.left
       ] }),
-      props.right && /* @__PURE__ */ jsx174("div", { className: "fs0", children: props.right })
-    ] }) : /* @__PURE__ */ jsx174("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ jsx174("div", { ...trussProps88({
+      props.right && /* @__PURE__ */ jsx175("div", { className: "fs0", children: props.right })
+    ] }) : /* @__PURE__ */ jsx175("div", { className: "fg1", children: props.children }),
+    !hideControls && /* @__PURE__ */ jsx175("div", { ...trussProps89({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
       } : {}
-    }), children: /* @__PURE__ */ jsx174(ButtonGroup, { buttons: [{
+    }), children: /* @__PURE__ */ jsx175(ButtonGroup, { buttons: [{
       icon: "chevronLeft",
       onClick: () => onPrevClick && onPrevClick(),
       disabled: !onPrevClick
@@ -21842,18 +21872,18 @@ function isStructuredProps(props) {
 }
 
 // src/components/SuperDrawer/ConfirmCloseModal.tsx
-import { Fragment as Fragment40, jsx as jsx175, jsxs as jsxs92 } from "react/jsx-runtime";
+import { Fragment as Fragment40, jsx as jsx176, jsxs as jsxs93 } from "react/jsx-runtime";
 function ConfirmCloseModal(props) {
   const { onClose, discardText = "Discard Changes", continueText = "Continue Editing" } = props;
   const { modalState } = useBeamContext();
   function closeModal() {
     modalState.current = void 0;
   }
-  return /* @__PURE__ */ jsxs92(Fragment40, { children: [
-    /* @__PURE__ */ jsx175(ModalHeader, { children: "Are you sure you want to cancel?" }),
-    /* @__PURE__ */ jsx175(ModalBody, { children: /* @__PURE__ */ jsx175("p", { children: "Any changes you've made so far will be lost." }) }),
-    /* @__PURE__ */ jsxs92(ModalFooter, { children: [
-      /* @__PURE__ */ jsx175(
+  return /* @__PURE__ */ jsxs93(Fragment40, { children: [
+    /* @__PURE__ */ jsx176(ModalHeader, { children: "Are you sure you want to cancel?" }),
+    /* @__PURE__ */ jsx176(ModalBody, { children: /* @__PURE__ */ jsx176("p", { children: "Any changes you've made so far will be lost." }) }),
+    /* @__PURE__ */ jsxs93(ModalFooter, { children: [
+      /* @__PURE__ */ jsx176(
         Button,
         {
           variant: "quaternary",
@@ -21864,7 +21894,7 @@ function ConfirmCloseModal(props) {
           }
         }
       ),
-      /* @__PURE__ */ jsx175(Button, { label: continueText, onClick: closeModal })
+      /* @__PURE__ */ jsx176(Button, { label: continueText, onClick: closeModal })
     ] })
   ] });
 }
@@ -21874,7 +21904,7 @@ import { motion as motion5 } from "framer-motion";
 
 // src/components/SuperDrawer/useSuperDrawer.tsx
 import { useMemo as useMemo50 } from "react";
-import { jsx as jsx176 } from "react/jsx-runtime";
+import { jsx as jsx177 } from "react/jsx-runtime";
 function useSuperDrawer() {
   const {
     drawerContentStack: contentStack,
@@ -21886,7 +21916,7 @@ function useSuperDrawer() {
   function canCloseDrawerDetails(i, doChange) {
     for (const canCloseDrawerDetail of canCloseDetailsChecks.current[i] ?? []) {
       if (!canClose(canCloseDrawerDetail)) {
-        openModal({ content: /* @__PURE__ */ jsx176(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
+        openModal({ content: /* @__PURE__ */ jsx177(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
         return false;
       }
     }
@@ -21906,7 +21936,7 @@ function useSuperDrawer() {
     for (const canCloseDrawer of canCloseChecks.current) {
       if (!canClose(canCloseDrawer)) {
         openModal({
-          content: /* @__PURE__ */ jsx176(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
+          content: /* @__PURE__ */ jsx177(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
         });
         return;
       }
@@ -22002,7 +22032,7 @@ function canClose(canCloseCheck) {
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
 import { mergeProps as mergeProps26 } from "@homebound/truss/runtime";
-import { Fragment as Fragment41, jsx as jsx177, jsxs as jsxs93 } from "react/jsx-runtime";
+import { Fragment as Fragment41, jsx as jsx178, jsxs as jsxs94 } from "react/jsx-runtime";
 var SuperDrawerContent = ({
   children,
   actions
@@ -22022,17 +22052,17 @@ var SuperDrawerContent = ({
   } = firstContent ?? {};
   function wrapWithMotionAndMaybeBack(children2) {
     if (kind === "open") {
-      return /* @__PURE__ */ jsx177(motion5.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
+      return /* @__PURE__ */ jsx178(motion5.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
     } else if (kind === "detail") {
-      return /* @__PURE__ */ jsxs93(motion5.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
+      return /* @__PURE__ */ jsxs94(motion5.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
         overflow: "auto"
       }, transition: {
         overflow: {
           delay: 0.3
         }
       }, children: [
-        /* @__PURE__ */ jsx177(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
-        /* @__PURE__ */ jsx177(motion5.div, { initial: {
+        /* @__PURE__ */ jsx178(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
+        /* @__PURE__ */ jsx178(motion5.div, { initial: {
           x: width2,
           opacity: 0
         }, animate: {
@@ -22050,7 +22080,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ jsx177(motion5.div, { ...mergeProps26(void 0, {
+      return /* @__PURE__ */ jsx178(motion5.div, { ...mergeProps26(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -22061,9 +22091,9 @@ var SuperDrawerContent = ({
       }) }, "content");
     }
   }
-  return /* @__PURE__ */ jsxs93(Fragment41, { children: [
+  return /* @__PURE__ */ jsxs94(Fragment41, { children: [
     wrapWithMotionAndMaybeBack(children),
-    actions && /* @__PURE__ */ jsx177("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ jsx177("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ jsx177(Button, { ...buttonProps }, i)) }) })
+    actions && /* @__PURE__ */ jsx178("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ jsx178("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ jsx178(Button, { ...buttonProps }, i)) }) })
   ] });
 };
 
@@ -22091,15 +22121,15 @@ import { useEffect as useEffect35, useMemo as useMemo51, useRef as useRef56, use
 import { mergeProps as mergeProps27, useFocusRing as useFocusRing16, useHover as useHover20 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link5, useLocation } from "react-router-dom";
-import { trussProps as trussProps89, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
-import { Fragment as Fragment42, jsx as jsx178, jsxs as jsxs94 } from "react/jsx-runtime";
+import { trussProps as trussProps90, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
+import { Fragment as Fragment42, jsx as jsx179, jsxs as jsxs95 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
     paddingTop: "pt3"
   };
-  return /* @__PURE__ */ jsxs94(Fragment42, { children: [
-    /* @__PURE__ */ jsx178(Tabs, { ...props }),
-    /* @__PURE__ */ jsx178(TabContent, { ...props, contentXss: {
+  return /* @__PURE__ */ jsxs95(Fragment42, { children: [
+    /* @__PURE__ */ jsx179(Tabs, { ...props }),
+    /* @__PURE__ */ jsx179(TabContent, { ...props, contentXss: {
       ...styles,
       ...props.contentXss
     } })
@@ -22124,7 +22154,7 @@ function TabContent(props) {
   return (
     // Using FullBleed to allow the tab's bgColor to extend to the edges of the <ScrollableContent /> element.
     // Omit the padding from `FullBleed` if the caller passes in the `paddingLeft/Right` styles.
-    /* @__PURE__ */ jsx178(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx178("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps89(contentXss), children: selectedTab.render() }) })
+    /* @__PURE__ */ jsx179(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx179("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps90(contentXss), children: selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -22166,7 +22196,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ jsxs94("div", { ...trussProps89({
+  return /* @__PURE__ */ jsxs95("div", { ...trussProps90({
     ...{
       display: "df",
       alignItems: "aic",
@@ -22182,11 +22212,11 @@ function Tabs(props) {
       }
     } : {}
   }), children: [
-    !hideTabs(props) && /* @__PURE__ */ jsx178("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
+    !hideTabs(props) && /* @__PURE__ */ jsx179("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
       const uniqueValue = uniqueTabValue(tab);
-      return /* @__PURE__ */ jsx178(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
+      return /* @__PURE__ */ jsx179(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
     }) }),
-    right && /* @__PURE__ */ jsx178("div", { className: "mla df aic gap1 pb1", children: right })
+    right && /* @__PURE__ */ jsx179("div", { className: "mla df aic gap1 pb1", children: right })
   ] });
 }
 function TabImpl(props) {
@@ -22230,7 +22260,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...trussProps89({
+    ...trussProps90({
       ...baseStyles5,
       ...active && activeStyles3,
       ...isDisabled && disabledStyles4,
@@ -22246,17 +22276,17 @@ function TabImpl(props) {
       onClick: () => onClick(tab.value)
     }
   });
-  const tabLabel = /* @__PURE__ */ jsxs94(Fragment42, { children: [
+  const tabLabel = /* @__PURE__ */ jsxs95(Fragment42, { children: [
     label,
-    (icon || endAdornment) && /* @__PURE__ */ jsx178("span", { className: "ml1", children: icon ? /* @__PURE__ */ jsx178(Icon, { icon }) : endAdornment })
+    (icon || endAdornment) && /* @__PURE__ */ jsx179("span", { className: "ml1", children: icon ? /* @__PURE__ */ jsx179(Icon, { icon }) : endAdornment })
   ] });
   return isDisabled ? maybeTooltip({
     title: resolveTooltip(disabled),
     placement: "top",
-    children: /* @__PURE__ */ jsx178("div", { ...tabProps, children: tabLabel })
-  }) : isRouteTab(tab) ? /* @__PURE__ */ jsx178(Link5, { ...mergeProps27(tabProps, interactiveProps, {
+    children: /* @__PURE__ */ jsx179("div", { ...tabProps, children: tabLabel })
+  }) : isRouteTab(tab) ? /* @__PURE__ */ jsx179(Link5, { ...mergeProps27(tabProps, interactiveProps, {
     className: "navLink"
-  }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ jsx178("button", { ...{
+  }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ jsx179("button", { ...{
     ...tabProps,
     ...interactiveProps
   }, children: tabLabel });
@@ -22359,12 +22389,12 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps90, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
-import { jsx as jsx179, jsxs as jsxs95 } from "react/jsx-runtime";
+import { trussProps as trussProps91, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
+import { jsx as jsx180, jsxs as jsxs96 } from "react/jsx-runtime";
 function SideNavLayout(props) {
   const hasProvider = useHasSideNavLayoutProvider();
-  if (hasProvider) return /* @__PURE__ */ jsx179(SideNavLayoutContent, { ...props });
-  return /* @__PURE__ */ jsx179(SideNavLayoutProvider, { children: /* @__PURE__ */ jsx179(SideNavLayoutContent, { ...props }) });
+  if (hasProvider) return /* @__PURE__ */ jsx180(SideNavLayoutContent, { ...props });
+  return /* @__PURE__ */ jsx180(SideNavLayoutProvider, { children: /* @__PURE__ */ jsx180(SideNavLayoutContent, { ...props }) });
 }
 function SideNavLayoutContent(props) {
   const {
@@ -22384,7 +22414,7 @@ function SideNavLayoutContent(props) {
   const railCollapsedWidthPx = 56;
   const collapsed = navState === "collapse";
   const showRail = sideNav !== void 0 && navState !== "hidden";
-  const rail = showRail && /* @__PURE__ */ jsxs95("div", { ...trussProps90({
+  const rail = showRail && /* @__PURE__ */ jsxs96("div", { ...trussProps91({
     ...{
       position: "absolute",
       top: "top0",
@@ -22430,12 +22460,12 @@ function SideNavLayoutContent(props) {
       }
     } : {}
   }), ...tid.sideNav, children: [
-    showCollapseToggle && /* @__PURE__ */ jsx179("div", { className: "absolute right2 top2", children: /* @__PURE__ */ jsx179(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
-    /* @__PURE__ */ jsx179("div", { className: "fg1 oya", ...tid.sideNavContent, children: sideNav })
+    showCollapseToggle && /* @__PURE__ */ jsx180("div", { className: "absolute right2 top2", children: /* @__PURE__ */ jsx180(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
+    /* @__PURE__ */ jsx180("div", { className: "fg1 oya", ...tid.sideNavContent, children: sideNav })
   ] });
-  return /* @__PURE__ */ jsxs95("div", { className: "relative df oh fg1", ...tid, children: [
-    contrastRail ? /* @__PURE__ */ jsx179(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ jsx179(ScrollableParent, { px: contentPx, xss: {
+  return /* @__PURE__ */ jsxs96("div", { className: "relative df oh fg1", ...tid, children: [
+    contrastRail ? /* @__PURE__ */ jsx180(ContrastScope, { children: rail }) : rail,
+    /* @__PURE__ */ jsx180(ScrollableParent, { px: contentPx, xss: {
       marginLeft: ["ml_var", {
         "--marginLeft": `${railCollapsedWidthPx}px`
       }],
@@ -22545,6 +22575,7 @@ export {
   NavLink,
   NumberField,
   OpenModal,
+  PageHeader2 as PageHeader,
   Pagination,
   Palette,
   PresentationProvider,