@homebound/beam 4.6.0 → 4.7.0

package/dist/index.js

@@ -18789,6 +18789,7 @@ function Filters(props) {
 var _Filters = memo(Filters);
 
 // src/components/Headers/HeaderActions.tsx
+import { trussProps as trussProps72 } from "@homebound/truss/runtime";
 import { jsx as jsx109 } from "react/jsx-runtime";
 function HeaderActions(props) {
   const {
@@ -18802,26 +18803,54 @@ function HeaderActions(props) {
   } = useBreakpoint();
   const collapse = collapseOnSm && sm && actions.length > 1;
   if (collapse) {
-    return /* @__PURE__ */ jsx109("div", { className: "df aic gap1 fs0", ...tid, children: /* @__PURE__ */ jsx109(ButtonMenu, { trigger: {
+    return /* @__PURE__ */ jsx109("div", { ...trussProps72(actionRowCss), ...tid, children: /* @__PURE__ */ jsx109(ButtonMenu, { trigger: {
       icon: "verticalDots",
       variant: "outline"
     }, items: toMenuItems(actions) }) });
   }
-  return /* @__PURE__ */ jsx109("div", { className: "df aic gap1 fs0", ...tid, children: actions.map((action, i) => {
-    const key = headerActionKey(action, i);
-    if (action.kind === "icon") {
-      return /* @__PURE__ */ jsx109(IconButton, { ...action, variant: "outline" }, key);
-    }
-    if (action.kind === "menu") {
-      const {
-        kind,
-        ...menuProps
-      } = action;
-      void kind;
-      return /* @__PURE__ */ jsx109(ButtonMenu, { ...menuProps }, key);
-    }
-    return /* @__PURE__ */ jsx109(Button, { ...action }, key);
-  }) });
+  return /* @__PURE__ */ jsx109("div", { ...trussProps72(actionRowCss), ...tid, children: actions.map(renderHeaderAction) });
+}
+function splitHeaderActionsOnSm(actions, sm) {
+  if (!sm) return {
+    bottomSlotActions: [],
+    rightSlotActions: actions ?? []
+  };
+  return {
+    bottomSlotActions: actions?.filter((action) => action.keepVisible) ?? [],
+    rightSlotActions: actions?.filter((action) => !action.keepVisible) ?? []
+  };
+}
+var actionRowCss = {
+  display: "df",
+  alignItems: "aic",
+  flexWrap: "fww",
+  gap: "gap2",
+  flexShrink: "fs0"
+};
+function renderHeaderAction(action, index) {
+  const key = headerActionKey(action, index);
+  if (action.kind === "icon") {
+    const {
+      kind: _kind2,
+      keepVisible: _keepVisible2,
+      ...iconProps
+    } = action;
+    return /* @__PURE__ */ jsx109(IconButton, { ...iconProps, variant: "outline" }, key);
+  }
+  if (action.kind === "menu") {
+    const {
+      kind: _kind2,
+      keepVisible: _keepVisible2,
+      ...menuProps
+    } = action;
+    return /* @__PURE__ */ jsx109(ButtonMenu, { ...menuProps }, key);
+  }
+  const {
+    keepVisible: _keepVisible,
+    kind: _kind,
+    ...buttonProps
+  } = action;
+  return /* @__PURE__ */ jsx109(Button, { ...buttonProps }, key);
 }
 function headerActionKey(action, index) {
   if (action.kind === "icon") return `${action.icon}-${index}`;
@@ -18861,7 +18890,7 @@ function toMenuItems(actions) {
 }
 
 // src/components/Headers/ContentHeader.tsx
-import { trussProps as trussProps72 } from "@homebound/truss/runtime";
+import { trussProps as trussProps73 } from "@homebound/truss/runtime";
 import { jsx as jsx110, jsxs as jsxs69 } from "react/jsx-runtime";
 function ContentHeader(props) {
   const {
@@ -18875,6 +18904,14 @@ function ContentHeader(props) {
     xss
   } = props;
   const tid = useTestIds(props, "contentHeader");
+  const {
+    sm
+  } = useBreakpoint();
+  const {
+    bottomSlotActions,
+    rightSlotActions
+  } = splitHeaderActionsOnSm(actions, sm);
+  const showActionsSlot = !!withAutoSave || rightSlotActions.length > 0;
   const {
     tag: Heading,
     css: headingCss
@@ -18892,7 +18929,7 @@ function ContentHeader(props) {
   if (!title && !description && !actions && !withAutoSave) {
     return null;
   }
-  const descriptionEl = description && /* @__PURE__ */ jsx110("div", { ...trussProps72({
+  const descriptionEl = description && /* @__PURE__ */ jsx110("div", { ...trussProps73({
     fontWeight: "fw4",
     fontSize: "fz_14px",
     lineHeight: "lh_20px",
@@ -18900,7 +18937,7 @@ function ContentHeader(props) {
       "--color": "var(--b-on-surface)"
     }]
   }), ...tid.description, children: description });
-  return /* @__PURE__ */ jsxs69("div", { ...trussProps72({
+  return /* @__PURE__ */ jsxs69("div", { ...trussProps73({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -18918,13 +18955,14 @@ function ContentHeader(props) {
     /* @__PURE__ */ jsxs69("div", { className: "df aic jcsb mw0", children: [
       title ? /* @__PURE__ */ jsxs69("div", { className: "df aic gap1 mw0", children: [
         startAdornment,
-        /* @__PURE__ */ jsx110(Heading, { ...trussProps72(titleCss), ...tid.title, children: title })
+        /* @__PURE__ */ jsx110(Heading, { ...trussProps73(titleCss), ...tid.title, children: title })
       ] }) : descriptionEl,
-      (withAutoSave || actions) && /* @__PURE__ */ jsxs69("div", { className: "df gap1 fs0", ...tid.actions, children: [
+      showActionsSlot && /* @__PURE__ */ jsxs69("div", { className: "df gap2 fs0", ...tid.actions, children: [
         withAutoSave && /* @__PURE__ */ jsx110(AutoSaveIndicator, {}),
-        actions && /* @__PURE__ */ jsx110(HeaderActions, { actions })
+        rightSlotActions.length > 0 && /* @__PURE__ */ jsx110(HeaderActions, { actions: rightSlotActions })
       ] })
     ] }),
+    bottomSlotActions.length > 0 && /* @__PURE__ */ jsx110("div", { ...tid.bottomSlot, children: /* @__PURE__ */ jsx110(HeaderActions, { actions: bottomSlotActions }) }),
     title && descriptionEl
   ] });
 }
@@ -18956,7 +18994,7 @@ var headingByLevel = {
 };
 
 // src/components/InlineFeedbackBanner.tsx
-import { trussProps as trussProps73, maybeCssVar as maybeCssVar34 } from "@homebound/truss/runtime";
+import { trussProps as trussProps74, maybeCssVar as maybeCssVar34 } from "@homebound/truss/runtime";
 import { jsx as jsx111, jsxs as jsxs70 } from "react/jsx-runtime";
 function InlineFeedbackBanner(props) {
   const {
@@ -18982,7 +19020,7 @@ function InlineFeedbackBanner(props) {
     text: fallbackTagText,
     iconOnly: true
   };
-  return /* @__PURE__ */ jsxs70("div", { ...trussProps73({
+  return /* @__PURE__ */ jsxs70("div", { ...trussProps74({
     display: "df",
     alignItems: "ais",
     gap: "gap1",
@@ -19006,7 +19044,7 @@ function InlineFeedbackBanner(props) {
     boxShadow: "bshBasic"
   }), ...tid, children: [
     /* @__PURE__ */ jsx111("span", { className: "df fs0", children: /* @__PURE__ */ jsx111(Tag, { ...tagProps, ...tid.tag }) }),
-    /* @__PURE__ */ jsx111("span", { ...trussProps73({
+    /* @__PURE__ */ jsx111("span", { ...trussProps74({
       flexGrow: "fg1",
       minWidth: "mw0",
       paddingTop: "pt_1px",
@@ -19039,7 +19077,7 @@ var typeStyles2 = {
 // src/components/JumpLink.tsx
 import { useRef as useRef40 } from "react";
 import { mergeProps as mergeProps20, useFocusRing as useFocusRing9, useHover as useHover13, useLink } from "react-aria";
-import { trussProps as trussProps74 } from "@homebound/truss/runtime";
+import { trussProps as trussProps75 } from "@homebound/truss/runtime";
 import { jsx as jsx112 } from "react/jsx-runtime";
 function JumpLink(props) {
   const {
@@ -19082,7 +19120,7 @@ function JumpLink(props) {
       });
     }
   }
-  return /* @__PURE__ */ jsx112("a", { ref, ...mergeProps20(linkProps, focusProps, hoverProps), ...tid, ...trussProps74({
+  return /* @__PURE__ */ jsx112("a", { ref, ...mergeProps20(linkProps, focusProps, hoverProps), ...tid, ...trussProps75({
     ...jumpLinkStyles.baseStyles,
     ...active && jumpLinkStyles.activeStyles,
     ...isHovered && !disabled && jumpLinkStyles.hoverStyles,
@@ -19144,7 +19182,7 @@ import { useButton as useButton10, useFocusRing as useFocusRing14 } from "react-
 import { useCallback as useCallback23, useMemo as useMemo37 } from "react";
 
 // src/components/LoadingSkeleton.tsx
-import { trussProps as trussProps75, maybeCssVar as maybeCssVar35 } from "@homebound/truss/runtime";
+import { trussProps as trussProps76, maybeCssVar as maybeCssVar35 } from "@homebound/truss/runtime";
 import { jsx as jsx113 } from "react/jsx-runtime";
 function LoadingSkeleton({
   rows = 1,
@@ -19157,7 +19195,7 @@ function LoadingSkeleton({
   const rowHeight = sizeToPixels2[size];
   const rowCells = (rowNumber) => {
     const flexGrowForCell = randomizeWidths ? getRandomizedFlexBasisByRowIndex(rowNumber) : 1;
-    return cellArray.map((_, i) => /* @__PURE__ */ jsx113("div", { ...trussProps75({
+    return cellArray.map((_, i) => /* @__PURE__ */ jsx113("div", { ...trussProps76({
       borderRadius: "br4",
       animation: "anim_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite",
       flexGrow: ["flexGrow_var", {
@@ -19168,7 +19206,7 @@ function LoadingSkeleton({
       }]
     }) }, `row-${rowNumber}-cell-${i}`));
   };
-  return /* @__PURE__ */ jsx113("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ jsx113("div", { ...trussProps75({
+  return /* @__PURE__ */ jsx113("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ jsx113("div", { ...trussProps76({
     display: "df",
     gap: "gap1",
     marginBottom: "mb1",
@@ -19242,10 +19280,10 @@ import { Observer as Observer2 } from "mobx-react";
 import { useRef as useRef41 } from "react";
 import { useCheckboxGroup, useCheckboxGroupItem } from "react-aria";
 import { useCheckboxGroupState } from "react-stately";
-import { trussProps as trussProps77, maybeCssVar as maybeCssVar36 } from "@homebound/truss/runtime";
+import { trussProps as trussProps78, maybeCssVar as maybeCssVar36 } from "@homebound/truss/runtime";
 
 // src/inputs/internal/LabeledGroupField.tsx
-import { trussProps as trussProps76 } from "@homebound/truss/runtime";
+import { trussProps as trussProps77 } from "@homebound/truss/runtime";
 import { jsx as jsx115, jsxs as jsxs71 } from "react/jsx-runtime";
 function LabeledGroupField(props) {
   const {
@@ -19264,14 +19302,14 @@ function LabeledGroupField(props) {
   const isHiddenLabel = labelStyle === "hidden";
   const isLeftLabel = labelStyle === "left";
   const labelElement = /* @__PURE__ */ jsx115(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: isHiddenLabel, inline: isLeftLabel });
-  return /* @__PURE__ */ jsxs71("div", { ...groupProps, ...trussProps76({
+  return /* @__PURE__ */ jsxs71("div", { ...groupProps, ...trussProps77({
     width: "w100",
     ...isLeftLabel ? {
       display: "df",
       flexDirection: "fdr"
     } : {}
   }), onBlur, onFocus, ...tid, children: [
-    isLeftLabel ? /* @__PURE__ */ jsx115("div", { ...trussProps76({
+    isLeftLabel ? /* @__PURE__ */ jsx115("div", { ...trussProps77({
       ...!isHiddenLabel ? {
         width: "w50"
       } : {}
@@ -19310,7 +19348,7 @@ function CheckboxGroup(props) {
   } = useCheckboxGroup(props, state);
   const tid = useTestIds(props, defaultTestId(label));
   const labelSuffix = useLabelSuffix(required, false);
-  return /* @__PURE__ */ jsx116(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, labelSuffix, onBlur, onFocus, tid, children: /* @__PURE__ */ jsx116("div", { ...trussProps77({
+  return /* @__PURE__ */ jsx116(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, labelSuffix, onBlur, onFocus, tid, children: /* @__PURE__ */ jsx116("div", { ...trussProps78({
     display: "dg",
     gridTemplateColumns: ["gtc_var", {
       "--gridTemplateColumns": maybeCssVar36(`repeat(${columns}, auto)`)
@@ -19504,7 +19542,7 @@ import { useOverlayTriggerState } from "react-stately";
 
 // src/components/internal/DatePicker/DateRangePicker.tsx
 import { DayPicker as DayPicker2 } from "react-day-picker";
-import { trussProps as trussProps78 } from "@homebound/truss/runtime";
+import { trussProps as trussProps79 } from "@homebound/truss/runtime";
 import { jsx as jsx119 } from "react/jsx-runtime";
 function DateRangePicker(props) {
   const {
@@ -19515,7 +19553,7 @@ function DateRangePicker(props) {
     useYearPicker
   } = props;
   const tid = useTestIds(props, "datePicker");
-  return /* @__PURE__ */ jsx119("div", { ...trussProps78({
+  return /* @__PURE__ */ jsx119("div", { ...trussProps79({
     display: "dib",
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface-raised)"
@@ -19536,7 +19574,7 @@ function DateRangePicker(props) {
 }
 
 // src/inputs/DateFields/DateFieldBase.tsx
-import { trussProps as trussProps79 } from "@homebound/truss/runtime";
+import { trussProps as trussProps80 } from "@homebound/truss/runtime";
 import { Fragment as Fragment29, jsx as jsx120, jsxs as jsxs72 } from "react/jsx-runtime";
 function DateFieldBase(props) {
   const {
@@ -19690,7 +19728,7 @@ function DateFieldBase(props) {
     setInputValue("");
     onChange(void 0);
   } }) });
-  const calendarButton = /* @__PURE__ */ jsx120("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, ...trussProps79({
+  const calendarButton = /* @__PURE__ */ jsx120("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, ...trussProps80({
     ...isDisabled ? {
       cursor: "cursorNotAllowed"
     } : {}
@@ -19938,7 +19976,7 @@ import { Observer as Observer6 } from "mobx-react";
 
 // src/inputs/MultiLineSelectField.tsx
 import { useState as useState36 } from "react";
-import { trussProps as trussProps80 } from "@homebound/truss/runtime";
+import { trussProps as trussProps81 } from "@homebound/truss/runtime";
 import { jsx as jsx127, jsxs as jsxs74 } from "react/jsx-runtime";
 function MultiLineSelectField(props) {
   const {
@@ -19953,18 +19991,18 @@ function MultiLineSelectField(props) {
   const tid = useTestIds(props, "");
   const [isDisplayed, setIsDisplayed] = useState36(true);
   const currentOptions = options.filter((o) => !values.includes(getOptionValue(o)));
-  return /* @__PURE__ */ jsxs74("div", { ...trussProps80({
+  return /* @__PURE__ */ jsxs74("div", { ...trussProps81({
     marginTop: "mt1",
     ...labelStyle === "left" ? {
       display: "df"
     } : {}
   }), children: [
-    labelStyle !== "hidden" && /* @__PURE__ */ jsx127("div", { ...trussProps80({
+    labelStyle !== "hidden" && /* @__PURE__ */ jsx127("div", { ...trussProps81({
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
     }), children: /* @__PURE__ */ jsx127(Label, { ...tid.label, label: props.label }) }),
-    /* @__PURE__ */ jsxs74("div", { ...trussProps80({
+    /* @__PURE__ */ jsxs74("div", { ...trussProps81({
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
@@ -20055,7 +20093,7 @@ import { VisuallyHidden as VisuallyHidden5 } from "react-aria";
 // src/inputs/SelectCard/SelectCardShell.tsx
 import { useMemo as useMemo30 } from "react";
 import { mergeProps as mergeProps21, useFocusRing as useFocusRing10, useHover as useHover14, usePress } from "react-aria";
-import { trussProps as trussProps81, maybeCssVar as maybeCssVar_14 } from "@homebound/truss/runtime";
+import { trussProps as trussProps82, maybeCssVar as maybeCssVar_14 } from "@homebound/truss/runtime";
 import { jsx as jsx129 } from "react/jsx-runtime";
 function SelectCardShell(props) {
   const {
@@ -20167,7 +20205,7 @@ function SelectCardShell(props) {
   return maybeTooltip({
     title: resolveTooltip(isDisabled, tooltip),
     placement: "top",
-    children: /* @__PURE__ */ jsx129("label", { ...trussProps81({
+    children: /* @__PURE__ */ jsx129("label", { ...trussProps82({
       ...styles,
       ...{
         cursor: "cursorPointer",
@@ -20180,7 +20218,7 @@ function SelectCardShell(props) {
 }
 
 // src/inputs/SelectCard/GridSelectCard.tsx
-import { trussProps as trussProps82 } from "@homebound/truss/runtime";
+import { trussProps as trussProps83 } from "@homebound/truss/runtime";
 import { jsx as jsx130, jsxs as jsxs75 } from "react/jsx-runtime";
 function GridSelectCard(props) {
   const {
@@ -20200,7 +20238,7 @@ function GridSelectCard(props) {
   const tid = useTestIds(props, defaultTestId(label));
   return /* @__PURE__ */ jsxs75(SelectCardShell, { label, selected: isSelected, disabled: isDisabled, tooltip, view: "grid", layout, __storyState, ...others, children: [
     /* @__PURE__ */ jsx130(VisuallyHidden5, { children: /* @__PURE__ */ jsx130("input", { ...inputProps, ...tid.value }) }),
-    image ? /* @__PURE__ */ jsx130("img", { src: image, alt: "", ...trussProps82({
+    image ? /* @__PURE__ */ jsx130("img", { src: image, alt: "", ...trussProps83({
       height: "h_100px",
       width: "w_100px",
       objectFit: "objectContain",
@@ -20210,13 +20248,13 @@ function GridSelectCard(props) {
       } : {}
     }), ...tid.img }) : icon && /* @__PURE__ */ jsx130(Icon, { icon, inc: 4, color: isDisabled ? "--b-on-surface-disabled" /* OnSurfaceDisabled */ : "--b-on-surface" /* OnSurface */ }),
     /* @__PURE__ */ jsxs75("span", { className: "df fdc g_4px w100", children: [
-      tag && /* @__PURE__ */ jsx130("span", { ...trussProps82({
+      tag && /* @__PURE__ */ jsx130("span", { ...trussProps83({
         display: "df",
         ...layout !== "horizontal" ? {
           justifyContent: "jcc"
         } : {}
       }), children: /* @__PURE__ */ jsx130(Tag, { type: tag.type, text: tag.text, ...tid.tag }) }),
-      /* @__PURE__ */ jsx130("span", { ...trussProps82({
+      /* @__PURE__ */ jsx130("span", { ...trussProps83({
         fontWeight: "fw6",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -20226,7 +20264,7 @@ function GridSelectCard(props) {
           }]
         } : {}
       }), children: label }),
-      description && /* @__PURE__ */ jsx130("span", { ...trussProps82({
+      description && /* @__PURE__ */ jsx130("span", { ...trussProps83({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -20248,7 +20286,7 @@ import { VisuallyHidden as VisuallyHidden6 } from "react-aria";
 
 // src/inputs/SelectCard/StyledRadio.tsx
 import { useHover as useHover15 } from "react-aria";
-import { trussProps as trussProps83 } from "@homebound/truss/runtime";
+import { trussProps as trussProps84 } from "@homebound/truss/runtime";
 
 // src/inputs/internal/radioStyles.ts
 import { maybeCssVar as maybeCssVar37 } from "@homebound/truss/runtime";
@@ -20376,7 +20414,7 @@ function StyledRadio(props) {
     isDisabled
   });
   const tid = useTestIds(props, label ? defaultTestId(label) : void 0);
-  return /* @__PURE__ */ jsx131("input", { type: "radio", ...trussProps83({
+  return /* @__PURE__ */ jsx131("input", { type: "radio", ...trussProps84({
     ...radioReset,
     ...radioDefault,
     ...getRadioStateStyles({
@@ -20391,7 +20429,7 @@ function StyledRadio(props) {
 }
 
 // src/inputs/SelectCard/ListSelectCard.tsx
-import { trussProps as trussProps84 } from "@homebound/truss/runtime";
+import { trussProps as trussProps85 } from "@homebound/truss/runtime";
 import { Fragment as Fragment31, jsx as jsx132, jsxs as jsxs76 } from "react/jsx-runtime";
 function ListSelectCard(props) {
   const {
@@ -20415,7 +20453,7 @@ function ListSelectCard(props) {
         // Styled radio is an input, so we can use the inputProps directly
         /* @__PURE__ */ jsx132(StyledRadio, { ...tid, label, isDisabled, isSelected, inputProps })
       ),
-      /* @__PURE__ */ jsx132("span", { ...trussProps84({
+      /* @__PURE__ */ jsx132("span", { ...trussProps85({
         fontWeight: "fw6",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -20430,7 +20468,7 @@ function ListSelectCard(props) {
       }), children: label }),
       tag && /* @__PURE__ */ jsx132(Tag, { type: tag.type, text: tag.text, ...tid.tag })
     ] }),
-    description && /* @__PURE__ */ jsx132("span", { ...trussProps84({
+    description && /* @__PURE__ */ jsx132("span", { ...trussProps85({
       marginLeft: "ml3",
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -20531,7 +20569,7 @@ function getSelectCardOptionsCss({
 }
 
 // src/inputs/SelectCard/MultiSelectCardGroup.tsx
-import { trussProps as trussProps85 } from "@homebound/truss/runtime";
+import { trussProps as trussProps86 } from "@homebound/truss/runtime";
 import { jsx as jsx134 } from "react/jsx-runtime";
 function MultiSelectCardGroup(props) {
   const {
@@ -20573,7 +20611,7 @@ function MultiSelectCardGroup(props) {
     label,
     isDisabled
   }, state);
-  return /* @__PURE__ */ jsx134(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ jsx134("div", { ...trussProps85(getSelectCardOptionsCss({
+  return /* @__PURE__ */ jsx134(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ jsx134("div", { ...trussProps86(getSelectCardOptionsCss({
     view,
     hasDescription,
     layout,
@@ -20609,7 +20647,7 @@ import { Observer as Observer8 } from "mobx-react";
 import { useMemo as useMemo32 } from "react";
 
 // src/forms/SelectedOptionPill.tsx
-import { trussProps as trussProps86, maybeCssVar as maybeCssVar39 } from "@homebound/truss/runtime";
+import { trussProps as trussProps87, maybeCssVar as maybeCssVar39 } from "@homebound/truss/runtime";
 import { jsx as jsx136, jsxs as jsxs77 } from "react/jsx-runtime";
 function SelectedOptionPill(props) {
   const {
@@ -20621,7 +20659,7 @@ function SelectedOptionPill(props) {
   } = props;
   const tid = useTestIds(props, "selectedOptionPill");
   return /* @__PURE__ */ jsxs77("div", { className: "df fdc gap1 w100", ...tid, children: [
-    /* @__PURE__ */ jsxs77("div", { ...trussProps86({
+    /* @__PURE__ */ jsxs77("div", { ...trussProps87({
       // Setting border-radius to 999px to make it a pill shape.
       ...{
         display: "df",
@@ -21014,7 +21052,7 @@ import { Observer as Observer10 } from "mobx-react";
 import { Fragment as Fragment32, useMemo as useMemo34, useRef as useRef45 } from "react";
 import { useFocusRing as useFocusRing11, useHover as useHover16, useRadio, useRadioGroup } from "react-aria";
 import { useRadioGroupState } from "react-stately";
-import { trussProps as trussProps87 } from "@homebound/truss/runtime";
+import { trussProps as trussProps88 } from "@homebound/truss/runtime";
 import { jsx as jsx142, jsxs as jsxs79 } from "react/jsx-runtime";
 var nextNameId = 0;
 function RadioGroupField(props) {
@@ -21051,7 +21089,7 @@ function RadioGroupField(props) {
   }, state);
   return (
     // default styling to position `<Label />` above.
-    /* @__PURE__ */ jsxs79("div", { ...trussProps87({
+    /* @__PURE__ */ jsxs79("div", { ...trussProps88({
       display: "df",
       flexDirection: "fdc",
       gap: "gap1",
@@ -21064,7 +21102,7 @@ function RadioGroupField(props) {
     }), ...tid, children: [
       /* @__PURE__ */ jsx142(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: labelStyle === "hidden" }),
       /* @__PURE__ */ jsxs79("div", { ...radioGroupProps, children: [
-        /* @__PURE__ */ jsx142("div", { ...trussProps87({
+        /* @__PURE__ */ jsx142("div", { ...trussProps88({
           display: "df",
           ...layout === "horizontal" ? {
             flexDirection: "fdr",
@@ -21122,7 +21160,7 @@ function Radio(props) {
   } = useHover16({
     isDisabled: disabled
   });
-  return /* @__PURE__ */ jsxs79("label", { ...trussProps87({
+  return /* @__PURE__ */ jsxs79("label", { ...trussProps88({
     display: "df",
     cursor: "cursorPointer",
     ...disabled ? {
@@ -21134,7 +21172,7 @@ function Radio(props) {
       {
         type: "radio",
         ref,
-        ...trussProps87({
+        ...trussProps88({
           ...radioReset,
           ...radioDefault,
           ...getRadioStateStyles({
@@ -21157,7 +21195,7 @@ function Radio(props) {
       }
     ),
     /* @__PURE__ */ jsxs79("div", { children: [
-      /* @__PURE__ */ jsx142("div", { id: labelId, ...trussProps87({
+      /* @__PURE__ */ jsx142("div", { id: labelId, ...trussProps88({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -21172,7 +21210,7 @@ function Radio(props) {
       }), ...description ? {
         "aria-describedby": descriptionId
       } : {}, children: label }),
-      description && /* @__PURE__ */ jsx142("div", { id: descriptionId, ...trussProps87({
+      description && /* @__PURE__ */ jsx142("div", { id: descriptionId, ...trussProps88({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -21269,7 +21307,7 @@ import Tribute from "tributejs";
 import "tributejs/dist/tribute.css";
 import "trix";
 import "trix/dist/trix.css";
-import { trussProps as trussProps88 } from "@homebound/truss/runtime";
+import { trussProps as trussProps89 } from "@homebound/truss/runtime";
 import { jsx as jsx145, jsxs as jsxs80 } from "react/jsx-runtime";
 var RichTextField = withTestMock(RichTextFieldImpl, RichTextFieldMock);
 function RichTextFieldImpl(props) {
@@ -21358,7 +21396,7 @@ function RichTextFieldImpl(props) {
     autoFocus
   } = props;
   if (!readOnly) {
-    return /* @__PURE__ */ jsxs80("div", { ...trussProps88({
+    return /* @__PURE__ */ jsxs80("div", { ...trussProps89({
       width: "w100",
       ...!fullWidth ? {
         maxWidth: "maxw_550px"
@@ -21381,14 +21419,14 @@ function RichTextFieldImpl(props) {
       ] })
     ] });
   } else {
-    return /* @__PURE__ */ jsxs80("div", { ...trussProps88({
+    return /* @__PURE__ */ jsxs80("div", { ...trussProps89({
       width: "w100",
       ...!fullWidth ? {
         maxWidth: "maxw_550px"
       } : {}
     }), children: [
       label && /* @__PURE__ */ jsx145(Label, { label }),
-      /* @__PURE__ */ jsx145("div", { ...trussProps88({
+      /* @__PURE__ */ jsx145("div", { ...trussProps89({
         minHeight: "mh_120px",
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -21524,7 +21562,7 @@ function SelectCardRadioGroupItem(props) {
 }
 
 // src/inputs/SelectCard/SelectCardGroup.tsx
-import { trussProps as trussProps89 } from "@homebound/truss/runtime";
+import { trussProps as trussProps90 } from "@homebound/truss/runtime";
 import { jsx as jsx148 } from "react/jsx-runtime";
 function SelectCardGroup(props) {
   const {
@@ -21560,7 +21598,7 @@ function SelectCardGroup(props) {
     label,
     isDisabled
   }, state);
-  return /* @__PURE__ */ jsx148(LabeledGroupField, { label, labelStyle, labelProps, groupProps: radioGroupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ jsx148("div", { ...trussProps89(getSelectCardOptionsCss({
+  return /* @__PURE__ */ jsx148(LabeledGroupField, { label, labelStyle, labelProps, groupProps: radioGroupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ jsx148("div", { ...trussProps90(getSelectCardOptionsCss({
     view,
     hasDescription,
     layout,
@@ -21641,7 +21679,7 @@ import { Observer as Observer14 } from "mobx-react";
 // src/inputs/Switch.tsx
 import { useRef as useRef48 } from "react";
 import { useFocusRing as useFocusRing12, useHover as useHover17, useSwitch, VisuallyHidden as VisuallyHidden7 } from "react-aria";
-import { trussProps as trussProps90, maybeCssVar as maybeCssVar40 } from "@homebound/truss/runtime";
+import { trussProps as trussProps91, maybeCssVar as maybeCssVar40 } from "@homebound/truss/runtime";
 import { jsx as jsx151, jsxs as jsxs81 } from "react/jsx-runtime";
 var __maybeInc15 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -21691,7 +21729,7 @@ function Switch(props) {
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
   const tooltip = resolveTooltip(disabled, props.tooltip);
   const tid = useTestIds(otherProps, label);
-  return /* @__PURE__ */ jsxs81("label", { ...hoverProps, ...trussProps90({
+  return /* @__PURE__ */ jsxs81("label", { ...hoverProps, ...trussProps91({
     ...{
       position: "relative",
       cursor: "cursorPointer",
@@ -21745,13 +21783,13 @@ function Switch(props) {
         }]
       }
     }, inline: labelStyle === "left" || labelStyle === "filter" }) }),
-    /* @__PURE__ */ jsx151("div", { ...trussProps90({
+    /* @__PURE__ */ jsx151("div", { ...trussProps91({
       ...labelStyle === "left" ? {
         width: ["w_var", {
           "--width": maybeCssVar40(__maybeInc15(labelLeftFieldWidth))
         }]
       } : {}
-    }), children: /* @__PURE__ */ jsx151("div", { "aria-hidden": "true", ...trussProps90({
+    }), children: /* @__PURE__ */ jsx151("div", { "aria-hidden": "true", ...trussProps91({
       ...{
         width: ["w_var", {
           "--width": `${toggleWidth(compact)}px`
@@ -21779,7 +21817,7 @@ function Switch(props) {
         }]
       },
       ...isSelected && isHovered && switchSelectedHoverStyles
-    }), children: /* @__PURE__ */ jsx151("div", { ...trussProps90({
+    }), children: /* @__PURE__ */ jsx151("div", { ...trussProps91({
       ...switchCircleDefaultStyles(compact),
       ...isDisabled && {
         backgroundColor: ["bgColor_var", {
@@ -22099,7 +22137,7 @@ import { Observer as Observer17 } from "mobx-react";
 import { useRef as useRef51 } from "react";
 import { useCheckboxGroup as useCheckboxGroup3, useCheckboxGroupItem as useCheckboxGroupItem3, useFocusRing as useFocusRing13, VisuallyHidden as VisuallyHidden8 } from "react-aria";
 import { useCheckboxGroupState as useCheckboxGroupState3 } from "react-stately";
-import { trussProps as trussProps91, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
+import { trussProps as trussProps92, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
 import { jsx as jsx157, jsxs as jsxs82 } from "react/jsx-runtime";
 var __maybeInc16 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22131,7 +22169,7 @@ function ToggleChipGroup(props) {
   } = useCheckboxGroup3(props, state);
   const tid = useTestIds(props, "toggleChip");
   const labelSuffix = useLabelSuffix(required, false);
-  return /* @__PURE__ */ jsxs82("div", { ...groupProps, ...trussProps91({
+  return /* @__PURE__ */ jsxs82("div", { ...groupProps, ...trussProps92({
     position: "relative",
     display: "df",
     flexDirection: "fdc",
@@ -22143,7 +22181,7 @@ function ToggleChipGroup(props) {
     } : {}
   }), children: [
     /* @__PURE__ */ jsx157(Label, { label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix }),
-    /* @__PURE__ */ jsx157("div", { ...trussProps91({
+    /* @__PURE__ */ jsx157("div", { ...trussProps92({
       display: "df",
       gap: "gap1",
       flexWrap: "fww",
@@ -22208,7 +22246,7 @@ function ToggleChip2(props) {
   return maybeTooltip({
     title: tooltip,
     placement: "top",
-    children: /* @__PURE__ */ jsxs82("label", { ...trussProps91({
+    children: /* @__PURE__ */ jsxs82("label", { ...trussProps92({
       ...{
         position: "relative",
         display: "dif",
@@ -22304,7 +22342,7 @@ function BoundTreeSelectField(props) {
 
 // src/forms/FormLines.tsx
 import { Children as Children2, cloneElement } from "react";
-import { trussProps as trussProps92, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
+import { trussProps as trussProps93, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
 import { jsx as jsx160 } from "react/jsx-runtime";
 var __maybeInc17 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22340,7 +22378,7 @@ function FormLines(props) {
       fullWidth: true
     } : {}
   };
-  return /* @__PURE__ */ jsx160(PresentationProvider, { fieldProps: newFieldProps, children: /* @__PURE__ */ jsx160("div", { ...trussProps92({
+  return /* @__PURE__ */ jsx160(PresentationProvider, { fieldProps: newFieldProps, children: /* @__PURE__ */ jsx160("div", { ...trussProps93({
     display: "df",
     flexDirection: "fdc",
     gap: ["gap_var", {
@@ -22364,7 +22402,7 @@ function FormLines(props) {
   }) }) });
 }
 function FormDivider() {
-  return /* @__PURE__ */ jsx160("div", { ...trussProps92({
+  return /* @__PURE__ */ jsx160("div", { ...trussProps93({
     height: "h_1px",
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface-separator)"
@@ -22381,7 +22419,7 @@ function FieldGroup(props) {
     const width2 = widths2[i] || 1;
     return typeof width2 === `number` ? `${width2}fr` : width2;
   }).join(" ");
-  return /* @__PURE__ */ jsx160("div", { ...trussProps92({
+  return /* @__PURE__ */ jsx160("div", { ...trussProps93({
     display: "dg",
     gap: "gap2",
     gridTemplateColumns: ["gtc_var", {
@@ -22397,7 +22435,7 @@ var sizes = {
 };
 
 // src/forms/BoundForm.tsx
-import { trussProps as trussProps93, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
+import { trussProps as trussProps94, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
 import { jsx as jsx161 } from "react/jsx-runtime";
 import { createElement as createElement5 } from "react";
 var reactNodePrefix = "reactNode";
@@ -22452,7 +22490,7 @@ function FormRow({
     component,
     key,
     minWidth
-  }) => /* @__PURE__ */ createElement5("div", { ...trussProps93({
+  }) => /* @__PURE__ */ createElement5("div", { ...trussProps94({
     minWidth: ["mw_var", {
       "--minWidth": maybeCssVar43(minWidth)
     }],
@@ -22602,7 +22640,7 @@ import { useDebouncedCallback as useDebouncedCallback5 } from "use-debounce";
 // src/components/RightSidebar.tsx
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-motion";
 import { useState as useState40 } from "react";
-import { trussProps as trussProps94, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
+import { trussProps as trussProps95, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
 import { Fragment as Fragment33, jsx as jsx163, jsxs as jsxs83 } from "react/jsx-runtime";
 var __maybeInc18 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22645,7 +22683,7 @@ function RightSidebar({
         duration: 0.2
       },
       x: "100%"
-    }, ...trussProps94({
+    }, ...trussProps95({
       width: "w100",
       minWidth: ["mw_var", {
         "--minWidth": maybeCssVar44(RIGHT_SIDEBAR_MIN_WIDTH)
@@ -22658,7 +22696,7 @@ function RightSidebar({
       paddingLeft: "pl4",
       paddingRight: "pr3"
     }), children: /* @__PURE__ */ jsxs83(Fragment33, { children: [
-      /* @__PURE__ */ jsxs83("div", { ...trussProps94({
+      /* @__PURE__ */ jsxs83("div", { ...trussProps95({
         position: "sticky",
         top: "top0",
         backgroundColor: ["bgColor_var", {
@@ -22667,7 +22705,7 @@ function RightSidebar({
       }), children: [
         /* @__PURE__ */ jsxs83("div", { className: "absolute l_neg24px top0 df fdc aic", children: [
           /* @__PURE__ */ jsx163(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
-          /* @__PURE__ */ jsx163("div", { ...trussProps94({
+          /* @__PURE__ */ jsx163("div", { ...trussProps95({
             position: "absolute",
             top: "tp_48px",
             height: "h_calc_100vh_168px",
@@ -22714,7 +22752,7 @@ function Toast() {
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
 import { Fragment as Fragment35, useMemo as useMemo38, useState as useState41 } from "react";
 import { Link as Link6 } from "react-router-dom";
-import { trussProps as trussProps95, mergeProps as mergeProps25 } from "@homebound/truss/runtime";
+import { trussProps as trussProps96, mergeProps as mergeProps25 } from "@homebound/truss/runtime";
 import { Fragment as Fragment36, jsx as jsx165, jsxs as jsxs84 } from "react/jsx-runtime";
 function PageHeaderBreadcrumbs({
   breadcrumb
@@ -22726,7 +22764,7 @@ function PageHeaderBreadcrumbs({
     return (
       // Adding index to key to prevent rendering issues when multiple items have the same label
       /* @__PURE__ */ jsxs84(Fragment35, { children: [
-        index > 0 && !hideDivisor && /* @__PURE__ */ jsx165("span", { ...trussProps95({
+        index > 0 && !hideDivisor && /* @__PURE__ */ jsx165("span", { ...trussProps96({
           fontWeight: "fw6",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -22753,7 +22791,7 @@ function PageHeaderBreadcrumbs({
   }
   return /* @__PURE__ */ jsx165("div", { className: "df aic mb_4px", children: breadcrumbs.length > 3 && collapsed ? /* @__PURE__ */ jsxs84(Fragment36, { children: [
     renderBreadcrumb(breadcrumbs[0], 0),
-    /* @__PURE__ */ jsx165("button", { ...tids.expand, ...trussProps95({
+    /* @__PURE__ */ jsx165("button", { ...tids.expand, ...trussProps96({
       color: ["color_var", {
         "--color": "var(--b-on-surface-muted)"
       }],
@@ -22766,7 +22804,7 @@ function PageHeaderBreadcrumbs({
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import { trussProps as trussProps96, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
+import { trussProps as trussProps97, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
 import { jsx as jsx166, jsxs as jsxs85 } from "react/jsx-runtime";
 var headerHeightPx = 120;
 var maxContentWidthPx = 1600;
@@ -22789,7 +22827,7 @@ 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__ */ jsx166("div", { ...trussProps96({
+    /* @__PURE__ */ jsx166("div", { ...trussProps97({
       position: "fixed",
       top: "top0",
       bottom: "bottom0",
@@ -22805,7 +22843,7 @@ function FormPageLayoutComponent(props) {
       display: "df",
       justifyContent: "jcc",
       alignItems: "aifs"
-    }), ...tids, children: /* @__PURE__ */ jsxs85("div", { ...trussProps96({
+    }), ...tids, children: /* @__PURE__ */ jsxs85("div", { ...trussProps97({
       width: "w100",
       maxWidth: ["maxw_var", {
         "--maxWidth": `${maxContentWidthPx}px`
@@ -22821,7 +22859,7 @@ function FormPageLayoutComponent(props) {
       /* @__PURE__ */ jsx166(PageHeader, { ...props, ...tids.pageHeader }),
       /* @__PURE__ */ jsx166(LeftNav, { sectionsWithRefs, ...tids }),
       /* @__PURE__ */ jsx166(FormSections, { sectionsWithRefs, formState, ...tids }),
-      rightSideBar && /* @__PURE__ */ jsx166("aside", { ...trussProps96({
+      rightSideBar && /* @__PURE__ */ jsx166("aside", { ...trussProps97({
         gridRow: "gr_2",
         gridColumn: "gc_3_4",
         position: "sticky",
@@ -22846,7 +22884,7 @@ function PageHeader(props) {
     notice
   } = useToastContext();
   const tids = useTestIds(props);
-  return /* @__PURE__ */ jsxs85("header", { ...trussProps96({
+  return /* @__PURE__ */ jsxs85("header", { ...trussProps97({
     gridRow: "gr_1",
     gridColumn: "gc_1_4",
     position: "sticky",
@@ -22884,7 +22922,7 @@ function FormSections(props) {
   } = props;
   const tids = useTestIds(props);
   const bottomPaddingPx = sectionsWithRefs.length > 1 ? 200 : 0;
-  return /* @__PURE__ */ jsx166("article", { ...trussProps96({
+  return /* @__PURE__ */ jsx166("article", { ...trussProps97({
     gridRow: "gr_2",
     gridColumn: "gc_2_3",
     paddingBottom: ["pb_var", {
@@ -22902,7 +22940,7 @@ function FormSections(props) {
       {
         id: sectionKey,
         ref,
-        ...trussProps96({
+        ...trussProps97({
           display: "dg",
           gridTemplateColumns: "gtc_50px_1fr",
           gridTemplateRows: "gtr_auto",
@@ -22933,7 +22971,7 @@ function LeftNav(props) {
     section
   }) => !!section.title), [sectionsWithRefs]);
   const activeSection = useActiveSection(sectionWithTitles);
-  return /* @__PURE__ */ jsx166("aside", { ...trussProps96({
+  return /* @__PURE__ */ jsx166("aside", { ...trussProps97({
     gridRow: "gr_2",
     gridColumn: "gc_1_2",
     position: "sticky",
@@ -22998,7 +23036,7 @@ function SectionNavLink(props) {
     hoverProps,
     isHovered
   } = useHover2({});
-  return /* @__PURE__ */ jsx166("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps96({
+  return /* @__PURE__ */ jsx166("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps97({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -23715,7 +23753,7 @@ import { memo as memo2, useMemo as useMemo43, useState as useState47 } from "rea
 import { Fragment as Fragment38, useCallback as useCallback30, useMemo as useMemo42, useRef as useRef58 } from "react";
 import { useMenuTrigger as useMenuTrigger4 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState4 } from "react-stately";
-import { trussProps as trussProps97 } from "@homebound/truss/runtime";
+import { trussProps as trussProps98 } from "@homebound/truss/runtime";
 import { jsx as jsx171, jsxs as jsxs87 } from "react/jsx-runtime";
 function EditColumnsButton(props) {
   const {
@@ -23764,7 +23802,7 @@ function EditColumnsButton(props) {
     label: "",
     size: "md",
     variant: "secondaryBlack"
-  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ jsxs87("div", { ...trussProps97({
+  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ jsxs87("div", { ...trussProps98({
     display: "df",
     flexDirection: "fdc",
     backgroundColor: ["bgColor_var", {
@@ -23781,7 +23819,7 @@ function EditColumnsButton(props) {
       /* @__PURE__ */ jsx171("div", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis pr1", children: option.label }),
       /* @__PURE__ */ jsx171(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__ */ jsx171("div", { ...trussProps97({
+    /* @__PURE__ */ jsx171("div", { ...trussProps98({
       display: "df",
       justifyContent: "jcc",
       paddingTop: "pt2",
@@ -23823,7 +23861,7 @@ import { useDebouncedCallback as useDebouncedCallback6 } from "use-debounce";
 import { StringParam as StringParam2, useQueryParams as useQueryParams3 } from "use-query-params";
 
 // src/components/Layout/GridTableLayout/FilterPanel.tsx
-import { trussProps as trussProps98 } from "@homebound/truss/runtime";
+import { trussProps as trussProps99 } from "@homebound/truss/runtime";
 
 // src/components/Layout/GridTableLayout/GroupByField.tsx
 import { jsx as jsx173 } from "react/jsx-runtime";
@@ -23859,7 +23897,7 @@ function FilterPanelOpen({
   const inDocumentScrollLayout = useDocumentScrollLayout();
   const activeFilterCount = getActiveFilterCount(filter ?? {});
   const filterControls = filter && setFilter ? buildFilterControls(filterImpls, filter, setFilter, tid) : null;
-  return /* @__PURE__ */ jsxs88("div", { ...trussProps98({
+  return /* @__PURE__ */ jsxs88("div", { ...trussProps99({
     ...{
       display: "df",
       alignItems: "aic",
@@ -23891,7 +23929,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__ */ jsxs88("div", { ...trussProps98({
+  return /* @__PURE__ */ jsxs88("div", { ...trussProps99({
     display: "df",
     gap: "gap1",
     alignItems: "aic",
@@ -23932,7 +23970,7 @@ function chipsForFilterKey(key, f, filter, onChange, testId) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
-import { trussProps as trussProps99 } from "@homebound/truss/runtime";
+import { trussProps as trussProps100 } from "@homebound/truss/runtime";
 import { jsx as jsx175, jsxs as jsxs89 } from "react/jsx-runtime";
 function GridTableLayoutActionsComponent(props) {
   const {
@@ -23996,7 +24034,7 @@ function GridTableLayoutActionsComponent(props) {
       }
     };
   }
-  return /* @__PURE__ */ jsxs89("div", { ...trussProps99({
+  return /* @__PURE__ */ jsxs89("div", { ...trussProps100({
     display: "df",
     flexDirection: "fdc",
     gap: "gap1",
@@ -24005,7 +24043,7 @@ function GridTableLayoutActionsComponent(props) {
       paddingBottom: "pb3"
     } : {}
   }), children: [
-    /* @__PURE__ */ jsxs89("div", { ...trussProps99({
+    /* @__PURE__ */ jsxs89("div", { ...trussProps100({
       ...{
         display: "df",
         gap: "gap1",
@@ -24030,7 +24068,7 @@ function GridTableLayoutActionsComponent(props) {
         !!actions?.length && /* @__PURE__ */ jsx175(HeaderActions, { actions, ...testId.actions })
       ] })
     ] }),
-    sm && showSearch && /* @__PURE__ */ jsx175("div", { ...trussProps99(pageContentPaddingX), children: searchTextField }),
+    sm && showSearch && /* @__PURE__ */ jsx175("div", { ...trussProps100(pageContentPaddingX), children: searchTextField }),
     hasFilterControls && !showInlineControl && /* @__PURE__ */ jsx175(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
   ] });
 }
@@ -24102,7 +24140,7 @@ function parseStoredTableView(raw) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import { trussProps as trussProps100, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
+import { trussProps as trussProps101, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
 import { Fragment as Fragment40, jsx as jsx177, jsxs as jsxs91 } from "react/jsx-runtime";
 var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24160,7 +24198,7 @@ function GridTableLayoutComponent(props) {
     as: cardAs
   } : {}, api, emptyState, filter: clientSearch, style: tableStyle, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey, columnGutter: inDocumentScrollLayout }) });
   const tableScrollContent = /* @__PURE__ */ jsxs91(Fragment40, { children: [
-    showTableActions && /* @__PURE__ */ jsx177("div", { ref: tableActionsRef, ...trussProps100({
+    showTableActions && /* @__PURE__ */ jsx177("div", { ref: tableActionsRef, ...trussProps101({
       ...inDocumentScrollLayout ? {
         transition: "transitionTop",
         position: "sticky",
@@ -24183,7 +24221,7 @@ function GridTableLayoutComponent(props) {
     }), ...tid.stickyContent, children: tableActionsEl }),
     inDocumentScrollLayout ? (
       // Scope the pane to the table only — actions stay outside so they remain full-bleed sticky chrome.
-      rightPane ? /* @__PURE__ */ jsx177(DocumentScrollOverlayRightPaneLayout, { paneWidth: rightPane.width, children: /* @__PURE__ */ jsx177("div", { ...trussProps100({
+      rightPane ? /* @__PURE__ */ jsx177(DocumentScrollOverlayRightPaneLayout, { paneWidth: rightPane.width, children: /* @__PURE__ */ jsx177("div", { ...trussProps101({
         minWidth: ["mw_var", {
           "--minWidth": maybeCssVar48(documentScrollRightPaneContentMinCss())
         }]
@@ -24314,7 +24352,7 @@ function PreventBrowserScroll({
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 import { AnimatePresence as AnimatePresence4, motion as motion4 } from "framer-motion";
 import { useEffect as useEffect29 } from "react";
-import { trussProps as trussProps101, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
+import { trussProps as trussProps102, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
 import { Fragment as Fragment41, jsx as jsx179, jsxs as jsxs92 } from "react/jsx-runtime";
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24334,7 +24372,7 @@ function RightPaneLayout(props) {
   const rightPaneContent = useRightPaneContent();
   useEffect29(() => closePane2, [closePane2]);
   return /* @__PURE__ */ jsx179("div", { className: "h100 df oxh", children: /* @__PURE__ */ jsxs92(Fragment41, { children: [
-    /* @__PURE__ */ jsx179("div", { ...trussProps101({
+    /* @__PURE__ */ jsx179("div", { ...trussProps102({
       ...{
         width: ["w_var", {
           "--width": maybeCssVar49(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
@@ -24359,7 +24397,7 @@ function RightPaneLayout(props) {
         } : {}
       }
     }), children }),
-    /* @__PURE__ */ jsxs92("div", { ...trussProps101({
+    /* @__PURE__ */ jsxs92("div", { ...trussProps102({
       position: "relative",
       ...!!defaultPaneContent ? {
         width: ["w_var", {
@@ -24367,7 +24405,7 @@ function RightPaneLayout(props) {
         }]
       } : {}
     }), children: [
-      defaultPaneContent && /* @__PURE__ */ jsx179("div", { ...trussProps101({
+      defaultPaneContent && /* @__PURE__ */ jsx179("div", { ...trussProps102({
         height: "h100",
         width: ["w_var", {
           "--width": `${paneWidth}px`
@@ -24385,7 +24423,7 @@ function RightPaneLayout(props) {
         {
           layout: "position",
           "data-testid": "rightPaneContent",
-          ...trussProps101({
+          ...trussProps102({
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": maybeCssVar49(paneBgColor)
             }],
@@ -24422,7 +24460,7 @@ function RightPaneLayout(props) {
 }
 
 // src/components/Layout/RightPaneLayout/RightPanePanel.tsx
-import { trussProps as trussProps102 } from "@homebound/truss/runtime";
+import { trussProps as trussProps103 } from "@homebound/truss/runtime";
 import { jsx as jsx180, jsxs as jsxs93 } from "react/jsx-runtime";
 function RightPanePanel(props) {
   const {
@@ -24435,7 +24473,7 @@ function RightPanePanel(props) {
     closeRightPane
   } = useRightPaneActions();
   return /* @__PURE__ */ jsxs93("div", { className: "relative df fdc h100", ...tid, children: [
-    /* @__PURE__ */ jsxs93("div", { ...trussProps102({
+    /* @__PURE__ */ jsxs93("div", { ...trussProps103({
       display: "df",
       alignItems: "aic",
       justifyContent: "jcsb",
@@ -24496,7 +24534,7 @@ function SidePanel(props) {
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-import { trussProps as trussProps103, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
+import { trussProps as trussProps104, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
 import { jsx as jsx183, jsxs as jsxs95 } from "react/jsx-runtime";
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
@@ -24538,7 +24576,7 @@ function TableReviewLayout(props) {
       bordered: true
     }, stickyHeader: true });
   }
-  return /* @__PURE__ */ jsxs95("div", { ...trussProps103({
+  return /* @__PURE__ */ jsxs95("div", { ...trussProps104({
     position: "fixed",
     top: "top0",
     bottom: "bottom0",
@@ -24562,7 +24600,7 @@ function TableReviewLayout(props) {
         ] }),
         /* @__PURE__ */ jsx183(Button, { label: "Close", onClick: closeAction, ...tid.closeButton })
       ] }),
-      /* @__PURE__ */ jsx183("div", { ...trussProps103({
+      /* @__PURE__ */ jsx183("div", { ...trussProps104({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -24573,7 +24611,7 @@ function TableReviewLayout(props) {
       }), ...tid.description, children: description })
     ] }),
     /* @__PURE__ */ jsxs95("div", { className: "fg1 df mh0", ...tid.content, children: [
-      /* @__PURE__ */ jsx183("div", { ...trussProps103({
+      /* @__PURE__ */ jsx183("div", { ...trussProps104({
         ...{
           flexGrow: "fg1",
           overflowY: "oya",
@@ -24598,7 +24636,7 @@ function TableReviewLayout(props) {
       }, className: "df fdc fs0 relative", children: [
         /* @__PURE__ */ jsxs95("div", { className: "absolute tp_neg32px df fdc aic l_neg24px z1", children: [
           /* @__PURE__ */ jsx183(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
-          /* @__PURE__ */ jsx183("div", { ...trussProps103({
+          /* @__PURE__ */ jsx183("div", { ...trussProps104({
             width: "w_1px",
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": "var(--b-field-border-default)"
@@ -24613,7 +24651,7 @@ function TableReviewLayout(props) {
 }
 
 // src/components/Logos/BeamLogo.tsx
-import { trussProps as trussProps104, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
+import { trussProps as trussProps105, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
 import { jsx as jsx184, jsxs as jsxs96 } from "react/jsx-runtime";
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24624,7 +24662,7 @@ function BeamLogo(props) {
     width: width2 = "auto",
     height = "auto"
   } = props;
-  return /* @__PURE__ */ jsxs96("svg", { viewBox: "0 0 500 500", xmlns: "http://www.w3.org/2000/svg", ...trussProps104({
+  return /* @__PURE__ */ jsxs96("svg", { viewBox: "0 0 500 500", xmlns: "http://www.w3.org/2000/svg", ...trussProps105({
     fill: ["fill_var", {
       "--fill": maybeCssVar51(fill)
     }],
@@ -24647,7 +24685,7 @@ function BeamLogo(props) {
 }
 
 // src/components/Logos/HomeboundLogo.tsx
-import { trussProps as trussProps105, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
+import { trussProps as trussProps106, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
 import { jsx as jsx185 } from "react/jsx-runtime";
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24658,7 +24696,7 @@ function HomeboundLogo(props) {
     width: width2 = "auto",
     height = "auto"
   } = props;
-  return /* @__PURE__ */ jsx185("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...trussProps105({
+  return /* @__PURE__ */ jsx185("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...trussProps106({
     fill: ["fill_var", {
       "--fill": maybeCssVar52(fill)
     }],
@@ -24674,7 +24712,7 @@ function HomeboundLogo(props) {
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect10, useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
 import { useCallback as useCallback33, useEffect as useEffect31, useRef as useRef60, useState as useState51 } from "react";
-import { trussProps as trussProps106, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
+import { trussProps as trussProps107, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
 import { jsx as jsx186, jsxs as jsxs97 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
@@ -24699,7 +24737,7 @@ function MaxLines({
     onResize
   });
   return /* @__PURE__ */ jsxs97("div", { children: [
-    /* @__PURE__ */ jsx186("div", { ref: elRef, ...trussProps106({
+    /* @__PURE__ */ jsx186("div", { ref: elRef, ...trussProps107({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
           "--WebkitLineClamp": maybeCssVar53(maxLines)
@@ -24715,7 +24753,7 @@ function MaxLines({
 }
 
 // src/components/Pagination.tsx
-import { trussProps as trussProps107 } from "@homebound/truss/runtime";
+import { trussProps as trussProps108 } from "@homebound/truss/runtime";
 import { jsx as jsx187, jsxs as jsxs98 } from "react/jsx-runtime";
 var defaultPage = {
   offset: 0,
@@ -24748,7 +24786,7 @@ function Pagination(props) {
     }
   }
   const tid = useTestIds(props, "pagination");
-  return /* @__PURE__ */ jsxs98("div", { ...trussProps107({
+  return /* @__PURE__ */ jsxs98("div", { ...trussProps108({
     display: "df",
     borderColor: ["bc_var", {
       "--borderColor": "var(--b-surface-separator)"
@@ -24806,7 +24844,7 @@ function toPageNumberSize(page) {
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver10 } from "@react-aria/utils";
 import { useCallback as useCallback34, useMemo as useMemo46, useRef as useRef61, useState as useState52 } from "react";
-import { trussProps as trussProps108, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
+import { trussProps as trussProps109, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
 import { jsx as jsx188, jsxs as jsxs99 } from "react/jsx-runtime";
 function ScrollShadows(props) {
   const {
@@ -24897,7 +24935,7 @@ function ScrollShadows(props) {
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ jsxs99("div", { ...trussProps108({
+  return /* @__PURE__ */ jsxs99("div", { ...trussProps109({
     display: "df",
     flexDirection: ["fd_var", {
       "--flexDirection": maybeCssVar54(!horizontal ? "column" : "row")
@@ -24913,7 +24951,7 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ jsx188("div", { ...trussProps108({
+    /* @__PURE__ */ jsx188("div", { ...trussProps109({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -24921,7 +24959,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx188("div", { ...trussProps108({
+    /* @__PURE__ */ jsx188("div", { ...trussProps109({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -24929,7 +24967,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx188("div", { ...trussProps108({
+    /* @__PURE__ */ jsx188("div", { ...trussProps109({
       ...xss,
       ...{
         overflow: "oa",
@@ -24951,7 +24989,7 @@ import { useCallback as useCallback36, useEffect as useEffect32, useMemo as useM
 // src/components/AppNav/AppNavGroupTrigger.tsx
 import { useMemo as useMemo47, useRef as useRef62 } from "react";
 import { mergeProps as mergeProps30, useButton as useButton11, useFocusRing as useFocusRing15, useHover as useHover18 } from "react-aria";
-import { trussProps as trussProps109, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
+import { trussProps as trussProps110, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
 import { jsx as jsx189, jsxs as jsxs100 } from "react/jsx-runtime";
 function AppNavGroupTrigger(props) {
   const {
@@ -25002,7 +25040,7 @@ function AppNavGroupTrigger(props) {
     })
   }), children: [
     label,
-    /* @__PURE__ */ jsx189("div", { ...trussProps109({
+    /* @__PURE__ */ jsx189("div", { ...trussProps110({
       ...{
         display: "df",
         alignItems: "aic",
@@ -25155,7 +25193,7 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-import { trussProps as trussProps110, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
+import { trussProps as trussProps111, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
 import { Fragment as Fragment43, jsx as jsx190, jsxs as jsxs101 } from "react/jsx-runtime";
 var __maybeInc25 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -25200,7 +25238,7 @@ function AppNavGroupDisclosure(props) {
   });
   return /* @__PURE__ */ jsxs101("div", { className: "df fdc", ...tid, children: [
     /* @__PURE__ */ jsx190(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, active: linkGroupHasActiveLink(linkGroup), onClick: onToggle, ...tid }),
-    /* @__PURE__ */ jsx190("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...trussProps110({
+    /* @__PURE__ */ jsx190("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...trussProps111({
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
@@ -25234,7 +25272,7 @@ function AppNavGroupMenu({
 }
 
 // src/components/AppNav/AppNavSectionView.tsx
-import { trussProps as trussProps111 } from "@homebound/truss/runtime";
+import { trussProps as trussProps112 } from "@homebound/truss/runtime";
 import { jsx as jsx192, jsxs as jsxs102 } from "react/jsx-runtime";
 function AppNavSectionView(props) {
   const {
@@ -25261,7 +25299,7 @@ function AppNavSectionView(props) {
       "--borderColor": "var(--b-surface-separator)"
     }]
   };
-  return /* @__PURE__ */ jsxs102("div", { ...trussProps111({
+  return /* @__PURE__ */ jsxs102("div", { ...trussProps112({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -25269,7 +25307,7 @@ function AppNavSectionView(props) {
     },
     ...showDivider ? dividerStyles : {}
   }), ...tid, children: [
-    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ jsx192("div", { ...trussProps111({
+    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ jsx192("div", { ...trussProps112({
       fontWeight: "fw6",
       fontSize: "fz_10px",
       lineHeight: "lh_14px",
@@ -25403,7 +25441,7 @@ function useHasSideNavLayoutProvider() {
 }
 
 // src/components/SideNav/SideNav.tsx
-import { trussProps as trussProps112 } from "@homebound/truss/runtime";
+import { trussProps as trussProps113 } from "@homebound/truss/runtime";
 import { jsx as jsx195, jsxs as jsxs103 } from "react/jsx-runtime";
 function SideNav(props) {
   const {
@@ -25420,7 +25458,7 @@ function SideNav(props) {
   const hideContent = panelCollapsed && !showContentWhenCollapsed;
   const hideItems = hideContent || panelCollapsed && !allItemsHaveIcons(items);
   return /* @__PURE__ */ jsxs103("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    !hideContent && top !== void 0 && /* @__PURE__ */ jsx195("div", { ...trussProps112({
+    !hideContent && top !== void 0 && /* @__PURE__ */ jsx195("div", { ...trussProps113({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -25431,7 +25469,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    !hideContent && /* @__PURE__ */ jsx195("div", { ...trussProps112({
+    !hideContent && /* @__PURE__ */ jsx195("div", { ...trussProps113({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -25444,7 +25482,7 @@ function SideNav(props) {
         paddingTop: "pt5"
       } : {}
     }), ...tid.items, children: !hideItems && /* @__PURE__ */ jsx195(AppNavItems, { items, panelCollapsed }) }),
-    !hideContent && footer !== void 0 && /* @__PURE__ */ jsx195("div", { ...trussProps112({
+    !hideContent && footer !== void 0 && /* @__PURE__ */ jsx195("div", { ...trussProps113({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -25462,7 +25500,7 @@ function SideNav(props) {
 // src/components/Stepper.tsx
 import { useRef as useRef64 } from "react";
 import { useButton as useButton12, useFocusRing as useFocusRing16, useHover as useHover19 } from "react-aria";
-import { trussProps as trussProps113, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
+import { trussProps as trussProps114, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
 import { jsx as jsx196, jsxs as jsxs104 } from "react/jsx-runtime";
 import { createElement as createElement6 } from "react";
 var __maybeInc26 = (inc) => {
@@ -25483,7 +25521,7 @@ function Stepper(props) {
   const minStepWidth = 100;
   const gap = 8;
   return /* @__PURE__ */ jsxs104("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ jsx196("ol", { ...trussProps113({
+    /* @__PURE__ */ jsx196("ol", { ...trussProps114({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -25493,7 +25531,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ createElement6("li", { ...trussProps113({
+      return /* @__PURE__ */ createElement6("li", { ...trussProps114({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -25505,7 +25543,7 @@ function Stepper(props) {
         }]
       }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx196(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ jsx196("div", { ...trussProps113({
+    /* @__PURE__ */ jsx196("div", { ...trussProps114({
       marginTop: "mt1",
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-field-border-default)"
@@ -25518,7 +25556,7 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ jsx196("div", { ...trussProps113({
+    }), children: /* @__PURE__ */ jsx196("div", { ...trussProps114({
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-primary)"
       }],
@@ -25561,7 +25599,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ jsxs104("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps113({
+  return /* @__PURE__ */ jsxs104("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps114({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -25638,7 +25676,7 @@ function StepIcon({
   if (state === "complete") {
     return /* @__PURE__ */ jsx196(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ jsx196("div", { className: "h_24px w_24px df aic jcc", children: /* @__PURE__ */ jsx196("div", { ...trussProps113({
+  return /* @__PURE__ */ jsx196("div", { className: "h_24px w_24px df aic jcc", children: /* @__PURE__ */ jsx196("div", { ...trussProps114({
     height: "h_10px",
     width: "w_10px",
     borderStyle: "bss",
@@ -25654,7 +25692,7 @@ function StepIcon({
 // src/components/StepperTabs/StepperTab.tsx
 import { useRef as useRef65 } from "react";
 import { mergeProps as mergeProps31, useButton as useButton13, useFocusRing as useFocusRing17, useHover as useHover20, VisuallyHidden as VisuallyHidden9 } from "react-aria";
-import { trussProps as trussProps114 } from "@homebound/truss/runtime";
+import { trussProps as trussProps115 } from "@homebound/truss/runtime";
 import { Fragment as Fragment45, jsx as jsx197, jsxs as jsxs105 } from "react/jsx-runtime";
 function StepperTab(props) {
   const {
@@ -25686,7 +25724,7 @@ function StepperTab(props) {
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
   const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const tid = useTestIds(props, "stepperTab");
-  return /* @__PURE__ */ jsxs105("button", { ref, ...mergeProps31(buttonProps, focusProps, hoverProps), "aria-label": label, ...trussProps114({
+  return /* @__PURE__ */ jsxs105("button", { ref, ...mergeProps31(buttonProps, focusProps, hoverProps), "aria-label": label, ...trussProps115({
     ...stepperTabStyles.baseStyles,
     ...getStateStyles(active, completed),
     ...isHovered && !disabled ? stepperTabStyles.hoverStyles : {},
@@ -25697,7 +25735,7 @@ function StepperTab(props) {
     !collapsed && /* @__PURE__ */ jsxs105(Fragment45, { children: [
       /* @__PURE__ */ jsxs105("span", { className: "dg jic mw0", children: [
         /* @__PURE__ */ jsx197("span", { className: "fw6 fz_14px lh_20px vis_hidden ga_1_1 oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wdb_break_all", "aria-hidden": true, children: label }),
-        /* @__PURE__ */ jsx197("span", { ...trussProps114({
+        /* @__PURE__ */ jsx197("span", { ...trussProps115({
           gridArea: "ga_1_1",
           overflow: "oh",
           display: "d_negwebkit_box",
@@ -25712,7 +25750,7 @@ function StepperTab(props) {
           } : {}
         }), children: label })
       ] }),
-      /* @__PURE__ */ jsx197("span", { ...trussProps114({
+      /* @__PURE__ */ jsx197("span", { ...trussProps115({
         flexShrink: "fs0",
         marginLeft: "ml1",
         transition: "transitionAll",
@@ -25724,7 +25762,7 @@ function StepperTab(props) {
         } : {}
       }), children: /* @__PURE__ */ jsx197(Icon, { icon: "check", inc: 2.5, ...tid.check }) })
     ] }),
-    /* @__PURE__ */ jsx197("span", { "aria-hidden": true, ...trussProps114(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
+    /* @__PURE__ */ jsx197("span", { "aria-hidden": true, ...trussProps115(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
     /* @__PURE__ */ jsx197(VisuallyHidden9, { children: completed ? "Complete" : "Not Complete" })
   ] });
 }
@@ -25806,7 +25844,7 @@ var stepperTabStyles = {
 };
 
 // src/components/StepperTabs/StepperTabs.tsx
-import { trussProps as trussProps115 } from "@homebound/truss/runtime";
+import { trussProps as trussProps116 } from "@homebound/truss/runtime";
 import { jsx as jsx198 } from "react/jsx-runtime";
 import { createElement as createElement7 } from "react";
 function StepperTabs(props) {
@@ -25823,7 +25861,7 @@ function StepperTabs(props) {
   const collapsed = isMobile || !!forceCollapsed;
   const capWidth = steps.length <= 3;
   const currentStepIndex = Math.max(0, steps.findIndex((step) => step.value === currentStep));
-  return /* @__PURE__ */ jsx198("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ jsx198("ol", { ...trussProps115({
+  return /* @__PURE__ */ jsx198("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ jsx198("ol", { ...trussProps116({
     padding: "p_0",
     margin: "m_0",
     listStyle: "lis_none",
@@ -25838,7 +25876,7 @@ function StepperTabs(props) {
   }), children: steps.map((step, idx) => {
     const isCurrent = idx === currentStepIndex;
     const isCompleted = idx < currentStepIndex;
-    return /* @__PURE__ */ createElement7("li", { ...trussProps115({
+    return /* @__PURE__ */ createElement7("li", { ...trussProps116({
       display: "df",
       flexGrow: "fg1",
       flexBasis: "fb_0",
@@ -25858,7 +25896,7 @@ var gapPx = 6;
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 import { createPortal as createPortal8 } from "react-dom";
-import { trussProps as trussProps116 } from "@homebound/truss/runtime";
+import { trussProps as trussProps117 } from "@homebound/truss/runtime";
 import { jsx as jsx199, jsxs as jsxs106 } from "react/jsx-runtime";
 function SuperDrawerHeader(props) {
   const {
@@ -25884,7 +25922,7 @@ function SuperDrawerHeader(props) {
       ] }),
       props.right && /* @__PURE__ */ jsx199("div", { className: "fs0", children: props.right })
     ] }) : /* @__PURE__ */ jsx199("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ jsx199("div", { ...trussProps116({
+    !hideControls && /* @__PURE__ */ jsx199("div", { ...trussProps117({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
@@ -25906,7 +25944,7 @@ function isStructuredProps(props) {
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
 import { motion as motion6 } from "framer-motion";
-import { trussProps as trussProps117, mergeProps as mergeProps32 } from "@homebound/truss/runtime";
+import { trussProps as trussProps118, mergeProps as mergeProps32 } from "@homebound/truss/runtime";
 import { Fragment as Fragment46, jsx as jsx200, jsxs as jsxs107 } from "react/jsx-runtime";
 var SuperDrawerContent = ({
   children,
@@ -25972,7 +26010,7 @@ var SuperDrawerContent = ({
   }
   return /* @__PURE__ */ jsxs107(Fragment46, { children: [
     wrapWithMotionAndMaybeBack(children),
-    actions && /* @__PURE__ */ jsx200("footer", { ...trussProps117({
+    actions && /* @__PURE__ */ jsx200("footer", { ...trussProps118({
       borderTopStyle: "bts_solid",
       borderTopWidth: "btw_1px",
       borderColor: ["bc_var", {
@@ -26058,7 +26096,7 @@ function useDnDGridContext() {
 }
 
 // src/components/DnDGrid/DnDGrid.tsx
-import { trussProps as trussProps118 } from "@homebound/truss/runtime";
+import { trussProps as trussProps119 } from "@homebound/truss/runtime";
 import { jsx as jsx202 } from "react/jsx-runtime";
 function DnDGrid(props) {
   const {
@@ -26243,7 +26281,7 @@ function DnDGrid(props) {
   return /* @__PURE__ */ jsx202(DnDGridContext.Provider, { value: {
     dragEl,
     onDragHandleKeyDown
-  }, children: /* @__PURE__ */ jsx202("div", { ref: gridEl, ...trussProps118({
+  }, children: /* @__PURE__ */ jsx202("div", { ref: gridEl, ...trussProps119({
     ...{
       containerType: "ctis",
       display: "dg"
@@ -26273,14 +26311,14 @@ function applyActiveStyles(el, activeStyles3) {
   const {
     className,
     style
-  } = trussProps118(activeStyles3);
+  } = trussProps119(activeStyles3);
   if (className) el.classList.add(...className.split(" ").filter(Boolean));
   if (style) setInlineStyles(el, style);
 }
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
 import { mergeProps as mergeProps33, useFocusRing as useFocusRing18, useHover as useHover21 } from "react-aria";
-import { trussProps as trussProps119 } from "@homebound/truss/runtime";
+import { trussProps as trussProps120 } from "@homebound/truss/runtime";
 import { jsx as jsx203 } from "react/jsx-runtime";
 function DnDGridItemHandle(props) {
   const {
@@ -26310,7 +26348,7 @@ function DnDGridItemHandle(props) {
     borderRadius: "br4",
     borderWidth: "bw1"
   };
-  return /* @__PURE__ */ jsx203("button", { ...trussProps119({
+  return /* @__PURE__ */ jsx203("button", { ...trussProps120({
     ...compact ? iconButtonCompact : iconButtonNormal,
     ...{
       cursor: "cur_grab",
@@ -26411,7 +26449,7 @@ var BaseFilter = class {
 
 // src/components/internal/CompoundField.tsx
 import { cloneElement as cloneElement3, useState as useState56 } from "react";
-import { trussProps as trussProps120 } from "@homebound/truss/runtime";
+import { trussProps as trussProps121 } from "@homebound/truss/runtime";
 import { jsx as jsx204, jsxs as jsxs109 } from "react/jsx-runtime";
 function CompoundField({
   children
@@ -26447,7 +26485,7 @@ function CompoundField({
     setHasFocusWithin(false);
   }
   return /* @__PURE__ */ jsxs109("div", { className: "df", onFocusCapture, onBlurCapture, children: [
-    /* @__PURE__ */ jsx204("div", { ...trussProps120({
+    /* @__PURE__ */ jsx204("div", { ...trussProps121({
       ...commonStyles,
       ...{
         borderLeftStyle: "bls_solid",
@@ -26462,7 +26500,7 @@ function CompoundField({
     }), children: cloneElement3(children[0], {
       internalProps
     }) }),
-    /* @__PURE__ */ jsx204("div", { ...trussProps120({
+    /* @__PURE__ */ jsx204("div", { ...trussProps121({
       ...{
         width: "w_1px",
         flex: "fn",
@@ -26476,7 +26514,7 @@ function CompoundField({
         }]
       }
     }) }),
-    /* @__PURE__ */ jsx204("div", { ...trussProps120({
+    /* @__PURE__ */ jsx204("div", { ...trussProps121({
       ...commonStyles,
       ...{
         flexGrow: "fg1",
@@ -27003,7 +27041,7 @@ var gridItemDataAttribute = "data-grid-item-span";
 var ResponsiveGridContext = createContext15(void 0);
 
 // src/components/Grid/ResponsiveGrid.tsx
-import { trussProps as trussProps121 } from "@homebound/truss/runtime";
+import { trussProps as trussProps122 } from "@homebound/truss/runtime";
 import { jsx as jsx214 } from "react/jsx-runtime";
 function ResponsiveGrid(props) {
   const {
@@ -27024,12 +27062,12 @@ function ResponsiveGrid(props) {
     gap,
     columns
   }), [minColumnWidth, gap, columns]);
-  return /* @__PURE__ */ jsx214(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ jsx214("div", { ...trussProps121(gridStyles), children }) });
+  return /* @__PURE__ */ jsx214(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ jsx214("div", { ...trussProps122(gridStyles), children }) });
 }
 
 // src/components/Grid/ResponsiveGridItem.tsx
 import { mergeProps as mergeProps34 } from "react-aria";
-import { trussProps as trussProps122 } from "@homebound/truss/runtime";
+import { trussProps as trussProps123 } from "@homebound/truss/runtime";
 
 // src/components/Grid/useResponsiveGridItem.ts
 import { useContext as useContext25, useEffect as useEffect35, useMemo as useMemo53 } from "react";
@@ -27096,7 +27134,7 @@ function ResponsiveGridItem(props) {
   } = useResponsiveGridItem({
     colSpan
   });
-  return /* @__PURE__ */ jsx215("div", { ...mergeProps34(gridItemProps, trussProps122(gridItemStyles)), children });
+  return /* @__PURE__ */ jsx215("div", { ...mergeProps34(gridItemProps, trussProps123(gridItemStyles)), children });
 }
 
 // src/components/HbLoadingSpinner.tsx
@@ -27214,7 +27252,7 @@ function useRegisterMobileSubNav(content2) {
 }
 
 // src/components/Navbar/NavbarMobileMenu.tsx
-import { trussProps as trussProps123, mergeProps as mergeProps35, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
+import { trussProps as trussProps124, mergeProps as mergeProps35, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
 import { Fragment as Fragment50, jsx as jsx219, jsxs as jsxs114 } from "react/jsx-runtime";
 function NavbarMobileMenu(props) {
   const {
@@ -27311,7 +27349,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: (e) => e.stopPropagation(), ...tid.mobileMenuDrawer, children: [
-      /* @__PURE__ */ jsxs114("div", { ...trussProps123({
+      /* @__PURE__ */ jsxs114("div", { ...trussProps124({
         ...{
           display: "df",
           alignItems: "aic",
@@ -27333,7 +27371,7 @@ function NavbarMobileDrawer({
       /* @__PURE__ */ jsx219("div", { className: "fg1 mh0 oh relative", children: /* @__PURE__ */ jsx219(AnimatePresence6, { initial: false, children: /* @__PURE__ */ jsxs114(
         motion7.nav,
         {
-          ...trussProps123({
+          ...trussProps124({
             ...{
               position: "absolute",
               top: "top0",
@@ -27404,7 +27442,7 @@ function useContentOverflow(enabled = true) {
 }
 
 // src/components/Navbar/Navbar.tsx
-import { trussProps as trussProps124 } from "@homebound/truss/runtime";
+import { trussProps as trussProps125 } from "@homebound/truss/runtime";
 import { jsx as jsx220, jsxs as jsxs115 } from "react/jsx-runtime";
 function Navbar(props) {
   const {
@@ -27424,7 +27462,7 @@ function Navbar(props) {
     overflows
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
-  return /* @__PURE__ */ jsx220(ContrastScope, { children: /* @__PURE__ */ jsxs115("nav", { ...trussProps124({
+  return /* @__PURE__ */ jsx220(ContrastScope, { children: /* @__PURE__ */ jsxs115("nav", { ...trussProps125({
     ...{
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface-raised)"
@@ -27443,7 +27481,7 @@ function Navbar(props) {
     /* @__PURE__ */ jsxs115("div", { className: "df aic gap3 fg1 mw0", children: [
       /* @__PURE__ */ jsxs115("div", { className: "df aic fs0 gap2", children: [
         showMobile && /* @__PURE__ */ jsx220(NavbarMobileMenu, { items, ...tid }),
-        /* @__PURE__ */ jsx220("div", { ...trussProps124({
+        /* @__PURE__ */ jsx220("div", { ...trussProps125({
           flexShrink: "fs0",
           ...hideBrandOnMobile && showMobile ? {
             display: "dn"
@@ -27452,7 +27490,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__ */ jsx220("div", { ref: containerRef, ...trussProps124({
+      /* @__PURE__ */ jsx220("div", { ref: containerRef, ...trussProps125({
         display: "df",
         alignItems: "aic",
         flexGrow: "fg1",
@@ -27584,7 +27622,7 @@ import { useEffect as useEffect39, useMemo as useMemo56, useRef as useRef68, use
 import { mergeProps as mergeProps36, useFocusRing as useFocusRing19, useHover as useHover22 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
-import { trussProps as trussProps125, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
+import { trussProps as trussProps126, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
 import { Fragment as Fragment51, jsx as jsx221, jsxs as jsxs116 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -27617,7 +27655,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__ */ jsx221(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx221("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps125(contentXss), children: selectedTab.render() }) })
+    /* @__PURE__ */ jsx221(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx221("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps126(contentXss), children: selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -27659,7 +27697,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ jsxs116("div", { ...trussProps125({
+  return /* @__PURE__ */ jsxs116("div", { ...trussProps126({
     ...{
       display: "df",
       alignItems: "aic",
@@ -27728,7 +27766,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...trussProps125({
+    ...trussProps126({
       ...baseStyles4,
       // Only tints the label while the tab is unselected; selected keeps its own darker treatment.
       ...aiMode && aiStyles,
@@ -27879,7 +27917,7 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps126, mergeProps as mergeProps37, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
+import { trussProps as trussProps127, mergeProps as mergeProps37, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
 import { jsx as jsx222, jsxs as jsxs117 } from "react/jsx-runtime";
 var __maybeInc28 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -27910,7 +27948,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__ */ jsxs117("div", { ...trussProps126({
+  const rail = showRail && /* @__PURE__ */ jsxs117("div", { ...trussProps127({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -27978,7 +28016,7 @@ function SideNavLayoutContent(props) {
     width: "w100"
   }), ...tid, children: [
     contrastRail ? /* @__PURE__ */ jsx222(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ jsx222("div", { ...trussProps126({
+    /* @__PURE__ */ jsx222("div", { ...trussProps127({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -28052,7 +28090,7 @@ var centeredPaddingX = {
 };
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-import { trussProps as trussProps127, mergeProps as mergeProps39, maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
+import { trussProps as trussProps128, mergeProps as mergeProps39, maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
 import { jsx as jsx224, jsxs as jsxs118 } from "react/jsx-runtime";
 var __maybeInc30 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28080,7 +28118,7 @@ function EnvironmentBannerLayout(props) {
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx224("div", { ...trussProps127({
+    }), children: /* @__PURE__ */ jsx224("div", { ...trussProps128({
       position: "fixed",
       top: "top0",
       left: "left0",
@@ -28096,14 +28134,14 @@ function EnvironmentBannerLayout(props) {
 }
 
 // src/layouts/FormSectionLayout/FormSectionLayout.tsx
-import { trussProps as trussProps131, maybeCssVar as maybeCssVar65 } from "@homebound/truss/runtime";
+import { trussProps as trussProps132, maybeCssVar as maybeCssVar65 } from "@homebound/truss/runtime";
 
 // src/forms/FormSection/FormSection.tsx
-import { trussProps as trussProps129, maybeCssVar as maybeCssVar63 } from "@homebound/truss/runtime";
+import { trussProps as trussProps130, maybeCssVar as maybeCssVar63 } from "@homebound/truss/runtime";
 
 // src/forms/FormSection/FormSectionChild.tsx
 import { useRef as useRef69 } from "react";
-import { trussProps as trussProps128 } from "@homebound/truss/runtime";
+import { trussProps as trussProps129 } from "@homebound/truss/runtime";
 import { jsx as jsx225, jsxs as jsxs119 } from "react/jsx-runtime";
 function FormSectionChild(props) {
   const {
@@ -28126,7 +28164,7 @@ function FormSectionChild(props) {
   return /* @__PURE__ */ jsxs119("div", { ...isDraggable ? {
     ...dragItemProps,
     ref: itemRef
-  } : {}, ...trussProps128({
+  } : {}, ...trussProps129({
     display: "df",
     flexDirection: "fdc",
     gap: "gap2",
@@ -28158,7 +28196,7 @@ function FormSection(props) {
     childSections
   } = props;
   const tid = useTestIds(props, "formSection");
-  return /* @__PURE__ */ jsxs120("div", { id: defaultTestId(title), ...trussProps129({
+  return /* @__PURE__ */ jsxs120("div", { id: defaultTestId(title), ...trussProps130({
     display: "df",
     flexDirection: "fdc",
     gap: "gap2",
@@ -28201,7 +28239,7 @@ function sortByOrderField(childSections) {
 }
 
 // src/layouts/FormSectionLayout/JumpLinksRail.tsx
-import { trussProps as trussProps130, maybeCssVar as maybeCssVar64 } from "@homebound/truss/runtime";
+import { trussProps as trussProps131, maybeCssVar as maybeCssVar64 } from "@homebound/truss/runtime";
 import { jsx as jsx227 } from "react/jsx-runtime";
 var __maybeInc31 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28212,7 +28250,7 @@ function JumpLinksRail(props) {
     activeId
   } = props;
   const tid = useTestIds(props, "jumpLinks");
-  return /* @__PURE__ */ jsx227("nav", { ...trussProps130({
+  return /* @__PURE__ */ jsx227("nav", { ...trussProps131({
     display: "df",
     flexDirection: "fdc",
     flexShrink: "fs0",
@@ -28290,7 +28328,7 @@ function FormSectionLayout(props) {
   });
   const showRail = withJumpLinks && jumpLinks.length >= 2 && !isMobile;
   const activeId = useActiveJumpLink(showRail ? jumpLinks.map((link) => link.id) : []);
-  const content2 = /* @__PURE__ */ jsxs121("div", { ...trussProps131({
+  const content2 = /* @__PURE__ */ jsxs121("div", { ...trussProps132({
     display: "df",
     flexDirection: "fdc",
     gap: "gap8",
@@ -28310,7 +28348,7 @@ function FormSectionLayout(props) {
   const form = /* @__PURE__ */ jsx228(CenteredLayout, { size: "sm", children: aiMode ? /* @__PURE__ */ jsx228(AiCard, { size: "lg", ...tid, children: content2 }) : content2 });
   const body = showRail ? /* @__PURE__ */ jsxs121("div", { className: "df w100 mb4", children: [
     /* @__PURE__ */ jsx228(JumpLinksRail, { links: jumpLinks, activeId, ...tid.jumpLinks }),
-    /* @__PURE__ */ jsx228("div", { ...trussProps131({
+    /* @__PURE__ */ jsx228("div", { ...trussProps132({
       flexGrow: "fg1",
       marginRight: ["mr_var", {
         "--marginRight": maybeCssVar65(__maybeInc32(jumpLinksRailReservation))
@@ -28519,7 +28557,7 @@ function useDocumentTitle(...titleSegments) {
 }
 
 // src/components/Headers/BaseHeader.tsx
-import { trussProps as trussProps132 } from "@homebound/truss/runtime";
+import { trussProps as trussProps133 } from "@homebound/truss/runtime";
 import { jsx as jsx231, jsxs as jsxs123 } from "react/jsx-runtime";
 function BaseHeader(props) {
   const {
@@ -28532,7 +28570,7 @@ function BaseHeader(props) {
   } = props;
   const tid = useTestIds(otherProps, "header");
   useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ jsxs123("header", { ...tid, ...trussProps132({
+  return /* @__PURE__ */ jsxs123("header", { ...tid, ...trussProps133({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -28546,7 +28584,7 @@ function BaseHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }]
   }), children: [
-    /* @__PURE__ */ jsxs123("div", { ...trussProps132({
+    /* @__PURE__ */ jsxs123("div", { ...trussProps133({
       ...{
         display: "df",
         justifyContent: "jcsb",
@@ -28562,7 +28600,7 @@ function BaseHeader(props) {
     }), children: [
       /* @__PURE__ */ jsxs123("div", { className: "mw0", children: [
         breadcrumbs && /* @__PURE__ */ jsx231(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ jsx231("h1", { ...tid.title, ...trussProps132({
+        /* @__PURE__ */ jsx231("h1", { ...tid.title, ...trussProps133({
           fontWeight: "fw6",
           fontSize: "fz_20px",
           lineHeight: "lh_28px",
@@ -28578,8 +28616,8 @@ function BaseHeader(props) {
 }
 
 // src/components/Headers/PageHeader.tsx
-import { trussProps as trussProps133 } from "@homebound/truss/runtime";
-import { jsx as jsx232, jsxs as jsxs124 } from "react/jsx-runtime";
+import { trussProps as trussProps134 } from "@homebound/truss/runtime";
+import { Fragment as Fragment52, jsx as jsx232, jsxs as jsxs124 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
     tabs,
@@ -28588,12 +28626,21 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  const hasActions = !!actions && actions.length > 0;
-  return /* @__PURE__ */ jsx232(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ jsxs124("div", { className: "df gap1 fs0", ...tid.actions, children: [
+  const {
+    sm
+  } = useBreakpoint();
+  const {
+    bottomSlotActions,
+    rightSlotActions
+  } = splitHeaderActionsOnSm(actions, sm);
+  return /* @__PURE__ */ jsx232(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ jsxs124("div", { className: "df gap2 fs0", ...tid.actions, children: [
     /* @__PURE__ */ jsx232(AutoSaveIndicator, { hideOnIdle: true }),
     rightSlot,
-    hasActions && /* @__PURE__ */ jsx232(HeaderActions, { actions, collapseOnSm: true })
-  ] }), bottomSlot: tabs && /* @__PURE__ */ jsx232("div", { ...trussProps133(pageContentPaddingX), children: /* @__PURE__ */ jsx232(Tabs, { ...tabs, ...tid.tabs }) }) });
+    rightSlotActions.length > 0 && /* @__PURE__ */ jsx232(HeaderActions, { actions: rightSlotActions, collapseOnSm: true })
+  ] }), bottomSlot: (bottomSlotActions.length > 0 || tabs) && /* @__PURE__ */ jsxs124(Fragment52, { children: [
+    bottomSlotActions.length > 0 && /* @__PURE__ */ jsx232("div", { ...trussProps134(pageContentPaddingX), ...tid.bottomSlot, children: /* @__PURE__ */ jsx232(HeaderActions, { actions: bottomSlotActions }) }),
+    tabs && /* @__PURE__ */ jsx232("div", { ...trussProps134(pageContentPaddingX), children: /* @__PURE__ */ jsx232(Tabs, { ...tabs, ...tid.tabs }) })
+  ] }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -28757,7 +28804,7 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-import { trussProps as trussProps134, mergeProps as mergeProps42, maybeCssVar as maybeCssVar68 } from "@homebound/truss/runtime";
+import { trussProps as trussProps135, mergeProps as mergeProps42, maybeCssVar as maybeCssVar68 } from "@homebound/truss/runtime";
 import { jsx as jsx237, jsxs as jsxs127 } from "react/jsx-runtime";
 var __maybeInc35 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28818,7 +28865,7 @@ function WorkflowPageLayout(props) {
       }, {
         flexShrink: "fs0",
         width: "w100"
-      }), children: /* @__PURE__ */ jsx237("div", { ref: headerMetricsRef, ...trussProps134({
+      }), children: /* @__PURE__ */ jsx237("div", { ref: headerMetricsRef, ...trussProps135({
         position: "fixed",
         left: "left0",
         width: ["w_var", {
@@ -28832,7 +28879,7 @@ function WorkflowPageLayout(props) {
         }],
         transition: "transitionAll"
       }), ...tid.header, children: /* @__PURE__ */ jsx237(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? void 0 : actions, stepperTabs }) }) }),
-      /* @__PURE__ */ jsx237("div", { ...trussProps134({
+      /* @__PURE__ */ jsx237("div", { ...trussProps135({
         ...{
           display: "df",
           flexDirection: "fdc",
@@ -28848,13 +28895,13 @@ function WorkflowPageLayout(props) {
           }]
         }
       }), ...tid.body, children }),
-      showFooter && /* @__PURE__ */ jsx237("div", { ...trussProps134({
+      showFooter && /* @__PURE__ */ jsx237("div", { ...trussProps135({
         flexShrink: "fs0",
         width: "w100",
         height: ["h_var", {
           "--height": `${mobileFooterHeightPx}px`
         }]
-      }), children: /* @__PURE__ */ jsx237("div", { ...trussProps134({
+      }), children: /* @__PURE__ */ jsx237("div", { ...trussProps135({
         ...{
           position: "fixed",
           bottom: "bottom0",
@@ -29044,7 +29091,7 @@ function BoundSelectAndTextField(props) {
 }
 
 // src/forms/FormHeading.tsx
-import { trussProps as trussProps135 } from "@homebound/truss/runtime";
+import { trussProps as trussProps136 } from "@homebound/truss/runtime";
 import { jsx as jsx242 } from "react/jsx-runtime";
 function FormHeading(props) {
   const {
@@ -29055,7 +29102,7 @@ function FormHeading(props) {
   } = props;
   return (
     // Add space before the heading, but only if it's not first.
-    /* @__PURE__ */ jsx242("h3", { ...trussProps135({
+    /* @__PURE__ */ jsx242("h3", { ...trussProps136({
       ...{
         fontWeight: "fw4",
         fontSize: "fz_16px",
@@ -29072,7 +29119,7 @@ FormHeading.isFormHeading = true;
 
 // src/forms/StaticField.tsx
 import { useId as useId3 } from "@react-aria/utils";
-import { trussProps as trussProps136 } from "@homebound/truss/runtime";
+import { trussProps as trussProps137 } from "@homebound/truss/runtime";
 import { jsx as jsx243, jsxs as jsxs129 } from "react/jsx-runtime";
 function StaticField(props) {
   const {
@@ -29086,14 +29133,14 @@ function StaticField(props) {
   } = props;
   const tid = useTestIds(props, typeof label === "string" ? defaultTestId(label) : "staticField");
   const id = useId3();
-  return /* @__PURE__ */ jsxs129("div", { ...trussProps136({
+  return /* @__PURE__ */ jsxs129("div", { ...trussProps137({
     ...labelStyle === "left" ? {
       display: "df",
       justifyContent: "jcsb",
       maxWidth: "maxw100"
     } : {}
   }), ...tid.container, children: [
-    /* @__PURE__ */ jsx243("label", { ...trussProps136({
+    /* @__PURE__ */ jsx243("label", { ...trussProps137({
       display: "db",
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -29103,7 +29150,7 @@ function StaticField(props) {
       }],
       marginBottom: "mb_4px"
     }), htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ jsx243("div", { id, ...trussProps136({
+    /* @__PURE__ */ jsx243("div", { id, ...trussProps137({
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -29134,7 +29181,7 @@ function useFilter4({ filterDefs }) {
 import { useCallback as useCallback44, useRef as useRef75 } from "react";
 import { useComboBox as useComboBox3, useOverlayPosition as useOverlayPosition6 } from "react-aria";
 import { Item as Item5, useComboBoxState as useComboBoxState3 } from "react-stately";
-import { Fragment as Fragment52, jsx as jsx244, jsxs as jsxs130 } from "react/jsx-runtime";
+import { Fragment as Fragment53, jsx as jsx244, jsxs as jsxs130 } from "react/jsx-runtime";
 function Autocomplete(props) {
   const {
     onSelect,
@@ -29205,7 +29252,7 @@ function Autocomplete(props) {
     // Ensures the menu never gets too small.
     minWidth: 200
   };
-  return /* @__PURE__ */ jsxs130(Fragment52, { children: [
+  return /* @__PURE__ */ jsxs130(Fragment53, { children: [
     /* @__PURE__ */ jsx244(
       TextFieldBase,
       {
@@ -29250,7 +29297,7 @@ function Autocomplete(props) {
 import { useRef as useRef76, useState as useState66 } from "react";
 import { useFocusRing as useFocusRing20, useHover as useHover23, usePress as usePress2, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden10 } from "react-aria";
 import { useToggleState as useToggleState2 } from "react-stately";
-import { trussProps as trussProps137 } from "@homebound/truss/runtime";
+import { trussProps as trussProps138 } from "@homebound/truss/runtime";
 import { jsx as jsx245, jsxs as jsxs131 } from "react/jsx-runtime";
 function ToggleButton(props) {
   const {
@@ -29315,7 +29362,7 @@ function ToggleButton(props) {
     ...focusProps,
     ...hoverProps,
     ...pressProps,
-    ...trussProps137({
+    ...trussProps138({
       // Gray500 off-state has no semantic match — keep palette (OnSurfaceMuted is Gray700).
       ...{
         borderRadius: "br4",