@homebound/beam 3.64.0 → 3.65.0

package/dist/index.cjs

@@ -4219,6 +4219,14 @@ var CssBuilder = class _CssBuilder {
   fontFamily(value) {
     return this.add("fontFamily", value);
   }
+  // layoutContainer
+  /** Sets `width: "calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px))"; left: "var(--beam-side-nav-layout-width, 0px)"; position: "sticky"; paddingLeft: "24px"; paddingRight: "24px"`. */
+  get layoutContainer() {
+    return this.add("width", "calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px))").add("left", "var(--beam-side-nav-layout-width, 0px)").add("position", "sticky").add("paddingLeft", "24px").add(
+      "paddingRight",
+      "24px"
+    );
+  }
   // animation
   /** Sets `transition: "background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), left 200ms cubic-bezier(0.4, 0, 0.2, 1), right 200ms cubic-bezier(0.4, 0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
   get transition() {
@@ -6513,6 +6521,7 @@ function stickyTableHeaderOffset(basePx = 0) {
 function getFloatingBottomOffset(basePx = 0) {
   return `calc(${basePx}px + var(${beamWorkflowLayoutFooterHeightVar}, 0px))`;
 }
+var pageContentPaddingXValue = "24px";
 
 // src/utils/zIndices.ts
 var zIndices = {
@@ -16316,10 +16325,18 @@ function SelectToggle({ id, disabled }) {
 }
 
 // src/layouts/layoutSpacing.ts
+var import_runtime64 = require("@homebound/truss/runtime");
+var __maybeInc10 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
 var pageContentGutterPx = 12;
 var pageContentPaddingX = {
-  paddingLeft: "pl3",
-  paddingRight: "pr3"
+  paddingLeft: ["px_var", {
+    "--paddingLeft": (0, import_runtime64.maybeCssVar)(__maybeInc10(pageContentPaddingXValue))
+  }],
+  paddingRight: ["px_var", {
+    "--paddingRight": (0, import_runtime64.maybeCssVar)(__maybeInc10(pageContentPaddingXValue))
+  }]
 };
 function headerContentPaddingX(compact = false) {
   return compact ? {
@@ -17224,9 +17241,9 @@ var import_react84 = require("react");
 
 // src/layouts/DocumentScrollToTopButton.tsx
 var import_react83 = require("react");
-var import_runtime64 = require("@homebound/truss/runtime");
+var import_runtime65 = require("@homebound/truss/runtime");
 var import_jsx_runtime91 = require("react/jsx-runtime");
-var __maybeInc10 = (inc) => {
+var __maybeInc11 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function DocumentScrollToTopButton({
@@ -17253,17 +17270,17 @@ function DocumentScrollToTopButton({
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { ...tid.wrapper, "aria-hidden": !visible, ...!visible ? {
     inert: ""
-  } : {}, ...(0, import_runtime64.trussProps)({
+  } : {}, ...(0, import_runtime65.trussProps)({
     ...{
       position: "fixed",
       bottom: ["bottom_var", {
-        "--bottom": (0, import_runtime64.maybeCssVar)(__maybeInc10(getFloatingBottomOffset(scrollToTopOffsetPx)))
+        "--bottom": (0, import_runtime65.maybeCssVar)(__maybeInc11(getFloatingBottomOffset(scrollToTopOffsetPx)))
       }],
       right: ["right_var", {
         "--right": `${scrollToTopOffsetPx}px`
       }],
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime64.maybeCssVar)(zIndices.scrollToTop)
+        "--zIndex": (0, import_runtime65.maybeCssVar)(zIndices.scrollToTop)
       }],
       display: "df",
       justifyContent: "jcfe",
@@ -17273,7 +17290,7 @@ function DocumentScrollToTopButton({
       transform: "transform_translateY_0"
     } : {
       transform: ["transform_var", {
-        "--transform": (0, import_runtime64.maybeCssVar)(`translateY(calc(100% + ${scrollToTopOffsetPx}px))`)
+        "--transform": (0, import_runtime65.maybeCssVar)(`translateY(calc(100% + ${scrollToTopOffsetPx}px))`)
       }],
       pointerEvents: "pointerEvents_none"
     }
@@ -17281,7 +17298,7 @@ function DocumentScrollToTopButton({
 }
 
 // src/layouts/DocumentScrollLayoutContext.tsx
-var import_runtime65 = require("@homebound/truss/runtime");
+var import_runtime66 = require("@homebound/truss/runtime");
 var import_jsx_runtime92 = require("react/jsx-runtime");
 var DocumentScrollLayoutContext = (0, import_react84.createContext)(false);
 function DocumentScrollLayoutProvider({
@@ -17332,7 +17349,7 @@ function DocumentScrollLayoutViewportRoot({
   return (
     // Grow with wide document-scroll content (`wfc`) while staying at least viewport-wide (`mw100`),
     // so sticky chrome ancestors are wide enough for `left` pinning on horizontal scroll.
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { ...(0, import_runtime65.mergeProps)(void 0, Object.keys(style).length > 0 ? style : void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { ...(0, import_runtime66.mergeProps)(void 0, Object.keys(style).length > 0 ? style : void 0, {
       display: "df",
       flexDirection: "fdc",
       width: "wfc",
@@ -17347,9 +17364,9 @@ function DocumentScrollLayoutViewportRoot({
 // src/components/Table/components/TableCard.tsx
 var import_react85 = require("react");
 var import_react_router_dom4 = require("react-router-dom");
-var import_runtime66 = require("@homebound/truss/runtime");
+var import_runtime67 = require("@homebound/truss/runtime");
 var import_jsx_runtime93 = require("react/jsx-runtime");
-var __maybeInc11 = (inc) => {
+var __maybeInc12 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function TableCard(props) {
@@ -17401,7 +17418,7 @@ function TableCard(props) {
   const card = /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(TableCardView, { ...tid, imgSrc: rs.row.imgSrc ?? "", title, eyebrow, badge, badgeTags, status, data: dataBlocks, progress });
   const to = rowStyle?.rowLink?.(rs.row);
   if (to) {
-    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_react_router_dom4.Link, { to, ...(0, import_runtime66.mergeProps)(navLink, void 0, {
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_react_router_dom4.Link, { to, ...(0, import_runtime67.mergeProps)(navLink, void 0, {
       textDecoration: "tdn",
       color: "color_unset"
     }), children: card });
@@ -17426,7 +17443,7 @@ function TableCardView(props) {
   const progressValue = (0, import_react85.useMemo)(() => progress !== void 0 ? clampProgress(progress) : 0, [progress]);
   const col1 = data.slice(0, Math.ceil(data.length / 2));
   const col2 = data.slice(Math.ceil(data.length / 2));
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { ...(0, import_runtime66.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { ...(0, import_runtime67.trussProps)({
     paddingTop: "pt3",
     paddingBottom: "pb3",
     paddingRight: "pr3",
@@ -17475,19 +17492,19 @@ function TableCardView(props) {
           ] }, d.label)) })
         ] }),
         progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "df fdc gap1", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "df aic gap1 fs_10px lh_14px", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { ...(0, import_runtime66.trussProps)({
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { ...(0, import_runtime67.trussProps)({
             width: "w25",
             height: "h_8px",
             borderRadius: "br4",
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": "var(--b-surface-subtle)"
             }]
-          }), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { ...(0, import_runtime66.trussProps)({
+          }), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { ...(0, import_runtime67.trussProps)({
             height: "h100",
             borderRadius: "br4",
             backgroundColor: "bgBlue500",
             width: ["w_var", {
-              "--width": (0, import_runtime66.maybeCssVar)(__maybeInc11(`${progressValue}%`))
+              "--width": (0, import_runtime67.maybeCssVar)(__maybeInc12(`${progressValue}%`))
             }]
           }) }) }),
           /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("span", { ...tid.progressValue, children: [
@@ -17507,7 +17524,7 @@ function clampProgress(value) {
 }
 
 // src/components/Table/GridTableEmptyState.tsx
-var import_runtime67 = require("@homebound/truss/runtime");
+var import_runtime68 = require("@homebound/truss/runtime");
 var import_jsx_runtime94 = require("react/jsx-runtime");
 function GridTableEmptyState(props) {
   const {
@@ -17518,7 +17535,7 @@ function GridTableEmptyState(props) {
   const tid = useTestIds(props, "gridTableEmptyState");
   return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "df fdc aic pt_12 pb_12 gap2", ...tid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "fw6 fz_20px lh_28px", ...tid.title, children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { ...(0, import_runtime67.trussProps)({
+    description && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { ...(0, import_runtime68.trussProps)({
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -17531,10 +17548,10 @@ function GridTableEmptyState(props) {
 }
 
 // src/components/Table/GridTable.tsx
-var import_runtime68 = require("@homebound/truss/runtime");
+var import_runtime69 = require("@homebound/truss/runtime");
 var import_jsx_runtime95 = require("react/jsx-runtime");
 var import_react87 = require("react");
-var __maybeInc12 = (inc) => {
+var __maybeInc13 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var runningInJest = false;
@@ -17834,7 +17851,7 @@ function GridTable(props) {
     return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(GridTableEmptyState, { ...emptyState });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(TableStateContext.Provider, { value: rowStateContext, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(PresentationProvider, { fieldProps, wrap: style?.presentationSettings?.wrap, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ref: resizeRef, ...(0, import_runtime68.trussProps)(getTableRefWidthStyles(as === "virtual", inDocumentScrollLayout)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ref: resizeRef, ...(0, import_runtime69.trussProps)(getTableRefWidthStyles(as === "virtual", inDocumentScrollLayout)) }),
     as === "card" ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(CardView, { cardRows: visibleDataRows, id, virtuosoRangeRef, infiniteScroll, persistScrollPosition }) : _as === "virtual" ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(VirtualGridTableView, { style: tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, persistScrollPosition }) : renders[_as](tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, tableContainerRef, persistScrollPosition)
   ] }) });
 }
@@ -17843,7 +17860,7 @@ var renders = {
   div: renderDiv
 };
 function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, _virtuosoRangeRef, tableHeadRows, stickyOffset, _infiniteScroll, tableContainerRef, _persistScrollPosition) {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { ref: tableContainerRef, ...(0, import_runtime68.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { ref: tableContainerRef, ...(0, import_runtime69.trussProps)({
     // Use `fit-content` to ensure the width of the table takes up the full width of its content.
     // Otherwise, the table's width would be that of its container, which may not be as wide as the table itself.
     // In cases where we have sticky columns on a very wide table, then the container which the columns "stick" to (which is the table),
@@ -17859,15 +17876,15 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
     } : {},
     ...xss
   }), "data-testid": id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { ...(0, import_runtime68.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { ...(0, import_runtime69.trussProps)({
       ...stickyHeader || pinnedRows.length > 0 ? {
         position: "sticky",
         transition: "transitionTop",
         top: ["top_var", {
-          "--top": (0, import_runtime68.maybeCssVar)(__maybeInc12(stickyTableHeaderOffset(stickyOffset)))
+          "--top": (0, import_runtime69.maybeCssVar)(__maybeInc13(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime68.maybeCssVar)(zIndices.tableStickyHeader)
+          "--zIndex": (0, import_runtime69.maybeCssVar)(zIndices.tableStickyHeader)
         }]
       } : {}
     }), children: [
@@ -17876,7 +17893,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { children: [
       keptSelectedRows,
-      firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...(0, import_runtime68.trussProps)({
+      firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...(0, import_runtime69.trussProps)({
         ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
         ...style.firstRowMessageCss,
         ...visibleDataRows.length === 0 && style.lastRowCss,
@@ -17889,7 +17906,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
   ] });
 }
 function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, _virtuosoRangeRef, tableHeadRows, stickyOffset, _infiniteScroll, tableContainerRef, _persistScrollPosition) {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("table", { ref: tableContainerRef, ...(0, import_runtime68.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("table", { ref: tableContainerRef, ...(0, import_runtime69.trussProps)({
     ...{
       width: "w100",
       borderCollapse: "borderCollapse_separate",
@@ -17903,15 +17920,15 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
     } : {},
     ...xss
   }), "data-testid": id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("thead", { ...(0, import_runtime68.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("thead", { ...(0, import_runtime69.trussProps)({
       ...stickyHeader || pinnedRows.length > 0 ? {
         position: "sticky",
         transition: "transitionTop",
         top: ["top_var", {
-          "--top": (0, import_runtime68.maybeCssVar)(__maybeInc12(stickyTableHeaderOffset(stickyOffset)))
+          "--top": (0, import_runtime69.maybeCssVar)(__maybeInc13(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime68.maybeCssVar)(zIndices.tableStickyHeader)
+          "--zIndex": (0, import_runtime69.maybeCssVar)(zIndices.tableStickyHeader)
         }]
       } : {}
     }), children: [
@@ -17920,11 +17937,11 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("tbody", { children: [
       keptSelectedRows,
-      firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("tr", { ...(0, import_runtime68.trussProps)({
+      firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("tr", { ...(0, import_runtime69.trussProps)({
         ...tableRowPrintBreakCss,
         ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
         ...visibleDataRows.length === 0 && style.lastRowCss
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("td", { colSpan: columns.length, ...(0, import_runtime68.trussProps)({
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("td", { colSpan: columns.length, ...(0, import_runtime69.trussProps)({
         ...style.betweenRowsCss,
         ...style.firstRowMessageCss,
         ...visibleDataRows.length === 0 && style.lastRowCellCss,
@@ -17978,7 +17995,7 @@ function VirtualGridTableView({
       components: {
         // zIndex keeps the pinned head above sticky columns; `top` matches the offsets used by
         // the div/table render paths so virtualized tables pin below the global nav + page header.
-        TopItemList: import_react86.default.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...props, ref, ...(0, import_runtime68.mergeProps)(void 0, {
+        TopItemList: import_react86.default.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...props, ref, ...(0, import_runtime69.mergeProps)(void 0, {
           ...props.style,
           ...style.minWidthPx !== void 0 ? {
             minWidth: style.minWidthPx
@@ -17990,7 +18007,7 @@ function VirtualGridTableView({
         }) })),
         List: VirtualRoot(style, columns, id, xss),
         Footer: () => {
-          return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...(0, import_runtime68.trussProps)({
+          return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...(0, import_runtime69.trussProps)({
             ...style.virtualFooterPaddingBottomPx !== void 0 ? {
               paddingBottom: ["pb_var", {
                 "--paddingBottom": `${style.virtualFooterPaddingBottomPx ?? 0}px`
@@ -18017,11 +18034,11 @@ function VirtualGridTableView({
           if (index === 0) {
             return (
               // Ensure the fallback message is the same width as the table
-              /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...(0, import_runtime68.trussProps)({
+              /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...(0, import_runtime69.trussProps)({
                 ...getTableRefWidthStyles(true, inDocumentScrollLayout),
                 ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
                 ...visibleDataRows.length === 0 && style.lastRowCss
-              }), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...(0, import_runtime68.trussProps)({
+              }), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...(0, import_runtime69.trussProps)({
                 ...style.firstRowMessageCss,
                 ...visibleDataRows.length === 0 && style.lastRowCellCss,
                 ...visibleDataRows.length === 0 && style.lastRowFirstCellCss,
@@ -18079,10 +18096,10 @@ function CardView({
   const validatedScrollIndex = savedScrollIndex !== void 0 && savedScrollIndex > 0 && savedScrollIndex < cardRows.length ? savedScrollIndex : void 0;
   const virtuosoKey = !!validatedScrollIndex && cardRows.length > 0 ? "with-data" : "virtuoso";
   if (runningInJest) {
-    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "pt2 pb2", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...(0, import_runtime68.trussProps)({
+    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "pt2 pb2", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...(0, import_runtime69.trussProps)({
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": (0, import_runtime68.maybeCssVar)(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
+        "--gridTemplateColumns": (0, import_runtime69.maybeCssVar)(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
       }],
       justifyContent: "jcc",
       gap: "gap3",
@@ -18101,10 +18118,10 @@ function CardView({
       style,
       children
     }, ref) {
-      return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ref, ...(0, import_runtime68.mergeProps)(void 0, style, {
+      return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ref, ...(0, import_runtime69.mergeProps)(void 0, style, {
         display: "dg",
         gridTemplateColumns: ["gtc_var", {
-          "--gridTemplateColumns": (0, import_runtime68.maybeCssVar)(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
+          "--gridTemplateColumns": (0, import_runtime69.maybeCssVar)(`repeat(auto-fill, minmax(${CARD_MIN_WIDTH_PX}px, 1fr))`)
         }],
         justifyContent: "jcc",
         gap: "gap3",
@@ -18140,7 +18157,7 @@ var VirtualRoot = (0, import_memoize_one.default)((gs, _columns, id, xss) => {
     style,
     children
   }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ref, ...(0, import_runtime68.mergeProps)(void 0, style, {
+    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ref, ...(0, import_runtime69.mergeProps)(void 0, style, {
       ...gs.rootCss,
       ...gs.minWidthPx ? {
         minWidth: ["mw_var", {
@@ -18157,7 +18174,7 @@ var VirtualRoot = (0, import_memoize_one.default)((gs, _columns, id, xss) => {
 var CARD_MIN_WIDTH_PX = 330;
 
 // src/components/ToggleChip.tsx
-var import_runtime69 = require("@homebound/truss/runtime");
+var import_runtime70 = require("@homebound/truss/runtime");
 var import_jsx_runtime96 = require("react/jsx-runtime");
 function ToggleChip(props) {
   const {
@@ -18176,7 +18193,7 @@ function ToggleChip(props) {
   } = useHover2({});
   const compact = fieldProps?.compact;
   const tid = useTestIds(props, "chip");
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("button", { type: "button", ...(0, import_runtime69.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("button", { type: "button", ...(0, import_runtime70.trussProps)({
     ...chipBaseStyles(compact),
     ...isHovered && !disabled && chipHoverStyles,
     // Use a lower right-padding to get closer to the `X` circle when clearable, i.e. not disabled
@@ -18192,7 +18209,7 @@ function ToggleChip(props) {
     ...xss
   }), disabled, onClick, ...hoverProps, ...tid, children: [
     icon && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "fs0", ...tid.icon, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Icon, { icon, color: "rgba(36, 36, 36, 1)" /* Gray900 */, inc: 2 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { ...(0, import_runtime69.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { ...(0, import_runtime70.trussProps)({
       textAlign: "tal",
       overflow: "oh",
       display: "d_negwebkit_box",
@@ -18204,7 +18221,7 @@ function ToggleChip(props) {
         paddingRight: "pr0"
       } : {}
     }), title: text, children: text }),
-    !disabled && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { ...(0, import_runtime69.trussProps)({
+    !disabled && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { ...(0, import_runtime70.trussProps)({
       ...{
         flexShrink: "fs0",
         borderRadius: "br16",
@@ -18226,7 +18243,7 @@ var chipDisabledStyles = {
 };
 
 // src/components/ToggleChips.tsx
-var import_runtime70 = require("@homebound/truss/runtime");
+var import_runtime71 = require("@homebound/truss/runtime");
 var import_jsx_runtime97 = require("react/jsx-runtime");
 function ToggleChips(props) {
   const {
@@ -18236,7 +18253,7 @@ function ToggleChips(props) {
     xss
   } = props;
   const tid = useTestIds(props, "toggleChips");
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { ...(0, import_runtime70.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { ...(0, import_runtime71.trussProps)({
     ...{
       display: "df",
       flexWrap: "flexWrap_wrap",
@@ -18250,9 +18267,9 @@ function ToggleChips(props) {
 var import_utils82 = require("@react-aria/utils");
 var import_react88 = require("react");
 var import_react_aria48 = require("react-aria");
-var import_runtime71 = require("@homebound/truss/runtime");
+var import_runtime72 = require("@homebound/truss/runtime");
 var import_jsx_runtime98 = require("react/jsx-runtime");
-var __maybeInc13 = (inc) => {
+var __maybeInc14 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Accordion(props) {
@@ -18352,12 +18369,12 @@ function Accordion(props) {
     },
     ...isFocusVisible && {
       boxShadow: ["boxShadow_var", {
-        "--boxShadow": (0, import_runtime71.maybeCssVar)(`inset 0 0 0 2px var(${"--b-focus-ring-inset" /* FocusRingInset */})`)
+        "--boxShadow": (0, import_runtime72.maybeCssVar)(`inset 0 0 0 2px var(${"--b-focus-ring-inset" /* FocusRingInset */})`)
       }]
     },
     ...xss
   }), [compact, disabled, isFocusVisible, titleOnClick, xss]);
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { ...tid.container, ...(0, import_runtime71.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { ...tid.container, ...(0, import_runtime72.trussProps)({
     ...{
       borderColor: ["bc_var", {
         "--borderColor": "var(--b-field-border-default)"
@@ -18378,13 +18395,13 @@ function Accordion(props) {
     } : {}
   }), children: [
     titleOnClick ? /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { ...focusProps, "aria-controls": id, "aria-expanded": expanded, className: "df", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("button", { ...tid.title, disabled, ...(0, import_runtime71.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("button", { ...tid.title, disabled, ...(0, import_runtime72.trussProps)({
         ...touchableStyle,
         ...{
           flexGrow: "fg1"
         }
       }), onClick: titleOnClick, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("button", { ...tid.toggle, disabled, ...(0, import_runtime71.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("button", { ...tid.toggle, disabled, ...(0, import_runtime72.trussProps)({
         ...touchableStyle,
         ...{
           paddingLeft: "pl2",
@@ -18396,7 +18413,7 @@ function Accordion(props) {
           } : {}
         }
       }), onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(RotatingChevronIcon, { expanded }) })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("button", { ...tid.title, ...focusProps, "aria-controls": id, "aria-expanded": expanded, disabled, ...(0, import_runtime71.trussProps)({
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("button", { ...tid.title, ...focusProps, "aria-controls": id, "aria-expanded": expanded, disabled, ...(0, import_runtime72.trussProps)({
       ...{
         width: "w100"
       },
@@ -18405,13 +18422,13 @@ function Accordion(props) {
       /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "fg1 tal", children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(RotatingChevronIcon, { expanded })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { ...tid.details, id, "aria-hidden": !expanded, ...(0, import_runtime71.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { ...tid.details, id, "aria-hidden": !expanded, ...(0, import_runtime72.trussProps)({
       overflow: "oh",
       height: ["h_var", {
-        "--height": (0, import_runtime71.maybeCssVar)(__maybeInc13(contentHeight))
+        "--height": (0, import_runtime72.maybeCssVar)(__maybeInc14(contentHeight))
       }],
       transition: "transition_height_250ms_ease_in_out"
-    }), children: expanded && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { ...(0, import_runtime71.trussProps)({
+    }), children: expanded && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { ...(0, import_runtime72.trussProps)({
       paddingLeft: "pl2",
       paddingRight: "pr2",
       paddingBottom: "pb2",
@@ -18426,11 +18443,11 @@ function Accordion(props) {
   ] });
 }
 function RotatingChevronIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { ...(0, import_runtime71.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { ...(0, import_runtime72.trussProps)({
     flexShrink: "fs0",
     transition: "transition_transform_250ms_linear",
     transform: ["transform_var", {
-      "--transform": (0, import_runtime71.maybeCssVar)(props.expanded ? "rotate(180deg)" : "rotate(0deg)")
+      "--transform": (0, import_runtime72.maybeCssVar)(props.expanded ? "rotate(180deg)" : "rotate(0deg)")
     }]
   }), children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Icon, { icon: "chevronDown" }) });
 }
@@ -18475,7 +18492,7 @@ function assertNever(x) {
 }
 
 // src/components/AutoSaveIndicator.tsx
-var import_runtime72 = require("@homebound/truss/runtime");
+var import_runtime73 = require("@homebound/truss/runtime");
 var import_jsx_runtime100 = require("react/jsx-runtime");
 function AutoSaveIndicator({
   hideOnIdle,
@@ -18520,7 +18537,7 @@ function Indicator({
   icon,
   color
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { "data-testid": "autoSave", ...(0, import_runtime72.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { "data-testid": "autoSave", ...(0, import_runtime73.trussProps)({
     display: "df",
     gap: "gap1",
     alignItems: "aic",
@@ -18537,7 +18554,7 @@ function Indicator({
 }
 
 // src/components/Banner.tsx
-var import_runtime73 = require("@homebound/truss/runtime");
+var import_runtime74 = require("@homebound/truss/runtime");
 var import_jsx_runtime101 = require("react/jsx-runtime");
 function Banner(props) {
   const {
@@ -18548,7 +18565,7 @@ function Banner(props) {
     ...others
   } = props;
   const tid = useTestIds(others, "banner");
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { ...(0, import_runtime73.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { ...(0, import_runtime74.trussProps)({
     ...variantStyles3[type],
     ...{
       display: "df",
@@ -18672,7 +18689,7 @@ function useModal() {
 }
 
 // src/components/Modal/Modal.tsx
-var import_runtime74 = require("@homebound/truss/runtime");
+var import_runtime75 = require("@homebound/truss/runtime");
 var import_jsx_runtime103 = require("react/jsx-runtime");
 function Modal(props) {
   const {
@@ -18753,7 +18770,7 @@ function Modal(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [modalBodyRef, modalFooterRef, modalHeaderRef]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(ModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_react_aria49.OverlayContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(AutoSaveStatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { ...(0, import_runtime74.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(ModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_react_aria49.OverlayContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(AutoSaveStatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { ...(0, import_runtime75.trussProps)({
     position: "fixed",
     top: "tp_0",
     bottom: "bot_0",
@@ -18764,9 +18781,9 @@ function Modal(props) {
     justifyContent: "jcc",
     backgroundColor: "bgc_rgba_36_36_36_0_6",
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime74.maybeCssVar)(zIndices.modalUnderlay)
+      "--zIndex": (0, import_runtime75.maybeCssVar)(zIndices.modalUnderlay)
     }]
-  }), ...underlayProps, ...testId.underlay, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_react_aria49.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { ...(0, import_runtime74.trussProps)({
+  }), ...underlayProps, ...testId.underlay, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_react_aria49.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { ...(0, import_runtime75.trussProps)({
     borderRadius: "br24",
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
@@ -18794,7 +18811,7 @@ function Modal(props) {
       borderRadius: "br0"
     } : {}
   }), ref, ...overlayProps, ...dialogProps, ...modalProps, ...testId, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("header", { ...(0, import_runtime74.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("header", { ...(0, import_runtime75.trussProps)({
       display: "df",
       flexDirection: "fdrr",
       paddingTop: "pt3",
@@ -18811,7 +18828,7 @@ function Modal(props) {
       } : {}
     }), children: [
       /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "fs0 pl1", children: allowClosing && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("h1", { ...(0, import_runtime74.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("h1", { ...(0, import_runtime75.trussProps)({
         flexGrow: "fg1",
         fontWeight: "fw6",
         fontSize: "fz_30px",
@@ -18821,7 +18838,7 @@ function Modal(props) {
         }]
       }), ref: modalHeaderRef, ...titleProps, ...testId.title })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("main", { ref: modalBodyRef, ...(0, import_runtime74.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("main", { ref: modalBodyRef, ...(0, import_runtime75.trussProps)({
       flexGrow: "fg1",
       overflowY: "oya",
       ...hasScroll ? {
@@ -18856,7 +18873,7 @@ function ModalBody({
   const testId = useTestIds({}, testIdPrefix);
   return (0, import_react_dom3.createPortal)(
     // If `virtualized`, then we are expecting the `children` will handle their own scrollbar, so have the overflow hidden and adjust padding
-    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { ...(0, import_runtime74.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { ...(0, import_runtime75.trussProps)({
       height: "h100",
       ...virtualized ? {
         overflow: "oh",
@@ -18877,7 +18894,7 @@ function ModalFooter({
     modalFooterDiv
   } = useBeamContext();
   const testId = useTestIds({}, testIdPrefix);
-  return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { ...(0, import_runtime74.trussProps)({
+  return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { ...(0, import_runtime75.trussProps)({
     ...{
       paddingTop: "pt3",
       paddingBottom: "pb3",
@@ -18912,7 +18929,7 @@ function getSize(size) {
 var import_react94 = require("react");
 
 // src/components/Snackbar/SnackbarNotice.tsx
-var import_runtime75 = require("@homebound/truss/runtime");
+var import_runtime76 = require("@homebound/truss/runtime");
 var import_jsx_runtime104 = require("react/jsx-runtime");
 function SnackbarNotice(props) {
   const {
@@ -18925,7 +18942,7 @@ function SnackbarNotice(props) {
   } = props;
   const tid = useTestIds(props, "snackbar");
   const reallyHideClose = hideCloseButton && !persistent;
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { ...(0, import_runtime75.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { ...(0, import_runtime76.trussProps)({
     color: ["color_var", {
       "--color": "var(--b-on-surface)"
     }],
@@ -18944,7 +18961,7 @@ function SnackbarNotice(props) {
     /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
       "span",
       {
-        ...(0, import_runtime75.trussProps)({
+        ...(0, import_runtime76.trussProps)({
           overflow: "oh",
           display: "d_negwebkit_box",
           WebkitBoxOrient: "wbo_vertical",
@@ -18965,7 +18982,7 @@ function SnackbarNotice(props) {
       }
     ),
     (action || !reallyHideClose) && /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("span", { className: "fs0 df aic", children: [
-      action && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { ...(0, import_runtime75.trussProps)({
+      action && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { ...(0, import_runtime76.trussProps)({
         textTransform: "ttu",
         fontWeight: "fw4",
         fontSize: "fz_14px",
@@ -19003,17 +19020,17 @@ var typeToIcon2 = {
 };
 
 // src/components/Snackbar/Snackbar.tsx
-var import_runtime76 = require("@homebound/truss/runtime");
+var import_runtime77 = require("@homebound/truss/runtime");
 var import_jsx_runtime105 = require("react/jsx-runtime");
 function Snackbar({
   notices,
   offset
 }) {
   const tid = useTestIds({});
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { ...tid.snackbarWrapper, ...(0, import_runtime76.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { ...tid.snackbarWrapper, ...(0, import_runtime77.trussProps)({
     position: "fixed",
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime76.maybeCssVar)(zIndices.snackbar)
+      "--zIndex": (0, import_runtime77.maybeCssVar)(zIndices.snackbar)
     }],
     bottom: ["bottom_var", {
       "--bottom": `${offset.bottom ?? defaultOffset.bottom}px`
@@ -19060,7 +19077,7 @@ var SuperDrawerWidth = /* @__PURE__ */ ((SuperDrawerWidth2) => {
 })(SuperDrawerWidth || {});
 
 // src/components/SuperDrawer/SuperDrawer.tsx
-var import_runtime77 = require("@homebound/truss/runtime");
+var import_runtime78 = require("@homebound/truss/runtime");
 var import_jsx_runtime107 = require("react/jsx-runtime");
 var import_react96 = require("react");
 function SuperDrawer() {
@@ -19104,7 +19121,7 @@ function SuperDrawer() {
     {
       ...testId,
       key: "superDrawer",
-      ...(0, import_runtime77.trussProps)({
+      ...(0, import_runtime78.trussProps)({
         position: "fixed",
         display: "df",
         justifyContent: "jcfe",
@@ -19116,7 +19133,7 @@ function SuperDrawer() {
         bottom: "bottom0",
         left: "left0",
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime77.maybeCssVar)(zIndices.superDrawerScrim)
+          "--zIndex": (0, import_runtime78.maybeCssVar)(zIndices.superDrawerScrim)
         }]
       }),
       initial: {
@@ -19136,13 +19153,13 @@ function SuperDrawer() {
     /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
       import_framer_motion.motion.aside,
       {
-        ...(0, import_runtime77.trussProps)({
+        ...(0, import_runtime78.trussProps)({
           backgroundColor: ["bgColor_var", {
             "--backgroundColor": "var(--b-surface)"
           }],
           height: "h100",
           maxWidth: ["maxw_var", {
-            "--maxWidth": (0, import_runtime77.maybeCssVar)(px(width2))
+            "--maxWidth": (0, import_runtime78.maybeCssVar)(px(width2))
           }],
           width: "w100",
           display: "df",
@@ -19169,7 +19186,7 @@ function SuperDrawer() {
         },
         onClick: (e) => e.stopPropagation(),
         children: /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(AutoSaveStatusProvider, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("header", { ...(0, import_runtime77.trussProps)({
+          /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("header", { ...(0, import_runtime78.trussProps)({
             paddingTop: "pt3",
             paddingBottom: "pb3",
             paddingRight: "pr3",
@@ -19184,7 +19201,7 @@ function SuperDrawer() {
             justifyContent: "jcsb",
             gap: "gap3"
           }), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { ref: headerRef, ...(0, import_runtime77.trussProps)({
+            /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { ref: headerRef, ...(0, import_runtime78.trussProps)({
               color: ["color_var", {
                 "--color": "var(--b-on-surface)"
               }],
@@ -19980,9 +19997,9 @@ function BoundTreeSelectField(props) {
 
 // src/forms/FormLines.tsx
 var import_react97 = require("react");
-var import_runtime78 = require("@homebound/truss/runtime");
+var import_runtime79 = require("@homebound/truss/runtime");
 var import_jsx_runtime127 = require("react/jsx-runtime");
-var __maybeInc14 = (inc) => {
+var __maybeInc15 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function FormLines(props) {
@@ -20016,17 +20033,17 @@ function FormLines(props) {
       fullWidth: true
     } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(PresentationProvider, { fieldProps: newFieldProps, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { ...(0, import_runtime78.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(PresentationProvider, { fieldProps: newFieldProps, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { ...(0, import_runtime79.trussProps)({
     display: "df",
     flexDirection: "fdc",
     gap: ["gap_var", {
-      "--gap": (0, import_runtime78.maybeCssVar)(__maybeInc14(gap))
+      "--gap": (0, import_runtime79.maybeCssVar)(__maybeInc15(gap))
     }],
     paddingBottom: ["pb_var", {
-      "--paddingBottom": (0, import_runtime78.maybeCssVar)(__maybeInc14(gap))
+      "--paddingBottom": (0, import_runtime79.maybeCssVar)(__maybeInc15(gap))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime78.maybeCssVar)(__maybeInc14(sizes[width2]))
+      "--width": (0, import_runtime79.maybeCssVar)(__maybeInc15(sizes[width2]))
     }]
   }), children: import_react97.Children.map(children, (child) => {
     if (child && typeof child === "object" && "type" in child && child.type.isFormHeading) {
@@ -20040,7 +20057,7 @@ function FormLines(props) {
   }) }) });
 }
 function FormDivider() {
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { ...(0, import_runtime78.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { ...(0, import_runtime79.trussProps)({
     height: "h_1px",
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface-separator)"
@@ -20057,11 +20074,11 @@ function FieldGroup(props) {
     const width2 = widths2[i] || 1;
     return typeof width2 === `number` ? `${width2}fr` : width2;
   }).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { ...(0, import_runtime78.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { ...(0, import_runtime79.trussProps)({
     display: "dg",
     gap: "gap2",
     gridTemplateColumns: ["gtc_var", {
-      "--gridTemplateColumns": (0, import_runtime78.maybeCssVar)(gtc)
+      "--gridTemplateColumns": (0, import_runtime79.maybeCssVar)(gtc)
     }]
   }), children });
 }
@@ -20073,7 +20090,7 @@ var sizes = {
 };
 
 // src/forms/BoundForm.tsx
-var import_runtime79 = require("@homebound/truss/runtime");
+var import_runtime80 = require("@homebound/truss/runtime");
 var import_jsx_runtime128 = require("react/jsx-runtime");
 var import_react99 = require("react");
 var reactNodePrefix = "reactNode";
@@ -20128,12 +20145,12 @@ function FormRow({
     component,
     key,
     minWidth
-  }) => /* @__PURE__ */ (0, import_react99.createElement)("div", { ...(0, import_runtime79.trussProps)({
+  }) => /* @__PURE__ */ (0, import_react99.createElement)("div", { ...(0, import_runtime80.trussProps)({
     minWidth: ["mw_var", {
-      "--minWidth": (0, import_runtime79.maybeCssVar)(minWidth)
+      "--minWidth": (0, import_runtime80.maybeCssVar)(minWidth)
     }],
     flexBasis: ["fb_var", {
-      "--flexBasis": (0, import_runtime79.maybeCssVar)(`${itemFlexBasis}%`)
+      "--flexBasis": (0, import_runtime80.maybeCssVar)(`${itemFlexBasis}%`)
     }],
     flexGrow: "fg1"
   }), key: key.toString() }, isLoading ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(LoadingSkeleton, { size: "lg" }) : component)) });
@@ -20246,7 +20263,7 @@ function boundTreeSelectField(props) {
 
 // src/components/internal/CompoundField.tsx
 var import_react100 = require("react");
-var import_runtime80 = require("@homebound/truss/runtime");
+var import_runtime81 = require("@homebound/truss/runtime");
 var import_jsx_runtime129 = require("react/jsx-runtime");
 function CompoundField({
   children
@@ -20282,7 +20299,7 @@ function CompoundField({
     setHasFocusWithin(false);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "df", onFocusCapture, onBlurCapture, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { ...(0, import_runtime80.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { ...(0, import_runtime81.trussProps)({
       ...commonStyles,
       ...{
         borderLeftStyle: "bls_solid",
@@ -20297,7 +20314,7 @@ function CompoundField({
     }), children: (0, import_react100.cloneElement)(children[0], {
       internalProps
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { ...(0, import_runtime80.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { ...(0, import_runtime81.trussProps)({
       ...{
         width: "w_1px",
         flex: "fn",
@@ -20311,7 +20328,7 @@ function CompoundField({
         }]
       }
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { ...(0, import_runtime80.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { ...(0, import_runtime81.trussProps)({
       ...commonStyles,
       ...{
         flexGrow: "fg1",
@@ -20357,7 +20374,7 @@ function BoundSelectAndTextField(props) {
 }
 
 // src/forms/FormHeading.tsx
-var import_runtime81 = require("@homebound/truss/runtime");
+var import_runtime82 = require("@homebound/truss/runtime");
 var import_jsx_runtime131 = (
   // Add space before the heading, but only if it's not first.
   require("react/jsx-runtime")
@@ -20369,7 +20386,7 @@ function FormHeading(props) {
     isFirst = false,
     ...others
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("h3", { ...(0, import_runtime81.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("h3", { ...(0, import_runtime82.trussProps)({
     ...{
       fontWeight: "fw4",
       fontSize: "fz_16px",
@@ -20384,7 +20401,7 @@ function FormHeading(props) {
 FormHeading.isFormHeading = true;
 
 // src/forms/FormSection.tsx
-var import_runtime82 = require("@homebound/truss/runtime");
+var import_runtime83 = require("@homebound/truss/runtime");
 var import_jsx_runtime132 = require("react/jsx-runtime");
 function FormSection(props) {
   const {
@@ -20400,7 +20417,7 @@ function FormSection(props) {
     /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "df jcsb", children: [
       /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "df fdc gap_12px", children: [
         getTitle(title, isChild, tid),
-        description && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { ...(0, import_runtime82.trussProps)({
+        description && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { ...(0, import_runtime83.trussProps)({
           fontWeight: "fw4",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -20412,7 +20429,7 @@ function FormSection(props) {
       actions && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "df gap1 fs0", ...tid.actions, children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Button, { ...action }, `${action.label}`)) })
     ] }),
     fields,
-    childSections && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "df fdc gap3", children: childSections.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { ...(0, import_runtime82.trussProps)({
+    childSections && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "df fdc gap3", children: childSections.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { ...(0, import_runtime83.trussProps)({
       borderBottomStyle: "bbs_solid",
       borderBottomWidth: "bbw_1px",
       borderColor: ["bc_var", {
@@ -20433,7 +20450,7 @@ function getTitle(title, isChild, tid) {
 
 // src/forms/StaticField.tsx
 var import_utils114 = require("@react-aria/utils");
-var import_runtime83 = require("@homebound/truss/runtime");
+var import_runtime84 = require("@homebound/truss/runtime");
 var import_jsx_runtime133 = require("react/jsx-runtime");
 function StaticField(props) {
   const {
@@ -20447,14 +20464,14 @@ function StaticField(props) {
   } = props;
   const tid = useTestIds(props, typeof label === "string" ? defaultTestId(label) : "staticField");
   const id = (0, import_utils114.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { ...(0, import_runtime83.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { ...(0, import_runtime84.trussProps)({
     ...labelStyle === "left" ? {
       display: "df",
       justifyContent: "jcsb",
       maxWidth: "maxw100"
     } : {}
   }), ...tid.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("label", { ...(0, import_runtime83.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("label", { ...(0, import_runtime84.trussProps)({
       display: "db",
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -20464,7 +20481,7 @@ function StaticField(props) {
       }],
       marginBottom: "mb_4px"
     }), htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { id, ...(0, import_runtime83.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { id, ...(0, import_runtime84.trussProps)({
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -20514,7 +20531,7 @@ var import_use_debounce6 = require("use-debounce");
 // src/components/RightSidebar.tsx
 var import_framer_motion2 = require("framer-motion");
 var import_react101 = require("react");
-var import_runtime84 = require("@homebound/truss/runtime");
+var import_runtime85 = require("@homebound/truss/runtime");
 var import_jsx_runtime135 = require("react/jsx-runtime");
 var RIGHT_SIDEBAR_MIN_WIDTH = "250px";
 function RightSidebar({
@@ -20554,27 +20571,27 @@ function RightSidebar({
         duration: 0.2
       },
       x: "100%"
-    }, ...(0, import_runtime84.trussProps)({
+    }, ...(0, import_runtime85.trussProps)({
       width: "w100",
       minWidth: ["mw_var", {
-        "--minWidth": (0, import_runtime84.maybeCssVar)(RIGHT_SIDEBAR_MIN_WIDTH)
+        "--minWidth": (0, import_runtime85.maybeCssVar)(RIGHT_SIDEBAR_MIN_WIDTH)
       }],
       zIndex: "z0",
       maxHeight: ["maxh_var", {
-        "--maxHeight": (0, import_runtime84.maybeCssVar)(`calc(100vh - ${headerHeightPx2}px)`)
+        "--maxHeight": (0, import_runtime85.maybeCssVar)(`calc(100vh - ${headerHeightPx2}px)`)
       }],
       overflowY: "oya",
       paddingLeft: "pl4",
       paddingRight: "pr3"
     }), children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { ...(0, import_runtime84.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { ...(0, import_runtime85.trussProps)({
         position: "sticky",
         top: "top0",
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
         }]
       }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { ...(0, import_runtime84.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { ...(0, import_runtime85.trussProps)({
           position: "absolute",
           left: ["left_var", {
             "--left": `${-24}px`
@@ -20585,7 +20602,7 @@ function RightSidebar({
           alignItems: "aic"
         }), children: [
           /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { ...(0, import_runtime84.trussProps)({
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { ...(0, import_runtime85.trussProps)({
             position: "absolute",
             top: "top_48px",
             height: "h_calc_100vh_168px",
@@ -20653,7 +20670,7 @@ function Toast() {
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
 var import_react103 = require("react");
 var import_react_router_dom5 = require("react-router-dom");
-var import_runtime85 = require("@homebound/truss/runtime");
+var import_runtime86 = require("@homebound/truss/runtime");
 var import_jsx_runtime138 = (
   // Adding index to key to prevent rendering issues when multiple items have the same label
   require("react/jsx-runtime")
@@ -20666,7 +20683,7 @@ function PageHeaderBreadcrumbs({
   const [collapsed, setCollapsed] = (0, import_react103.useState)(true);
   function renderBreadcrumb(bc, index, hideDivisor) {
     return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_react103.Fragment, { children: [
-      index > 0 && !hideDivisor && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { ...(0, import_runtime85.trussProps)({
+      index > 0 && !hideDivisor && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { ...(0, import_runtime86.trussProps)({
         fontWeight: "fw6",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -20678,7 +20695,7 @@ function PageHeaderBreadcrumbs({
         marginTop: "mt_2px",
         marginBottom: "mb_2px"
       }), children: "/" }),
-      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react_router_dom5.Link, { to: bc.href, ...(0, import_runtime85.mergeProps)("navLink", void 0, {
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react_router_dom5.Link, { to: bc.href, ...(0, import_runtime86.mergeProps)("navLink", void 0, {
         fontWeight: "fw6",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -20692,7 +20709,7 @@ function PageHeaderBreadcrumbs({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "df aic mb_4px", children: breadcrumbs.length > 3 && collapsed ? /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_jsx_runtime138.Fragment, { children: [
     renderBreadcrumb(breadcrumbs[0], 0),
-    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("button", { ...tids.expand, ...(0, import_runtime85.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("button", { ...tids.expand, ...(0, import_runtime86.trussProps)({
       color: ["color_var", {
         "--color": "var(--b-on-surface-muted)"
       }],
@@ -20705,7 +20722,7 @@ function PageHeaderBreadcrumbs({
 }
 
 // src/components/Layout/FormPageLayout.tsx
-var import_runtime86 = require("@homebound/truss/runtime");
+var import_runtime87 = require("@homebound/truss/runtime");
 var import_jsx_runtime139 = require("react/jsx-runtime");
 var headerHeightPx = 120;
 var maxContentWidthPx = 1600;
@@ -20728,14 +20745,14 @@ function FormPageLayoutComponent(props) {
     // since this layout will be replacing most superdrawers/sidebars, we keep the listing mounted below to preserve the users's
     // scroll position & filters
     // Adding "align-items: start" allows "position: sticky" to work within a grid for the sidebars
-    /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { ...(0, import_runtime86.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { ...(0, import_runtime87.trussProps)({
       position: "fixed",
       top: "top0",
       bottom: "bottom0",
       left: "left0",
       right: "right0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime86.maybeCssVar)(zIndices.pageOverlay)
+        "--zIndex": (0, import_runtime87.maybeCssVar)(zIndices.pageOverlay)
       }],
       overflowY: "oya",
       backgroundColor: ["bgColor_var", {
@@ -20744,14 +20761,14 @@ function FormPageLayoutComponent(props) {
       display: "df",
       justifyContent: "jcc",
       alignItems: "aifs"
-    }), ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { ...(0, import_runtime86.trussProps)({
+    }), ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { ...(0, import_runtime87.trussProps)({
       width: "w100",
       maxWidth: ["maxw_var", {
         "--maxWidth": `${maxContentWidthPx}px`
       }],
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": (0, import_runtime86.maybeCssVar)(gridColumns)
+        "--gridTemplateColumns": (0, import_runtime87.maybeCssVar)(gridColumns)
       }],
       gridTemplateRows: "gtr_auto_1fr",
       columnGap: "cg3",
@@ -20760,7 +20777,7 @@ function FormPageLayoutComponent(props) {
       /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(PageHeader, { ...props, ...tids.pageHeader }),
       /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(LeftNav, { sectionsWithRefs, ...tids }),
       /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(FormSections, { sectionsWithRefs, formState, ...tids }),
-      rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("aside", { ...(0, import_runtime86.trussProps)({
+      rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("aside", { ...(0, import_runtime87.trussProps)({
         gridRow: "gr_2",
         gridColumn: "gc_3_4",
         position: "sticky",
@@ -20785,7 +20802,7 @@ function PageHeader(props) {
     notice
   } = useToastContext();
   const tids = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("header", { ...(0, import_runtime86.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("header", { ...(0, import_runtime87.trussProps)({
     gridRow: "gr_1",
     gridColumn: "gc_1_4",
     position: "sticky",
@@ -20794,7 +20811,7 @@ function PageHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime86.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime87.maybeCssVar)(zIndices.pageStickyHeader)
     }],
     ...!notice ? {
       height: ["h_var", {
@@ -20823,7 +20840,7 @@ function FormSections(props) {
   } = props;
   const tids = useTestIds(props);
   const bottomPaddingPx = sectionsWithRefs.length > 1 ? 200 : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("article", { ...(0, import_runtime86.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("article", { ...(0, import_runtime87.trussProps)({
     gridRow: "gr_2",
     gridColumn: "gc_2_3",
     paddingBottom: ["pb_var", {
@@ -20841,13 +20858,13 @@ function FormSections(props) {
       {
         id: sectionKey,
         ref,
-        ...(0, import_runtime86.trussProps)({
+        ...(0, import_runtime87.trussProps)({
           display: "dg",
           gridTemplateColumns: "gtc_50px_1fr",
           gridTemplateRows: "gtr_auto",
           marginBottom: "mb_72px",
           scrollMarginTop: ["scrollMarginTop_var", {
-            "--scrollMarginTop": (0, import_runtime86.maybeCssVar)(`${headerHeightPx}px`)
+            "--scrollMarginTop": (0, import_runtime87.maybeCssVar)(`${headerHeightPx}px`)
           }]
         }),
         ...tids.formSection,
@@ -20872,7 +20889,7 @@ function LeftNav(props) {
     section
   }) => !!section.title), [sectionsWithRefs]);
   const activeSection = useActiveSection(sectionWithTitles);
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("aside", { ...(0, import_runtime86.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("aside", { ...(0, import_runtime87.trussProps)({
     gridRow: "gr_2",
     gridColumn: "gc_1_2",
     position: "sticky",
@@ -20891,7 +20908,7 @@ var activeStyles = {
   fontSize: "fz_14px",
   lineHeight: "lh_20px",
   boxShadow: ["boxShadow_var", {
-    "--boxShadow": (0, import_runtime86.maybeCssVar)(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
+    "--boxShadow": (0, import_runtime87.maybeCssVar)(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
   }]
 };
 var hoverStyles2 = {
@@ -20901,7 +20918,7 @@ var hoverStyles2 = {
   lineHeight: "lh_20px",
   color: "blue900",
   boxShadow: ["boxShadow_var", {
-    "--boxShadow": (0, import_runtime86.maybeCssVar)(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
+    "--boxShadow": (0, import_runtime87.maybeCssVar)(`inset 3px 0px 0 0px var(${"--b-primary" /* Primary */})`)
   }]
 };
 var defaultFocusRingStyles = {
@@ -20941,7 +20958,7 @@ function SectionNavLink(props) {
     hoverProps,
     isHovered
   } = useHover2({});
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime86.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime87.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -21018,9 +21035,9 @@ function useActiveSection(sectionsWithRefs) {
 }
 
 // src/components/Layout/FullBleed.tsx
-var import_runtime87 = require("@homebound/truss/runtime");
+var import_runtime88 = require("@homebound/truss/runtime");
 var import_react105 = require("react");
-var __maybeInc15 = (inc) => {
+var __maybeInc16 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function FullBleed({
@@ -21044,24 +21061,24 @@ function FullBleed({
     // ...for some reason this keeps the Layout top padding better than using
     // react-aria's more generic mergeProps.
     {
-      ...(0, import_runtime87.mergeProps)(
+      ...(0, import_runtime88.mergeProps)(
         className,
         style,
         // ScrollableParent applies horizontal padding to its content column, so FullBleed
         // inverts that padding with negative margins before re-applying it to the child.
         {
           marginLeft: ["ml_var", {
-            "--marginLeft": (0, import_runtime87.maybeCssVar)(__maybeInc15(invertSpacing(paddingLeft)))
+            "--marginLeft": (0, import_runtime88.maybeCssVar)(__maybeInc16(invertSpacing(paddingLeft)))
           }],
           marginRight: ["mr_var", {
-            "--marginRight": (0, import_runtime87.maybeCssVar)(__maybeInc15(invertSpacing(paddingRight)))
+            "--marginRight": (0, import_runtime88.maybeCssVar)(__maybeInc16(invertSpacing(paddingRight)))
           }],
           ...!omitPadding ? {
             paddingLeft: ["pl_var", {
-              "--paddingLeft": (0, import_runtime87.maybeCssVar)(__maybeInc15(paddingLeft))
+              "--paddingLeft": (0, import_runtime88.maybeCssVar)(__maybeInc16(paddingLeft))
             }],
             paddingRight: ["pr_var", {
-              "--paddingRight": (0, import_runtime87.maybeCssVar)(__maybeInc15(paddingRight))
+              "--paddingRight": (0, import_runtime88.maybeCssVar)(__maybeInc16(paddingRight))
             }]
           } : {}
         }
@@ -21137,7 +21154,7 @@ function isSelectionButtonMenuProps(props) {
 }
 
 // src/components/CountBadge.tsx
-var import_runtime88 = require("@homebound/truss/runtime");
+var import_runtime89 = require("@homebound/truss/runtime");
 var import_jsx_runtime141 = require("react/jsx-runtime");
 function CountBadge(props) {
   const {
@@ -21149,7 +21166,7 @@ function CountBadge(props) {
   } = props;
   const tid = useTestIds(otherProps, "countBadge");
   if (hideIfZero && count === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("span", { ...tid, ...(0, import_runtime88.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("span", { ...tid, ...(0, import_runtime89.trussProps)({
     ...{
       height: ["sq_var", {
         "--height": `${count > 100 ? 18 : 16}px`
@@ -21169,12 +21186,12 @@ function CountBadge(props) {
       alignItems: "aic",
       justifyContent: "jcc",
       backgroundColor: ["bgColor_var", {
-        "--backgroundColor": (0, import_runtime88.maybeCssVar)(bgColor)
+        "--backgroundColor": (0, import_runtime89.maybeCssVar)(bgColor)
       }]
     },
     ...{
       color: ["color_var", {
-        "--color": (0, import_runtime88.maybeCssVar)(color)
+        "--color": (0, import_runtime89.maybeCssVar)(color)
       }]
     }
   }), children: count });
@@ -21649,7 +21666,7 @@ function OpenModal(props) {
 }
 
 // src/components/Filters/FilterModal.tsx
-var import_runtime89 = require("@homebound/truss/runtime");
+var import_runtime90 = require("@homebound/truss/runtime");
 var import_jsx_runtime151 = require("react/jsx-runtime");
 function FilterModal(props) {
   const {
@@ -21686,7 +21703,7 @@ function ModalFilterItem({
   label,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("div", { ...(0, import_runtime89.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("div", { ...(0, import_runtime90.trussProps)({
     marginBottom: "mb4",
     ...!label ? {
       borderTopStyle: "bts_solid",
@@ -21695,7 +21712,7 @@ function ModalFilterItem({
     } : {}
   }), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("h2", { className: "fw4 fz_16px lh_24px mb2", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { ...(0, import_runtime89.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { ...(0, import_runtime90.trussProps)({
       ...!label ? {
         paddingTop: "pt3"
       } : {}
@@ -21705,7 +21722,7 @@ function ModalFilterItem({
 
 // src/components/Filters/Filters.tsx
 var import_react109 = require("react");
-var import_runtime90 = require("@homebound/truss/runtime");
+var import_runtime91 = require("@homebound/truss/runtime");
 var import_jsx_runtime152 = require("react/jsx-runtime");
 function Filters(props) {
   const {
@@ -21729,7 +21746,7 @@ function Filters(props) {
   }, [numberOfInlineFilters, vertical, filterDefs]);
   const numModalFilters = safeKeys(modalFilters).filter((fk) => filter[fk] !== void 0).length;
   const maybeGroupByField = groupBy ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(SelectField, { label: "Group by", labelStyle: !vertical ? "inline" : "above", sizeToContent: !vertical, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => g && groupBy.setValue(g) }) }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { ...(0, import_runtime90.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { ...(0, import_runtime91.trussProps)({
     ...vertical ? {
       display: "df",
       flexDirection: "fdc",
@@ -21790,7 +21807,7 @@ var ToggleFilter = class extends BaseFilter {
 var import_react110 = require("react");
 var import_react_aria52 = require("react-aria");
 var import_react_stately18 = require("react-stately");
-var import_runtime91 = require("@homebound/truss/runtime");
+var import_runtime92 = require("@homebound/truss/runtime");
 var import_jsx_runtime154 = require("react/jsx-runtime");
 function EditColumnsButton(props) {
   const {
@@ -21839,7 +21856,7 @@ function EditColumnsButton(props) {
     label: "",
     size: "md",
     variant: "secondaryBlack"
-  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { ...(0, import_runtime91.trussProps)({
+  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { ...(0, import_runtime92.trussProps)({
     display: "df",
     flexDirection: "fdc",
     backgroundColor: ["bgColor_var", {
@@ -21856,7 +21873,7 @@ function EditColumnsButton(props) {
       /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis pr1", children: option.label }),
       /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
     ] }, option.value)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { ...(0, import_runtime91.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { ...(0, import_runtime92.trussProps)({
       display: "df",
       justifyContent: "jcc",
       paddingTop: "pt2",
@@ -21898,7 +21915,7 @@ var import_use_debounce7 = require("use-debounce");
 var import_use_query_params3 = require("use-query-params");
 
 // src/components/Layout/GridTableLayout/FilterPanel.tsx
-var import_runtime92 = require("@homebound/truss/runtime");
+var import_runtime93 = require("@homebound/truss/runtime");
 
 // src/components/Layout/GridTableLayout/GroupByField.tsx
 var import_jsx_runtime156 = require("react/jsx-runtime");
@@ -21934,7 +21951,7 @@ function FilterPanelOpen({
   const inDocumentScrollLayout = useDocumentScrollLayout();
   const activeFilterCount = getActiveFilterCount(filter ?? {});
   const filterControls = filter && setFilter ? buildFilterControls(filterImpls, filter, setFilter, tid) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { ...(0, import_runtime92.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { ...(0, import_runtime93.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -21966,7 +21983,7 @@ function FilterPanelClosed({
   if (!filter || !setFilter) return null;
   const chips = safeEntries(filterImpls).flatMap(([key, f]) => chipsForFilterKey(key, f, filter, setFilter, tid));
   if (chips.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { ...(0, import_runtime92.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { ...(0, import_runtime93.trussProps)({
     display: "df",
     gap: "gap1",
     alignItems: "aic",
@@ -22007,7 +22024,7 @@ function chipsForFilterKey(key, f, filter, onChange, testId) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
-var import_runtime93 = require("@homebound/truss/runtime");
+var import_runtime94 = require("@homebound/truss/runtime");
 var import_jsx_runtime158 = require("react/jsx-runtime");
 function GridTableLayoutActionsComponent(props) {
   const {
@@ -22071,7 +22088,7 @@ function GridTableLayoutActionsComponent(props) {
       }
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { ...(0, import_runtime93.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { ...(0, import_runtime94.trussProps)({
     display: "df",
     flexDirection: "fdc",
     gap: "gap1",
@@ -22080,7 +22097,7 @@ function GridTableLayoutActionsComponent(props) {
       paddingBottom: "pb3"
     } : {}
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { ...(0, import_runtime93.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { ...(0, import_runtime94.trussProps)({
       ...{
         display: "df",
         gap: "gap1",
@@ -22107,7 +22124,7 @@ function GridTableLayoutActionsComponent(props) {
         } })
       ] })
     ] }),
-    sm && showSearch && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { ...(0, import_runtime93.trussProps)(pageContentPaddingX), children: searchTextField }),
+    sm && showSearch && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { ...(0, import_runtime94.trussProps)(pageContentPaddingX), children: searchTextField }),
     hasFilterControls && !showInlineControl && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
   ] });
 }
@@ -22117,7 +22134,7 @@ var _GridTableLayoutActions = (0, import_react111.memo)(GridTableLayoutActionsCo
 var import_react112 = require("react");
 
 // src/components/LoadingSkeleton.tsx
-var import_runtime94 = require("@homebound/truss/runtime");
+var import_runtime95 = require("@homebound/truss/runtime");
 var import_jsx_runtime159 = require("react/jsx-runtime");
 function LoadingSkeleton({
   rows = 1,
@@ -22130,18 +22147,18 @@ function LoadingSkeleton({
   const rowHeight = sizeToPixels2[size];
   const rowCells = (rowNumber) => {
     const flexGrowForCell = randomizeWidths ? getRandomizedFlexBasisByRowIndex(rowNumber) : 1;
-    return cellArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { ...(0, import_runtime94.trussProps)({
+    return cellArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { ...(0, import_runtime95.trussProps)({
       borderRadius: "br4",
       animation: "animation_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite",
       flexGrow: ["flexGrow_var", {
-        "--flexGrow": (0, import_runtime94.maybeCssVar)(flexGrowForCell)
+        "--flexGrow": (0, import_runtime95.maybeCssVar)(flexGrowForCell)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-loader-fill)"
       }]
     }) }, `row-${rowNumber}-cell-${i}`));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { ...(0, import_runtime94.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { ...(0, import_runtime95.trussProps)({
     display: "df",
     gap: "gap1",
     marginBottom: "mb1",
@@ -22226,9 +22243,9 @@ function parseStoredTableView(raw) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-var import_runtime95 = require("@homebound/truss/runtime");
+var import_runtime96 = require("@homebound/truss/runtime");
 var import_jsx_runtime161 = require("react/jsx-runtime");
-var __maybeInc16 = (inc) => {
+var __maybeInc17 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function GridTableLayoutComponent(props) {
@@ -22282,21 +22299,21 @@ function GridTableLayoutComponent(props) {
     as: cardAs
   } : {}, api, emptyState, filter: clientSearch, style: tableStyle, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey, columnGutter: inDocumentScrollLayout }) });
   const tableScrollContent = /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(import_jsx_runtime161.Fragment, { children: [
-    showTableActions && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ref: tableActionsRef, ...(0, import_runtime95.trussProps)({
+    showTableActions && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ref: tableActionsRef, ...(0, import_runtime96.trussProps)({
       ...inDocumentScrollLayout ? {
         transition: "transitionTop",
         position: "sticky",
         top: ["top_var", {
-          "--top": (0, import_runtime95.maybeCssVar)(__maybeInc16(stickyNavAndHeaderOffset()))
+          "--top": (0, import_runtime96.maybeCssVar)(__maybeInc17(stickyNavAndHeaderOffset()))
         }],
         left: ["left_var", {
-          "--left": (0, import_runtime95.maybeCssVar)(__maybeInc16(documentScrollChromeLeft()))
+          "--left": (0, import_runtime96.maybeCssVar)(__maybeInc17(documentScrollChromeLeft()))
         }],
         width: ["w_var", {
-          "--width": (0, import_runtime95.maybeCssVar)(__maybeInc16(`min(100%, ${documentScrollChromeWidth()})`))
+          "--width": (0, import_runtime96.maybeCssVar)(__maybeInc17(`min(100%, ${documentScrollChromeWidth()})`))
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime95.maybeCssVar)(zIndices.tableActions)
+          "--zIndex": (0, import_runtime96.maybeCssVar)(zIndices.tableActions)
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -22464,9 +22481,9 @@ function useRightPaneContext() {
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 var import_framer_motion3 = require("framer-motion");
 var import_react116 = require("react");
-var import_runtime96 = require("@homebound/truss/runtime");
+var import_runtime97 = require("@homebound/truss/runtime");
 var import_jsx_runtime164 = require("react/jsx-runtime");
-var __maybeInc17 = (inc) => {
+var __maybeInc18 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function RightPaneLayout(props) {
@@ -22484,10 +22501,10 @@ function RightPaneLayout(props) {
   } = useRightPaneContext();
   (0, import_react116.useEffect)(() => closePane, [closePane]);
   return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { className: "h100 df oxh", children: /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(import_jsx_runtime164.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { ...(0, import_runtime96.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { ...(0, import_runtime97.trussProps)({
       ...{
         width: ["w_var", {
-          "--width": (0, import_runtime96.maybeCssVar)(__maybeInc17(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": (0, import_runtime97.maybeCssVar)(__maybeInc18(`calc(100% - ${paneWidth + 24}px)`))
         }],
         transition: "transition_width_2s_linear",
         height: "h100",
@@ -22503,13 +22520,13 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": (0, import_runtime96.maybeCssVar)(__maybeInc17(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": (0, import_runtime97.maybeCssVar)(__maybeInc18(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
       }
     }), children }),
-    /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)("div", { ...(0, import_runtime96.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)("div", { ...(0, import_runtime97.trussProps)({
       position: "relative",
       ...!!defaultPaneContent ? {
         width: ["w_var", {
@@ -22517,7 +22534,7 @@ function RightPaneLayout(props) {
         }]
       } : {}
     }), children: [
-      defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { ...(0, import_runtime96.trussProps)({
+      defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { ...(0, import_runtime97.trussProps)({
         height: "h100",
         width: ["w_var", {
           "--width": `${paneWidth}px`
@@ -22535,9 +22552,9 @@ function RightPaneLayout(props) {
         {
           layout: "position",
           "data-testid": "rightPaneContent",
-          ...(0, import_runtime96.trussProps)({
+          ...(0, import_runtime97.trussProps)({
             backgroundColor: ["bgColor_var", {
-              "--backgroundColor": (0, import_runtime96.maybeCssVar)(paneBgColor)
+              "--backgroundColor": (0, import_runtime97.maybeCssVar)(paneBgColor)
             }],
             height: "h100",
             width: ["w_var", {
@@ -22618,7 +22635,7 @@ function SidePanel(props) {
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-var import_runtime97 = require("@homebound/truss/runtime");
+var import_runtime98 = require("@homebound/truss/runtime");
 var import_jsx_runtime167 = require("react/jsx-runtime");
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
@@ -22660,14 +22677,14 @@ function TableReviewLayout(props) {
       bordered: true
     }, stickyHeader: true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { ...(0, import_runtime97.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { ...(0, import_runtime98.trussProps)({
     position: "fixed",
     top: "top0",
     bottom: "bottom0",
     left: "left0",
     right: "right0",
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime97.maybeCssVar)(zIndices.pageOverlay)
+      "--zIndex": (0, import_runtime98.maybeCssVar)(zIndices.pageOverlay)
     }],
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
@@ -22684,7 +22701,7 @@ function TableReviewLayout(props) {
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(Button, { label: "Close", onClick: closeAction, ...tid.closeButton })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { ...(0, import_runtime97.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { ...(0, import_runtime98.trussProps)({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -22695,7 +22712,7 @@ function TableReviewLayout(props) {
       }), ...tid.description, children: description })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { className: "fg1 df mh0", ...tid.content, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { ...(0, import_runtime97.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { ...(0, import_runtime98.trussProps)({
         ...{
           flexGrow: "fg1",
           overflowY: "oya",
@@ -22718,7 +22735,7 @@ function TableReviewLayout(props) {
         ease: "linear",
         duration: 0.2
       }, className: "df fdc fs0 relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { ...(0, import_runtime97.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { ...(0, import_runtime98.trussProps)({
           position: "absolute",
           top: ["top_var", {
             "--top": `${-32}px`
@@ -22732,7 +22749,7 @@ function TableReviewLayout(props) {
           zIndex: "z1"
         }), children: [
           /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
-          /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { ...(0, import_runtime97.trussProps)({
+          /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { ...(0, import_runtime98.trussProps)({
             width: "w_1px",
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": "var(--b-field-border-default)"
@@ -22818,7 +22835,7 @@ function useBeamContext() {
 // src/components/Breadcrumbs.tsx
 var import_react119 = require("react");
 var import_react_router_dom6 = require("react-router-dom");
-var import_runtime98 = require("@homebound/truss/runtime");
+var import_runtime99 = require("@homebound/truss/runtime");
 var import_jsx_runtime169 = (
   // Index is added to the key to prevent rendering issues when multiple items have the same label
   require("react/jsx-runtime")
@@ -22837,7 +22854,7 @@ function Breadcrumbs({
   function renderBreadcrumb(bc, index, isLast) {
     return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(import_react119.Fragment, { children: [
       index > 0 && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "fs0 fw4 fz_12px lh_16px", children: "/" }),
-      /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_react_router_dom6.Link, { ...tid.link, to: bc.href, title: bc.label, ...(0, import_runtime98.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_react_router_dom6.Link, { ...tid.link, to: bc.href, title: bc.label, ...(0, import_runtime99.trussProps)({
         ...{
           fontWeight: "fw4",
           fontSize: "fz_12px",
@@ -22896,7 +22913,7 @@ function ButtonDatePicker(props) {
 // src/components/ButtonGroup.tsx
 var import_react121 = require("react");
 var import_react_aria55 = require("react-aria");
-var import_runtime99 = require("@homebound/truss/runtime");
+var import_runtime100 = require("@homebound/truss/runtime");
 var import_jsx_runtime171 = (
   // Disable the button if the ButtonGroup is disabled or if the current button is disabled.
   require("react/jsx-runtime")
@@ -22910,7 +22927,7 @@ function ButtonGroup(props) {
   const tid = useTestIds(props, "buttonGroup");
   return (
     // Adding `line-height: 0` prevent inheriting line-heights that might throw off sizing within the button group.
-    /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { ...tid, ...(0, import_runtime99.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { ...tid, ...(0, import_runtime100.trussProps)({
       ...{
         display: "df",
         lineHeight: "lh_0"
@@ -22956,10 +22973,10 @@ function GroupButton(props) {
     isHovered
   } = (0, import_react_aria55.useHover)(ariaProps);
   const tid = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("span", { ...(0, import_runtime99.trussProps)(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
+  return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("span", { ...(0, import_runtime100.trussProps)(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
     title: resolveTooltip(disabled, tooltip),
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime99.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime100.trussProps)({
       ...{
         fontWeight: "fw6",
         fontSize: "fz_14px",
@@ -23082,7 +23099,7 @@ var import_react_aria56 = require("react-aria");
 // src/components/Tag.tsx
 var import_utils141 = require("@react-aria/utils");
 var import_react122 = require("react");
-var import_runtime100 = require("@homebound/truss/runtime");
+var import_runtime101 = require("@homebound/truss/runtime");
 var import_jsx_runtime172 = require("react/jsx-runtime");
 function Tag(props) {
   const {
@@ -23116,7 +23133,7 @@ function Tag(props) {
   const tooltipTitle = !preventTooltip ? isIconOnly ? text : showTooltip ? text : void 0 : void 0;
   return maybeTooltip({
     title: tooltipTitle,
-    children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("span", { ...tid, ...(0, import_runtime100.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("span", { ...tid, ...(0, import_runtime101.trussProps)({
       ...{
         position: "relative",
         display: "dif",
@@ -23223,7 +23240,7 @@ function getPrimaryStyles(type) {
 }
 
 // src/components/Card.tsx
-var import_runtime101 = require("@homebound/truss/runtime");
+var import_runtime102 = require("@homebound/truss/runtime");
 var import_jsx_runtime173 = require("react/jsx-runtime");
 function Card(props) {
   const {
@@ -23256,8 +23273,8 @@ function Card(props) {
     ...isHovered && cardHoverStyles,
     ...isDisabled && disabledStyles2
   }), [isDisabled, isHovered, bordered, type, isList, fullWidth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { ...(0, import_runtime101.trussProps)(styles), ...hoverProps, ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime101.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { ...(0, import_runtime102.trussProps)(styles), ...hoverProps, ...tid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime102.trussProps)({
       ...{
         height: ["h_var", {
           "--height": `${imgHeight}px`
@@ -23280,14 +23297,14 @@ function Card(props) {
         flexShrink: "fs0"
       },
       ...isHovered && !isList && imageHoverStyles
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("img", { ...(0, import_runtime101.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("img", { ...(0, import_runtime102.trussProps)({
       width: "w100",
       height: "h100",
       objectFit: ["objectFit_var", {
-        "--objectFit": (0, import_runtime101.maybeCssVar)(imageFit)
+        "--objectFit": (0, import_runtime102.maybeCssVar)(imageFit)
       }]
     }), src: imgSrc, alt: title, ...tid.img }) }),
-    isHovered && buttonMenuItems && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime101.trussProps)({
+    isHovered && buttonMenuItems && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime102.trussProps)({
       position: "absolute",
       right: "right1",
       top: "top1",
@@ -23302,7 +23319,7 @@ function Card(props) {
     tag && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { className: "absolute left1 top_4px", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(Tag, { type: tag?.type, text: tag?.text, ...tid.tag }) }),
     /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "df fdc aifs gap1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime101.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime102.trussProps)({
           fontWeight: "fw6",
           fontSize: "fz_12px",
           lineHeight: "lh_16px",
@@ -23310,7 +23327,7 @@ function Card(props) {
             "--color": "var(--b-on-surface-muted)"
           }]
         }), ...tid.subtitle, children: subtitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime101.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime102.trussProps)({
           fontWeight: "fw6",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -23383,10 +23400,10 @@ var imageHoverStyles = {
 };
 
 // src/components/Copy.tsx
-var import_runtime102 = require("@homebound/truss/runtime");
+var import_runtime103 = require("@homebound/truss/runtime");
 var import_jsx_runtime174 = require("react/jsx-runtime");
 function Copy(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { ...(0, import_runtime102.mergeProps)("beam-copy", void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { ...(0, import_runtime103.mergeProps)("beam-copy", void 0, {
     ...{
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -23417,7 +23434,7 @@ function useDnDGridContext() {
 }
 
 // src/components/DnDGrid/DnDGrid.tsx
-var import_runtime103 = require("@homebound/truss/runtime");
+var import_runtime104 = require("@homebound/truss/runtime");
 var import_jsx_runtime175 = require("react/jsx-runtime");
 function DnDGrid(props) {
   const {
@@ -23600,7 +23617,7 @@ function DnDGrid(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(DnDGridContext.Provider, { value: {
     dragEl,
     onDragHandleKeyDown
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("div", { ref: gridEl, ...(0, import_runtime103.trussProps)({
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("div", { ref: gridEl, ...(0, import_runtime104.trussProps)({
     ...{
       containerType: "ctis",
       display: "dg"
@@ -23613,7 +23630,7 @@ var gridCloneKey = "dndgrid-clone";
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
 var import_react_aria57 = require("react-aria");
-var import_runtime104 = require("@homebound/truss/runtime");
+var import_runtime105 = require("@homebound/truss/runtime");
 var import_jsx_runtime176 = require("react/jsx-runtime");
 function DnDGridItemHandle(props) {
   const {
@@ -23643,7 +23660,7 @@ function DnDGridItemHandle(props) {
     borderRadius: "br4",
     borderWidth: "bw1"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("button", { ...(0, import_runtime104.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("button", { ...(0, import_runtime105.trussProps)({
     ...compact ? iconButtonCompact : iconButtonNormal,
     ...{
       cursor: "cursor_grab",
@@ -23697,7 +23714,7 @@ function useDnDGridItem(props) {
 }
 
 // src/components/EnvironmentBanner/EnvironmentBanner.tsx
-var import_runtime105 = require("@homebound/truss/runtime");
+var import_runtime106 = require("@homebound/truss/runtime");
 var import_jsx_runtime177 = require("react/jsx-runtime");
 function EnvironmentBanner(props) {
   const {
@@ -23717,14 +23734,14 @@ function EnvironmentBanner(props) {
     tooltip
   } = getEnvironmentBannerConfig(env, impersonating, showProdWarning);
   const bgColorVar = maybeCssVar(bgColor);
-  return /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { ...(0, import_runtime105.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { ...(0, import_runtime106.trussProps)({
     flexShrink: "fs0",
     position: "relative",
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime105.maybeCssVar)(zIndices.environmentBanner)
+      "--zIndex": (0, import_runtime106.maybeCssVar)(zIndices.environmentBanner)
     }],
     backgroundColor: ["bgColor_var", {
-      "--backgroundColor": (0, import_runtime105.maybeCssVar)(bgColorVar)
+      "--backgroundColor": (0, import_runtime106.maybeCssVar)(bgColorVar)
     }],
     height: ["h_var", {
       "--height": `${environmentBannerSizePx}px`
@@ -23733,7 +23750,7 @@ function EnvironmentBanner(props) {
   }), role: "banner", ...tid, children: [
     getInvertedCorner("left", bgColorVar),
     getInvertedCorner("right", bgColorVar),
-    /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { ...(0, import_runtime105.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { ...(0, import_runtime106.trussProps)({
       ...{
         position: "relative",
         zIndex: "z2",
@@ -23748,7 +23765,7 @@ function EnvironmentBanner(props) {
         /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(Tag, { text: badgeLabel, xss: {
           backgroundColor: "bgColor_FFFFFF90"
         }, ...tid.badge }),
-        /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("span", { ...(0, import_runtime105.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("span", { ...(0, import_runtime106.trussProps)({
           ...{
             alignItems: "aic",
             gap: "gap1",
@@ -23769,7 +23786,7 @@ function EnvironmentBanner(props) {
           /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("span", { className: "fs0", ...tid.info, children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(Icon, { icon: "infoCircle", tooltip, inc: 2, color: "--b-on-primary" /* OnPrimary */ }) })
         ] })
       ] }),
-      impersonating != null && /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("span", { ...(0, import_runtime105.trussProps)({
+      impersonating != null && /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("span", { ...(0, import_runtime106.trussProps)({
         display: "df",
         alignItems: "aic",
         gap: "gap2",
@@ -23858,16 +23875,16 @@ function getInvertedCorner(side, bgColorVar) {
     right: "right0"
   };
   const shadowXOffset = side === "left" ? -invertedCornerRadiusPx : invertedCornerRadiusPx;
-  return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { "aria-hidden": true, ...(0, import_runtime105.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { "aria-hidden": true, ...(0, import_runtime106.trussProps)({
     ...shell,
     ...outerPosition
-  }), children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ...(0, import_runtime105.trussProps)({
+  }), children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ...(0, import_runtime106.trussProps)({
     height: "h_200",
     width: "w_200",
     position: "absolute",
     borderRadius: "borderRadius_50",
     boxShadow: ["boxShadow_var", {
-      "--boxShadow": (0, import_runtime105.maybeCssVar)(`${shadowXOffset}px -${invertedCornerRadiusPx}px 0 0 ${bgColorVar}`)
+      "--boxShadow": (0, import_runtime106.maybeCssVar)(`${shadowXOffset}px -${invertedCornerRadiusPx}px 0 0 ${bgColorVar}`)
     }],
     ...side === "right" ? {
       right: "right0"
@@ -23900,7 +23917,7 @@ var gridItemDataAttribute = "data-grid-item-span";
 var ResponsiveGridContext = (0, import_react127.createContext)(void 0);
 
 // src/components/Grid/ResponsiveGrid.tsx
-var import_runtime106 = require("@homebound/truss/runtime");
+var import_runtime107 = require("@homebound/truss/runtime");
 var import_jsx_runtime178 = require("react/jsx-runtime");
 function ResponsiveGrid(props) {
   const {
@@ -23921,12 +23938,12 @@ function ResponsiveGrid(props) {
     gap,
     columns
   }), [minColumnWidth, gap, columns]);
-  return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { ...(0, import_runtime106.trussProps)(gridStyles), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { ...(0, import_runtime107.trussProps)(gridStyles), children }) });
 }
 
 // src/components/Grid/ResponsiveGridItem.tsx
 var import_react_aria58 = require("react-aria");
-var import_runtime107 = require("@homebound/truss/runtime");
+var import_runtime108 = require("@homebound/truss/runtime");
 var import_jsx_runtime179 = require("react/jsx-runtime");
 function ResponsiveGridItem(props) {
   const {
@@ -23939,13 +23956,13 @@ function ResponsiveGridItem(props) {
   } = useResponsiveGridItem({
     colSpan
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...(0, import_react_aria58.mergeProps)(gridItemProps, (0, import_runtime107.trussProps)(gridItemStyles)), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...(0, import_react_aria58.mergeProps)(gridItemProps, (0, import_runtime108.trussProps)(gridItemStyles)), children });
 }
 
 // src/components/Grid/useResponsiveGrid.ts
 var import_react129 = require("react");
-var import_runtime108 = require("@homebound/truss/runtime");
-var __maybeInc18 = (inc) => {
+var import_runtime109 = require("@homebound/truss/runtime");
+var __maybeInc19 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function useResponsiveGrid(props) {
@@ -23963,11 +23980,11 @@ function useResponsiveGrid(props) {
     return {
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": (0, import_runtime108.maybeCssVar)(gridTemplateColumns)
+        "--gridTemplateColumns": (0, import_runtime109.maybeCssVar)(gridTemplateColumns)
       }],
       containerType: "ctis",
       gap: ["gap_var", {
-        "--gap": (0, import_runtime108.maybeCssVar)(__maybeInc18(gridGap))
+        "--gap": (0, import_runtime109.maybeCssVar)(__maybeInc19(gridGap))
       }]
     };
   }, [minColumnWidth, gap, columns]);
@@ -24090,9 +24107,9 @@ function HbSpinnerProvider({
 }
 
 // src/components/HomeboundLogo.tsx
-var import_runtime109 = require("@homebound/truss/runtime");
+var import_runtime110 = require("@homebound/truss/runtime");
 var import_jsx_runtime181 = require("react/jsx-runtime");
-var __maybeInc19 = (inc) => {
+var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function HomeboundLogo(props) {
@@ -24101,15 +24118,15 @@ function HomeboundLogo(props) {
     width: width2 = "auto",
     height = "auto"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime109.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime110.trussProps)({
     fill: ["fill_var", {
-      "--fill": (0, import_runtime109.maybeCssVar)(fill)
+      "--fill": (0, import_runtime110.maybeCssVar)(fill)
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime109.maybeCssVar)(__maybeInc19(width2))
+      "--width": (0, import_runtime110.maybeCssVar)(__maybeInc20(width2))
     }],
     height: ["h_var", {
-      "--height": (0, import_runtime109.maybeCssVar)(__maybeInc19(height))
+      "--height": (0, import_runtime110.maybeCssVar)(__maybeInc20(height))
     }]
   }), children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("path", { d: "M158.1,97.6H0.2L0,39.7L76.8,0l68,38.7l-3.1,5.3l-65-37L6.2,43.4l0.2,48h151.7V97.6z" }) });
 }
@@ -24117,7 +24134,7 @@ function HomeboundLogo(props) {
 // src/components/JumpLink.tsx
 var import_react132 = require("react");
 var import_react_aria59 = require("react-aria");
-var import_runtime110 = require("@homebound/truss/runtime");
+var import_runtime111 = require("@homebound/truss/runtime");
 var import_jsx_runtime182 = require("react/jsx-runtime");
 function JumpLink(props) {
   const {
@@ -24160,7 +24177,7 @@ function JumpLink(props) {
       });
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("a", { ref, ...(0, import_react_aria59.mergeProps)(linkProps, focusProps, hoverProps), ...tid, ...(0, import_runtime110.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("a", { ref, ...(0, import_react_aria59.mergeProps)(linkProps, focusProps, hoverProps), ...tid, ...(0, import_runtime111.trussProps)({
     ...jumpLinkStyles.baseStyles,
     ...active && jumpLinkStyles.activeStyles,
     ...isHovered && !disabled && jumpLinkStyles.hoverStyles,
@@ -24217,7 +24234,7 @@ var jumpLinkStyles = {
 // src/components/MaxLines.tsx
 var import_utils150 = require("@react-aria/utils");
 var import_react133 = require("react");
-var import_runtime111 = require("@homebound/truss/runtime");
+var import_runtime112 = require("@homebound/truss/runtime");
 var import_jsx_runtime183 = require("react/jsx-runtime");
 function MaxLines({
   maxLines,
@@ -24242,10 +24259,10 @@ function MaxLines({
     onResize
   });
   return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { ref: elRef, ...(0, import_runtime111.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { ref: elRef, ...(0, import_runtime112.trussProps)({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": (0, import_runtime111.maybeCssVar)(maxLines)
+          "--WebkitLineClamp": (0, import_runtime112.maybeCssVar)(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -24268,7 +24285,7 @@ var import_react136 = require("react");
 // src/components/AppNav/AppNavGroupTrigger.tsx
 var import_react134 = require("react");
 var import_react_aria60 = require("react-aria");
-var import_runtime112 = require("@homebound/truss/runtime");
+var import_runtime113 = require("@homebound/truss/runtime");
 var import_jsx_runtime184 = require("react/jsx-runtime");
 function AppNavGroupTrigger(props) {
   const {
@@ -24305,7 +24322,7 @@ function AppNavGroupTrigger(props) {
     ref,
     "aria-expanded": expanded,
     "aria-controls": navGroupId,
-    ...(0, import_runtime112.mergeProps)(navLink, void 0, {
+    ...(0, import_runtime113.mergeProps)(navLink, void 0, {
       ...baseStyles4,
       ...isFocusVisible && focusRingStyles2,
       ...isHovered && hoverStyles4,
@@ -24319,7 +24336,7 @@ function AppNavGroupTrigger(props) {
     })
   }), children: [
     label,
-    /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("div", { ...(0, import_runtime112.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("div", { ...(0, import_runtime113.trussProps)({
       ...{
         display: "df",
         alignItems: "aic",
@@ -24472,9 +24489,9 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-var import_runtime113 = require("@homebound/truss/runtime");
+var import_runtime114 = require("@homebound/truss/runtime");
 var import_jsx_runtime185 = require("react/jsx-runtime");
-var __maybeInc20 = (inc) => {
+var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function AppNavGroupView(props) {
@@ -24517,11 +24534,11 @@ function AppNavGroupDisclosure(props) {
   });
   return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)("div", { className: "df fdc", ...tid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, active: linkGroupHasActiveLink(linkGroup), onClick: onToggle, ...tid }),
-    /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...(0, import_runtime113.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...(0, import_runtime114.trussProps)({
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
-        "--height": (0, import_runtime113.maybeCssVar)(__maybeInc20(contentHeight))
+        "--height": (0, import_runtime114.maybeCssVar)(__maybeInc21(contentHeight))
       }]
     }), ...tid.panel, ...!expanded ? {
       inert: "true"
@@ -24551,7 +24568,7 @@ function AppNavGroupMenu({
 }
 
 // src/components/AppNav/AppNavSectionView.tsx
-var import_runtime114 = require("@homebound/truss/runtime");
+var import_runtime115 = require("@homebound/truss/runtime");
 var import_jsx_runtime187 = require("react/jsx-runtime");
 function AppNavSectionView(props) {
   const {
@@ -24578,7 +24595,7 @@ function AppNavSectionView(props) {
       "--borderColor": "var(--b-surface-separator)"
     }]
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)("div", { ...(0, import_runtime114.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)("div", { ...(0, import_runtime115.trussProps)({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -24586,7 +24603,7 @@ function AppNavSectionView(props) {
     },
     ...showDivider ? dividerStyles : {}
   }), ...tid, children: [
-    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { ...(0, import_runtime114.trussProps)({
+    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { ...(0, import_runtime115.trussProps)({
       fontWeight: "fw6",
       fontSize: "fz_10px",
       lineHeight: "lh_14px",
@@ -24670,7 +24687,7 @@ function useEnvironmentBannerLayoutHeight() {
 }
 
 // src/components/Navbar/NavbarMobileMenu.tsx
-var import_runtime115 = require("@homebound/truss/runtime");
+var import_runtime116 = require("@homebound/truss/runtime");
 var import_jsx_runtime190 = require("react/jsx-runtime");
 function NavbarMobileMenu(props) {
   const {
@@ -24708,13 +24725,13 @@ function NavbarMobileDrawer({
     top: bannerHeightPx
   };
   return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(import_jsx_runtime190.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(import_framer_motion5.motion.div, { ...(0, import_runtime115.mergeProps)(void 0, overlayTopStyle, {
+    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(import_framer_motion5.motion.div, { ...(0, import_runtime116.mergeProps)(void 0, overlayTopStyle, {
       position: "fixed",
       right: "right0",
       bottom: "bottom0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime115.maybeCssVar)(zIndices.navbarMobileMenuScrim)
+        "--zIndex": (0, import_runtime116.maybeCssVar)(zIndices.navbarMobileMenuScrim)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-scrim)"
@@ -24729,7 +24746,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: onClose, ...tid.mobileMenuScrim }, "navbarMobileMenuScrim"),
-    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(import_react_aria61.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(import_framer_motion5.motion.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...(0, import_runtime115.mergeProps)(void 0, overlayTopStyle, {
+    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(import_react_aria61.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(import_framer_motion5.motion.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...(0, import_runtime116.mergeProps)(void 0, overlayTopStyle, {
       position: "fixed",
       bottom: "bottom0",
       left: "left0",
@@ -24739,7 +24756,7 @@ function NavbarMobileDrawer({
       width: "w_260px",
       overflow: "oh",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime115.maybeCssVar)(zIndices.navbarMobileMenu)
+        "--zIndex": (0, import_runtime116.maybeCssVar)(zIndices.navbarMobileMenu)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
@@ -24754,7 +24771,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: (e) => e.stopPropagation(), ...tid.mobileMenuDrawer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { ...(0, import_runtime115.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { ...(0, import_runtime116.trussProps)({
         ...{
           display: "df",
           alignItems: "aic",
@@ -24773,7 +24790,7 @@ function NavbarMobileDrawer({
       /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
         "nav",
         {
-          ...(0, import_runtime115.trussProps)({
+          ...(0, import_runtime116.trussProps)({
             ...{
               flexGrow: "fg1",
               overflowY: "oya",
@@ -24799,7 +24816,7 @@ function NavbarMobileDrawer({
 }
 
 // src/components/Navbar/Navbar.tsx
-var import_runtime116 = require("@homebound/truss/runtime");
+var import_runtime117 = require("@homebound/truss/runtime");
 var import_jsx_runtime191 = require("react/jsx-runtime");
 function Navbar(props) {
   const {
@@ -24819,7 +24836,7 @@ function Navbar(props) {
     overflows
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
-  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("nav", { ...(0, import_runtime116.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("nav", { ...(0, import_runtime117.trussProps)({
     ...{
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface-raised)"
@@ -24838,7 +24855,7 @@ function Navbar(props) {
     /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("div", { className: "df aic gap3 fg1 mw0", children: [
       /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("div", { className: "df aic fs0 gap2", children: [
         showMobile && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(NavbarMobileMenu, { items, ...tid }),
-        /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("div", { ...(0, import_runtime116.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("div", { ...(0, import_runtime117.trussProps)({
           flexShrink: "fs0",
           ...hideBrandOnMobile && showMobile ? {
             display: "dn"
@@ -24847,7 +24864,7 @@ function Navbar(props) {
       ] }),
       !sm && // Stays mounted while overflowing (hidden) so the items remain measurable and the bar
       // can expand again as space frees up.
-      /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("div", { ref: containerRef, ...(0, import_runtime116.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("div", { ref: containerRef, ...(0, import_runtime117.trussProps)({
         display: "df",
         alignItems: "aic",
         flexGrow: "fg1",
@@ -24877,7 +24894,7 @@ function NavbarUserMenu({
 }
 
 // src/components/Pagination.tsx
-var import_runtime117 = require("@homebound/truss/runtime");
+var import_runtime118 = require("@homebound/truss/runtime");
 var import_jsx_runtime192 = require("react/jsx-runtime");
 var defaultPage = {
   offset: 0,
@@ -24910,7 +24927,7 @@ function Pagination(props) {
     }
   }
   const tid = useTestIds(props, "pagination");
-  return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { ...(0, import_runtime117.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { ...(0, import_runtime118.trussProps)({
     display: "df",
     borderColor: ["bc_var", {
       "--borderColor": "var(--b-surface-separator)"
@@ -24968,7 +24985,7 @@ function toPageNumberSize(page) {
 // src/components/ScrollShadows.tsx
 var import_utils159 = require("@react-aria/utils");
 var import_react139 = require("react");
-var import_runtime118 = require("@homebound/truss/runtime");
+var import_runtime119 = require("@homebound/truss/runtime");
 var import_jsx_runtime193 = require("react/jsx-runtime");
 function ScrollShadows(props) {
   const {
@@ -24993,7 +25010,7 @@ function ScrollShadows(props) {
     const commonStyles = {
       position: "absolute",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime118.maybeCssVar)(zIndices.scrollShadow)
+        "--zIndex": (0, import_runtime119.maybeCssVar)(zIndices.scrollShadow)
       }],
       pointerEvents: "pointerEvents_none"
     };
@@ -25026,7 +25043,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": (0, import_runtime118.maybeCssVar)(startGradient)
+          "--background": (0, import_runtime119.maybeCssVar)(startGradient)
         }]
       }
     }, {
@@ -25034,7 +25051,7 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": (0, import_runtime118.maybeCssVar)(endGradient)
+          "--background": (0, import_runtime119.maybeCssVar)(endGradient)
         }]
       }
     }];
@@ -25059,10 +25076,10 @@ function ScrollShadows(props) {
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { ...(0, import_runtime118.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { ...(0, import_runtime119.trussProps)({
     display: "df",
     flexDirection: ["fd_var", {
-      "--flexDirection": (0, import_runtime118.maybeCssVar)(!horizontal ? "column" : "row")
+      "--flexDirection": (0, import_runtime119.maybeCssVar)(!horizontal ? "column" : "row")
     }],
     position: "relative",
     overflow: "oh",
@@ -25075,23 +25092,23 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime118.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime119.trussProps)({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": (0, import_runtime118.maybeCssVar)(showStartShadow ? 1 : 0)
+          "--opacity": (0, import_runtime119.maybeCssVar)(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime118.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime119.trussProps)({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": (0, import_runtime118.maybeCssVar)(showEndShadow ? 1 : 0)
+          "--opacity": (0, import_runtime119.maybeCssVar)(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime118.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime119.trussProps)({
       ...xss,
       ...{
         overflow: "oa",
@@ -25163,7 +25180,7 @@ function useHasSideNavLayoutProvider() {
 }
 
 // src/components/SideNav/SideNav.tsx
-var import_runtime119 = require("@homebound/truss/runtime");
+var import_runtime120 = require("@homebound/truss/runtime");
 var import_jsx_runtime195 = require("react/jsx-runtime");
 function SideNav(props) {
   const {
@@ -25178,7 +25195,7 @@ function SideNav(props) {
   const panelCollapsed = navState === "collapse";
   const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
   return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime119.trussProps)({
+    top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime120.trussProps)({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -25189,7 +25206,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime119.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime120.trussProps)({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -25202,7 +25219,7 @@ function SideNav(props) {
         paddingTop: "pt5"
       } : {}
     }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(AppNavItems, { items, panelCollapsed }) }),
-    footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime119.trussProps)({
+    footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime120.trussProps)({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -25279,10 +25296,10 @@ var snackbarId = 1;
 // src/components/Stepper.tsx
 var import_react142 = require("react");
 var import_react_aria62 = require("react-aria");
-var import_runtime120 = require("@homebound/truss/runtime");
+var import_runtime121 = require("@homebound/truss/runtime");
 var import_jsx_runtime196 = require("react/jsx-runtime");
 var import_react143 = require("react");
-var __maybeInc21 = (inc) => {
+var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Stepper(props) {
@@ -25300,7 +25317,7 @@ function Stepper(props) {
   const minStepWidth = 100;
   const gap = 8;
   return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("ol", { ...(0, import_runtime120.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("ol", { ...(0, import_runtime121.trussProps)({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -25310,7 +25327,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ (0, import_react143.createElement)("li", { ...(0, import_runtime120.trussProps)({
+      return /* @__PURE__ */ (0, import_react143.createElement)("li", { ...(0, import_runtime121.trussProps)({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -25322,7 +25339,7 @@ function Stepper(props) {
         }]
       }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime120.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime121.trussProps)({
       marginTop: "mt1",
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-field-border-default)"
@@ -25335,14 +25352,14 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime120.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime121.trussProps)({
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-primary)"
       }],
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": (0, import_runtime120.maybeCssVar)(__maybeInc21(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": (0, import_runtime121.maybeCssVar)(__maybeInc22(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -25378,7 +25395,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime120.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime121.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -25455,7 +25472,7 @@ function StepIcon({
   if (state === "complete") {
     return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime120.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime121.trussProps)({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -25471,7 +25488,7 @@ function StepIcon({
 // src/components/StepperTabs/StepperTab.tsx
 var import_react144 = require("react");
 var import_react_aria63 = require("react-aria");
-var import_runtime121 = require("@homebound/truss/runtime");
+var import_runtime122 = require("@homebound/truss/runtime");
 var import_jsx_runtime197 = require("react/jsx-runtime");
 function StepperTab(props) {
   const {
@@ -25503,7 +25520,7 @@ function StepperTab(props) {
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
   const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const tid = useTestIds(props, "stepperTab");
-  return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("button", { ref, ...(0, import_react_aria63.mergeProps)(buttonProps, focusProps, hoverProps), "aria-label": label, ...(0, import_runtime121.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("button", { ref, ...(0, import_react_aria63.mergeProps)(buttonProps, focusProps, hoverProps), "aria-label": label, ...(0, import_runtime122.trussProps)({
     ...stepperTabStyles.baseStyles,
     ...getStateStyles(active, completed),
     ...isHovered && !disabled ? stepperTabStyles.hoverStyles : {},
@@ -25521,7 +25538,7 @@ function withBorderBottom(color) {
     ...{
       borderBottomStyle: "bbs_solid",
       borderBottomWidth: ["borderBottomWidth_var", {
-        "--borderBottomWidth": (0, import_runtime121.maybeCssVar)(`3px`)
+        "--borderBottomWidth": (0, import_runtime122.maybeCssVar)(`3px`)
       }]
     },
     ...color
@@ -25595,7 +25612,7 @@ var stepperTabStyles = {
 };
 
 // src/components/StepperTabs/StepperTabs.tsx
-var import_runtime122 = require("@homebound/truss/runtime");
+var import_runtime123 = require("@homebound/truss/runtime");
 var import_jsx_runtime198 = require("react/jsx-runtime");
 var import_react145 = require("react");
 function StepperTabs(props) {
@@ -25611,7 +25628,7 @@ function StepperTabs(props) {
   } = useBreakpoint();
   const collapsed = isMobile || !!forceCollapsed;
   const capWidth = steps.length <= 3;
-  return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("ol", { ...(0, import_runtime122.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("ol", { ...(0, import_runtime123.trussProps)({
     padding: "p_0",
     margin: "m_0",
     listStyle: "lis_none",
@@ -25625,7 +25642,7 @@ function StepperTabs(props) {
     borderColor: "bcGray400"
   }), children: steps.map((step) => {
     const isCurrent = step.value === currentStep;
-    return /* @__PURE__ */ (0, import_react145.createElement)("li", { ...(0, import_runtime122.trussProps)({
+    return /* @__PURE__ */ (0, import_react145.createElement)("li", { ...(0, import_runtime123.trussProps)({
       display: "df",
       flexGrow: "fg1",
       flexBasis: "fb_0",
@@ -25645,7 +25662,7 @@ var gapPx = 6;
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 var import_react_dom7 = require("react-dom");
-var import_runtime123 = require("@homebound/truss/runtime");
+var import_runtime124 = require("@homebound/truss/runtime");
 var import_jsx_runtime199 = require("react/jsx-runtime");
 function SuperDrawerHeader(props) {
   const {
@@ -25671,7 +25688,7 @@ function SuperDrawerHeader(props) {
       ] }),
       props.right && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { className: "fs0", children: props.right })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { ...(0, import_runtime123.trussProps)({
+    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { ...(0, import_runtime124.trussProps)({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
@@ -25851,7 +25868,7 @@ function canClose(canCloseCheck) {
 }
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
-var import_runtime124 = require("@homebound/truss/runtime");
+var import_runtime125 = require("@homebound/truss/runtime");
 var import_jsx_runtime202 = require("react/jsx-runtime");
 var SuperDrawerContent = ({
   children,
@@ -25900,7 +25917,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime124.mergeProps)(void 0, {
+      return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime125.mergeProps)(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -25913,7 +25930,7 @@ var SuperDrawerContent = ({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(import_jsx_runtime202.Fragment, { children: [
     wrapWithMotionAndMaybeBack(children),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("footer", { ...(0, import_runtime124.trussProps)({
+    actions && /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("footer", { ...(0, import_runtime125.trussProps)({
       borderTopStyle: "bts_solid",
       borderTopWidth: "btw_1px",
       borderColor: ["bc_var", {
@@ -25974,7 +25991,7 @@ var import_react147 = require("react");
 var import_react_aria64 = require("react-aria");
 var import_react_router = require("react-router");
 var import_react_router_dom8 = require("react-router-dom");
-var import_runtime125 = require("@homebound/truss/runtime");
+var import_runtime126 = require("@homebound/truss/runtime");
 var import_jsx_runtime203 = require("react/jsx-runtime");
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -26007,7 +26024,7 @@ function TabContent(props) {
   return (
     // Using FullBleed to allow the tab's bgColor to extend to the edges of the <ScrollableContent /> element.
     // Omit the padding from `FullBleed` if the caller passes in the `paddingLeft/Right` styles.
-    /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime125.trussProps)(contentXss), children: selectedTab.render() }) })
+    /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime126.trussProps)(contentXss), children: selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -26049,7 +26066,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)("div", { ...(0, import_runtime125.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)("div", { ...(0, import_runtime126.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -26115,7 +26132,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...(0, import_runtime125.trussProps)({
+    ...(0, import_runtime126.trussProps)({
       ...baseStyles4,
       ...active && activeStyles3,
       ...isDisabled && disabledStyles3,
@@ -26152,7 +26169,7 @@ function getTabStyles() {
   const borderBottomStyles = {
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": (0, import_runtime125.maybeCssVar)(`${borderBottomWidthPx}px`)
+      "--borderBottomWidth": (0, import_runtime126.maybeCssVar)(`${borderBottomWidthPx}px`)
     }],
     paddingBottom: ["pb_var", {
       "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
@@ -26272,9 +26289,9 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-var import_runtime126 = require("@homebound/truss/runtime");
+var import_runtime127 = require("@homebound/truss/runtime");
 var import_jsx_runtime205 = require("react/jsx-runtime");
-var __maybeInc22 = (inc) => {
+var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function SideNavLayout(props) {
@@ -26302,7 +26319,7 @@ function SideNavLayoutContent(props) {
   const railOffsetPx = !showRail ? 0 : !bp.mdAndUp || collapsed ? railCollapsedWidthPx : railWidthPx;
   const navTop = bannerAndNavbarChromeTop();
   const railViewportHeight = `calc(var(${beamLayoutViewportHeightVar}, 100vh) - var(${beamEnvironmentBannerLayoutHeightVar}, 0px) - var(${beamNavbarLayoutHeightVar}, 0px))`;
-  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("div", { ...(0, import_runtime126.trussProps)({
+  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("div", { ...(0, import_runtime127.trussProps)({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -26326,14 +26343,14 @@ function SideNavLayoutContent(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime126.maybeCssVar)(zIndices.sideNav)
+        "--zIndex": (0, import_runtime127.maybeCssVar)(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": (0, import_runtime126.maybeCssVar)(__maybeInc22(navTop))
+        "--top": (0, import_runtime127.maybeCssVar)(__maybeInc23(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": (0, import_runtime126.maybeCssVar)(__maybeInc22(railViewportHeight))
+        "--height": (0, import_runtime127.maybeCssVar)(__maybeInc23(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -26343,11 +26360,11 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": (0, import_runtime126.maybeCssVar)(__maybeInc22(navTop))
+          "--top": (0, import_runtime127.maybeCssVar)(__maybeInc23(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime126.maybeCssVar)(zIndices.sideNav)
+          "--zIndex": (0, import_runtime127.maybeCssVar)(zIndices.sideNav)
         }]
       },
       ...collapsed ? {
@@ -26362,7 +26379,7 @@ function SideNavLayoutContent(props) {
     showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
     /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(SideNav, { ...sideNav }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("div", { ...(0, import_runtime126.mergeProps)(void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("div", { ...(0, import_runtime127.mergeProps)(void 0, {
     [beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
   }, {
     display: "df",
@@ -26370,7 +26387,7 @@ function SideNavLayoutContent(props) {
     width: "w100"
   }), ...tid, children: [
     contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ...(0, import_runtime126.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ...(0, import_runtime127.trussProps)({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -26386,9 +26403,9 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-var import_runtime127 = require("@homebound/truss/runtime");
+var import_runtime128 = require("@homebound/truss/runtime");
 var import_jsx_runtime206 = require("react/jsx-runtime");
-var __maybeInc23 = (inc) => {
+var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function EnvironmentBannerLayout(props) {
@@ -26403,26 +26420,26 @@ function EnvironmentBannerLayout(props) {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
   };
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("div", { ...(0, import_runtime127.mergeProps)(void 0, style, {
+  return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("div", { ...(0, import_runtime128.mergeProps)(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { ...(0, import_runtime127.mergeProps)(void 0, {
+    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { ...(0, import_runtime128.mergeProps)(void 0, {
       height: environmentBannerSizePx
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { ...(0, import_runtime127.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { ...(0, import_runtime128.trussProps)({
       position: "fixed",
       top: "top0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime127.maybeCssVar)(zIndices.environmentBanner)
+        "--zIndex": (0, import_runtime128.maybeCssVar)(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime127.maybeCssVar)(__maybeInc23(innerWidth))
+        "--width": (0, import_runtime128.maybeCssVar)(__maybeInc24(innerWidth))
       }]
     }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
@@ -26430,7 +26447,7 @@ function EnvironmentBannerLayout(props) {
 }
 
 // src/layouts/FormSectionLayout/FormSectionLayout.tsx
-var import_runtime128 = require("@homebound/truss/runtime");
+var import_runtime129 = require("@homebound/truss/runtime");
 var import_jsx_runtime207 = require("react/jsx-runtime");
 function FormSectionLayout(props) {
   const {
@@ -26445,7 +26462,7 @@ function FormSectionLayout(props) {
     /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("div", { className: "df jcsb", children: [
       /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("div", { className: "df fdc gap_12px", children: [
         /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("h1", { className: "fw6 fz_20px lh_28px", ...tid.title, children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { ...(0, import_runtime128.trussProps)({
+        description && /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { ...(0, import_runtime129.trussProps)({
           fontWeight: "fw4",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -26463,7 +26480,7 @@ function FormSectionLayout(props) {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 var import_react152 = require("react");
-var import_runtime129 = require("@homebound/truss/runtime");
+var import_runtime130 = require("@homebound/truss/runtime");
 
 // src/layouts/useAutoHideOnScroll.ts
 var import_react149 = require("react");
@@ -26585,7 +26602,7 @@ function useNavbarLayoutHeight() {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 var import_jsx_runtime209 = require("react/jsx-runtime");
-var __maybeInc24 = (inc) => {
+var __maybeInc25 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function NavbarLayout(props) {
@@ -26613,10 +26630,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime129.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime130.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime129.maybeCssVar)(__maybeInc24(innerWidth))
+        "--width": (0, import_runtime130.maybeCssVar)(__maybeInc25(innerWidth))
       }]
     }
   ) : (
@@ -26625,10 +26642,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime129.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime130.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime129.maybeCssVar)(__maybeInc24(innerWidth))
+        "--width": (0, import_runtime130.maybeCssVar)(__maybeInc25(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -26638,18 +26655,18 @@ function NavbarLayout(props) {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
   const navbarEl = (0, import_react152.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("div", { ...(0, import_runtime129.mergeProps)(void 0, cssVars, {
+  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("div", { ...(0, import_runtime130.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { ref: spacerRef, ...(0, import_runtime129.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { ref: spacerRef, ...(0, import_runtime130.mergeProps)(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime129.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime130.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
     /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) });
 }
@@ -26658,7 +26675,7 @@ function NavbarLayout(props) {
 var import_react153 = require("react");
 
 // src/components/Headers/BaseHeader.tsx
-var import_runtime130 = require("@homebound/truss/runtime");
+var import_runtime131 = require("@homebound/truss/runtime");
 var import_jsx_runtime210 = require("react/jsx-runtime");
 function BaseHeader(props) {
   const {
@@ -26671,7 +26688,7 @@ function BaseHeader(props) {
   } = props;
   const tid = useTestIds(otherProps, "header");
   useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)("header", { ...tid, ...(0, import_runtime130.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)("header", { ...tid, ...(0, import_runtime131.trussProps)({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -26685,7 +26702,7 @@ function BaseHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }]
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)("div", { ...(0, import_runtime130.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)("div", { ...(0, import_runtime131.trussProps)({
       ...{
         display: "df",
         justifyContent: "jcsb",
@@ -26701,7 +26718,7 @@ function BaseHeader(props) {
     }), children: [
       /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)("div", { className: "mw0", children: [
         breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ (0, import_jsx_runtime210.jsx)("h1", { ...tid.title, ...(0, import_runtime130.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime210.jsx)("h1", { ...tid.title, ...(0, import_runtime131.trussProps)({
           fontWeight: "fw6",
           fontSize: "fz_20px",
           lineHeight: "lh_28px",
@@ -26717,7 +26734,7 @@ function BaseHeader(props) {
 }
 
 // src/components/Headers/PageHeader.tsx
-var import_runtime131 = require("@homebound/truss/runtime");
+var import_runtime132 = require("@homebound/truss/runtime");
 var import_jsx_runtime211 = require("react/jsx-runtime");
 function PageHeader2(props) {
   const {
@@ -26725,7 +26742,7 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { ...(0, import_runtime131.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("div", { ...(0, import_runtime132.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -26734,9 +26751,9 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-var import_runtime132 = require("@homebound/truss/runtime");
+var import_runtime133 = require("@homebound/truss/runtime");
 var import_jsx_runtime212 = require("react/jsx-runtime");
-var __maybeInc25 = (inc) => {
+var __maybeInc26 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function PageHeaderLayout(props) {
@@ -26766,24 +26783,24 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": (0, import_runtime132.maybeCssVar)(__maybeInc25(headerLeft))
+      "--left": (0, import_runtime133.maybeCssVar)(__maybeInc26(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime132.maybeCssVar)(__maybeInc25(headerWidth))
+      "--width": (0, import_runtime133.maybeCssVar)(__maybeInc26(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime132.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime133.maybeCssVar)(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": (0, import_runtime132.maybeCssVar)(__maybeInc25(headerLeft))
+      "--left": (0, import_runtime133.maybeCssVar)(__maybeInc26(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime132.maybeCssVar)(__maybeInc25(headerWidth))
+      "--width": (0, import_runtime133.maybeCssVar)(__maybeInc26(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime132.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime133.maybeCssVar)(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
@@ -26791,17 +26808,17 @@ function PageHeaderLayout(props) {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
   const pageHeaderEl = (0, import_react153.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)("div", { ...(0, import_runtime132.mergeProps)(void 0, cssVars, {
+  return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)("div", { ...(0, import_runtime133.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { ref: spacerRef, ...(0, import_runtime132.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { ref: spacerRef, ...(0, import_runtime133.mergeProps)(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime132.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime133.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
     /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
@@ -26843,9 +26860,9 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
-var import_runtime133 = require("@homebound/truss/runtime");
+var import_runtime134 = require("@homebound/truss/runtime");
 var import_jsx_runtime215 = require("react/jsx-runtime");
-var __maybeInc26 = (inc) => {
+var __maybeInc27 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function WorkflowLayout(props) {
@@ -26907,48 +26924,48 @@ function WorkflowLayout(props) {
     onChange: setCurrentStep,
     collapsed
   } });
-  return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)("div", { ...(0, import_runtime133.mergeProps)(void 0, cssVars, {
+  return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)("div", { ...(0, import_runtime134.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { ref: spacerRef, ...(0, import_runtime133.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { ref: spacerRef, ...(0, import_runtime134.mergeProps)(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), ...tid.spacer, children: /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime133.trussProps)({
+    }), ...tid.spacer, children: /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime134.trussProps)({
       position: "fixed",
       width: ["w_var", {
-        "--width": (0, import_runtime133.maybeCssVar)(__maybeInc26(headerWidth))
+        "--width": (0, import_runtime134.maybeCssVar)(__maybeInc27(headerWidth))
       }],
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime133.maybeCssVar)(zIndices.pageStickyHeader)
+        "--zIndex": (0, import_runtime134.maybeCssVar)(zIndices.pageStickyHeader)
       }],
       top: ["top_var", {
-        "--top": (0, import_runtime133.maybeCssVar)(__maybeInc26(outerTop))
+        "--top": (0, import_runtime134.maybeCssVar)(__maybeInc27(outerTop))
       }]
     }), ...tid.header, children: headerEl }) }),
     /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children: activeStep?.content }),
-    showFooter && /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { ...(0, import_runtime133.trussProps)({
+    showFooter && /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { ...(0, import_runtime134.trussProps)({
       flexShrink: "fs0",
       width: "w100",
       height: ["h_var", {
         "--height": `${mobileFooterHeightPx}px`
       }]
     }) }),
-    showFooter && /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { ...(0, import_runtime133.trussProps)({
+    showFooter && /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { ...(0, import_runtime134.trussProps)({
       ...{
         position: "fixed",
         bottom: "bottom0",
         width: ["w_var", {
-          "--width": (0, import_runtime133.maybeCssVar)(__maybeInc26(headerWidth))
+          "--width": (0, import_runtime134.maybeCssVar)(__maybeInc27(headerWidth))
         }],
         height: ["h_var", {
           "--height": `${mobileFooterHeightPx}px`
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime133.maybeCssVar)(zIndices.pageStickyFooter)
+          "--zIndex": (0, import_runtime134.maybeCssVar)(zIndices.pageStickyFooter)
         }],
         display: "df",
         alignItems: "aic",