@homebound/beam 3.20.0 → 3.21.0

package/dist/index.cjs

@@ -5888,7 +5888,12 @@ var iconButtonOutline = {
   borderRadius: "br8",
   width: "w_48px",
   height: "h_40px",
-  borderColor: "bcGray300",
+  backgroundColor: ["bgColor_var", {
+    "--backgroundColor": "var(--b-surface)"
+  }],
+  borderColor: ["bc_var", {
+    "--borderColor": "var(--b-surface-separator)"
+  }],
   borderStyle: "bss",
   borderWidth: "bw1",
   display: "df",
@@ -20034,24 +20039,11 @@ function FilterDropdownMenu(props) {
         opacity: "o0"
       } : {}
     }), children: searchTextField }),
-    sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Button, { label: "", "aria-label": "Search", icon: "search", onClick: () => setSearchIsOpen(!searchIsOpen), active: searchIsOpen, variant: "secondaryBlack", ...testId.searchButton }),
-    hasFilters && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Button, { label: sm ? "" : "Filter", "aria-label": "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { className: "df aic gap1", children: [
+    sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(IconButton, { variant: "outline", icon: "search", label: "Search", onClick: () => setSearchIsOpen(!searchIsOpen), active: searchIsOpen, ...testId.searchButton }),
+    sm && hasFilters && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(IconButton, { variant: "outline", icon: "filter", label: "Filter", active: isOpen, onClick: () => setIsOpen(!isOpen), ...testId.button }),
+    !sm && hasFilters && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { className: "df aic gap1", children: [
       activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(CountBadge, { count: activeFilterCount }),
-      /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Icon, { xss: {
-        ...sm ? {
-          position: "absolute",
-          overflow: "oh",
-          clip: "cli_inset_50",
-          clipPath: "clp_none",
-          border: "bd_0",
-          height: "h_1px",
-          margin: "m_neg1px",
-          width: "w_1px",
-          padding: "p_0",
-          whiteSpace: "wsnw",
-          opacity: "o0"
-        } : {}
-      }, icon: isOpen ? "chevronUp" : "chevronDown" })
+      /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Icon, { icon: isOpen ? "chevronUp" : "chevronDown" })
     ] }), variant: "secondaryBlack", onClick: () => setIsOpen(!isOpen), active: isOpen, ...testId.button }),
     searchIsOpen && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("div", { ...(0, import_runtime75.trussProps)({
       width: "w100",
@@ -20189,13 +20181,13 @@ function toPageNumberSize(page) {
 var import_react100 = require("react");
 var import_react_aria45 = require("react-aria");
 var import_react_stately17 = require("react-stately");
+var import_runtime76 = require("@homebound/truss/runtime");
 var import_jsx_runtime143 = require("react/jsx-runtime");
 function EditColumnsButton(props) {
   const {
     defaultOpen,
     disabled,
     columns,
-    trigger,
     api
   } = props;
   const state = (0, import_react_stately17.useMenuTriggerState)({
@@ -20207,7 +20199,7 @@ function EditColumnsButton(props) {
   } = (0, import_react_aria45.useMenuTrigger)({
     isDisabled: !!disabled
   }, state, buttonRef);
-  const tid = useTestIds(props, isTextButton(trigger) ? labelOr(trigger, "editColumnsButton") : isNavLinkButton(trigger) ? defaultTestId(trigger.navLabel) : isIconButton(trigger) ? trigger.icon : trigger.name);
+  const tid = useTestIds(props, "kanban");
   const {
     sm
   } = useBreakpoint();
@@ -20226,12 +20218,38 @@ function EditColumnsButton(props) {
     api.resetColumnWidths();
     api.setVisibleColumns(columns.filter((column2) => column2.canHide ? ids.includes(column2.id) : true).map((c) => c.id));
   }, [columns, api]);
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, hideEndAdornment: sm, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "dg gtc_1fr_auto gap2 bgWhite pt2 pb2 pr2 pl2 maxw_326px h_bshHover", children: [
-    options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(import_react100.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(OverlayTrigger, { ...props, trigger: {
+    icon: "kanban",
+    size: "md",
+    label: "",
+    variant: "secondaryBlack"
+  }, menuTriggerProps, state, buttonRef, hideEndAdornment: sm, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { ...(0, import_runtime76.trussProps)({
+    display: "df",
+    flexDirection: "fdc",
+    backgroundColor: ["bgColor_var", {
+      "--backgroundColor": "var(--b-surface)"
+    }],
+    maxWidth: "maxw_326px",
+    maxHeight: "maxh_512px",
+    boxShadow: "h_bshHover"
+  }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "dg gtc_1fr_auto gap2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(import_react100.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis pr1", children: option.label }),
       /* @__PURE__ */ (0, import_jsx_runtime143.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_runtime143.jsx)("div", { className: "gc_1_1 df jcc", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
+    ] }, option.value)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { ...(0, import_runtime76.trussProps)({
+      display: "df",
+      justifyContent: "jcc",
+      paddingTop: "pt2",
+      paddingBottom: "pb2",
+      paddingRight: "pr2",
+      paddingLeft: "pl2",
+      borderTopStyle: "bts_solid",
+      borderTopWidth: "btw_1px",
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-on-surface-muted)"
+      }]
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
   ] }) });
 }
 
@@ -20257,7 +20275,7 @@ function ViewToggleButton({ view, onChange, defaultOpen }) {
 }
 
 // src/components/Table/TableActions.tsx
-var import_runtime76 = require("@homebound/truss/runtime");
+var import_runtime77 = require("@homebound/truss/runtime");
 var import_jsx_runtime145 = require("react/jsx-runtime");
 function TableActions(props) {
   const {
@@ -20265,7 +20283,7 @@ function TableActions(props) {
     children,
     right
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)("div", { ...(0, import_runtime76.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)("div", { ...(0, import_runtime77.trussProps)({
     ...{
       display: "df",
       gap: "gap1",
@@ -20289,7 +20307,7 @@ function isGridTableProps(props) {
 var import_react101 = require("react");
 
 // src/components/LoadingSkeleton.tsx
-var import_runtime77 = require("@homebound/truss/runtime");
+var import_runtime78 = require("@homebound/truss/runtime");
 var import_jsx_runtime146 = require("react/jsx-runtime");
 function LoadingSkeleton({
   rows = 1,
@@ -20302,18 +20320,18 @@ function LoadingSkeleton({
   const rowHeight = sizeToPixels2[size];
   const rowCells = (rowNumber) => {
     const flexGrowForCell = randomizeWidths ? getRandomizedFlexBasisByRowIndex(rowNumber) : 1;
-    return cellArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { ...(0, import_runtime77.trussProps)({
+    return cellArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { ...(0, import_runtime78.trussProps)({
       borderRadius: "br4",
       animation: "animation_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite",
       flexGrow: ["flexGrow_var", {
-        "--flexGrow": (0, import_runtime77.maybeCssVar)(flexGrowForCell)
+        "--flexGrow": (0, import_runtime78.maybeCssVar)(flexGrowForCell)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-loader-fill)"
       }]
     }) }, `row-${rowNumber}-cell-${i}`));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { ...(0, import_runtime77.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { ...(0, import_runtime78.trussProps)({
     display: "df",
     gap: "gap1",
     marginBottom: "mb1",
@@ -20387,7 +20405,7 @@ function parseStoredTableView(raw) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-var import_runtime78 = require("@homebound/truss/runtime");
+var import_runtime79 = require("@homebound/truss/runtime");
 var import_jsx_runtime148 = require("react/jsx-runtime");
 var __maybeInc14 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -20431,12 +20449,7 @@ function GridTableLayoutComponent(props) {
   }, [visibleColumnIds, layoutState]);
   const visibleColumnsStorageKey = layoutState?.persistedColumnsStorageKey;
   const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(TableActions, { right: (hasHideableColumns || withCardView) && /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "df gap1", children: [
-    hasHideableColumns && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(EditColumnsButton, { columns, api, tooltip: "Display columns", trigger: {
-      icon: "kanban",
-      size: "md",
-      label: "",
-      variant: "secondaryBlack"
-    }, ...tid.editColumnsButton }),
+    hasHideableColumns && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(EditColumnsButton, { columns, api, tooltip: "Display columns", ...tid.editColumnsButton }),
     withCardView && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(ViewToggleButton, { view, onChange: setView })
   ] }), xss: {
     paddingTop: "pt3",
@@ -20456,21 +20469,21 @@ function GridTableLayoutComponent(props) {
     layoutState && totalCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Pagination, { page: [layoutState.page, layoutState._pagination.setPage], totalCount, pageSizes: layoutState._pagination.pageSizes, ...tid.pagination })
   ] });
   const tableScrollContent = /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(import_jsx_runtime148.Fragment, { children: [
-    showTableActions && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { ref: tableActionsRef, ...(0, import_runtime78.trussProps)({
+    showTableActions && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { ref: tableActionsRef, ...(0, import_runtime79.trussProps)({
       ...inDocumentScrollLayout ? {
         transition: "transitionTop",
         position: "sticky",
         top: ["top_var", {
-          "--top": (0, import_runtime78.maybeCssVar)(__maybeInc14(stickyNavAndHeaderOffset()))
+          "--top": (0, import_runtime79.maybeCssVar)(__maybeInc14(stickyNavAndHeaderOffset()))
         }],
         left: ["left_var", {
-          "--left": (0, import_runtime78.maybeCssVar)(__maybeInc14(documentScrollChromeLeft()))
+          "--left": (0, import_runtime79.maybeCssVar)(__maybeInc14(documentScrollChromeLeft()))
         }],
         width: ["w_var", {
-          "--width": (0, import_runtime78.maybeCssVar)(__maybeInc14(documentScrollChromeWidth()))
+          "--width": (0, import_runtime79.maybeCssVar)(__maybeInc14(documentScrollChromeWidth()))
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime78.maybeCssVar)(zIndices.tableActions)
+          "--zIndex": (0, import_runtime79.maybeCssVar)(zIndices.tableActions)
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -20588,7 +20601,7 @@ function Header2(props) {
     actionMenu
   } = props;
   const tids = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(FullBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("header", { ...(0, import_runtime78.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(FullBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("header", { ...(0, import_runtime79.trussProps)({
     ...{
       paddingTop: "pt3",
       paddingBottom: "pb3",
@@ -20667,7 +20680,7 @@ function useRightPaneContext() {
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 var import_framer_motion3 = require("framer-motion");
 var import_react105 = require("react");
-var import_runtime79 = require("@homebound/truss/runtime");
+var import_runtime80 = require("@homebound/truss/runtime");
 var import_jsx_runtime151 = require("react/jsx-runtime");
 var __maybeInc15 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -20687,10 +20700,10 @@ function RightPaneLayout(props) {
   } = useRightPaneContext();
   (0, import_react105.useEffect)(() => closePane, [closePane]);
   return /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { className: "h100 df oxh", children: /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)(import_jsx_runtime151.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { ...(0, import_runtime79.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { ...(0, import_runtime80.trussProps)({
       ...{
         width: ["w_var", {
-          "--width": (0, import_runtime79.maybeCssVar)(__maybeInc15(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": (0, import_runtime80.maybeCssVar)(__maybeInc15(`calc(100% - ${paneWidth + 24}px)`))
         }],
         transition: "transition_width_2s_linear",
         height: "h100",
@@ -20706,13 +20719,13 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": (0, import_runtime79.maybeCssVar)(__maybeInc15(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": (0, import_runtime80.maybeCssVar)(__maybeInc15(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
       }
     }), children }),
-    /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("div", { ...(0, import_runtime79.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("div", { ...(0, import_runtime80.trussProps)({
       position: "relative",
       ...!!defaultPaneContent ? {
         width: ["w_var", {
@@ -20720,7 +20733,7 @@ function RightPaneLayout(props) {
         }]
       } : {}
     }), children: [
-      defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { ...(0, import_runtime79.trussProps)({
+      defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { ...(0, import_runtime80.trussProps)({
         height: "h100",
         width: ["w_var", {
           "--width": `${paneWidth}px`
@@ -20738,9 +20751,9 @@ function RightPaneLayout(props) {
         {
           layout: "position",
           "data-testid": "rightPaneContent",
-          ...(0, import_runtime79.trussProps)({
+          ...(0, import_runtime80.trussProps)({
             backgroundColor: ["bgColor_var", {
-              "--backgroundColor": (0, import_runtime79.maybeCssVar)(paneBgColor)
+              "--backgroundColor": (0, import_runtime80.maybeCssVar)(paneBgColor)
             }],
             height: "h100",
             width: ["w_var", {
@@ -20821,7 +20834,7 @@ function SidePanel(props) {
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-var import_runtime80 = require("@homebound/truss/runtime");
+var import_runtime81 = require("@homebound/truss/runtime");
 var import_jsx_runtime154 = require("react/jsx-runtime");
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
@@ -20863,14 +20876,14 @@ function TableReviewLayout(props) {
       bordered: true
     }, stickyHeader: true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { ...(0, import_runtime80.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { ...(0, import_runtime81.trussProps)({
     position: "fixed",
     top: "top0",
     bottom: "bottom0",
     left: "left0",
     right: "right0",
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime80.maybeCssVar)(zIndices.pageOverlay)
+      "--zIndex": (0, import_runtime81.maybeCssVar)(zIndices.pageOverlay)
     }],
     backgroundColor: "bgWhite",
     display: "df",
@@ -20888,7 +20901,7 @@ function TableReviewLayout(props) {
       /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { className: "fw4 fz_14px lh_20px gray700 mt2", ...tid.description, children: description })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { className: "fg1 df mh0", ...tid.content, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { ...(0, import_runtime80.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { ...(0, import_runtime81.trussProps)({
         ...{
           flexGrow: "fg1",
           overflowY: "oya",
@@ -20911,7 +20924,7 @@ function TableReviewLayout(props) {
         ease: "linear",
         duration: 0.2
       }, className: "df fdc fs0 relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { ...(0, import_runtime80.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { ...(0, import_runtime81.trussProps)({
           position: "absolute",
           top: ["top_var", {
             "--top": `${-32}px`
@@ -21034,7 +21047,7 @@ function ButtonDatePicker(props) {
 // src/components/ButtonGroup.tsx
 var import_react109 = require("react");
 var import_react_aria48 = require("react-aria");
-var import_runtime81 = require("@homebound/truss/runtime");
+var import_runtime82 = require("@homebound/truss/runtime");
 var import_jsx_runtime157 = (
   // Disable the button if the ButtonGroup is disabled or if the current button is disabled.
   require("react/jsx-runtime")
@@ -21048,7 +21061,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_runtime157.jsx)("div", { ...tid, ...(0, import_runtime81.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { ...tid, ...(0, import_runtime82.trussProps)({
       ...{
         display: "df",
         lineHeight: "lh_0"
@@ -21094,10 +21107,10 @@ function GroupButton(props) {
     isHovered
   } = (0, import_react_aria48.useHover)(ariaProps);
   const tid = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("span", { ...(0, import_runtime81.trussProps)(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
+  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("span", { ...(0, import_runtime82.trussProps)(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
     title: resolveTooltip(disabled, tooltip),
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime81.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime82.trussProps)({
       ...{
         fontWeight: "fw6",
         fontSize: "fz_14px",
@@ -21204,7 +21217,7 @@ var import_react_aria49 = require("react-aria");
 // src/components/Tag.tsx
 var import_utils124 = require("@react-aria/utils");
 var import_react110 = require("react");
-var import_runtime82 = require("@homebound/truss/runtime");
+var import_runtime83 = require("@homebound/truss/runtime");
 var import_jsx_runtime158 = require("react/jsx-runtime");
 function Tag(props) {
   const {
@@ -21228,7 +21241,7 @@ function Tag(props) {
   });
   return maybeTooltip({
     title: !preventTooltip && showTooltip ? text : void 0,
-    children: /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("span", { ...tid, ...(0, import_runtime82.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("span", { ...tid, ...(0, import_runtime83.trussProps)({
       ...{
         display: "dif",
         fontWeight: "fw6",
@@ -21278,7 +21291,7 @@ function getStyles(type) {
 }
 
 // src/components/Card.tsx
-var import_runtime83 = require("@homebound/truss/runtime");
+var import_runtime84 = require("@homebound/truss/runtime");
 var import_jsx_runtime159 = require("react/jsx-runtime");
 function Card(props) {
   const {
@@ -21309,8 +21322,8 @@ function Card(props) {
     ...isHovered && cardHoverStyles,
     ...isDisabled && disabledStyles3
   }), [isDisabled, isHovered, bordered, type, isList]);
-  return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { ...(0, import_runtime83.trussProps)(styles), ...hoverProps, ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { ...(0, import_runtime83.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { ...(0, import_runtime84.trussProps)(styles), ...hoverProps, ...tid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { ...(0, import_runtime84.trussProps)({
       ...{
         height: ["h_var", {
           "--height": `${imgHeight}px`
@@ -21327,14 +21340,14 @@ function Card(props) {
         filter: "filter_brightness_1"
       },
       ...isHovered && !isList && imageHoverStyles
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("img", { ...(0, import_runtime83.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("img", { ...(0, import_runtime84.trussProps)({
       width: "w100",
       height: "h100",
       objectFit: ["objectFit_var", {
-        "--objectFit": (0, import_runtime83.maybeCssVar)(imageFit)
+        "--objectFit": (0, import_runtime84.maybeCssVar)(imageFit)
       }]
     }), src: imgSrc, alt: title, ...tid.img }) }),
-    isHovered && buttonMenuItems && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { ...(0, import_runtime83.trussProps)({
+    isHovered && buttonMenuItems && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { ...(0, import_runtime84.trussProps)({
       position: "absolute",
       right: "right1",
       top: "top1",
@@ -21350,7 +21363,7 @@ function Card(props) {
     /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "df fdc aifs gap1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { className: "fw6 fz_12px lh_16px gray700", ...tid.subtitle, children: subtitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { ...(0, import_runtime83.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { ...(0, import_runtime84.trussProps)({
           fontWeight: "fw6",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -21408,10 +21421,10 @@ var imageHoverStyles = {
 };
 
 // src/components/Copy.tsx
-var import_runtime84 = require("@homebound/truss/runtime");
+var import_runtime85 = require("@homebound/truss/runtime");
 var import_jsx_runtime160 = require("react/jsx-runtime");
 function Copy(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ...(0, import_runtime84.mergeProps)("beam-copy", void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ...(0, import_runtime85.mergeProps)("beam-copy", void 0, {
     ...{
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -21440,7 +21453,7 @@ function useDnDGridContext() {
 }
 
 // src/components/DnDGrid/DnDGrid.tsx
-var import_runtime85 = require("@homebound/truss/runtime");
+var import_runtime86 = require("@homebound/truss/runtime");
 var import_jsx_runtime161 = require("react/jsx-runtime");
 function DnDGrid(props) {
   const {
@@ -21623,7 +21636,7 @@ function DnDGrid(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(DnDGridContext.Provider, { value: {
     dragEl,
     onDragHandleKeyDown
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ref: gridEl, ...(0, import_runtime85.trussProps)({
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ref: gridEl, ...(0, import_runtime86.trussProps)({
     ...{
       containerType: "ctis",
       display: "dg"
@@ -21636,7 +21649,7 @@ var gridCloneKey = "dndgrid-clone";
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
 var import_react_aria50 = require("react-aria");
-var import_runtime86 = require("@homebound/truss/runtime");
+var import_runtime87 = require("@homebound/truss/runtime");
 var import_jsx_runtime162 = require("react/jsx-runtime");
 function DnDGridItemHandle(props) {
   const {
@@ -21666,7 +21679,7 @@ function DnDGridItemHandle(props) {
     borderRadius: "br4",
     borderWidth: "bw1"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("button", { ...(0, import_runtime86.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("button", { ...(0, import_runtime87.trussProps)({
     ...compact ? iconButtonCompact2 : iconButtonNormal2,
     ...{
       cursor: "cursor_grab",
@@ -21728,7 +21741,7 @@ var gridItemDataAttribute = "data-grid-item-span";
 var ResponsiveGridContext = (0, import_react115.createContext)(void 0);
 
 // src/components/Grid/ResponsiveGrid.tsx
-var import_runtime87 = require("@homebound/truss/runtime");
+var import_runtime88 = require("@homebound/truss/runtime");
 var import_jsx_runtime163 = require("react/jsx-runtime");
 function ResponsiveGrid(props) {
   const {
@@ -21749,12 +21762,12 @@ function ResponsiveGrid(props) {
     gap,
     columns
   }), [minColumnWidth, gap, columns]);
-  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { ...(0, import_runtime87.trussProps)(gridStyles), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { ...(0, import_runtime88.trussProps)(gridStyles), children }) });
 }
 
 // src/components/Grid/ResponsiveGridItem.tsx
 var import_react_aria51 = require("react-aria");
-var import_runtime88 = require("@homebound/truss/runtime");
+var import_runtime89 = require("@homebound/truss/runtime");
 var import_jsx_runtime164 = require("react/jsx-runtime");
 function ResponsiveGridItem(props) {
   const {
@@ -21767,12 +21780,12 @@ function ResponsiveGridItem(props) {
   } = useResponsiveGridItem({
     colSpan
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { ...(0, import_react_aria51.mergeProps)(gridItemProps, (0, import_runtime88.trussProps)(gridItemStyles)), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { ...(0, import_react_aria51.mergeProps)(gridItemProps, (0, import_runtime89.trussProps)(gridItemStyles)), children });
 }
 
 // src/components/Grid/useResponsiveGrid.ts
 var import_react117 = require("react");
-var import_runtime89 = require("@homebound/truss/runtime");
+var import_runtime90 = require("@homebound/truss/runtime");
 var __maybeInc16 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -21791,11 +21804,11 @@ function useResponsiveGrid(props) {
     return {
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": (0, import_runtime89.maybeCssVar)(gridTemplateColumns)
+        "--gridTemplateColumns": (0, import_runtime90.maybeCssVar)(gridTemplateColumns)
       }],
       containerType: "ctis",
       gap: ["gap_var", {
-        "--gap": (0, import_runtime89.maybeCssVar)(__maybeInc16(gridGap))
+        "--gap": (0, import_runtime90.maybeCssVar)(__maybeInc16(gridGap))
       }]
     };
   }, [minColumnWidth, gap, columns]);
@@ -21918,7 +21931,7 @@ function HbSpinnerProvider({
 }
 
 // src/components/HomeboundLogo.tsx
-var import_runtime90 = require("@homebound/truss/runtime");
+var import_runtime91 = require("@homebound/truss/runtime");
 var import_jsx_runtime166 = require("react/jsx-runtime");
 var __maybeInc17 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -21929,15 +21942,15 @@ function HomeboundLogo(props) {
     width: width2 = "auto",
     height = "auto"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime90.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime91.trussProps)({
     fill: ["fill_var", {
-      "--fill": (0, import_runtime90.maybeCssVar)(fill)
+      "--fill": (0, import_runtime91.maybeCssVar)(fill)
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime90.maybeCssVar)(__maybeInc17(width2))
+      "--width": (0, import_runtime91.maybeCssVar)(__maybeInc17(width2))
     }],
     height: ["h_var", {
-      "--height": (0, import_runtime90.maybeCssVar)(__maybeInc17(height))
+      "--height": (0, import_runtime91.maybeCssVar)(__maybeInc17(height))
     }]
   }), children: /* @__PURE__ */ (0, import_jsx_runtime166.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" }) });
 }
@@ -21945,7 +21958,7 @@ function HomeboundLogo(props) {
 // src/components/MaxLines.tsx
 var import_utils132 = require("@react-aria/utils");
 var import_react120 = require("react");
-var import_runtime91 = require("@homebound/truss/runtime");
+var import_runtime92 = require("@homebound/truss/runtime");
 var import_jsx_runtime167 = require("react/jsx-runtime");
 function MaxLines({
   maxLines,
@@ -21970,10 +21983,10 @@ function MaxLines({
     onResize
   });
   return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { ref: elRef, ...(0, import_runtime91.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { ref: elRef, ...(0, import_runtime92.trussProps)({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": (0, import_runtime91.maybeCssVar)(maxLines)
+          "--WebkitLineClamp": (0, import_runtime92.maybeCssVar)(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -21996,7 +22009,7 @@ var import_react123 = require("react");
 // src/components/AppNav/AppNavGroupTrigger.tsx
 var import_react121 = require("react");
 var import_react_aria52 = require("react-aria");
-var import_runtime92 = require("@homebound/truss/runtime");
+var import_runtime93 = require("@homebound/truss/runtime");
 var import_jsx_runtime168 = require("react/jsx-runtime");
 function AppNavGroupTrigger(props) {
   const {
@@ -22032,7 +22045,7 @@ function AppNavGroupTrigger(props) {
     ref,
     "aria-expanded": expanded,
     "aria-controls": navGroupId,
-    ...(0, import_runtime92.mergeProps)(navLink, void 0, {
+    ...(0, import_runtime93.mergeProps)(navLink, void 0, {
       ...baseStyles5,
       ...isFocusVisible && focusRingStyles2,
       ...isHovered && hoverStyles4,
@@ -22040,7 +22053,7 @@ function AppNavGroupTrigger(props) {
     })
   }), children: [
     label,
-    /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { ...(0, import_runtime92.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { ...(0, import_runtime93.trussProps)({
       ...{
         display: "df",
         alignItems: "aic",
@@ -22193,7 +22206,7 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-var import_runtime93 = require("@homebound/truss/runtime");
+var import_runtime94 = require("@homebound/truss/runtime");
 var import_jsx_runtime169 = require("react/jsx-runtime");
 var __maybeInc18 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22238,11 +22251,11 @@ function AppNavGroupDisclosure(props) {
   });
   return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("div", { className: "df fdc", ...tid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, onClick: onToggle, ...tid }),
-    /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...(0, import_runtime93.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...(0, import_runtime94.trussProps)({
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
-        "--height": (0, import_runtime93.maybeCssVar)(__maybeInc18(contentHeight))
+        "--height": (0, import_runtime94.maybeCssVar)(__maybeInc18(contentHeight))
       }]
     }), ...tid.panel, children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { ref: setContentEl, className: "df fdc pl2", children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(AppNavItems, { items: linkGroup.items, panelCollapsed: false, ...tid }) }) })
   ] });
@@ -22270,7 +22283,7 @@ function AppNavGroupMenu({
 }
 
 // src/components/AppNav/AppNavSectionView.tsx
-var import_runtime94 = require("@homebound/truss/runtime");
+var import_runtime95 = require("@homebound/truss/runtime");
 var import_jsx_runtime171 = require("react/jsx-runtime");
 function AppNavSectionView(props) {
   const {
@@ -22296,7 +22309,7 @@ function AppNavSectionView(props) {
       "--borderColor": "var(--b-surface-separator)"
     }]
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("div", { ...(0, import_runtime94.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("div", { ...(0, import_runtime95.trussProps)({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -22304,7 +22317,7 @@ function AppNavSectionView(props) {
     },
     ...showDivider ? dividerStyles : {}
   }), ...tid, children: [
-    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { ...(0, import_runtime94.trussProps)({
+    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { ...(0, import_runtime95.trussProps)({
       fontWeight: "fw6",
       fontSize: "fz_10px",
       lineHeight: "lh_14px",
@@ -22372,7 +22385,7 @@ var import_react124 = require("react");
 var import_react_aria53 = require("react-aria");
 var import_react_dom6 = require("react-dom");
 var import_react_router_dom5 = require("react-router-dom");
-var import_runtime95 = require("@homebound/truss/runtime");
+var import_runtime96 = require("@homebound/truss/runtime");
 var import_jsx_runtime173 = require("react/jsx-runtime");
 function NavbarMobileMenu(props) {
   const {
@@ -22402,14 +22415,14 @@ function NavbarMobileDrawer({
   tid
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(import_jsx_runtime173.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_framer_motion5.motion.div, { ...(0, import_runtime95.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_framer_motion5.motion.div, { ...(0, import_runtime96.trussProps)({
       position: "fixed",
       top: "top0",
       right: "right0",
       bottom: "bottom0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime95.maybeCssVar)(zIndices.modalUnderlay)
+        "--zIndex": (0, import_runtime96.maybeCssVar)(zIndices.modalUnderlay)
       }],
       backgroundColor: "backgroundColor_rgba_36_36_36_0_2"
     }), initial: {
@@ -22422,7 +22435,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: onClose, ...tid.mobileMenuScrim }, "navbarMobileMenuScrim"),
-    /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_react_aria53.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(import_framer_motion5.motion.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...(0, import_runtime95.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_react_aria53.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(import_framer_motion5.motion.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...(0, import_runtime96.trussProps)({
       position: "fixed",
       top: "top0",
       bottom: "bottom0",
@@ -22433,7 +22446,7 @@ function NavbarMobileDrawer({
       width: "w100",
       overflow: "oh",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime95.maybeCssVar)(zIndices.sideNav)
+        "--zIndex": (0, import_runtime96.maybeCssVar)(zIndices.sideNav)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
@@ -22467,7 +22480,7 @@ function NavbarMobileDrawer({
 }
 
 // src/components/Navbar/Navbar.tsx
-var import_runtime96 = require("@homebound/truss/runtime");
+var import_runtime97 = require("@homebound/truss/runtime");
 var import_jsx_runtime174 = require("react/jsx-runtime");
 function Navbar(props) {
   const {
@@ -22487,7 +22500,7 @@ function Navbar(props) {
     overflows
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
-  return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("nav", { ...(0, import_runtime96.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("nav", { ...(0, import_runtime97.trussProps)({
     backgroundColor: "bgGray800",
     flexShrink: "fs0",
     display: "df",
@@ -22507,7 +22520,7 @@ function Navbar(props) {
     /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: "df aic gap3 fg1 mw0", children: [
       /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { className: "df aic fs0 gap2", children: [
         showMobile && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(NavbarMobileMenu, { items, ...tid }),
-        /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { ...(0, import_runtime96.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { ...(0, import_runtime97.trussProps)({
           flexShrink: "fs0",
           ...hideBrandOnMobile && showMobile ? {
             display: "dn"
@@ -22516,7 +22529,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_runtime174.jsx)("div", { ref: containerRef, ...(0, import_runtime96.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { ref: containerRef, ...(0, import_runtime97.trussProps)({
         display: "df",
         alignItems: "aic",
         flexGrow: "fg1",
@@ -22551,7 +22564,7 @@ var import_react125 = require("react");
 var import_react_aria54 = require("react-aria");
 var import_react_router = require("react-router");
 var import_react_router_dom6 = require("react-router-dom");
-var import_runtime97 = require("@homebound/truss/runtime");
+var import_runtime98 = require("@homebound/truss/runtime");
 var import_jsx_runtime175 = require("react/jsx-runtime");
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -22584,7 +22597,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_runtime175.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime97.trussProps)(contentXss), children: selectedTab.render() }) })
+    /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime98.trussProps)(contentXss), children: selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -22626,7 +22639,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { ...(0, import_runtime97.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { ...(0, import_runtime98.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -22690,7 +22703,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...(0, import_runtime97.trussProps)({
+    ...(0, import_runtime98.trussProps)({
       ...baseStyles5,
       ...active && activeStyles3,
       ...isDisabled && disabledStyles4,
@@ -22727,7 +22740,7 @@ function getTabStyles() {
   const borderBottomStyles = {
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": (0, import_runtime97.maybeCssVar)(`${borderBottomWidthPx}px`)
+      "--borderBottomWidth": (0, import_runtime98.maybeCssVar)(`${borderBottomWidthPx}px`)
     }],
     paddingBottom: ["pb_var", {
       "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
@@ -22811,7 +22824,7 @@ function hideTabs(props) {
 }
 
 // src/components/PageHeader.tsx
-var import_runtime98 = require("@homebound/truss/runtime");
+var import_runtime99 = require("@homebound/truss/runtime");
 var import_jsx_runtime176 = require("react/jsx-runtime");
 function PageHeader2(props) {
   const {
@@ -22821,7 +22834,7 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "pageHeader");
-  return /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)("header", { ...tid, ...(0, import_runtime98.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)("header", { ...tid, ...(0, import_runtime99.trussProps)({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -22847,7 +22860,7 @@ function PageHeader2(props) {
 // src/components/ScrollShadows.tsx
 var import_utils142 = require("@react-aria/utils");
 var import_react126 = require("react");
-var import_runtime99 = require("@homebound/truss/runtime");
+var import_runtime100 = require("@homebound/truss/runtime");
 var import_jsx_runtime177 = require("react/jsx-runtime");
 function ScrollShadows(props) {
   const {
@@ -22872,7 +22885,7 @@ function ScrollShadows(props) {
     const commonStyles = {
       position: "absolute",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime99.maybeCssVar)(zIndices.scrollShadow)
+        "--zIndex": (0, import_runtime100.maybeCssVar)(zIndices.scrollShadow)
       }],
       pointerEvents: "pointerEvents_none"
     };
@@ -22905,7 +22918,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": (0, import_runtime99.maybeCssVar)(startGradient)
+          "--background": (0, import_runtime100.maybeCssVar)(startGradient)
         }]
       }
     }, {
@@ -22913,7 +22926,7 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": (0, import_runtime99.maybeCssVar)(endGradient)
+          "--background": (0, import_runtime100.maybeCssVar)(endGradient)
         }]
       }
     }];
@@ -22938,10 +22951,10 @@ function ScrollShadows(props) {
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { ...(0, import_runtime99.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { ...(0, import_runtime100.trussProps)({
     display: "df",
     flexDirection: ["fd_var", {
-      "--flexDirection": (0, import_runtime99.maybeCssVar)(!horizontal ? "column" : "row")
+      "--flexDirection": (0, import_runtime100.maybeCssVar)(!horizontal ? "column" : "row")
     }],
     position: "relative",
     overflow: "oh",
@@ -22954,23 +22967,23 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ...(0, import_runtime99.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ...(0, import_runtime100.trussProps)({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": (0, import_runtime99.maybeCssVar)(showStartShadow ? 1 : 0)
+          "--opacity": (0, import_runtime100.maybeCssVar)(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ...(0, import_runtime99.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ...(0, import_runtime100.trussProps)({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": (0, import_runtime99.maybeCssVar)(showEndShadow ? 1 : 0)
+          "--opacity": (0, import_runtime100.maybeCssVar)(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ...(0, import_runtime99.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ...(0, import_runtime100.trussProps)({
       ...xss,
       ...{
         overflow: "oa",
@@ -23042,7 +23055,7 @@ function useHasSideNavLayoutProvider() {
 }
 
 // src/components/SideNav/SideNav.tsx
-var import_runtime100 = require("@homebound/truss/runtime");
+var import_runtime101 = require("@homebound/truss/runtime");
 var import_jsx_runtime179 = require("react/jsx-runtime");
 function SideNav(props) {
   const {
@@ -23057,7 +23070,7 @@ function SideNav(props) {
   const panelCollapsed = navState === "collapse";
   const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
   return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...(0, import_runtime100.trussProps)({
+    top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...(0, import_runtime101.trussProps)({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -23068,7 +23081,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...(0, import_runtime100.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...(0, import_runtime101.trussProps)({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -23081,7 +23094,7 @@ function SideNav(props) {
         paddingTop: "pt5"
       } : {}
     }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(AppNavItems, { items, panelCollapsed }) }),
-    footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...(0, import_runtime100.trussProps)({
+    footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...(0, import_runtime101.trussProps)({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -23158,7 +23171,7 @@ var snackbarId = 1;
 // src/components/Stepper.tsx
 var import_react129 = require("react");
 var import_react_aria55 = require("react-aria");
-var import_runtime101 = require("@homebound/truss/runtime");
+var import_runtime102 = require("@homebound/truss/runtime");
 var import_jsx_runtime180 = require("react/jsx-runtime");
 var import_react130 = require("react");
 var __maybeInc19 = (inc) => {
@@ -23179,7 +23192,7 @@ function Stepper(props) {
   const minStepWidth = 100;
   const gap = 8;
   return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("ol", { ...(0, import_runtime101.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("ol", { ...(0, import_runtime102.trussProps)({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -23189,7 +23202,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ (0, import_react130.createElement)("li", { ...(0, import_runtime101.trussProps)({
+      return /* @__PURE__ */ (0, import_react130.createElement)("li", { ...(0, import_runtime102.trussProps)({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -23201,7 +23214,7 @@ function Stepper(props) {
         }]
       }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { ...(0, import_runtime101.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { ...(0, import_runtime102.trussProps)({
       marginTop: "mt1",
       backgroundColor: "bgGray300",
       height: "h_4px",
@@ -23212,12 +23225,12 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { ...(0, import_runtime101.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { ...(0, import_runtime102.trussProps)({
       backgroundColor: "bgBlue600",
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": (0, import_runtime101.maybeCssVar)(__maybeInc19(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": (0, import_runtime102.maybeCssVar)(__maybeInc19(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -23253,7 +23266,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime101.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime102.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -23321,7 +23334,7 @@ function StepIcon({
   if (state === "complete") {
     return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { ...(0, import_runtime101.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { ...(0, import_runtime102.trussProps)({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -23336,7 +23349,7 @@ function StepIcon({
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 var import_react_dom7 = require("react-dom");
-var import_runtime102 = require("@homebound/truss/runtime");
+var import_runtime103 = require("@homebound/truss/runtime");
 var import_jsx_runtime181 = require("react/jsx-runtime");
 function SuperDrawerHeader(props) {
   const {
@@ -23362,7 +23375,7 @@ function SuperDrawerHeader(props) {
       ] }),
       props.right && /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: "fs0", children: props.right })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { ...(0, import_runtime102.trussProps)({
+    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { ...(0, import_runtime103.trussProps)({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
@@ -23542,7 +23555,7 @@ function canClose(canCloseCheck) {
 }
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
-var import_runtime103 = require("@homebound/truss/runtime");
+var import_runtime104 = require("@homebound/truss/runtime");
 var import_jsx_runtime184 = require("react/jsx-runtime");
 var SuperDrawerContent = ({
   children,
@@ -23591,7 +23604,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime103.mergeProps)(void 0, {
+      return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime104.mergeProps)(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -23635,7 +23648,7 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-var import_runtime104 = require("@homebound/truss/runtime");
+var import_runtime105 = require("@homebound/truss/runtime");
 var import_jsx_runtime185 = require("react/jsx-runtime");
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -23665,7 +23678,7 @@ function SideNavLayoutContent(props) {
   const railOffsetPx = !showRail ? 0 : !bp.mdAndUp || collapsed ? railCollapsedWidthPx : railWidthPx;
   const navTop = `var(${beamNavbarLayoutHeightVar}, 0px)`;
   const railViewportHeight = `calc(var(${beamLayoutViewportHeightVar}, 100vh) - var(${beamNavbarLayoutHeightVar}, 0px))`;
-  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)("div", { ...(0, import_runtime104.trussProps)({
+  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)("div", { ...(0, import_runtime105.trussProps)({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -23689,14 +23702,14 @@ function SideNavLayoutContent(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime104.maybeCssVar)(zIndices.sideNav)
+        "--zIndex": (0, import_runtime105.maybeCssVar)(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": (0, import_runtime104.maybeCssVar)(__maybeInc20(navTop))
+        "--top": (0, import_runtime105.maybeCssVar)(__maybeInc20(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": (0, import_runtime104.maybeCssVar)(__maybeInc20(railViewportHeight))
+        "--height": (0, import_runtime105.maybeCssVar)(__maybeInc20(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -23706,11 +23719,11 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": (0, import_runtime104.maybeCssVar)(__maybeInc20(navTop))
+          "--top": (0, import_runtime105.maybeCssVar)(__maybeInc20(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime104.maybeCssVar)(zIndices.sideNav)
+          "--zIndex": (0, import_runtime105.maybeCssVar)(zIndices.sideNav)
         }]
       },
       ...collapsed ? {
@@ -23725,7 +23738,7 @@ function SideNavLayoutContent(props) {
     showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
     /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(SideNav, { ...sideNav }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)("div", { ...(0, import_runtime104.mergeProps)(void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)("div", { ...(0, import_runtime105.mergeProps)(void 0, {
     [beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
   }, {
     display: "df",
@@ -23733,7 +23746,7 @@ function SideNavLayoutContent(props) {
     width: "w100"
   }), ...tid, children: [
     contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { ...(0, import_runtime104.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { ...(0, import_runtime105.trussProps)({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -23750,7 +23763,7 @@ function SideNavLayoutContent(props) {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 var import_react136 = require("react");
-var import_runtime105 = require("@homebound/truss/runtime");
+var import_runtime106 = require("@homebound/truss/runtime");
 
 // src/layouts/useAutoHideOnScroll.ts
 var import_react133 = require("react");
@@ -23900,10 +23913,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime105.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime106.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime105.maybeCssVar)(__maybeInc21(innerWidth))
+        "--width": (0, import_runtime106.maybeCssVar)(__maybeInc21(innerWidth))
       }]
     }
   ) : (
@@ -23912,10 +23925,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime105.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime106.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime105.maybeCssVar)(__maybeInc21(innerWidth))
+        "--width": (0, import_runtime106.maybeCssVar)(__maybeInc21(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -23924,25 +23937,25 @@ function NavbarLayout(props) {
     top: autoHideState === "revealed" ? 0 : -navHeight
   } : void 0;
   const navbarEl = (0, import_react136.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)("div", { ...(0, import_runtime105.mergeProps)(void 0, cssVars, {
+  return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)("div", { ...(0, import_runtime106.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { ref: spacerRef, ...(0, import_runtime105.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { ref: spacerRef, ...(0, import_runtime106.mergeProps)(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime105.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime106.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
     /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) });
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
 var import_react137 = require("react");
-var import_runtime106 = require("@homebound/truss/runtime");
+var import_runtime107 = require("@homebound/truss/runtime");
 var import_jsx_runtime188 = require("react/jsx-runtime");
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -23974,24 +23987,24 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": (0, import_runtime106.maybeCssVar)(__maybeInc22(headerLeft))
+      "--left": (0, import_runtime107.maybeCssVar)(__maybeInc22(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime106.maybeCssVar)(__maybeInc22(headerWidth))
+      "--width": (0, import_runtime107.maybeCssVar)(__maybeInc22(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime106.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime107.maybeCssVar)(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": (0, import_runtime106.maybeCssVar)(__maybeInc22(headerLeft))
+      "--left": (0, import_runtime107.maybeCssVar)(__maybeInc22(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime106.maybeCssVar)(__maybeInc22(headerWidth))
+      "--width": (0, import_runtime107.maybeCssVar)(__maybeInc22(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime106.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime107.maybeCssVar)(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
@@ -23999,17 +24012,17 @@ function PageHeaderLayout(props) {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
   const pageHeaderEl = (0, import_react137.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { ...(0, import_runtime106.mergeProps)(void 0, cssVars, {
+  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { ...(0, import_runtime107.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ref: spacerRef, ...(0, import_runtime106.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ref: spacerRef, ...(0, import_runtime107.mergeProps)(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime106.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime107.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
     /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }