@homebound/beam 3.53.0 → 3.55.0

package/dist/index.cjs

@@ -136,7 +136,6 @@ __export(index_exports, {
   NavbarLayout: () => NavbarLayout,
   NumberField: () => NumberField,
   OpenModal: () => OpenModal,
-  PageHeader: () => PageHeader2,
   PageHeaderLayout: () => PageHeaderLayout,
   Pagination: () => Pagination,
   Palette: () => Palette,
@@ -4931,6 +4930,7 @@ var Icons = {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14 20C13.4477 20 13 19.5523 13 19L13 17C13 16.4477 13.4477 16 14 16L16 16C16.5523 16 17 16.4477 17 17L17 19C17 19.5523 16.5523 20 16 20L14 20Z" })
   ] }),
   move: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 11H13V6H16L12 2L8 6H11V11H6V8L2 12L6 16V13H11V18H8L12 22L16 18H13V13H18V16L22 12L18 8V11Z" }),
+  merge: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M6.7059 4.4196L11.9943 9.2277L17.2826 4.4207V2H19.6355V5.4616L13.1765 11.3336V15.742H16.6944L11.9885 21.6244L7.2826 15.742H10.812V11.3336L4.3529 5.4616V2H6.7059V4.4196Z" }),
   x: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16.192 6.34399L11.949 10.586L7.70697 6.34399L6.29297 7.75799L10.535 12L6.29297 16.242L7.70697 17.656L11.949 13.414L16.192 17.656L17.606 16.242L13.364 12L17.606 7.75799L16.192 6.34399Z" }),
   loader: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 22C17.421 22 22 17.421 22 12H20C20 16.337 16.337 20 12 20C7.663 20 4 16.337 4 12C4 7.664 7.663 4 12 4V2C6.579 2 2 6.58 2 12C2 17.421 6.579 22 12 22Z" }),
   link: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
@@ -24092,326 +24092,8 @@ function NavbarUserMenu({
   }, placement: "right", ...tid }) });
 }
 
-// src/components/Tabs.tsx
-var import_change_case9 = require("change-case");
-var import_react138 = require("react");
-var import_react_aria62 = require("react-aria");
-var import_react_router = require("react-router");
-var import_react_router_dom8 = require("react-router-dom");
-var import_runtime110 = require("@homebound/truss/runtime");
-var import_jsx_runtime190 = require("react/jsx-runtime");
-function TabsWithContent(props) {
-  const styles = hideTabs(props) ? {} : {
-    paddingTop: "pt3"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(import_jsx_runtime190.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Tabs, { ...props }),
-    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(TabContent, { ...props, contentXss: {
-      ...styles,
-      ...props.contentXss
-    } })
-  ] });
-}
-function TabContent(props) {
-  const tid = useTestIds(props, "tab");
-  const {
-    tabs,
-    contentXss = {},
-    omitFullBleedPadding = false
-  } = props;
-  const location = (0, import_react_router_dom8.useLocation)();
-  const selectedTab = isRouteTabs(props) ? props.tabs.find((t) => {
-    const paths = Array.isArray(t.path) ? t.path : [t.path];
-    return paths.some((p) => !!(0, import_react_router.matchPath)({
-      path: p,
-      end: true
-    }, location.pathname));
-  }) || tabs[0] : props.tabs.find((tab) => tab.value === props.selected) || tabs[0];
-  const uniqueValue = uniqueTabValue(selectedTab);
-  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__ */ (0, import_jsx_runtime190.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime110.trussProps)(contentXss), children: selectedTab.render() }) })
-  );
-}
-function Tabs(props) {
-  const {
-    ariaLabel,
-    tabs,
-    includeBottomBorder,
-    right,
-    ...others
-  } = props;
-  const location = (0, import_react_router_dom8.useLocation)();
-  const selected = isRouteTabs(props) ? uniqueTabValue(props.tabs.find((t) => {
-    const paths = Array.isArray(t.path) ? t.path : [t.path];
-    return paths.some((p) => !!(0, import_react_router.matchPath)({
-      path: p,
-      end: true
-    }, location.pathname));
-  }) || props.tabs[0]) : props.selected;
-  const {
-    isFocusVisible,
-    focusProps
-  } = (0, import_react_aria62.useFocusRing)();
-  const tid = useTestIds(others, "tabs");
-  const [active, setActive] = (0, import_react138.useState)(selected);
-  const ref = (0, import_react138.useRef)(null);
-  (0, import_react138.useEffect)(() => setActive(selected), [selected]);
-  function onKeyUp(e) {
-    if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
-      const nextTabValue = getNextTabValue(active, e.key, tabs);
-      setActive(nextTabValue);
-      document.getElementById(`${nextTabValue}-tab`)?.focus();
-    }
-  }
-  function onClick(value) {
-    !isRouteTabs(props) && props.onChange(value);
-  }
-  function onBlur(e) {
-    if (!(ref.current && ref.current.contains(e.relatedTarget))) {
-      setActive(selected);
-    }
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)("div", { ...(0, import_runtime110.trussProps)({
-    ...{
-      display: "df",
-      alignItems: "aic",
-      overflow: "oa",
-      whiteSpace: "wsnw",
-      gap: "gap1"
-    },
-    ...includeBottomBorder ? {
-      ...{
-        borderBottomStyle: "bbs_solid",
-        borderBottomWidth: "bbw_1px",
-        borderColor: "bcGray200"
-      }
-    } : {}
-  }), children: [
-    !hideTabs(props) && /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
-      const uniqueValue = uniqueTabValue(tab);
-      return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
-    }) }),
-    right && /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { className: "mla df aic gap1 pb1", children: right })
-  ] });
-}
-function TabImpl(props) {
-  const {
-    tab,
-    onClick,
-    active,
-    onKeyUp,
-    onBlur,
-    focusProps,
-    isFocusVisible = false,
-    ...others
-  } = props;
-  const {
-    disabled = false,
-    name: label,
-    icon,
-    endAdornment
-  } = tab;
-  const isDisabled = !!disabled;
-  const {
-    hoverProps,
-    isHovered
-  } = (0, import_react_aria62.useHover)({
-    isDisabled
-  });
-  const {
-    baseStyles: baseStyles4,
-    activeStyles: activeStyles3,
-    focusRingStyles: focusRingStyles2,
-    hoverStyles: hoverStyles4,
-    disabledStyles: disabledStyles3,
-    activeHoverStyles
-  } = (0, import_react138.useMemo)(() => getTabStyles(), []);
-  const uniqueValue = uniqueTabValue(tab);
-  const tabProps = {
-    "aria-controls": `${uniqueValue}-tabPanel`,
-    "aria-selected": active,
-    "aria-disabled": isDisabled || void 0,
-    id: `${uniqueValue}-tab`,
-    role: "tab",
-    tabIndex: active ? 0 : -1,
-    ...others,
-    ...(0, import_runtime110.trussProps)({
-      ...baseStyles4,
-      ...active && activeStyles3,
-      ...isDisabled && disabledStyles3,
-      ...isHovered && hoverStyles4,
-      ...isHovered && active && activeHoverStyles,
-      ...isFocusVisible && active && focusRingStyles2
-    })
-  };
-  const interactiveProps = (0, import_react_aria62.mergeProps)(focusProps, hoverProps, {
-    onKeyUp,
-    onBlur,
-    ...isRouteTab(tab) ? {} : {
-      onClick: () => onClick(tab.value)
-    }
-  });
-  const tabLabel = /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(import_jsx_runtime190.Fragment, { children: [
-    label,
-    (icon || endAdornment) && /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("span", { className: "ml1", children: icon ? /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Icon, { icon }) : endAdornment })
-  ] });
-  return isDisabled ? maybeTooltip({
-    title: resolveTooltip(disabled),
-    placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { ...tabProps, children: tabLabel })
-  }) : isRouteTab(tab) ? /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(import_react_router_dom8.Link, { ...(0, import_react_aria62.mergeProps)(tabProps, interactiveProps, {
-    className: "navLink"
-  }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("button", { ...{
-    ...tabProps,
-    ...interactiveProps
-  }, children: tabLabel });
-}
-function getTabStyles() {
-  const borderBottomWidthPx = 4;
-  const verticalPaddingPx = 6;
-  const borderBottomStyles = {
-    borderBottomStyle: "bbs_solid",
-    borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": (0, import_runtime110.maybeCssVar)(`${borderBottomWidthPx}px`)
-    }],
-    paddingBottom: ["pb_var", {
-      "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
-    }]
-  };
-  return {
-    baseStyles: {
-      display: "df",
-      alignItems: "aic",
-      height: "h_32px",
-      paddingTop: ["py_var", {
-        "--paddingTop": `${verticalPaddingPx}px`
-      }],
-      paddingBottom: ["py_var", {
-        "--paddingBottom": `${verticalPaddingPx}px`
-      }],
-      paddingLeft: "pl1",
-      paddingRight: "pr1",
-      outline: "outline0",
-      color: "gray700",
-      width: "width_fit_content",
-      cursor: "cursorPointer",
-      fontWeight: "fw4",
-      fontSize: "fz_14px",
-      lineHeight: "lh_20px"
-    },
-    activeStyles: {
-      ...{
-        borderColor: "bcBlue700",
-        fontWeight: "fw6",
-        fontSize: "fz_14px",
-        lineHeight: "lh_20px",
-        color: "gray900"
-      },
-      ...borderBottomStyles
-    },
-    disabledStyles: {
-      color: "gray400",
-      cursor: "cursorNotAllowed"
-    },
-    focusRingStyles: {
-      backgroundColor: "bgBlue50",
-      boxShadow: "bshFocus"
-    },
-    hoverStyles: {
-      ...{
-        borderColor: "bcGray400"
-      },
-      ...borderBottomStyles
-    },
-    activeHoverStyles: {
-      ...{
-        backgroundColor: "bgBlue50",
-        borderColor: "bcBlue700"
-      },
-      ...borderBottomStyles
-    }
-  };
-}
-function getNextTabValue(selected, key, tabs) {
-  const enabledTabs = tabs.filter((tab) => tab.disabled !== true);
-  const tabsToScan = key === "ArrowRight" ? enabledTabs : enabledTabs.reverse();
-  const currentIndex = tabsToScan.findIndex((tab) => uniqueTabValue(tab) === selected);
-  const nextIndex = currentIndex === tabsToScan.length - 1 ? 0 : currentIndex + 1;
-  return uniqueTabValue(tabsToScan[nextIndex]);
-}
-function isRouteTabs(props) {
-  const {
-    tabs
-  } = props;
-  return tabs.length > 0 && isRouteTab(tabs[0]);
-}
-function isRouteTab(tab) {
-  return "path" in tab;
-}
-function uniqueTabValue(tab) {
-  return isRouteTab(tab) ? (0, import_change_case9.camelCase)(tab.name) : tab.value;
-}
-function hideTabs(props) {
-  return props.alwaysShowAllTabs ? false : props.tabs.filter((t) => !t.disabled).length === 1;
-}
-
-// src/components/PageHeader.tsx
-var import_runtime111 = require("@homebound/truss/runtime");
-var import_jsx_runtime191 = require("react/jsx-runtime");
-function PageHeader2(props) {
-  const {
-    title,
-    documentTitleSuffix,
-    rightSlot,
-    tabs,
-    breadcrumbs,
-    ...otherProps
-  } = props;
-  const tid = useTestIds(otherProps, "pageHeader");
-  useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("header", { ...tid, ...(0, import_runtime111.trussProps)({
-    display: "df",
-    flexDirection: "fdc",
-    paddingTop: "pt3",
-    paddingLeft: "pl3",
-    paddingRight: "pr3",
-    borderBottomStyle: "bbs_solid",
-    borderBottomWidth: "bbw_1px",
-    gap: "gap2",
-    borderColor: ["bc_var", {
-      "--borderColor": "var(--b-surface-separator)"
-    }],
-    backgroundColor: ["bgColor_var", {
-      "--backgroundColor": "var(--b-surface)"
-    }]
-  }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("div", { ...(0, import_runtime111.trussProps)({
-      ...{
-        display: "df",
-        justifyContent: "jcsb",
-        width: "w100",
-        gap: "gap1"
-      },
-      ...{
-        ...!tabs ? {
-          marginBottom: "mb2"
-        } : {}
-      }
-    }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("div", { className: "mw0", children: [
-        breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("h1", { ...tid.title, className: "fw6 fz_20px lh_28px", children: title })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("div", { className: "fs0", children: rightSlot })
-    ] }),
-    tabs && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Tabs, { ...tabs })
-  ] });
-}
-
 // src/components/Pagination.tsx
-var import_jsx_runtime192 = require("react/jsx-runtime");
+var import_jsx_runtime190 = require("react/jsx-runtime");
 var defaultPage = {
   offset: 0,
   limit: 100
@@ -24443,25 +24125,25 @@ function Pagination(props) {
     }
   }
   const tid = useTestIds(props, "pagination");
-  return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { className: "df bcGray200 bts_solid btw_1px fw4 fz_12px lh_16px gray500 pl2 pr2 pt2", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
-    /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { className: "w_78px", children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
+  return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)("div", { className: "df bcGray200 bts_solid btw_1px fw4 fz_12px lh_16px gray500 pl2 pr2 pt2", ...tid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
+    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { className: "w_78px", children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
       pageNumber: 1,
       pageSize: val
     }), autoSort: false, ...tid.pageSize }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { className: "mla mta mba df", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)("div", { className: "mla mta mba df", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
         first,
         " ",
         showLast ? `- ${last}` : "",
         " of ",
         totalCount
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "rgba(29, 78, 216, 1)" /* Blue700 */ : "rgba(236, 235, 235, 1)" /* Gray200 */, onClick: () => set({
+      /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "rgba(29, 78, 216, 1)" /* Blue700 */ : "rgba(236, 235, 235, 1)" /* Gray200 */, onClick: () => set({
         pageNumber: pageNumber - 1,
         pageSize
       }), disabled: !hasPrevPage, ...tid.previousIcon }),
-      /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(IconButton, { icon: "chevronRight", color: hasNextPage ? "rgba(29, 78, 216, 1)" /* Blue700 */ : "rgba(236, 235, 235, 1)" /* Gray200 */, onClick: () => set({
+      /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(IconButton, { icon: "chevronRight", color: hasNextPage ? "rgba(29, 78, 216, 1)" /* Blue700 */ : "rgba(236, 235, 235, 1)" /* Gray200 */, onClick: () => set({
         pageNumber: pageNumber + 1,
         pageSize
       }), disabled: !hasNextPage, ...tid.nextIcon })
@@ -24483,10 +24165,10 @@ function toPageNumberSize(page) {
 }
 
 // src/components/ScrollShadows.tsx
-var import_utils160 = require("@react-aria/utils");
-var import_react139 = require("react");
-var import_runtime112 = require("@homebound/truss/runtime");
-var import_jsx_runtime193 = require("react/jsx-runtime");
+var import_utils158 = require("@react-aria/utils");
+var import_react138 = require("react");
+var import_runtime110 = require("@homebound/truss/runtime");
+var import_jsx_runtime191 = require("react/jsx-runtime");
 function ScrollShadows(props) {
   const {
     children,
@@ -24502,15 +24184,15 @@ function ScrollShadows(props) {
   if (!bgColor.includes("rgba")) {
     throw new Error("ScrollShadows: bgColor prop must be in the format 'rgba(255, 255, 255, 1)'");
   }
-  const [showStartShadow, setShowStartShadow] = (0, import_react139.useState)(false);
-  const [showEndShadow, setShowEndShadow] = (0, import_react139.useState)(false);
-  const scrollRef = (0, import_react139.useRef)(null);
-  const [startShadowStyles, endShadowStyles] = (0, import_react139.useMemo)(() => {
+  const [showStartShadow, setShowStartShadow] = (0, import_react138.useState)(false);
+  const [showEndShadow, setShowEndShadow] = (0, import_react138.useState)(false);
+  const scrollRef = (0, import_react138.useRef)(null);
+  const [startShadowStyles, endShadowStyles] = (0, import_react138.useMemo)(() => {
     const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
     const commonStyles = {
       position: "absolute",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime112.maybeCssVar)(zIndices.scrollShadow)
+        "--zIndex": (0, import_runtime110.maybeCssVar)(zIndices.scrollShadow)
       }],
       pointerEvents: "pointerEvents_none"
     };
@@ -24543,7 +24225,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": (0, import_runtime112.maybeCssVar)(startGradient)
+          "--background": (0, import_runtime110.maybeCssVar)(startGradient)
         }]
       }
     }, {
@@ -24551,12 +24233,12 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": (0, import_runtime112.maybeCssVar)(endGradient)
+          "--background": (0, import_runtime110.maybeCssVar)(endGradient)
         }]
       }
     }];
   }, [horizontal, bgColor]);
-  const updateScrollProps = (0, import_react139.useCallback)((el) => {
+  const updateScrollProps = (0, import_react138.useCallback)((el) => {
     const {
       scrollTop,
       scrollHeight,
@@ -24571,15 +24253,15 @@ function ScrollShadows(props) {
     setShowStartShadow(start > 0);
     setShowEndShadow(start + boxSize < end);
   }, [horizontal]);
-  const onResize = (0, import_react139.useCallback)(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
-  (0, import_utils160.useResizeObserver)({
+  const onResize = (0, import_react138.useCallback)(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
+  (0, import_utils158.useResizeObserver)({
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { ...(0, import_runtime112.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("div", { ...(0, import_runtime110.trussProps)({
     display: "df",
     flexDirection: ["fd_var", {
-      "--flexDirection": (0, import_runtime112.maybeCssVar)(!horizontal ? "column" : "row")
+      "--flexDirection": (0, import_runtime110.maybeCssVar)(!horizontal ? "column" : "row")
     }],
     position: "relative",
     overflow: "oh",
@@ -24592,23 +24274,23 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime112.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("div", { ...(0, import_runtime110.trussProps)({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": (0, import_runtime112.maybeCssVar)(showStartShadow ? 1 : 0)
+          "--opacity": (0, import_runtime110.maybeCssVar)(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime112.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("div", { ...(0, import_runtime110.trussProps)({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": (0, import_runtime112.maybeCssVar)(showEndShadow ? 1 : 0)
+          "--opacity": (0, import_runtime110.maybeCssVar)(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime112.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("div", { ...(0, import_runtime110.trussProps)({
       ...xss,
       ...{
         overflow: "oa",
@@ -24620,8 +24302,8 @@ function ScrollShadows(props) {
 }
 
 // src/layouts/SideNavLayout/SideNavLayoutContext.tsx
-var import_react140 = require("react");
-var import_jsx_runtime194 = require("react/jsx-runtime");
+var import_react139 = require("react");
+var import_jsx_runtime192 = require("react/jsx-runtime");
 var SIDE_NAV_LAYOUT_STATE_STORAGE_KEY = "beam.sideNavLayout.navState";
 function loadStoredNavState() {
   try {
@@ -24643,20 +24325,20 @@ function resolveInitialNavState(defaultNavState) {
   }
   return loadStoredNavState() ?? defaultNavState ?? "expanded";
 }
-var SideNavLayoutContext = (0, import_react140.createContext)(void 0);
+var SideNavLayoutContext = (0, import_react139.createContext)(void 0);
 function SideNavLayoutProvider(props) {
-  const [navState, setNavStateInternal] = (0, import_react140.useState)(
+  const [navState, setNavStateInternal] = (0, import_react139.useState)(
     () => resolveInitialNavState(props.defaultNavState)
   );
   const bp = useBreakpoint();
-  const prevMdAndUp = (0, import_react140.useRef)(bp.mdAndUp);
-  (0, import_react140.useEffect)(() => {
+  const prevMdAndUp = (0, import_react139.useRef)(bp.mdAndUp);
+  (0, import_react139.useEffect)(() => {
     if (prevMdAndUp.current && !bp.mdAndUp) {
       setNavStateInternal((prev) => prev === "expanded" ? "collapse" : prev);
     }
     prevMdAndUp.current = bp.mdAndUp;
   }, [bp.mdAndUp]);
-  const setNavState = (0, import_react140.useCallback)((value2) => {
+  const setNavState = (0, import_react139.useCallback)((value2) => {
     setNavStateInternal((prev) => {
       const next = typeof value2 === "function" ? value2(prev) : value2;
       if (next === "expanded" || next === "collapse") {
@@ -24668,20 +24350,20 @@ function SideNavLayoutProvider(props) {
       return next;
     });
   }, []);
-  const value = (0, import_react140.useMemo)(() => ({ navState, setNavState }), [navState, setNavState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(SideNavLayoutContext.Provider, { value, children: props.children });
+  const value = (0, import_react139.useMemo)(() => ({ navState, setNavState }), [navState, setNavState]);
+  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(SideNavLayoutContext.Provider, { value, children: props.children });
 }
 function useSideNavLayoutContext() {
-  return (0, import_react140.useContext)(SideNavLayoutContext) ?? { navState: "expanded", setNavState: () => {
+  return (0, import_react139.useContext)(SideNavLayoutContext) ?? { navState: "expanded", setNavState: () => {
   } };
 }
 function useHasSideNavLayoutProvider() {
-  return (0, import_react140.useContext)(SideNavLayoutContext) !== void 0;
+  return (0, import_react139.useContext)(SideNavLayoutContext) !== void 0;
 }
 
 // src/components/SideNav/SideNav.tsx
-var import_runtime113 = require("@homebound/truss/runtime");
-var import_jsx_runtime195 = require("react/jsx-runtime");
+var import_runtime111 = require("@homebound/truss/runtime");
+var import_jsx_runtime193 = require("react/jsx-runtime");
 function SideNav(props) {
   const {
     top,
@@ -24694,8 +24376,8 @@ function SideNav(props) {
   const tid = useTestIds(props, "sideNav");
   const panelCollapsed = navState === "collapse";
   const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
-  return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime113.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("nav", { className: "df fdc h100 fs0", ...tid, children: [
+    top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime111.trussProps)({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -24706,7 +24388,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime113.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime111.trussProps)({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -24718,8 +24400,8 @@ function SideNav(props) {
       ...top === void 0 ? {
         paddingTop: "pt5"
       } : {}
-    }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(AppNavItems, { items, panelCollapsed }) }),
-    footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime113.trussProps)({
+    }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(AppNavItems, { items, panelCollapsed }) }),
+    footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime111.trussProps)({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -24735,10 +24417,10 @@ function SideNav(props) {
 }
 
 // src/components/Snackbar/useSnackbar.tsx
-var import_react141 = require("react");
+var import_react140 = require("react");
 function useSnackbar() {
   const { setNotices, setOffset } = useSnackbarContext();
-  const onClose = (0, import_react141.useCallback)(
+  const onClose = (0, import_react140.useCallback)(
     (noticeId) => {
       setNotices((prev) => {
         let returnValue = prev;
@@ -24755,7 +24437,7 @@ function useSnackbar() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const triggerNotice = (0, import_react141.useCallback)(
+  const triggerNotice = (0, import_react140.useCallback)(
     (props) => {
       const noticeId = props.id ?? `beamSnackbar:${snackbarId++}`;
       let maybeTimeout;
@@ -24784,8 +24466,8 @@ function useSnackbar() {
     },
     [onClose, setNotices]
   );
-  const closeNotice = (0, import_react141.useCallback)((id) => onClose(id), [onClose]);
-  const useSnackbarOffset = ({ bottom }) => (0, import_react141.useEffect)(() => {
+  const closeNotice = (0, import_react140.useCallback)((id) => onClose(id), [onClose]);
+  const useSnackbarOffset = ({ bottom }) => (0, import_react140.useEffect)(() => {
     setOffset({ bottom });
     return () => setOffset({});
   }, [bottom]);
@@ -24794,11 +24476,11 @@ function useSnackbar() {
 var snackbarId = 1;
 
 // src/components/Stepper.tsx
+var import_react141 = require("react");
+var import_react_aria62 = require("react-aria");
+var import_runtime112 = require("@homebound/truss/runtime");
+var import_jsx_runtime194 = require("react/jsx-runtime");
 var import_react142 = require("react");
-var import_react_aria63 = require("react-aria");
-var import_runtime114 = require("@homebound/truss/runtime");
-var import_jsx_runtime196 = require("react/jsx-runtime");
-var import_react143 = require("react");
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -24816,8 +24498,8 @@ function Stepper(props) {
   const maxStepWidth = 200;
   const minStepWidth = 100;
   const gap = 8;
-  return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("ol", { ...(0, import_runtime114.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("ol", { ...(0, import_runtime112.trussProps)({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -24827,7 +24509,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ (0, import_react143.createElement)("li", { ...(0, import_runtime114.trussProps)({
+      return /* @__PURE__ */ (0, import_react142.createElement)("li", { ...(0, import_runtime112.trussProps)({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -24837,9 +24519,9 @@ function Stepper(props) {
         minWidth: ["mw_var", {
           "--minWidth": `${minStepWidth}px`
         }]
-      }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
+      }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime114.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...(0, import_runtime112.trussProps)({
       marginTop: "mt1",
       backgroundColor: "bgGray300",
       height: "h_4px",
@@ -24850,12 +24532,12 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime114.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...(0, import_runtime112.trussProps)({
       backgroundColor: "bgBlue600",
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": (0, import_runtime114.maybeCssVar)(__maybeInc20(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": (0, import_runtime112.maybeCssVar)(__maybeInc20(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -24872,26 +24554,26 @@ function StepButton(props) {
     onPress: onClick,
     isDisabled: disabled
   };
-  const ref = (0, import_react142.useRef)(null);
+  const ref = (0, import_react141.useRef)(null);
   const {
     buttonProps,
     isPressed
-  } = (0, import_react_aria63.useButton)(ariaProps, ref);
+  } = (0, import_react_aria62.useButton)(ariaProps, ref);
   const {
     isFocusVisible,
     focusProps
-  } = (0, import_react_aria63.useFocusRing)();
+  } = (0, import_react_aria62.useFocusRing)();
   const {
     hoverProps,
     isHovered
-  } = (0, import_react_aria63.useHover)(ariaProps);
+  } = (0, import_react_aria62.useHover)(ariaProps);
   const focusRingStyles2 = state === "error" ? {
     boxShadow: "bshDanger"
   } : {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime114.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime112.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -24943,7 +24625,7 @@ function StepButton(props) {
     } : {},
     ...isFocusVisible ? focusRingStyles2 : {}
   }), ...tid[defaultTestId(label)], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
     label
   ] });
 }
@@ -24954,12 +24636,12 @@ function StepIcon({
   isCurrent = false
 }) {
   if (state === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Icon, { icon: "errorCircle" });
+    return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(Icon, { icon: "errorCircle" });
   }
   if (state === "complete") {
-    return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Icon, { icon: "check" });
+    return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime114.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...(0, import_runtime112.trussProps)({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -24973,10 +24655,10 @@ function StepIcon({
 }
 
 // src/components/StepperTabs/StepperTab.tsx
-var import_react144 = require("react");
-var import_react_aria64 = require("react-aria");
-var import_runtime115 = require("@homebound/truss/runtime");
-var import_jsx_runtime197 = require("react/jsx-runtime");
+var import_react143 = require("react");
+var import_react_aria63 = require("react-aria");
+var import_runtime113 = require("@homebound/truss/runtime");
+var import_jsx_runtime195 = require("react/jsx-runtime");
 function StepperTab(props) {
   const {
     label,
@@ -24991,20 +24673,20 @@ function StepperTab(props) {
     onPress: () => onClick(value),
     isDisabled: disabled || collapsed
   };
-  const ref = (0, import_react144.useRef)(null);
+  const ref = (0, import_react143.useRef)(null);
   const {
     buttonProps
-  } = (0, import_react_aria64.useButton)(ariaProps, ref);
+  } = (0, import_react_aria63.useButton)(ariaProps, ref);
   const {
     isFocusVisible,
     focusProps
-  } = (0, import_react_aria64.useFocusRing)();
+  } = (0, import_react_aria63.useFocusRing)();
   const {
     hoverProps,
     isHovered
-  } = (0, import_react_aria64.useHover)(ariaProps);
+  } = (0, import_react_aria63.useHover)(ariaProps);
   const tid = useTestIds(props, "stepperTab");
-  return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("button", { ref, ...(0, import_react_aria64.mergeProps)(buttonProps, focusProps, hoverProps), "aria-label": label, ...(0, import_runtime115.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("button", { ref, ...(0, import_react_aria63.mergeProps)(buttonProps, focusProps, hoverProps), "aria-label": label, ...(0, import_runtime113.trussProps)({
     ...stepperTabStyles.baseStyles,
     ...getStateStyles(active, completed),
     ...isHovered && !disabled ? stepperTabStyles.hoverStyles : {},
@@ -25012,9 +24694,9 @@ function StepperTab(props) {
     ...disabled ? stepperTabStyles.disabledStyles : {},
     ...isFocusVisible ? stepperTabStyles.focusRingStyles : {}
   }), ...tid[defaultTestId(value)], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("span", { className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1", children: label }),
-    completed && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("span", { className: "fs0 ml1", children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Icon, { icon: "check", inc: 2.5, ...tid.check }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_react_aria64.VisuallyHidden, { children: completed ? "Complete" : "Not Complete" })
+    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("span", { className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1", children: label }),
+    completed && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("span", { className: "fs0 ml1", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Icon, { icon: "check", inc: 2.5, ...tid.check }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_react_aria63.VisuallyHidden, { children: completed ? "Complete" : "Not Complete" })
   ] });
 }
 function withBorderBottom(color) {
@@ -25022,7 +24704,7 @@ function withBorderBottom(color) {
     ...{
       borderBottomStyle: "bbs_solid",
       borderBottomWidth: ["borderBottomWidth_var", {
-        "--borderBottomWidth": (0, import_runtime115.maybeCssVar)(`3px`)
+        "--borderBottomWidth": (0, import_runtime113.maybeCssVar)(`3px`)
       }]
     },
     ...color
@@ -25094,9 +24776,9 @@ var stepperTabStyles = {
 };
 
 // src/components/StepperTabs/StepperTabs.tsx
-var import_runtime116 = require("@homebound/truss/runtime");
-var import_jsx_runtime198 = require("react/jsx-runtime");
-var import_react145 = require("react");
+var import_runtime114 = require("@homebound/truss/runtime");
+var import_jsx_runtime196 = require("react/jsx-runtime");
+var import_react144 = require("react");
 function StepperTabs(props) {
   const {
     steps,
@@ -25108,7 +24790,7 @@ function StepperTabs(props) {
     sm: collapsed
   } = useBreakpoint();
   const capWidth = steps.length <= 3;
-  return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("ol", { ...(0, import_runtime116.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("ol", { ...(0, import_runtime114.trussProps)({
     padding: "p_0",
     margin: "m_0",
     listStyle: "lis_none",
@@ -25122,7 +24804,7 @@ function StepperTabs(props) {
     borderColor: "bcGray400"
   }), children: steps.map((step) => {
     const isCurrent = step.value === currentStep;
-    return /* @__PURE__ */ (0, import_react145.createElement)("li", { ...(0, import_runtime116.trussProps)({
+    return /* @__PURE__ */ (0, import_react144.createElement)("li", { ...(0, import_runtime114.trussProps)({
       display: "df",
       flexGrow: "fg1",
       flexBasis: "fb_0",
@@ -25134,7 +24816,7 @@ function StepperTabs(props) {
           "--maxWidth": `${maxStepWidthPx}px`
         }]
       } : {}
-    }), key: step.value, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(StepperTab, { label: step.label, value: step.value, active: isCurrent, completed: step.completed, disabled: step.disabled, collapsed, onClick: onChange, ...tid.tab }));
+    }), key: step.value, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(StepperTab, { label: step.label, value: step.value, active: isCurrent, completed: step.completed, disabled: step.disabled, collapsed, onClick: onChange, ...tid.tab }));
   }) }) });
 }
 var maxStepWidthPx = 280;
@@ -25142,8 +24824,8 @@ var gapPx = 6;
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 var import_react_dom7 = require("react-dom");
-var import_runtime117 = require("@homebound/truss/runtime");
-var import_jsx_runtime199 = require("react/jsx-runtime");
+var import_runtime115 = require("@homebound/truss/runtime");
+var import_jsx_runtime197 = require("react/jsx-runtime");
 function SuperDrawerHeader(props) {
   const {
     hideControls
@@ -25160,20 +24842,20 @@ function SuperDrawerHeader(props) {
   const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
   const isDetail = currentContent !== firstContent;
   const tid = useTestIds({}, "superDrawerHeader");
-  return (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("div", { className: "df aic jcsb gap3", ...tid, children: [
-    isStructuredProps(props) ? /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("div", { className: "df jcsb aic gap2 fg1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("div", { className: "fg1 df aic gap2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
+  return (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: "df aic jcsb gap3", ...tid, children: [
+    isStructuredProps(props) ? /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: "df jcsb aic gap2 fg1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: "fg1 df aic gap2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
         props.left
       ] }),
-      props.right && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { className: "fs0", children: props.right })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { ...(0, import_runtime117.trussProps)({
+      props.right && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { className: "fs0", children: props.right })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { className: "fg1", children: props.children }),
+    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { ...(0, import_runtime115.trussProps)({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
       } : {}
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(ButtonGroup, { buttons: [{
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(ButtonGroup, { buttons: [{
       icon: "chevronLeft",
       onClick: () => onPrevClick && onPrevClick(),
       disabled: !onPrevClick
@@ -25189,18 +24871,18 @@ function isStructuredProps(props) {
 }
 
 // src/components/SuperDrawer/ConfirmCloseModal.tsx
-var import_jsx_runtime200 = require("react/jsx-runtime");
+var import_jsx_runtime198 = require("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__ */ (0, import_jsx_runtime200.jsxs)(import_jsx_runtime200.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(ModalHeader, { children: "Are you sure you want to cancel?" }),
-    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(ModalBody, { children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("p", { children: "Any changes you've made so far will be lost." }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(ModalFooter, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(import_jsx_runtime198.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(ModalHeader, { children: "Are you sure you want to cancel?" }),
+    /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(ModalBody, { children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("p", { children: "Any changes you've made so far will be lost." }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(ModalFooter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
         Button,
         {
           variant: "quaternary",
@@ -25211,7 +24893,7 @@ function ConfirmCloseModal(props) {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Button, { label: continueText, onClick: closeModal })
+      /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(Button, { label: continueText, onClick: closeModal })
     ] })
   ] });
 }
@@ -25220,8 +24902,8 @@ function ConfirmCloseModal(props) {
 var import_framer_motion6 = require("framer-motion");
 
 // src/components/SuperDrawer/useSuperDrawer.tsx
-var import_react146 = require("react");
-var import_jsx_runtime201 = require("react/jsx-runtime");
+var import_react145 = require("react");
+var import_jsx_runtime199 = require("react/jsx-runtime");
 function useSuperDrawer() {
   const {
     drawerContentStack: contentStack,
@@ -25233,7 +24915,7 @@ function useSuperDrawer() {
   function canCloseDrawerDetails(i, doChange) {
     for (const canCloseDrawerDetail of canCloseDetailsChecks.current[i] ?? []) {
       if (!canClose(canCloseDrawerDetail)) {
-        openModal({ content: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
+        openModal({ content: /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
         return false;
       }
     }
@@ -25253,14 +24935,14 @@ function useSuperDrawer() {
     for (const canCloseDrawer of canCloseChecks.current) {
       if (!canClose(canCloseDrawer)) {
         openModal({
-          content: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
+          content: /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
         });
         return;
       }
     }
     doChange();
   }
-  const closeActions = (0, import_react146.useMemo)(
+  const closeActions = (0, import_react145.useMemo)(
     () => {
       return {
         /** Attempts to close the drawer. If any checks fail, a confirmation modal will appear */
@@ -25295,7 +24977,7 @@ function useSuperDrawer() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [canCloseChecks, canCloseDetailsChecks, contentStack, modalState, openModal]
   );
-  const actions = (0, import_react146.useMemo)(
+  const actions = (0, import_react145.useMemo)(
     () => {
       return {
         // TODO: Maybe we should rename to openDrawer as a breaking change (to match openDrawerDetail)
@@ -25348,8 +25030,8 @@ function canClose(canCloseCheck) {
 }
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
-var import_runtime118 = require("@homebound/truss/runtime");
-var import_jsx_runtime202 = require("react/jsx-runtime");
+var import_runtime116 = require("@homebound/truss/runtime");
+var import_jsx_runtime200 = require("react/jsx-runtime");
 var SuperDrawerContent = ({
   children,
   actions
@@ -25365,95 +25047,360 @@ var SuperDrawerContent = ({
   } = contentStack.current[contentStack.current.length - 1] ?? {};
   const firstContent = contentStack.current[0]?.opts;
   const {
-    width: width2 = 1040 /* Normal */
-  } = firstContent ?? {};
-  function wrapWithMotionAndMaybeBack(children2) {
-    if (kind === "open") {
-      return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(import_framer_motion6.motion.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
-    } else if (kind === "detail") {
-      return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(import_framer_motion6.motion.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
-        overflow: "auto"
-      }, transition: {
-        overflow: {
-          delay: 0.3
-        }
-      }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
-        /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(import_framer_motion6.motion.div, { initial: {
-          x: width2,
-          opacity: 0
-        }, animate: {
-          x: 0,
-          opacity: 1
-        }, transition: {
-          ease: "linear",
-          duration: 0.3,
-          opacity: {
-            delay: 0.15
-          }
-        }, exit: {
-          x: width2,
-          opacity: 0
-        }, className: "pt2", children: children2 })
-      ] }, "content");
-    } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime118.mergeProps)(void 0, {
-        overflow: "auto"
-      }, {
-        paddingTop: "pt3",
-        paddingBottom: "pb3",
-        paddingRight: "pr3",
-        paddingLeft: "pl3",
-        flexGrow: "fg1"
-      }) }, "content");
+    width: width2 = 1040 /* Normal */
+  } = firstContent ?? {};
+  function wrapWithMotionAndMaybeBack(children2) {
+    if (kind === "open") {
+      return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(import_framer_motion6.motion.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
+    } else if (kind === "detail") {
+      return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(import_framer_motion6.motion.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
+        overflow: "auto"
+      }, transition: {
+        overflow: {
+          delay: 0.3
+        }
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
+        /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(import_framer_motion6.motion.div, { initial: {
+          x: width2,
+          opacity: 0
+        }, animate: {
+          x: 0,
+          opacity: 1
+        }, transition: {
+          ease: "linear",
+          duration: 0.3,
+          opacity: {
+            delay: 0.15
+          }
+        }, exit: {
+          x: width2,
+          opacity: 0
+        }, className: "pt2", children: children2 })
+      ] }, "content");
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime116.mergeProps)(void 0, {
+        overflow: "auto"
+      }, {
+        paddingTop: "pt3",
+        paddingBottom: "pb3",
+        paddingRight: "pr3",
+        paddingLeft: "pl3",
+        flexGrow: "fg1"
+      }) }, "content");
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(import_jsx_runtime200.Fragment, { children: [
+    wrapWithMotionAndMaybeBack(children),
+    actions && /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Button, { ...buttonProps }, i)) }) })
+  ] });
+};
+
+// src/components/Table/cardSlots.ts
+function cardTitleSlot(text) {
+  return { kind: "title", text };
+}
+function cardEyebrowSlot(text) {
+  return { kind: "eyebrow", text };
+}
+function cardBadgeSlot(text, tags) {
+  return { kind: "badge", text, tags };
+}
+function cardStatusSlot(tag) {
+  return { kind: "status", tag };
+}
+function cardDataBlockSlot(props) {
+  return { kind: "dataBlock", ...props };
+}
+function cardProgressSlot(value) {
+  return { kind: "progress", value };
+}
+
+// src/components/Table/utils/simpleHelpers.ts
+var simpleHeader = { kind: "header", id: "header", data: void 0 };
+function simpleDataRows(data = []) {
+  return [simpleHeader, ...data.map((data2) => ({ kind: "data", data: data2, id: data2.id }))];
+}
+
+// src/components/Table/utils/visitor.ts
+function visit(rows, fn) {
+  const todo = [...rows];
+  while (todo.length > 0) {
+    const row = todo.pop();
+    fn(row);
+    if (row.children) {
+      todo.push(...row.children);
+    }
+  }
+}
+
+// src/components/Tabs.tsx
+var import_change_case9 = require("change-case");
+var import_react146 = require("react");
+var import_react_aria64 = require("react-aria");
+var import_react_router = require("react-router");
+var import_react_router_dom8 = require("react-router-dom");
+var import_runtime117 = require("@homebound/truss/runtime");
+var import_jsx_runtime201 = require("react/jsx-runtime");
+function TabsWithContent(props) {
+  const styles = hideTabs(props) ? {} : {
+    paddingTop: "pt3"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(import_jsx_runtime201.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(Tabs, { ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(TabContent, { ...props, contentXss: {
+      ...styles,
+      ...props.contentXss
+    } })
+  ] });
+}
+function TabContent(props) {
+  const tid = useTestIds(props, "tab");
+  const {
+    tabs,
+    contentXss = {},
+    omitFullBleedPadding = false
+  } = props;
+  const location = (0, import_react_router_dom8.useLocation)();
+  const selectedTab = isRouteTabs(props) ? props.tabs.find((t) => {
+    const paths = Array.isArray(t.path) ? t.path : [t.path];
+    return paths.some((p) => !!(0, import_react_router.matchPath)({
+      path: p,
+      end: true
+    }, location.pathname));
+  }) || tabs[0] : props.tabs.find((tab) => tab.value === props.selected) || tabs[0];
+  const uniqueValue = uniqueTabValue(selectedTab);
+  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__ */ (0, import_jsx_runtime201.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime117.trussProps)(contentXss), children: selectedTab.render() }) })
+  );
+}
+function Tabs(props) {
+  const {
+    ariaLabel,
+    tabs,
+    includeBottomBorder,
+    right,
+    ...others
+  } = props;
+  const location = (0, import_react_router_dom8.useLocation)();
+  const selected = isRouteTabs(props) ? uniqueTabValue(props.tabs.find((t) => {
+    const paths = Array.isArray(t.path) ? t.path : [t.path];
+    return paths.some((p) => !!(0, import_react_router.matchPath)({
+      path: p,
+      end: true
+    }, location.pathname));
+  }) || props.tabs[0]) : props.selected;
+  const {
+    isFocusVisible,
+    focusProps
+  } = (0, import_react_aria64.useFocusRing)();
+  const tid = useTestIds(others, "tabs");
+  const [active, setActive] = (0, import_react146.useState)(selected);
+  const ref = (0, import_react146.useRef)(null);
+  (0, import_react146.useEffect)(() => setActive(selected), [selected]);
+  function onKeyUp(e) {
+    if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      const nextTabValue = getNextTabValue(active, e.key, tabs);
+      setActive(nextTabValue);
+      document.getElementById(`${nextTabValue}-tab`)?.focus();
+    }
+  }
+  function onClick(value) {
+    !isRouteTabs(props) && props.onChange(value);
+  }
+  function onBlur(e) {
+    if (!(ref.current && ref.current.contains(e.relatedTarget))) {
+      setActive(selected);
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { ...(0, import_runtime117.trussProps)({
+    ...{
+      display: "df",
+      alignItems: "aic",
+      overflow: "oa",
+      whiteSpace: "wsnw",
+      gap: "gap1"
+    },
+    ...includeBottomBorder ? {
+      ...{
+        borderBottomStyle: "bbs_solid",
+        borderBottomWidth: "bbw_1px",
+        borderColor: "bcGray200"
+      }
+    } : {}
+  }), children: [
+    !hideTabs(props) && /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
+      const uniqueValue = uniqueTabValue(tab);
+      return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
+    }) }),
+    right && /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: "mla df aic gap1 pb1", children: right })
+  ] });
+}
+function TabImpl(props) {
+  const {
+    tab,
+    onClick,
+    active,
+    onKeyUp,
+    onBlur,
+    focusProps,
+    isFocusVisible = false,
+    ...others
+  } = props;
+  const {
+    disabled = false,
+    name: label,
+    icon,
+    endAdornment
+  } = tab;
+  const isDisabled = !!disabled;
+  const {
+    hoverProps,
+    isHovered
+  } = (0, import_react_aria64.useHover)({
+    isDisabled
+  });
+  const {
+    baseStyles: baseStyles4,
+    activeStyles: activeStyles3,
+    focusRingStyles: focusRingStyles2,
+    hoverStyles: hoverStyles4,
+    disabledStyles: disabledStyles3,
+    activeHoverStyles
+  } = (0, import_react146.useMemo)(() => getTabStyles(), []);
+  const uniqueValue = uniqueTabValue(tab);
+  const tabProps = {
+    "aria-controls": `${uniqueValue}-tabPanel`,
+    "aria-selected": active,
+    "aria-disabled": isDisabled || void 0,
+    id: `${uniqueValue}-tab`,
+    role: "tab",
+    tabIndex: active ? 0 : -1,
+    ...others,
+    ...(0, import_runtime117.trussProps)({
+      ...baseStyles4,
+      ...active && activeStyles3,
+      ...isDisabled && disabledStyles3,
+      ...isHovered && hoverStyles4,
+      ...isHovered && active && activeHoverStyles,
+      ...isFocusVisible && active && focusRingStyles2
+    })
+  };
+  const interactiveProps = (0, import_react_aria64.mergeProps)(focusProps, hoverProps, {
+    onKeyUp,
+    onBlur,
+    ...isRouteTab(tab) ? {} : {
+      onClick: () => onClick(tab.value)
     }
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(import_jsx_runtime202.Fragment, { children: [
-    wrapWithMotionAndMaybeBack(children),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(Button, { ...buttonProps }, i)) }) })
+  });
+  const tabLabel = /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(import_jsx_runtime201.Fragment, { children: [
+    label,
+    (icon || endAdornment) && /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("span", { className: "ml1", children: icon ? /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(Icon, { icon }) : endAdornment })
   ] });
-};
-
-// src/components/Table/cardSlots.ts
-function cardTitleSlot(text) {
-  return { kind: "title", text };
-}
-function cardEyebrowSlot(text) {
-  return { kind: "eyebrow", text };
+  return isDisabled ? maybeTooltip({
+    title: resolveTooltip(disabled),
+    placement: "top",
+    children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { ...tabProps, children: tabLabel })
+  }) : isRouteTab(tab) ? /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(import_react_router_dom8.Link, { ...(0, import_react_aria64.mergeProps)(tabProps, interactiveProps, {
+    className: "navLink"
+  }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("button", { ...{
+    ...tabProps,
+    ...interactiveProps
+  }, children: tabLabel });
 }
-function cardBadgeSlot(text, tags) {
-  return { kind: "badge", text, tags };
+function getTabStyles() {
+  const borderBottomWidthPx = 4;
+  const verticalPaddingPx = 6;
+  const borderBottomStyles = {
+    borderBottomStyle: "bbs_solid",
+    borderBottomWidth: ["borderBottomWidth_var", {
+      "--borderBottomWidth": (0, import_runtime117.maybeCssVar)(`${borderBottomWidthPx}px`)
+    }],
+    paddingBottom: ["pb_var", {
+      "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
+    }]
+  };
+  return {
+    baseStyles: {
+      display: "df",
+      alignItems: "aic",
+      height: "h_32px",
+      paddingTop: ["py_var", {
+        "--paddingTop": `${verticalPaddingPx}px`
+      }],
+      paddingBottom: ["py_var", {
+        "--paddingBottom": `${verticalPaddingPx}px`
+      }],
+      paddingLeft: "pl1",
+      paddingRight: "pr1",
+      outline: "outline0",
+      color: "gray700",
+      width: "width_fit_content",
+      cursor: "cursorPointer",
+      fontWeight: "fw4",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px"
+    },
+    activeStyles: {
+      ...{
+        borderColor: "bcBlue700",
+        fontWeight: "fw6",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
+        color: "gray900"
+      },
+      ...borderBottomStyles
+    },
+    disabledStyles: {
+      color: "gray400",
+      cursor: "cursorNotAllowed"
+    },
+    focusRingStyles: {
+      backgroundColor: "bgBlue50",
+      boxShadow: "bshFocus"
+    },
+    hoverStyles: {
+      ...{
+        borderColor: "bcGray400"
+      },
+      ...borderBottomStyles
+    },
+    activeHoverStyles: {
+      ...{
+        backgroundColor: "bgBlue50",
+        borderColor: "bcBlue700"
+      },
+      ...borderBottomStyles
+    }
+  };
 }
-function cardStatusSlot(tag) {
-  return { kind: "status", tag };
+function getNextTabValue(selected, key, tabs) {
+  const enabledTabs = tabs.filter((tab) => tab.disabled !== true);
+  const tabsToScan = key === "ArrowRight" ? enabledTabs : enabledTabs.reverse();
+  const currentIndex = tabsToScan.findIndex((tab) => uniqueTabValue(tab) === selected);
+  const nextIndex = currentIndex === tabsToScan.length - 1 ? 0 : currentIndex + 1;
+  return uniqueTabValue(tabsToScan[nextIndex]);
 }
-function cardDataBlockSlot(props) {
-  return { kind: "dataBlock", ...props };
+function isRouteTabs(props) {
+  const {
+    tabs
+  } = props;
+  return tabs.length > 0 && isRouteTab(tabs[0]);
 }
-function cardProgressSlot(value) {
-  return { kind: "progress", value };
+function isRouteTab(tab) {
+  return "path" in tab;
 }
-
-// src/components/Table/utils/simpleHelpers.ts
-var simpleHeader = { kind: "header", id: "header", data: void 0 };
-function simpleDataRows(data = []) {
-  return [simpleHeader, ...data.map((data2) => ({ kind: "data", data: data2, id: data2.id }))];
+function uniqueTabValue(tab) {
+  return isRouteTab(tab) ? (0, import_change_case9.camelCase)(tab.name) : tab.value;
 }
-
-// src/components/Table/utils/visitor.ts
-function visit(rows, fn) {
-  const todo = [...rows];
-  while (todo.length > 0) {
-    const row = todo.pop();
-    fn(row);
-    if (row.children) {
-      todo.push(...row.children);
-    }
-  }
+function hideTabs(props) {
+  return props.alwaysShowAllTabs ? false : props.tabs.filter((t) => !t.disabled).length === 1;
 }
 
 // src/components/TagGroup.tsx
-var import_jsx_runtime203 = require("react/jsx-runtime");
+var import_jsx_runtime202 = require("react/jsx-runtime");
 function TagGroup(props) {
   const {
     tags,
@@ -25461,9 +25408,9 @@ function TagGroup(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "tagGroup");
-  return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)("div", { ...tid, className: "df aic fww gap1", children: [
-    tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(Tag, { ...tag, variant: "secondary" }, tag.text)),
-    onEdit && /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { ...tid, className: "df aic fww gap1", children: [
+    tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(Tag, { ...tag, variant: "secondary" }, tag.text)),
+    onEdit && /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
   ] });
 }
 
@@ -25476,15 +25423,15 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-var import_runtime119 = require("@homebound/truss/runtime");
-var import_jsx_runtime204 = require("react/jsx-runtime");
+var import_runtime118 = require("@homebound/truss/runtime");
+var import_jsx_runtime203 = require("react/jsx-runtime");
 var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function SideNavLayout(props) {
   const hasProvider = useHasSideNavLayoutProvider();
-  if (hasProvider) return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(SideNavLayoutContent, { ...props });
-  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(SideNavLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(SideNavLayoutContent, { ...props }) });
+  if (hasProvider) return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(SideNavLayoutContent, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(SideNavLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(SideNavLayoutContent, { ...props }) });
 }
 function SideNavLayoutContent(props) {
   const {
@@ -25506,7 +25453,7 @@ function SideNavLayoutContent(props) {
   const railOffsetPx = !showRail ? 0 : !bp.mdAndUp || collapsed ? railCollapsedWidthPx : railWidthPx;
   const navTop = bannerAndNavbarChromeTop();
   const railViewportHeight = `calc(var(${beamLayoutViewportHeightVar}, 100vh) - var(${beamEnvironmentBannerLayoutHeightVar}, 0px) - var(${beamNavbarLayoutHeightVar}, 0px))`;
-  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)("div", { ...(0, import_runtime119.trussProps)({
+  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)("div", { ...(0, import_runtime118.trussProps)({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -25530,14 +25477,14 @@ function SideNavLayoutContent(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime119.maybeCssVar)(zIndices.sideNav)
+        "--zIndex": (0, import_runtime118.maybeCssVar)(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": (0, import_runtime119.maybeCssVar)(__maybeInc21(navTop))
+        "--top": (0, import_runtime118.maybeCssVar)(__maybeInc21(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": (0, import_runtime119.maybeCssVar)(__maybeInc21(railViewportHeight))
+        "--height": (0, import_runtime118.maybeCssVar)(__maybeInc21(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -25547,11 +25494,11 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": (0, import_runtime119.maybeCssVar)(__maybeInc21(navTop))
+          "--top": (0, import_runtime118.maybeCssVar)(__maybeInc21(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime119.maybeCssVar)(zIndices.sideNav)
+          "--zIndex": (0, import_runtime118.maybeCssVar)(zIndices.sideNav)
         }]
       },
       ...collapsed ? {
@@ -25563,18 +25510,18 @@ function SideNavLayoutContent(props) {
       }
     }
   }), ...tid.sideNav, children: [
-    showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(SideNav, { ...sideNav }) })
+    showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(SideNav, { ...sideNav }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)("div", { ...(0, import_runtime119.mergeProps)(void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)("div", { ...(0, import_runtime118.mergeProps)(void 0, {
     [beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
   }, {
     display: "df",
     flexDirection: "fdr",
     width: "w100"
   }), ...tid, children: [
-    contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime119.trussProps)({
+    contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(ContrastScope, { children: rail }) : rail,
+    /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { ...(0, import_runtime118.trussProps)({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -25590,8 +25537,8 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-var import_runtime120 = require("@homebound/truss/runtime");
-var import_jsx_runtime205 = require("react/jsx-runtime");
+var import_runtime119 = require("@homebound/truss/runtime");
+var import_jsx_runtime204 = require("react/jsx-runtime");
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25607,35 +25554,35 @@ function EnvironmentBannerLayout(props) {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
   };
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("div", { ...(0, import_runtime120.mergeProps)(void 0, style, {
+  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)("div", { ...(0, import_runtime119.mergeProps)(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ...(0, import_runtime120.mergeProps)(void 0, {
+    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime119.mergeProps)(void 0, {
       height: environmentBannerSizePx
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ...(0, import_runtime120.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime119.trussProps)({
       position: "fixed",
       top: "top0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime120.maybeCssVar)(zIndices.environmentBanner)
+        "--zIndex": (0, import_runtime119.maybeCssVar)(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime120.maybeCssVar)(__maybeInc22(innerWidth))
+        "--width": (0, import_runtime119.maybeCssVar)(__maybeInc22(innerWidth))
       }]
-    }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
+    }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
   ] }) }) });
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 var import_react151 = require("react");
-var import_runtime121 = require("@homebound/truss/runtime");
+var import_runtime120 = require("@homebound/truss/runtime");
 
 // src/layouts/useAutoHideOnScroll.ts
 var import_react148 = require("react");
@@ -25728,7 +25675,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 }
 
 // src/layouts/useMeasuredHeight.ts
-var import_utils171 = require("@react-aria/utils");
+var import_utils170 = require("@react-aria/utils");
 var import_react149 = require("react");
 function useMeasuredHeight(ref, enabled) {
   const [height, setHeight] = (0, import_react149.useState)(0);
@@ -25737,7 +25684,7 @@ function useMeasuredHeight(ref, enabled) {
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
-  (0, import_utils171.useResizeObserver)({ ref, onResize: syncElementHeight });
+  (0, import_utils170.useResizeObserver)({ ref, onResize: syncElementHeight });
   (0, import_react149.useLayoutEffect)(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);
@@ -25746,17 +25693,17 @@ function useMeasuredHeight(ref, enabled) {
 
 // src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
 var import_react150 = require("react");
-var import_jsx_runtime206 = require("react/jsx-runtime");
+var import_jsx_runtime205 = require("react/jsx-runtime");
 var NavbarLayoutHeightContext = (0, import_react150.createContext)(0);
 function NavbarLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
 }
 function useNavbarLayoutHeight() {
   return (0, import_react150.useContext)(NavbarLayoutHeightContext);
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-var import_jsx_runtime207 = require("react/jsx-runtime");
+var import_jsx_runtime206 = require("react/jsx-runtime");
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25785,10 +25732,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime121.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime120.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime121.maybeCssVar)(__maybeInc23(innerWidth))
+        "--width": (0, import_runtime120.maybeCssVar)(__maybeInc23(innerWidth))
       }]
     }
   ) : (
@@ -25797,10 +25744,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime121.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime120.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime121.maybeCssVar)(__maybeInc23(innerWidth))
+        "--width": (0, import_runtime120.maybeCssVar)(__maybeInc23(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -25809,26 +25756,90 @@ function NavbarLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
-  const navbarEl = (0, import_react151.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("div", { ...(0, import_runtime121.mergeProps)(void 0, cssVars, {
+  const navbarEl = (0, import_react151.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Navbar, { ...navbar }), [navbar]);
+  return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("div", { ...(0, import_runtime120.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { ref: spacerRef, ...(0, import_runtime121.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { ref: spacerRef, ...(0, import_runtime120.mergeProps)(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime121.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime120.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) });
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
 var import_react152 = require("react");
 
+// src/components/Headers/BaseHeader.tsx
+var import_runtime121 = require("@homebound/truss/runtime");
+var import_jsx_runtime207 = require("react/jsx-runtime");
+function BaseHeader(props) {
+  const {
+    title,
+    documentTitleSuffix,
+    rightSlot,
+    breadcrumbs,
+    bottomSlot,
+    ...otherProps
+  } = props;
+  const tid = useTestIds(otherProps, "header");
+  useDocumentTitle(title, documentTitleSuffix);
+  return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("header", { ...tid, ...(0, import_runtime121.trussProps)({
+    display: "df",
+    flexDirection: "fdc",
+    paddingTop: "pt3",
+    borderBottomStyle: "bbs_solid",
+    borderBottomWidth: "bbw_1px",
+    gap: "gap2",
+    borderColor: ["bc_var", {
+      "--borderColor": "var(--b-surface-separator)"
+    }],
+    backgroundColor: ["bgColor_var", {
+      "--backgroundColor": "var(--b-surface)"
+    }]
+  }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("div", { ...(0, import_runtime121.trussProps)({
+      ...{
+        display: "df",
+        justifyContent: "jcsb",
+        width: "w100",
+        gap: "gap1",
+        paddingLeft: "pl3",
+        paddingRight: "pr3"
+      },
+      ...{
+        ...!bottomSlot ? {
+          marginBottom: "mb2"
+        } : {}
+      }
+    }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("div", { className: "mw0", children: [
+        breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Breadcrumbs, { ...breadcrumbs }),
+        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("h1", { ...tid.title, className: "fw6 fz_20px lh_28px", children: title })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { className: "fs0", children: rightSlot })
+    ] }),
+    bottomSlot
+  ] });
+}
+
+// src/components/Headers/PageHeader.tsx
+var import_jsx_runtime208 = require("react/jsx-runtime");
+function PageHeader2(props) {
+  const {
+    tabs,
+    ...otherProps
+  } = props;
+  const tid = useTestIds(otherProps, "header");
+  return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("div", { className: "pl3 pr3", children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
+}
+
 // src/layouts/useBannerAndNavbarHeight.ts
 function useBannerAndNavbarHeight() {
   return useEnvironmentBannerLayoutHeight() + useNavbarLayoutHeight();
@@ -25836,7 +25847,7 @@ function useBannerAndNavbarHeight() {
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
 var import_runtime122 = require("@homebound/truss/runtime");
-var import_jsx_runtime208 = require("react/jsx-runtime");
+var import_jsx_runtime209 = require("react/jsx-runtime");
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25891,19 +25902,19 @@ function PageHeaderLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
-  const pageHeaderEl = (0, import_react152.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)("div", { ...(0, import_runtime122.mergeProps)(void 0, cssVars, {
+  const pageHeaderEl = (0, import_react152.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
+  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("div", { ...(0, import_runtime122.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("div", { ref: spacerRef, ...(0, import_runtime122.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { ref: spacerRef, ...(0, import_runtime122.mergeProps)(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime122.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime122.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -26014,7 +26025,6 @@ function PageHeaderLayout(props) {
   NavbarLayout,
   NumberField,
   OpenModal,
-  PageHeader,
   PageHeaderLayout,
   Pagination,
   Palette,