@homebound/beam 3.53.0 → 3.55.0

package/dist/index.js

@@ -4464,6 +4464,7 @@ var Icons = {
     /* @__PURE__ */ jsx3("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__ */ jsx3("path", { d: "M18 11H13V6H16L12 2L8 6H11V11H6V8L2 12L6 16V13H11V18H8L12 22L16 18H13V13H18V16L22 12L18 8V11Z" }),
+  merge: /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsx3("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__ */ jsxs2(Fragment2, { children: [
@@ -23625,326 +23626,8 @@ function NavbarUserMenu({
   }, placement: "right", ...tid }) });
 }
 
-// src/components/Tabs.tsx
-import { camelCase as camelCase7 } from "change-case";
-import { useEffect as useEffect35, useMemo as useMemo52, useRef as useRef59, useState as useState54 } from "react";
-import { mergeProps as mergeProps30, useFocusRing as useFocusRing17, useHover as useHover21 } from "react-aria";
-import { matchPath } from "react-router";
-import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
-import { trussProps as trussProps100, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
-import { Fragment as Fragment44, jsx as jsx190, jsxs as jsxs94 } from "react/jsx-runtime";
-function TabsWithContent(props) {
-  const styles = hideTabs(props) ? {} : {
-    paddingTop: "pt3"
-  };
-  return /* @__PURE__ */ jsxs94(Fragment44, { children: [
-    /* @__PURE__ */ jsx190(Tabs, { ...props }),
-    /* @__PURE__ */ jsx190(TabContent, { ...props, contentXss: {
-      ...styles,
-      ...props.contentXss
-    } })
-  ] });
-}
-function TabContent(props) {
-  const tid = useTestIds(props, "tab");
-  const {
-    tabs,
-    contentXss = {},
-    omitFullBleedPadding = false
-  } = props;
-  const location = useLocation2();
-  const selectedTab = isRouteTabs(props) ? props.tabs.find((t) => {
-    const paths = Array.isArray(t.path) ? t.path : [t.path];
-    return paths.some((p) => !!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__ */ jsx190(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx190("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps100(contentXss), children: selectedTab.render() }) })
-  );
-}
-function Tabs(props) {
-  const {
-    ariaLabel,
-    tabs,
-    includeBottomBorder,
-    right,
-    ...others
-  } = props;
-  const location = useLocation2();
-  const selected = isRouteTabs(props) ? uniqueTabValue(props.tabs.find((t) => {
-    const paths = Array.isArray(t.path) ? t.path : [t.path];
-    return paths.some((p) => !!matchPath({
-      path: p,
-      end: true
-    }, location.pathname));
-  }) || props.tabs[0]) : props.selected;
-  const {
-    isFocusVisible,
-    focusProps
-  } = useFocusRing17();
-  const tid = useTestIds(others, "tabs");
-  const [active, setActive] = useState54(selected);
-  const ref = useRef59(null);
-  useEffect35(() => 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__ */ jsxs94("div", { ...trussProps100({
-    ...{
-      display: "df",
-      alignItems: "aic",
-      overflow: "oa",
-      whiteSpace: "wsnw",
-      gap: "gap1"
-    },
-    ...includeBottomBorder ? {
-      ...{
-        borderBottomStyle: "bbs_solid",
-        borderBottomWidth: "bbw_1px",
-        borderColor: "bcGray200"
-      }
-    } : {}
-  }), children: [
-    !hideTabs(props) && /* @__PURE__ */ jsx190("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
-      const uniqueValue = uniqueTabValue(tab);
-      return /* @__PURE__ */ jsx190(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
-    }) }),
-    right && /* @__PURE__ */ jsx190("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
-  } = useHover21({
-    isDisabled
-  });
-  const {
-    baseStyles: baseStyles4,
-    activeStyles: activeStyles3,
-    focusRingStyles: focusRingStyles2,
-    hoverStyles: hoverStyles4,
-    disabledStyles: disabledStyles3,
-    activeHoverStyles
-  } = useMemo52(() => 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,
-    ...trussProps100({
-      ...baseStyles4,
-      ...active && activeStyles3,
-      ...isDisabled && disabledStyles3,
-      ...isHovered && hoverStyles4,
-      ...isHovered && active && activeHoverStyles,
-      ...isFocusVisible && active && focusRingStyles2
-    })
-  };
-  const interactiveProps = mergeProps30(focusProps, hoverProps, {
-    onKeyUp,
-    onBlur,
-    ...isRouteTab(tab) ? {} : {
-      onClick: () => onClick(tab.value)
-    }
-  });
-  const tabLabel = /* @__PURE__ */ jsxs94(Fragment44, { children: [
-    label,
-    (icon || endAdornment) && /* @__PURE__ */ jsx190("span", { className: "ml1", children: icon ? /* @__PURE__ */ jsx190(Icon, { icon }) : endAdornment })
-  ] });
-  return isDisabled ? maybeTooltip({
-    title: resolveTooltip(disabled),
-    placement: "top",
-    children: /* @__PURE__ */ jsx190("div", { ...tabProps, children: tabLabel })
-  }) : isRouteTab(tab) ? /* @__PURE__ */ jsx190(Link7, { ...mergeProps30(tabProps, interactiveProps, {
-    className: "navLink"
-  }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ jsx190("button", { ...{
-    ...tabProps,
-    ...interactiveProps
-  }, children: tabLabel });
-}
-function getTabStyles() {
-  const borderBottomWidthPx = 4;
-  const verticalPaddingPx = 6;
-  const borderBottomStyles = {
-    borderBottomStyle: "bbs_solid",
-    borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": maybeCssVar53(`${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) ? camelCase7(tab.name) : tab.value;
-}
-function hideTabs(props) {
-  return props.alwaysShowAllTabs ? false : props.tabs.filter((t) => !t.disabled).length === 1;
-}
-
-// src/components/PageHeader.tsx
-import { trussProps as trussProps101 } from "@homebound/truss/runtime";
-import { jsx as jsx191, jsxs as jsxs95 } from "react/jsx-runtime";
-function PageHeader2(props) {
-  const {
-    title,
-    documentTitleSuffix,
-    rightSlot,
-    tabs,
-    breadcrumbs,
-    ...otherProps
-  } = props;
-  const tid = useTestIds(otherProps, "pageHeader");
-  useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ jsxs95("header", { ...tid, ...trussProps101({
-    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__ */ jsxs95("div", { ...trussProps101({
-      ...{
-        display: "df",
-        justifyContent: "jcsb",
-        width: "w100",
-        gap: "gap1"
-      },
-      ...{
-        ...!tabs ? {
-          marginBottom: "mb2"
-        } : {}
-      }
-    }), children: [
-      /* @__PURE__ */ jsxs95("div", { className: "mw0", children: [
-        breadcrumbs && /* @__PURE__ */ jsx191(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ jsx191("h1", { ...tid.title, className: "fw6 fz_20px lh_28px", children: title })
-      ] }),
-      /* @__PURE__ */ jsx191("div", { className: "fs0", children: rightSlot })
-    ] }),
-    tabs && /* @__PURE__ */ jsx191(Tabs, { ...tabs })
-  ] });
-}
-
 // src/components/Pagination.tsx
-import { jsx as jsx192, jsxs as jsxs96 } from "react/jsx-runtime";
+import { jsx as jsx190, jsxs as jsxs94 } from "react/jsx-runtime";
 var defaultPage = {
   offset: 0,
   limit: 100
@@ -23976,25 +23659,25 @@ function Pagination(props) {
     }
   }
   const tid = useTestIds(props, "pagination");
-  return /* @__PURE__ */ jsxs96("div", { className: "df bcGray200 bts_solid btw_1px fw4 fz_12px lh_16px gray500 pl2 pr2 pt2", ...tid, children: [
-    /* @__PURE__ */ jsx192("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
-    /* @__PURE__ */ jsx192("div", { className: "w_78px", children: /* @__PURE__ */ jsx192(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
+  return /* @__PURE__ */ jsxs94("div", { className: "df bcGray200 bts_solid btw_1px fw4 fz_12px lh_16px gray500 pl2 pr2 pt2", ...tid, children: [
+    /* @__PURE__ */ jsx190("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
+    /* @__PURE__ */ jsx190("div", { className: "w_78px", children: /* @__PURE__ */ jsx190(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
       pageNumber: 1,
       pageSize: val
     }), autoSort: false, ...tid.pageSize }) }),
-    /* @__PURE__ */ jsxs96("div", { className: "mla mta mba df", children: [
-      /* @__PURE__ */ jsxs96("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
+    /* @__PURE__ */ jsxs94("div", { className: "mla mta mba df", children: [
+      /* @__PURE__ */ jsxs94("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
         first,
         " ",
         showLast ? `- ${last}` : "",
         " of ",
         totalCount
       ] }),
-      /* @__PURE__ */ jsx192(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "rgba(29, 78, 216, 1)" /* Blue700 */ : "rgba(236, 235, 235, 1)" /* Gray200 */, onClick: () => set({
+      /* @__PURE__ */ jsx190(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__ */ jsx192(IconButton, { icon: "chevronRight", color: hasNextPage ? "rgba(29, 78, 216, 1)" /* Blue700 */ : "rgba(236, 235, 235, 1)" /* Gray200 */, onClick: () => set({
+      /* @__PURE__ */ jsx190(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 })
@@ -24017,9 +23700,9 @@ function toPageNumberSize(page) {
 
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
-import { useCallback as useCallback34, useMemo as useMemo53, useRef as useRef60, useState as useState55 } from "react";
-import { trussProps as trussProps102, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
-import { jsx as jsx193, jsxs as jsxs97 } from "react/jsx-runtime";
+import { useCallback as useCallback34, useMemo as useMemo52, useRef as useRef59, useState as useState54 } from "react";
+import { trussProps as trussProps100, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
+import { jsx as jsx191, jsxs as jsxs95 } from "react/jsx-runtime";
 function ScrollShadows(props) {
   const {
     children,
@@ -24035,15 +23718,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] = useState55(false);
-  const [showEndShadow, setShowEndShadow] = useState55(false);
-  const scrollRef = useRef60(null);
-  const [startShadowStyles, endShadowStyles] = useMemo53(() => {
+  const [showStartShadow, setShowStartShadow] = useState54(false);
+  const [showEndShadow, setShowEndShadow] = useState54(false);
+  const scrollRef = useRef59(null);
+  const [startShadowStyles, endShadowStyles] = useMemo52(() => {
     const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
     const commonStyles = {
       position: "absolute",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar54(zIndices.scrollShadow)
+        "--zIndex": maybeCssVar53(zIndices.scrollShadow)
       }],
       pointerEvents: "pointerEvents_none"
     };
@@ -24076,7 +23759,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar54(startGradient)
+          "--background": maybeCssVar53(startGradient)
         }]
       }
     }, {
@@ -24084,7 +23767,7 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar54(endGradient)
+          "--background": maybeCssVar53(endGradient)
         }]
       }
     }];
@@ -24109,10 +23792,10 @@ function ScrollShadows(props) {
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ jsxs97("div", { ...trussProps102({
+  return /* @__PURE__ */ jsxs95("div", { ...trussProps100({
     display: "df",
     flexDirection: ["fd_var", {
-      "--flexDirection": maybeCssVar54(!horizontal ? "column" : "row")
+      "--flexDirection": maybeCssVar53(!horizontal ? "column" : "row")
     }],
     position: "relative",
     overflow: "oh",
@@ -24125,23 +23808,23 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ jsx193("div", { ...trussProps102({
+    /* @__PURE__ */ jsx191("div", { ...trussProps100({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar54(showStartShadow ? 1 : 0)
+          "--opacity": maybeCssVar53(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx193("div", { ...trussProps102({
+    /* @__PURE__ */ jsx191("div", { ...trussProps100({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar54(showEndShadow ? 1 : 0)
+          "--opacity": maybeCssVar53(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx193("div", { ...trussProps102({
+    /* @__PURE__ */ jsx191("div", { ...trussProps100({
       ...xss,
       ...{
         overflow: "oa",
@@ -24157,12 +23840,12 @@ import {
   createContext as createContext14,
   useCallback as useCallback35,
   useContext as useContext26,
-  useEffect as useEffect36,
-  useMemo as useMemo54,
-  useRef as useRef61,
-  useState as useState56
+  useEffect as useEffect35,
+  useMemo as useMemo53,
+  useRef as useRef60,
+  useState as useState55
 } from "react";
-import { jsx as jsx194 } from "react/jsx-runtime";
+import { jsx as jsx192 } from "react/jsx-runtime";
 var SIDE_NAV_LAYOUT_STATE_STORAGE_KEY = "beam.sideNavLayout.navState";
 function loadStoredNavState() {
   try {
@@ -24186,12 +23869,12 @@ function resolveInitialNavState(defaultNavState) {
 }
 var SideNavLayoutContext = createContext14(void 0);
 function SideNavLayoutProvider(props) {
-  const [navState, setNavStateInternal] = useState56(
+  const [navState, setNavStateInternal] = useState55(
     () => resolveInitialNavState(props.defaultNavState)
   );
   const bp = useBreakpoint();
-  const prevMdAndUp = useRef61(bp.mdAndUp);
-  useEffect36(() => {
+  const prevMdAndUp = useRef60(bp.mdAndUp);
+  useEffect35(() => {
     if (prevMdAndUp.current && !bp.mdAndUp) {
       setNavStateInternal((prev) => prev === "expanded" ? "collapse" : prev);
     }
@@ -24209,8 +23892,8 @@ function SideNavLayoutProvider(props) {
       return next;
     });
   }, []);
-  const value = useMemo54(() => ({ navState, setNavState }), [navState, setNavState]);
-  return /* @__PURE__ */ jsx194(SideNavLayoutContext.Provider, { value, children: props.children });
+  const value = useMemo53(() => ({ navState, setNavState }), [navState, setNavState]);
+  return /* @__PURE__ */ jsx192(SideNavLayoutContext.Provider, { value, children: props.children });
 }
 function useSideNavLayoutContext() {
   return useContext26(SideNavLayoutContext) ?? { navState: "expanded", setNavState: () => {
@@ -24221,8 +23904,8 @@ function useHasSideNavLayoutProvider() {
 }
 
 // src/components/SideNav/SideNav.tsx
-import { trussProps as trussProps103 } from "@homebound/truss/runtime";
-import { jsx as jsx195, jsxs as jsxs98 } from "react/jsx-runtime";
+import { trussProps as trussProps101 } from "@homebound/truss/runtime";
+import { jsx as jsx193, jsxs as jsxs96 } from "react/jsx-runtime";
 function SideNav(props) {
   const {
     top,
@@ -24235,8 +23918,8 @@ function SideNav(props) {
   const tid = useTestIds(props, "sideNav");
   const panelCollapsed = navState === "collapse";
   const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
-  return /* @__PURE__ */ jsxs98("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    top !== void 0 && /* @__PURE__ */ jsx195("div", { ...trussProps103({
+  return /* @__PURE__ */ jsxs96("nav", { className: "df fdc h100 fs0", ...tid, children: [
+    top !== void 0 && /* @__PURE__ */ jsx193("div", { ...trussProps101({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -24247,7 +23930,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ jsx195("div", { ...trussProps103({
+    /* @__PURE__ */ jsx193("div", { ...trussProps101({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -24259,8 +23942,8 @@ function SideNav(props) {
       ...top === void 0 ? {
         paddingTop: "pt5"
       } : {}
-    }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ jsx195(AppNavItems, { items, panelCollapsed }) }),
-    footer !== void 0 && /* @__PURE__ */ jsx195("div", { ...trussProps103({
+    }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ jsx193(AppNavItems, { items, panelCollapsed }) }),
+    footer !== void 0 && /* @__PURE__ */ jsx193("div", { ...trussProps101({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -24276,7 +23959,7 @@ function SideNav(props) {
 }
 
 // src/components/Snackbar/useSnackbar.tsx
-import { useCallback as useCallback36, useEffect as useEffect37 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect36 } from "react";
 function useSnackbar() {
   const { setNotices, setOffset } = useSnackbarContext();
   const onClose = useCallback36(
@@ -24326,7 +24009,7 @@ function useSnackbar() {
     [onClose, setNotices]
   );
   const closeNotice = useCallback36((id) => onClose(id), [onClose]);
-  const useSnackbarOffset = ({ bottom }) => useEffect37(() => {
+  const useSnackbarOffset = ({ bottom }) => useEffect36(() => {
     setOffset({ bottom });
     return () => setOffset({});
   }, [bottom]);
@@ -24335,10 +24018,10 @@ function useSnackbar() {
 var snackbarId = 1;
 
 // src/components/Stepper.tsx
-import { useRef as useRef62 } from "react";
-import { useButton as useButton12, useFocusRing as useFocusRing18, useHover as useHover22 } from "react-aria";
-import { trussProps as trussProps104, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
-import { jsx as jsx196, jsxs as jsxs99 } from "react/jsx-runtime";
+import { useRef as useRef61 } from "react";
+import { useButton as useButton12, useFocusRing as useFocusRing17, useHover as useHover21 } from "react-aria";
+import { trussProps as trussProps102, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
+import { jsx as jsx194, jsxs as jsxs97 } from "react/jsx-runtime";
 import { createElement as createElement5 } from "react";
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24357,8 +24040,8 @@ function Stepper(props) {
   const maxStepWidth = 200;
   const minStepWidth = 100;
   const gap = 8;
-  return /* @__PURE__ */ jsxs99("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ jsx196("ol", { ...trussProps104({
+  return /* @__PURE__ */ jsxs97("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
+    /* @__PURE__ */ jsx194("ol", { ...trussProps102({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -24368,7 +24051,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ createElement5("li", { ...trussProps104({
+      return /* @__PURE__ */ createElement5("li", { ...trussProps102({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -24378,9 +24061,9 @@ function Stepper(props) {
         minWidth: ["mw_var", {
           "--minWidth": `${minStepWidth}px`
         }]
-      }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx196(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
+      }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx194(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ jsx196("div", { ...trussProps104({
+    /* @__PURE__ */ jsx194("div", { ...trussProps102({
       marginTop: "mt1",
       backgroundColor: "bgGray300",
       height: "h_4px",
@@ -24391,12 +24074,12 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ jsx196("div", { ...trussProps104({
+    }), children: /* @__PURE__ */ jsx194("div", { ...trussProps102({
       backgroundColor: "bgBlue600",
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": maybeCssVar55(__maybeInc20(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": maybeCssVar54(__maybeInc20(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -24413,7 +24096,7 @@ function StepButton(props) {
     onPress: onClick,
     isDisabled: disabled
   };
-  const ref = useRef62(null);
+  const ref = useRef61(null);
   const {
     buttonProps,
     isPressed
@@ -24421,18 +24104,18 @@ function StepButton(props) {
   const {
     isFocusVisible,
     focusProps
-  } = useFocusRing18();
+  } = useFocusRing17();
   const {
     hoverProps,
     isHovered
-  } = useHover22(ariaProps);
+  } = useHover21(ariaProps);
   const focusRingStyles2 = state === "error" ? {
     boxShadow: "bshDanger"
   } : {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ jsxs99("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps104({
+  return /* @__PURE__ */ jsxs97("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps102({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -24484,7 +24167,7 @@ function StepButton(props) {
     } : {},
     ...isFocusVisible ? focusRingStyles2 : {}
   }), ...tid[defaultTestId(label)], children: [
-    /* @__PURE__ */ jsx196("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ jsx196(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
+    /* @__PURE__ */ jsx194("span", { className: "fs0 mr_4px", children: /* @__PURE__ */ jsx194(StepIcon, { state, isHovered, isPressed, isCurrent }) }),
     label
   ] });
 }
@@ -24495,12 +24178,12 @@ function StepIcon({
   isCurrent = false
 }) {
   if (state === "error") {
-    return /* @__PURE__ */ jsx196(Icon, { icon: "errorCircle" });
+    return /* @__PURE__ */ jsx194(Icon, { icon: "errorCircle" });
   }
   if (state === "complete") {
-    return /* @__PURE__ */ jsx196(Icon, { icon: "check" });
+    return /* @__PURE__ */ jsx194(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ jsx196("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx196("div", { ...trussProps104({
+  return /* @__PURE__ */ jsx194("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx194("div", { ...trussProps102({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -24514,10 +24197,10 @@ function StepIcon({
 }
 
 // src/components/StepperTabs/StepperTab.tsx
-import { useRef as useRef63 } from "react";
-import { mergeProps as mergeProps31, useButton as useButton13, useFocusRing as useFocusRing19, useHover as useHover23, VisuallyHidden as VisuallyHidden10 } from "react-aria";
-import { trussProps as trussProps105, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
-import { jsx as jsx197, jsxs as jsxs100 } from "react/jsx-runtime";
+import { useRef as useRef62 } from "react";
+import { mergeProps as mergeProps30, useButton as useButton13, useFocusRing as useFocusRing18, useHover as useHover22, VisuallyHidden as VisuallyHidden10 } from "react-aria";
+import { trussProps as trussProps103, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
+import { jsx as jsx195, jsxs as jsxs98 } from "react/jsx-runtime";
 function StepperTab(props) {
   const {
     label,
@@ -24532,20 +24215,20 @@ function StepperTab(props) {
     onPress: () => onClick(value),
     isDisabled: disabled || collapsed
   };
-  const ref = useRef63(null);
+  const ref = useRef62(null);
   const {
     buttonProps
   } = useButton13(ariaProps, ref);
   const {
     isFocusVisible,
     focusProps
-  } = useFocusRing19();
+  } = useFocusRing18();
   const {
     hoverProps,
     isHovered
-  } = useHover23(ariaProps);
+  } = useHover22(ariaProps);
   const tid = useTestIds(props, "stepperTab");
-  return /* @__PURE__ */ jsxs100("button", { ref, ...mergeProps31(buttonProps, focusProps, hoverProps), "aria-label": label, ...trussProps105({
+  return /* @__PURE__ */ jsxs98("button", { ref, ...mergeProps30(buttonProps, focusProps, hoverProps), "aria-label": label, ...trussProps103({
     ...stepperTabStyles.baseStyles,
     ...getStateStyles(active, completed),
     ...isHovered && !disabled ? stepperTabStyles.hoverStyles : {},
@@ -24553,9 +24236,9 @@ function StepperTab(props) {
     ...disabled ? stepperTabStyles.disabledStyles : {},
     ...isFocusVisible ? stepperTabStyles.focusRingStyles : {}
   }), ...tid[defaultTestId(value)], children: [
-    /* @__PURE__ */ jsx197("span", { className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1", children: label }),
-    completed && /* @__PURE__ */ jsx197("span", { className: "fs0 ml1", children: /* @__PURE__ */ jsx197(Icon, { icon: "check", inc: 2.5, ...tid.check }) }),
-    /* @__PURE__ */ jsx197(VisuallyHidden10, { children: completed ? "Complete" : "Not Complete" })
+    /* @__PURE__ */ jsx195("span", { className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1", children: label }),
+    completed && /* @__PURE__ */ jsx195("span", { className: "fs0 ml1", children: /* @__PURE__ */ jsx195(Icon, { icon: "check", inc: 2.5, ...tid.check }) }),
+    /* @__PURE__ */ jsx195(VisuallyHidden10, { children: completed ? "Complete" : "Not Complete" })
   ] });
 }
 function withBorderBottom(color) {
@@ -24563,7 +24246,7 @@ function withBorderBottom(color) {
     ...{
       borderBottomStyle: "bbs_solid",
       borderBottomWidth: ["borderBottomWidth_var", {
-        "--borderBottomWidth": maybeCssVar56(`3px`)
+        "--borderBottomWidth": maybeCssVar55(`3px`)
       }]
     },
     ...color
@@ -24635,8 +24318,8 @@ var stepperTabStyles = {
 };
 
 // src/components/StepperTabs/StepperTabs.tsx
-import { trussProps as trussProps106 } from "@homebound/truss/runtime";
-import { jsx as jsx198 } from "react/jsx-runtime";
+import { trussProps as trussProps104 } from "@homebound/truss/runtime";
+import { jsx as jsx196 } from "react/jsx-runtime";
 import { createElement as createElement6 } from "react";
 function StepperTabs(props) {
   const {
@@ -24649,7 +24332,7 @@ function StepperTabs(props) {
     sm: collapsed
   } = useBreakpoint();
   const capWidth = steps.length <= 3;
-  return /* @__PURE__ */ jsx198("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ jsx198("ol", { ...trussProps106({
+  return /* @__PURE__ */ jsx196("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ jsx196("ol", { ...trussProps104({
     padding: "p_0",
     margin: "m_0",
     listStyle: "lis_none",
@@ -24663,7 +24346,7 @@ function StepperTabs(props) {
     borderColor: "bcGray400"
   }), children: steps.map((step) => {
     const isCurrent = step.value === currentStep;
-    return /* @__PURE__ */ createElement6("li", { ...trussProps106({
+    return /* @__PURE__ */ createElement6("li", { ...trussProps104({
       display: "df",
       flexGrow: "fg1",
       flexBasis: "fb_0",
@@ -24675,7 +24358,7 @@ function StepperTabs(props) {
           "--maxWidth": `${maxStepWidthPx}px`
         }]
       } : {}
-    }), key: step.value, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx198(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__ */ jsx196(StepperTab, { label: step.label, value: step.value, active: isCurrent, completed: step.completed, disabled: step.disabled, collapsed, onClick: onChange, ...tid.tab }));
   }) }) });
 }
 var maxStepWidthPx = 280;
@@ -24683,8 +24366,8 @@ var gapPx = 6;
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 import { createPortal as createPortal7 } from "react-dom";
-import { trussProps as trussProps107 } from "@homebound/truss/runtime";
-import { jsx as jsx199, jsxs as jsxs101 } from "react/jsx-runtime";
+import { trussProps as trussProps105 } from "@homebound/truss/runtime";
+import { jsx as jsx197, jsxs as jsxs99 } from "react/jsx-runtime";
 function SuperDrawerHeader(props) {
   const {
     hideControls
@@ -24701,20 +24384,20 @@ function SuperDrawerHeader(props) {
   const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
   const isDetail = currentContent !== firstContent;
   const tid = useTestIds({}, "superDrawerHeader");
-  return createPortal7(/* @__PURE__ */ jsxs101("div", { className: "df aic jcsb gap3", ...tid, children: [
-    isStructuredProps(props) ? /* @__PURE__ */ jsxs101("div", { className: "df jcsb aic gap2 fg1", children: [
-      /* @__PURE__ */ jsxs101("div", { className: "fg1 df aic gap2", children: [
-        /* @__PURE__ */ jsx199("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
+  return createPortal7(/* @__PURE__ */ jsxs99("div", { className: "df aic jcsb gap3", ...tid, children: [
+    isStructuredProps(props) ? /* @__PURE__ */ jsxs99("div", { className: "df jcsb aic gap2 fg1", children: [
+      /* @__PURE__ */ jsxs99("div", { className: "fg1 df aic gap2", children: [
+        /* @__PURE__ */ jsx197("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
         props.left
       ] }),
-      props.right && /* @__PURE__ */ jsx199("div", { className: "fs0", children: props.right })
-    ] }) : /* @__PURE__ */ jsx199("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ jsx199("div", { ...trussProps107({
+      props.right && /* @__PURE__ */ jsx197("div", { className: "fs0", children: props.right })
+    ] }) : /* @__PURE__ */ jsx197("div", { className: "fg1", children: props.children }),
+    !hideControls && /* @__PURE__ */ jsx197("div", { ...trussProps105({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
       } : {}
-    }), children: /* @__PURE__ */ jsx199(ButtonGroup, { buttons: [{
+    }), children: /* @__PURE__ */ jsx197(ButtonGroup, { buttons: [{
       icon: "chevronLeft",
       onClick: () => onPrevClick && onPrevClick(),
       disabled: !onPrevClick
@@ -24730,18 +24413,18 @@ function isStructuredProps(props) {
 }
 
 // src/components/SuperDrawer/ConfirmCloseModal.tsx
-import { Fragment as Fragment45, jsx as jsx200, jsxs as jsxs102 } from "react/jsx-runtime";
+import { Fragment as Fragment44, jsx as jsx198, jsxs as jsxs100 } 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__ */ jsxs102(Fragment45, { children: [
-    /* @__PURE__ */ jsx200(ModalHeader, { children: "Are you sure you want to cancel?" }),
-    /* @__PURE__ */ jsx200(ModalBody, { children: /* @__PURE__ */ jsx200("p", { children: "Any changes you've made so far will be lost." }) }),
-    /* @__PURE__ */ jsxs102(ModalFooter, { children: [
-      /* @__PURE__ */ jsx200(
+  return /* @__PURE__ */ jsxs100(Fragment44, { children: [
+    /* @__PURE__ */ jsx198(ModalHeader, { children: "Are you sure you want to cancel?" }),
+    /* @__PURE__ */ jsx198(ModalBody, { children: /* @__PURE__ */ jsx198("p", { children: "Any changes you've made so far will be lost." }) }),
+    /* @__PURE__ */ jsxs100(ModalFooter, { children: [
+      /* @__PURE__ */ jsx198(
         Button,
         {
           variant: "quaternary",
@@ -24752,7 +24435,7 @@ function ConfirmCloseModal(props) {
           }
         }
       ),
-      /* @__PURE__ */ jsx200(Button, { label: continueText, onClick: closeModal })
+      /* @__PURE__ */ jsx198(Button, { label: continueText, onClick: closeModal })
     ] })
   ] });
 }
@@ -24761,8 +24444,8 @@ function ConfirmCloseModal(props) {
 import { motion as motion6 } from "framer-motion";
 
 // src/components/SuperDrawer/useSuperDrawer.tsx
-import { useMemo as useMemo55 } from "react";
-import { jsx as jsx201 } from "react/jsx-runtime";
+import { useMemo as useMemo54 } from "react";
+import { jsx as jsx199 } from "react/jsx-runtime";
 function useSuperDrawer() {
   const {
     drawerContentStack: contentStack,
@@ -24774,7 +24457,7 @@ function useSuperDrawer() {
   function canCloseDrawerDetails(i, doChange) {
     for (const canCloseDrawerDetail of canCloseDetailsChecks.current[i] ?? []) {
       if (!canClose(canCloseDrawerDetail)) {
-        openModal({ content: /* @__PURE__ */ jsx201(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
+        openModal({ content: /* @__PURE__ */ jsx199(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
         return false;
       }
     }
@@ -24794,14 +24477,14 @@ function useSuperDrawer() {
     for (const canCloseDrawer of canCloseChecks.current) {
       if (!canClose(canCloseDrawer)) {
         openModal({
-          content: /* @__PURE__ */ jsx201(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
+          content: /* @__PURE__ */ jsx199(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
         });
         return;
       }
     }
     doChange();
   }
-  const closeActions = useMemo55(
+  const closeActions = useMemo54(
     () => {
       return {
         /** Attempts to close the drawer. If any checks fail, a confirmation modal will appear */
@@ -24836,7 +24519,7 @@ function useSuperDrawer() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [canCloseChecks, canCloseDetailsChecks, contentStack, modalState, openModal]
   );
-  const actions = useMemo55(
+  const actions = useMemo54(
     () => {
       return {
         // TODO: Maybe we should rename to openDrawer as a breaking change (to match openDrawerDetail)
@@ -24889,8 +24572,8 @@ function canClose(canCloseCheck) {
 }
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
-import { mergeProps as mergeProps32 } from "@homebound/truss/runtime";
-import { Fragment as Fragment46, jsx as jsx202, jsxs as jsxs103 } from "react/jsx-runtime";
+import { mergeProps as mergeProps31 } from "@homebound/truss/runtime";
+import { Fragment as Fragment45, jsx as jsx200, jsxs as jsxs101 } from "react/jsx-runtime";
 var SuperDrawerContent = ({
   children,
   actions
@@ -24899,102 +24582,367 @@ var SuperDrawerContent = ({
     closeDrawerDetail
   } = useSuperDrawer();
   const {
-    drawerContentStack: contentStack
-  } = useBeamContext();
+    drawerContentStack: contentStack
+  } = useBeamContext();
+  const {
+    kind
+  } = 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__ */ jsx200(motion6.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
+    } else if (kind === "detail") {
+      return /* @__PURE__ */ jsxs101(motion6.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
+        overflow: "auto"
+      }, transition: {
+        overflow: {
+          delay: 0.3
+        }
+      }, children: [
+        /* @__PURE__ */ jsx200(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
+        /* @__PURE__ */ jsx200(motion6.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__ */ jsx200(motion6.div, { ...mergeProps31(void 0, {
+        overflow: "auto"
+      }, {
+        paddingTop: "pt3",
+        paddingBottom: "pb3",
+        paddingRight: "pr3",
+        paddingLeft: "pl3",
+        flexGrow: "fg1"
+      }) }, "content");
+    }
+  }
+  return /* @__PURE__ */ jsxs101(Fragment45, { children: [
+    wrapWithMotionAndMaybeBack(children),
+    actions && /* @__PURE__ */ jsx200("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ jsx200("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ jsx200(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
+import { camelCase as camelCase7 } from "change-case";
+import { useEffect as useEffect37, useMemo as useMemo55, useRef as useRef63, useState as useState56 } from "react";
+import { mergeProps as mergeProps32, useFocusRing as useFocusRing19, useHover as useHover23 } from "react-aria";
+import { matchPath } from "react-router";
+import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
+import { trussProps as trussProps106, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
+import { Fragment as Fragment46, jsx as jsx201, jsxs as jsxs102 } from "react/jsx-runtime";
+function TabsWithContent(props) {
+  const styles = hideTabs(props) ? {} : {
+    paddingTop: "pt3"
+  };
+  return /* @__PURE__ */ jsxs102(Fragment46, { children: [
+    /* @__PURE__ */ jsx201(Tabs, { ...props }),
+    /* @__PURE__ */ jsx201(TabContent, { ...props, contentXss: {
+      ...styles,
+      ...props.contentXss
+    } })
+  ] });
+}
+function TabContent(props) {
+  const tid = useTestIds(props, "tab");
+  const {
+    tabs,
+    contentXss = {},
+    omitFullBleedPadding = false
+  } = props;
+  const location = useLocation2();
+  const selectedTab = isRouteTabs(props) ? props.tabs.find((t) => {
+    const paths = Array.isArray(t.path) ? t.path : [t.path];
+    return paths.some((p) => !!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__ */ jsx201(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx201("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps106(contentXss), children: selectedTab.render() }) })
+  );
+}
+function Tabs(props) {
+  const {
+    ariaLabel,
+    tabs,
+    includeBottomBorder,
+    right,
+    ...others
+  } = props;
+  const location = useLocation2();
+  const selected = isRouteTabs(props) ? uniqueTabValue(props.tabs.find((t) => {
+    const paths = Array.isArray(t.path) ? t.path : [t.path];
+    return paths.some((p) => !!matchPath({
+      path: p,
+      end: true
+    }, location.pathname));
+  }) || props.tabs[0]) : props.selected;
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing19();
+  const tid = useTestIds(others, "tabs");
+  const [active, setActive] = useState56(selected);
+  const ref = useRef63(null);
+  useEffect37(() => 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__ */ jsxs102("div", { ...trussProps106({
+    ...{
+      display: "df",
+      alignItems: "aic",
+      overflow: "oa",
+      whiteSpace: "wsnw",
+      gap: "gap1"
+    },
+    ...includeBottomBorder ? {
+      ...{
+        borderBottomStyle: "bbs_solid",
+        borderBottomWidth: "bbw_1px",
+        borderColor: "bcGray200"
+      }
+    } : {}
+  }), children: [
+    !hideTabs(props) && /* @__PURE__ */ jsx201("div", { ref, className: "dif gap1 asfe", "aria-label": ariaLabel, role: "tablist", ...tid, children: tabs.map((tab) => {
+      const uniqueValue = uniqueTabValue(tab);
+      return /* @__PURE__ */ jsx201(TabImpl, { active: active === uniqueValue, focusProps, isFocusVisible, onClick, onKeyUp, onBlur, tab, ...tid[defaultTestId(uniqueValue)] }, uniqueValue);
+    }) }),
+    right && /* @__PURE__ */ jsx201("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 {
-    kind
-  } = contentStack.current[contentStack.current.length - 1] ?? {};
-  const firstContent = contentStack.current[0]?.opts;
+    hoverProps,
+    isHovered
+  } = useHover23({
+    isDisabled
+  });
   const {
-    width: width2 = 1040 /* Normal */
-  } = firstContent ?? {};
-  function wrapWithMotionAndMaybeBack(children2) {
-    if (kind === "open") {
-      return /* @__PURE__ */ jsx202(motion6.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
-    } else if (kind === "detail") {
-      return /* @__PURE__ */ jsxs103(motion6.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
-        overflow: "auto"
-      }, transition: {
-        overflow: {
-          delay: 0.3
-        }
-      }, children: [
-        /* @__PURE__ */ jsx202(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
-        /* @__PURE__ */ jsx202(motion6.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__ */ jsx202(motion6.div, { ...mergeProps32(void 0, {
-        overflow: "auto"
-      }, {
-        paddingTop: "pt3",
-        paddingBottom: "pb3",
-        paddingRight: "pr3",
-        paddingLeft: "pl3",
-        flexGrow: "fg1"
-      }) }, "content");
+    baseStyles: baseStyles4,
+    activeStyles: activeStyles3,
+    focusRingStyles: focusRingStyles2,
+    hoverStyles: hoverStyles4,
+    disabledStyles: disabledStyles3,
+    activeHoverStyles
+  } = useMemo55(() => 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,
+    ...trussProps106({
+      ...baseStyles4,
+      ...active && activeStyles3,
+      ...isDisabled && disabledStyles3,
+      ...isHovered && hoverStyles4,
+      ...isHovered && active && activeHoverStyles,
+      ...isFocusVisible && active && focusRingStyles2
+    })
+  };
+  const interactiveProps = mergeProps32(focusProps, hoverProps, {
+    onKeyUp,
+    onBlur,
+    ...isRouteTab(tab) ? {} : {
+      onClick: () => onClick(tab.value)
     }
-  }
-  return /* @__PURE__ */ jsxs103(Fragment46, { children: [
-    wrapWithMotionAndMaybeBack(children),
-    actions && /* @__PURE__ */ jsx202("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ jsx202("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ jsx202(Button, { ...buttonProps }, i)) }) })
+  });
+  const tabLabel = /* @__PURE__ */ jsxs102(Fragment46, { children: [
+    label,
+    (icon || endAdornment) && /* @__PURE__ */ jsx201("span", { className: "ml1", children: icon ? /* @__PURE__ */ jsx201(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__ */ jsx201("div", { ...tabProps, children: tabLabel })
+  }) : isRouteTab(tab) ? /* @__PURE__ */ jsx201(Link7, { ...mergeProps32(tabProps, interactiveProps, {
+    className: "navLink"
+  }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ jsx201("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": maybeCssVar56(`${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) ? camelCase7(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
-import { jsx as jsx203, jsxs as jsxs104 } from "react/jsx-runtime";
+import { jsx as jsx202, jsxs as jsxs103 } from "react/jsx-runtime";
 function TagGroup(props) {
   const {
     tags,
@@ -25002,9 +24950,9 @@ function TagGroup(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "tagGroup");
-  return /* @__PURE__ */ jsxs104("div", { ...tid, className: "df aic fww gap1", children: [
-    tags.map((tag) => /* @__PURE__ */ jsx203(Tag, { ...tag, variant: "secondary" }, tag.text)),
-    onEdit && /* @__PURE__ */ jsx203("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ jsx203(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
+  return /* @__PURE__ */ jsxs103("div", { ...tid, className: "df aic fww gap1", children: [
+    tags.map((tag) => /* @__PURE__ */ jsx202(Tag, { ...tag, variant: "secondary" }, tag.text)),
+    onEdit && /* @__PURE__ */ jsx202("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ jsx202(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
   ] });
 }
 
@@ -25017,15 +24965,15 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps108, mergeProps as mergeProps33, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
-import { jsx as jsx204, jsxs as jsxs105 } from "react/jsx-runtime";
+import { trussProps as trussProps107, mergeProps as mergeProps33, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
+import { jsx as jsx203, jsxs as jsxs104 } from "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__ */ jsx204(SideNavLayoutContent, { ...props });
-  return /* @__PURE__ */ jsx204(SideNavLayoutProvider, { children: /* @__PURE__ */ jsx204(SideNavLayoutContent, { ...props }) });
+  if (hasProvider) return /* @__PURE__ */ jsx203(SideNavLayoutContent, { ...props });
+  return /* @__PURE__ */ jsx203(SideNavLayoutProvider, { children: /* @__PURE__ */ jsx203(SideNavLayoutContent, { ...props }) });
 }
 function SideNavLayoutContent(props) {
   const {
@@ -25047,7 +24995,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__ */ jsxs105("div", { ...trussProps108({
+  const rail = showRail && /* @__PURE__ */ jsxs104("div", { ...trussProps107({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -25104,18 +25052,18 @@ function SideNavLayoutContent(props) {
       }
     }
   }), ...tid.sideNav, children: [
-    showCollapseToggle && /* @__PURE__ */ jsx204("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ jsx204(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
-    /* @__PURE__ */ jsx204("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ jsx204(SideNav, { ...sideNav }) })
+    showCollapseToggle && /* @__PURE__ */ jsx203("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ jsx203(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
+    /* @__PURE__ */ jsx203("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ jsx203(SideNav, { ...sideNav }) })
   ] });
-  return /* @__PURE__ */ jsx204(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs105("div", { ...mergeProps33(void 0, {
+  return /* @__PURE__ */ jsx203(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs104("div", { ...mergeProps33(void 0, {
     [beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
   }, {
     display: "df",
     flexDirection: "fdr",
     width: "w100"
   }), ...tid, children: [
-    contrastRail ? /* @__PURE__ */ jsx204(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ jsx204("div", { ...trussProps108({
+    contrastRail ? /* @__PURE__ */ jsx203(ContrastScope, { children: rail }) : rail,
+    /* @__PURE__ */ jsx203("div", { ...trussProps107({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -25131,8 +25079,8 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-import { trussProps as trussProps109, mergeProps as mergeProps34, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
-import { jsx as jsx205, jsxs as jsxs106 } from "react/jsx-runtime";
+import { trussProps as trussProps108, mergeProps as mergeProps34, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
+import { jsx as jsx204, jsxs as jsxs105 } from "react/jsx-runtime";
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25148,18 +25096,18 @@ function EnvironmentBannerLayout(props) {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
   };
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
-  return /* @__PURE__ */ jsx205(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx205(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ jsxs106("div", { ...mergeProps34(void 0, style, {
+  return /* @__PURE__ */ jsx204(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx204(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ jsxs105("div", { ...mergeProps34(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    showBanner && environmentBanner && /* @__PURE__ */ jsx205("div", { ...mergeProps34(void 0, {
+    showBanner && environmentBanner && /* @__PURE__ */ jsx204("div", { ...mergeProps34(void 0, {
       height: environmentBannerSizePx
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx205("div", { ...trussProps109({
+    }), children: /* @__PURE__ */ jsx204("div", { ...trussProps108({
       position: "fixed",
       top: "top0",
       left: "left0",
@@ -25169,7 +25117,7 @@ function EnvironmentBannerLayout(props) {
       width: ["w_var", {
         "--width": maybeCssVar58(__maybeInc22(innerWidth))
       }]
-    }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx205(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
+    }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx204(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
   ] }) }) });
 }
@@ -25287,17 +25235,17 @@ function useMeasuredHeight(ref, enabled) {
 
 // src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
 import { createContext as createContext15, useContext as useContext27 } from "react";
-import { jsx as jsx206 } from "react/jsx-runtime";
+import { jsx as jsx205 } from "react/jsx-runtime";
 var NavbarLayoutHeightContext = createContext15(0);
 function NavbarLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ jsx206(NavbarLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx205(NavbarLayoutHeightContext.Provider, { value, children });
 }
 function useNavbarLayoutHeight() {
   return useContext27(NavbarLayoutHeightContext);
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-import { jsx as jsx207, jsxs as jsxs107 } from "react/jsx-runtime";
+import { jsx as jsx206, jsxs as jsxs106 } from "react/jsx-runtime";
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25350,26 +25298,90 @@ function NavbarLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
-  const navbarEl = useMemo56(() => /* @__PURE__ */ jsx207(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ jsx207(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx207(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsxs107("div", { ...mergeProps35(void 0, cssVars, {
+  const navbarEl = useMemo56(() => /* @__PURE__ */ jsx206(Navbar, { ...navbar }), [navbar]);
+  return /* @__PURE__ */ jsx206(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx206(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsxs106("div", { ...mergeProps35(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx207("div", { ref: spacerRef, ...mergeProps35(void 0, {
+    /* @__PURE__ */ jsx206("div", { ref: spacerRef, ...mergeProps35(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx207("div", { ref: navMetricsRef, ...mergeProps35(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
-    /* @__PURE__ */ jsx207("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ jsx206("div", { ref: navMetricsRef, ...mergeProps35(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    /* @__PURE__ */ jsx206("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) });
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
 import { useCallback as useCallback39, useMemo as useMemo57, useRef as useRef66 } from "react";
 
+// src/components/Headers/BaseHeader.tsx
+import { trussProps as trussProps109 } from "@homebound/truss/runtime";
+import { jsx as jsx207, jsxs as jsxs107 } from "react/jsx-runtime";
+function BaseHeader(props) {
+  const {
+    title,
+    documentTitleSuffix,
+    rightSlot,
+    breadcrumbs,
+    bottomSlot,
+    ...otherProps
+  } = props;
+  const tid = useTestIds(otherProps, "header");
+  useDocumentTitle(title, documentTitleSuffix);
+  return /* @__PURE__ */ jsxs107("header", { ...tid, ...trussProps109({
+    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__ */ jsxs107("div", { ...trussProps109({
+      ...{
+        display: "df",
+        justifyContent: "jcsb",
+        width: "w100",
+        gap: "gap1",
+        paddingLeft: "pl3",
+        paddingRight: "pr3"
+      },
+      ...{
+        ...!bottomSlot ? {
+          marginBottom: "mb2"
+        } : {}
+      }
+    }), children: [
+      /* @__PURE__ */ jsxs107("div", { className: "mw0", children: [
+        breadcrumbs && /* @__PURE__ */ jsx207(Breadcrumbs, { ...breadcrumbs }),
+        /* @__PURE__ */ jsx207("h1", { ...tid.title, className: "fw6 fz_20px lh_28px", children: title })
+      ] }),
+      /* @__PURE__ */ jsx207("div", { className: "fs0", children: rightSlot })
+    ] }),
+    bottomSlot
+  ] });
+}
+
+// src/components/Headers/PageHeader.tsx
+import { jsx as jsx208 } from "react/jsx-runtime";
+function PageHeader2(props) {
+  const {
+    tabs,
+    ...otherProps
+  } = props;
+  const tid = useTestIds(otherProps, "header");
+  return /* @__PURE__ */ jsx208(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ jsx208("div", { className: "pl3 pr3", children: /* @__PURE__ */ jsx208(Tabs, { ...tabs, ...tid.tabs }) }) });
+}
+
 // src/layouts/useBannerAndNavbarHeight.ts
 function useBannerAndNavbarHeight() {
   return useEnvironmentBannerLayoutHeight() + useNavbarLayoutHeight();
@@ -25377,7 +25389,7 @@ function useBannerAndNavbarHeight() {
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
 import { mergeProps as mergeProps36, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
-import { jsx as jsx208, jsxs as jsxs108 } from "react/jsx-runtime";
+import { jsx as jsx209, jsxs as jsxs108 } from "react/jsx-runtime";
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25432,19 +25444,19 @@ function PageHeaderLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
-  const pageHeaderEl = useMemo57(() => /* @__PURE__ */ jsx208(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ jsx208(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs108("div", { ...mergeProps36(void 0, cssVars, {
+  const pageHeaderEl = useMemo57(() => /* @__PURE__ */ jsx209(PageHeader2, { ...pageHeader }), [pageHeader]);
+  return /* @__PURE__ */ jsx209(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs108("div", { ...mergeProps36(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx208("div", { ref: spacerRef, ...mergeProps36(void 0, {
+    /* @__PURE__ */ jsx209("div", { ref: spacerRef, ...mergeProps36(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx208("div", { ref: headerMetricsRef, ...mergeProps36(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ jsx208("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ jsx209("div", { ref: headerMetricsRef, ...mergeProps36(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    /* @__PURE__ */ jsx209("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
 export {
@@ -25554,7 +25566,6 @@ export {
   NavbarLayout,
   NumberField,
   OpenModal,
-  PageHeader2 as PageHeader,
   PageHeaderLayout,
   Pagination,
   Palette,