@homebound/beam 3.52.0 → 3.54.0

package/dist/index.js

@@ -19948,6 +19948,27 @@ function invertSpacing(value) {
 import { useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
 import React17, { useCallback as useCallback28, useEffect as useEffect28, useLayoutEffect as useLayoutEffect6, useMemo as useMemo41, useRef as useRef50, useState as useState45 } from "react";
 
+// src/components/Filters/utils.tsx
+function getActiveFilterCount(filter) {
+  return safeKeys(filter).filter((key) => isDefined(filter[key])).length;
+}
+function updateFilter(currentFilter, key, value) {
+  if (value === void 0) {
+    return omitKey(key, currentFilter);
+  } else {
+    return { ...currentFilter, [key]: value };
+  }
+}
+var filterTestIdPrefix = "filter";
+
+// src/components/Layout/layoutTypes.ts
+function isGridTableProps(props) {
+  return "rows" in props;
+}
+
+// src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
+import { memo as memo2, useMemo as useMemo39, useState as useState43 } from "react";
+
 // src/components/ButtonMenu.tsx
 import { useRef as useRef48 } from "react";
 import { useMenuTrigger as useMenuTrigger2 } from "react-aria";
@@ -19985,27 +20006,6 @@ function isSelectionButtonMenuProps(props) {
   return typeof props === "object" && "selectedItem" in props && "onChange" in props;
 }
 
-// src/components/Filters/utils.tsx
-function getActiveFilterCount(filter) {
-  return safeKeys(filter).filter((key) => isDefined(filter[key])).length;
-}
-function updateFilter(currentFilter, key, value) {
-  if (value === void 0) {
-    return omitKey(key, currentFilter);
-  } else {
-    return { ...currentFilter, [key]: value };
-  }
-}
-var filterTestIdPrefix = "filter";
-
-// src/components/Layout/layoutTypes.ts
-function isGridTableProps(props) {
-  return "rows" in props;
-}
-
-// src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
-import { memo as memo2, useMemo as useMemo39, useState as useState43 } from "react";
-
 // src/components/CountBadge.tsx
 import { trussProps as trussProps73, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
 import { jsx as jsx140 } from "react/jsx-runtime";
@@ -20875,7 +20875,8 @@ function GridTableLayoutActionsComponent(props) {
     view,
     setView,
     clearFilters,
-    searchApi
+    searchApi,
+    actionMenu
   } = props;
   const testId = useTestIds(props, "gridTableLayoutActions");
   const {
@@ -20945,9 +20946,12 @@ function GridTableLayoutActionsComponent(props) {
           /* @__PURE__ */ jsx156(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
         ] }), variant: "secondaryBlack", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterButton })
       ] }),
-      (hasHideableColumns || withCardView) && /* @__PURE__ */ jsxs75("div", { className: "df gap_12px", children: [
+      (hasHideableColumns || withCardView || actionMenu) && /* @__PURE__ */ jsxs75("div", { className: "df aic gap_12px", children: [
         hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ jsx156(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
-        withCardView && view !== void 0 && setView && /* @__PURE__ */ jsx156(ViewToggleButton, { view, onChange: setView })
+        withCardView && view !== void 0 && setView && /* @__PURE__ */ jsx156(ViewToggleButton, { view, onChange: setView }),
+        actionMenu && /* @__PURE__ */ jsx156(ButtonMenu, { ...actionMenu, trigger: {
+          icon: "verticalDots"
+        } })
       ] })
     ] }),
     sm && showSearch && /* @__PURE__ */ jsx156("div", { className: "pl3 pr3", children: searchTextField }),
@@ -21076,13 +21080,8 @@ var __maybeInc15 = (inc) => {
 };
 function GridTableLayoutComponent(props) {
   const {
-    pageTitle,
-    breadCrumb,
     tableProps,
     layoutState,
-    primaryAction,
-    secondaryAction,
-    tertiaryAction,
     actionMenu,
     hideEditColumns = false,
     withCardView,
@@ -21099,7 +21098,7 @@ function GridTableLayoutComponent(props) {
   const api = useMemo41(() => tableProps.api ?? new GridTableApiImpl(), [tableProps.api]);
   const [view, setView] = usePersistedTableView(defaultView, !!withCardView);
   const clientSearch = layoutState?.search === "client" ? layoutState.searchString : void 0;
-  const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView);
+  const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView || actionMenu);
   const isVirtualized = tableProps.as === "virtual" || !!withCardView && view === "card";
   const inDocumentScrollLayout = useDocumentScrollLayout();
   const tableActionsRef = useRef50(null);
@@ -21121,7 +21120,7 @@ function GridTableLayoutComponent(props) {
     searchApiRef.current?.clear();
   }, [layoutState]);
   const emptyState = useMemo41(() => composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFilters), [layoutEmptyFallback, layoutState, tableProps, clearFilters]);
-  const tableActionsEl = /* @__PURE__ */ jsx159(_GridTableLayoutActions, { filterDefs: layoutState?.filterDefs, filter: layoutState?.filter, setFilter: layoutState?.setFilter, groupBy: layoutState?.groupBy, searchProps: filterSearchProps, hasHideableColumns, columns, api, withCardView, view, setView, clearFilters, searchApi: searchApiRef });
+  const tableActionsEl = /* @__PURE__ */ jsx159(_GridTableLayoutActions, { filterDefs: layoutState?.filterDefs, filter: layoutState?.filter, setFilter: layoutState?.setFilter, groupBy: layoutState?.groupBy, searchProps: filterSearchProps, hasHideableColumns, columns, api, withCardView, view, setView, clearFilters, searchApi: searchApiRef, actionMenu });
   const cardAs = withCardView && view === "card" ? "card" : void 0;
   const tableStyle = resolveGridTableLayoutStyle(tableProps.style, inDocumentScrollLayout);
   const tableBody = /* @__PURE__ */ jsx159(Fragment36, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ jsx159(GridTable, { ...tableProps, ...cardAs ? {
@@ -21153,10 +21152,10 @@ function GridTableLayoutComponent(props) {
     }), ...tid.stickyContent, children: tableActionsEl }),
     inDocumentScrollLayout ? tableBody : /* @__PURE__ */ jsx159(ScrollableContent, { virtualized: isVirtualized, children: tableBody })
   ] });
-  return /* @__PURE__ */ jsxs77(Fragment36, { children: [
-    pageTitle && /* @__PURE__ */ jsx159(Header2, { pageTitle, breadCrumb, primaryAction, secondaryAction, tertiaryAction, actionMenu }),
+  return (
+    /* Wrapper sets --beam-table-actions-height so GridTable's sticky header can read it. */
     /* @__PURE__ */ jsx159("div", { ref: tableWrapperRef, className: "display_contents", ...tid.tableWrapper, children: tableScrollContent })
-  ] });
+  );
 }
 var GridTableLayout = React17.memo(GridTableLayoutComponent);
 function validateColumns(columns) {
@@ -21244,43 +21243,6 @@ function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
     };
   }, [tableWrapperRef, syncHeightVar]);
 }
-function Header2(props) {
-  const {
-    pageTitle,
-    breadCrumb,
-    primaryAction,
-    secondaryAction,
-    tertiaryAction,
-    actionMenu
-  } = props;
-  const tids = useTestIds(props);
-  return /* @__PURE__ */ jsx159(FullBleed, { children: /* @__PURE__ */ jsxs77("header", { ...trussProps80({
-    ...{
-      paddingTop: "pt3",
-      paddingBottom: "pb3",
-      paddingRight: "pr3",
-      paddingLeft: "pl3",
-      minHeight: "mh_50px",
-      backgroundColor: "bgWhite",
-      display: "df",
-      justifyContent: "jcsb",
-      alignItems: "aic"
-    }
-  }), ...tids.header, children: [
-    /* @__PURE__ */ jsxs77("div", { children: [
-      breadCrumb && /* @__PURE__ */ jsx159(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
-      /* @__PURE__ */ jsx159("h1", { className: "fw6 fz_30px lh_36px mt1", ...tids.pageTitle, children: pageTitle })
-    ] }),
-    /* @__PURE__ */ jsxs77("div", { className: "df fwr jcfe gap1 aic", children: [
-      tertiaryAction && /* @__PURE__ */ jsx159(Button, { ...tertiaryAction, variant: "tertiary" }),
-      secondaryAction && /* @__PURE__ */ jsx159(Button, { ...secondaryAction, variant: "secondary" }),
-      primaryAction && /* @__PURE__ */ jsx159(Button, { ...primaryAction }),
-      actionMenu && /* @__PURE__ */ jsx159(ButtonMenu, { ...actionMenu, trigger: {
-        icon: "verticalDots"
-      } })
-    ] })
-  ] }) });
-}
 function resolveGridTableLayoutStyle(userStyle, inDocumentScrollLayout) {
   const layoutDefaults = {
     allWhite: true,
@@ -23663,409 +23625,91 @@ 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) {
+// src/components/Pagination.tsx
+import { jsx as jsx190, jsxs as jsxs94 } from "react/jsx-runtime";
+var defaultPage = {
+  offset: 0,
+  limit: 100
+};
+function Pagination(props) {
   const {
-    ariaLabel,
-    tabs,
-    includeBottomBorder,
-    right,
-    ...others
+    totalCount,
+    pageSizes = [100, 500, 1e3]
   } = 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 [page, setPage] = props.page;
   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);
+    pageSize,
+    pageNumber
+  } = toPageNumberSize(page);
+  const pageOptions = pageSizes.map((size) => ({
+    id: size,
+    name: String(size)
+  }));
+  const hasPrevPage = pageNumber > 1;
+  const hasNextPage = pageNumber < totalCount / pageSize;
+  const first = pageSize * (pageNumber - 1) + (totalCount ? 1 : 0);
+  const last = Math.min(pageSize * pageNumber, totalCount);
+  const showLast = totalCount > 0;
+  function set(newPage) {
+    if ("pageNumber" in props.page[0]) {
+      setPage(newPage);
+    } else {
+      setPage(toLimitAndOffset(newPage));
     }
   }
-  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 })
+  const tid = useTestIds(props, "pagination");
+  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__ */ 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__ */ 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__ */ 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 })
+    ] })
   ] });
 }
-function TabImpl(props) {
+function toLimitAndOffset(page) {
+  return "limit" in page ? page : {
+    // E.g. on first page the offset is 0, second page the offset is 100, then 200, etc.
+    offset: (page.pageNumber - 1) * page.pageSize,
+    limit: page.pageSize
+  };
+}
+function toPageNumberSize(page) {
+  return "pageNumber" in page ? page : {
+    pageNumber: Math.floor(page.offset / page.limit) + 1,
+    pageSize: page.limit
+  };
+}
+
+// src/components/ScrollShadows.tsx
+import { useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
+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 {
-    tab,
-    onClick,
-    active,
-    onKeyUp,
-    onBlur,
-    focusProps,
-    isFocusVisible = false,
-    ...others
+    children,
+    xss,
+    horizontal = false,
+    bgColor = "rgba(255, 255, 255, 1)" /* White */
   } = 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";
-var defaultPage = {
-  offset: 0,
-  limit: 100
-};
-function Pagination(props) {
-  const {
-    totalCount,
-    pageSizes = [100, 500, 1e3]
-  } = props;
-  const [page, setPage] = props.page;
-  const {
-    pageSize,
-    pageNumber
-  } = toPageNumberSize(page);
-  const pageOptions = pageSizes.map((size) => ({
-    id: size,
-    name: String(size)
-  }));
-  const hasPrevPage = pageNumber > 1;
-  const hasNextPage = pageNumber < totalCount / pageSize;
-  const first = pageSize * (pageNumber - 1) + (totalCount ? 1 : 0);
-  const last = Math.min(pageSize * pageNumber, totalCount);
-  const showLast = totalCount > 0;
-  function set(newPage) {
-    if ("pageNumber" in props.page[0]) {
-      setPage(newPage);
-    } else {
-      setPage(toLimitAndOffset(newPage));
-    }
-  }
-  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({
-      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: [
-        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({
-        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({
-        pageNumber: pageNumber + 1,
-        pageSize
-      }), disabled: !hasNextPage, ...tid.nextIcon })
-    ] })
-  ] });
-}
-function toLimitAndOffset(page) {
-  return "limit" in page ? page : {
-    // E.g. on first page the offset is 0, second page the offset is 100, then 200, etc.
-    offset: (page.pageNumber - 1) * page.pageSize,
-    limit: page.pageSize
-  };
-}
-function toPageNumberSize(page) {
-  return "pageNumber" in page ? page : {
-    pageNumber: Math.floor(page.offset / page.limit) + 1,
-    pageSize: page.limit
-  };
-}
-
-// 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";
-function ScrollShadows(props) {
-  const {
-    children,
-    xss,
-    horizontal = false,
-    bgColor = "rgba(255, 255, 255, 1)" /* White */
-  } = props;
-  const tid = useTestIds(props);
+  const tid = useTestIds(props);
   const {
     height,
     width: width2
@@ -24073,15 +23717,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"
     };
@@ -24114,7 +23758,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar54(startGradient)
+          "--background": maybeCssVar53(startGradient)
         }]
       }
     }, {
@@ -24122,7 +23766,7 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar54(endGradient)
+          "--background": maybeCssVar53(endGradient)
         }]
       }
     }];
@@ -24147,10 +23791,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",
@@ -24163,23 +23807,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",
@@ -24195,12 +23839,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 {
@@ -24224,12 +23868,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);
     }
@@ -24247,8 +23891,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: () => {
@@ -24259,8 +23903,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,
@@ -24273,8 +23917,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",
@@ -24285,7 +23929,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ jsx195("div", { ...trussProps103({
+    /* @__PURE__ */ jsx193("div", { ...trussProps101({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -24297,8 +23941,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",
@@ -24314,7 +23958,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(
@@ -24364,7 +24008,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]);
@@ -24373,10 +24017,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})`;
@@ -24395,8 +24039,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",
@@ -24406,7 +24050,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",
@@ -24416,9 +24060,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",
@@ -24429,12 +24073,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}%`))
       }]
     }) }) })
   ] });
@@ -24451,7 +24095,7 @@ function StepButton(props) {
     onPress: onClick,
     isDisabled: disabled
   };
-  const ref = useRef62(null);
+  const ref = useRef61(null);
   const {
     buttonProps,
     isPressed
@@ -24459,18 +24103,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",
@@ -24522,7 +24166,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
   ] });
 }
@@ -24533,12 +24177,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",
@@ -24552,10 +24196,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,
@@ -24570,20 +24214,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 : {},
@@ -24591,9 +24235,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) {
@@ -24601,7 +24245,7 @@ function withBorderBottom(color) {
     ...{
       borderBottomStyle: "bbs_solid",
       borderBottomWidth: ["borderBottomWidth_var", {
-        "--borderBottomWidth": maybeCssVar56(`3px`)
+        "--borderBottomWidth": maybeCssVar55(`3px`)
       }]
     },
     ...color
@@ -24673,8 +24317,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 {
@@ -24687,7 +24331,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",
@@ -24701,7 +24345,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",
@@ -24713,7 +24357,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;
@@ -24721,8 +24365,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
@@ -24739,20 +24383,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
@@ -24768,18 +24412,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",
@@ -24790,7 +24434,7 @@ function ConfirmCloseModal(props) {
           }
         }
       ),
-      /* @__PURE__ */ jsx200(Button, { label: continueText, onClick: closeModal })
+      /* @__PURE__ */ jsx198(Button, { label: continueText, onClick: closeModal })
     ] })
   ] });
 }
@@ -24799,8 +24443,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,
@@ -24812,7 +24456,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;
       }
     }
@@ -24832,14 +24476,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 */
@@ -24874,7 +24518,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)
@@ -24927,8 +24571,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
@@ -24948,17 +24592,17 @@ var SuperDrawerContent = ({
   } = firstContent ?? {};
   function wrapWithMotionAndMaybeBack(children2) {
     if (kind === "open") {
-      return /* @__PURE__ */ jsx202(motion6.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
+      return /* @__PURE__ */ jsx200(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: {
+      return /* @__PURE__ */ jsxs101(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: {
+        /* @__PURE__ */ jsx200(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
+        /* @__PURE__ */ jsx200(motion6.div, { initial: {
           x: width2,
           opacity: 0
         }, animate: {
@@ -24976,7 +24620,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ jsx202(motion6.div, { ...mergeProps32(void 0, {
+      return /* @__PURE__ */ jsx200(motion6.div, { ...mergeProps31(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -24987,9 +24631,9 @@ var SuperDrawerContent = ({
       }) }, "content");
     }
   }
-  return /* @__PURE__ */ jsxs103(Fragment46, { children: [
+  return /* @__PURE__ */ jsxs101(Fragment45, { 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)) }) })
+    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)) }) })
   ] });
 };
 
@@ -25031,18 +24675,283 @@ function visit(rows, fn) {
   }
 }
 
-// src/components/TagGroup.tsx
-import { jsx as jsx203, jsxs as jsxs104 } from "react/jsx-runtime";
-function TagGroup(props) {
-  const {
-    tags,
-    onEdit,
-    ...otherProps
-  } = props;
+// 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 {
+    hoverProps,
+    isHovered
+  } = useHover23({
+    isDisabled
+  });
+  const {
+    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)
+    }
+  });
+  const tabLabel = /* @__PURE__ */ jsxs102(Fragment46, { children: [
+    label,
+    (icon || endAdornment) && /* @__PURE__ */ jsx201("span", { className: "ml1", children: icon ? /* @__PURE__ */ jsx201(Icon, { icon }) : endAdornment })
+  ] });
+  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 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 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/TagGroup.tsx
+import { jsx as jsx202, jsxs as jsxs103 } from "react/jsx-runtime";
+function TagGroup(props) {
+  const {
+    tags,
+    onEdit,
+    ...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 }) })
   ] });
 }
 
@@ -25055,15 +24964,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 {
@@ -25085,7 +24994,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",
@@ -25142,18 +25051,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",
@@ -25169,8 +25078,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})`;
 };
@@ -25186,18 +25095,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",
@@ -25207,7 +25116,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
   ] }) }) });
 }
@@ -25325,17 +25234,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})`;
 };
@@ -25388,26 +25297,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();
@@ -25415,7 +25388,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})`;
 };
@@ -25470,19 +25443,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 {
@@ -25592,7 +25565,6 @@ export {
   NavbarLayout,
   NumberField,
   OpenModal,
-  PageHeader2 as PageHeader,
   PageHeaderLayout,
   Pagination,
   Palette,