@homebound/beam 4.6.0 → 4.7.0

package/dist/index.cjs

@@ -19256,6 +19256,7 @@ function Filters(props) {
 var _Filters = (0, import_react87.memo)(Filters);
 
 // src/components/Headers/HeaderActions.tsx
+var import_runtime82 = require("@homebound/truss/runtime");
 var import_jsx_runtime109 = require("react/jsx-runtime");
 function HeaderActions(props) {
   const {
@@ -19269,26 +19270,54 @@ function HeaderActions(props) {
   } = useBreakpoint();
   const collapse = collapseOnSm && sm && actions.length > 1;
   if (collapse) {
-    return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "df aic gap1 fs0", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ButtonMenu, { trigger: {
+    return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { ...(0, import_runtime82.trussProps)(actionRowCss), ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ButtonMenu, { trigger: {
       icon: "verticalDots",
       variant: "outline"
     }, items: toMenuItems(actions) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "df aic gap1 fs0", ...tid, children: actions.map((action, i) => {
-    const key = headerActionKey(action, i);
-    if (action.kind === "icon") {
-      return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(IconButton, { ...action, variant: "outline" }, key);
-    }
-    if (action.kind === "menu") {
-      const {
-        kind,
-        ...menuProps
-      } = action;
-      void kind;
-      return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ButtonMenu, { ...menuProps }, key);
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Button, { ...action }, key);
-  }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { ...(0, import_runtime82.trussProps)(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__ */ (0, import_jsx_runtime109.jsx)(IconButton, { ...iconProps, variant: "outline" }, key);
+  }
+  if (action.kind === "menu") {
+    const {
+      kind: _kind2,
+      keepVisible: _keepVisible2,
+      ...menuProps
+    } = action;
+    return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ButtonMenu, { ...menuProps }, key);
+  }
+  const {
+    keepVisible: _keepVisible,
+    kind: _kind,
+    ...buttonProps
+  } = action;
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Button, { ...buttonProps }, key);
 }
 function headerActionKey(action, index) {
   if (action.kind === "icon") return `${action.icon}-${index}`;
@@ -19328,7 +19357,7 @@ function toMenuItems(actions) {
 }
 
 // src/components/Headers/ContentHeader.tsx
-var import_runtime82 = require("@homebound/truss/runtime");
+var import_runtime83 = require("@homebound/truss/runtime");
 var import_jsx_runtime110 = require("react/jsx-runtime");
 function ContentHeader(props) {
   const {
@@ -19342,6 +19371,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
@@ -19359,7 +19396,7 @@ function ContentHeader(props) {
   if (!title && !description && !actions && !withAutoSave) {
     return null;
   }
-  const descriptionEl = description && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { ...(0, import_runtime82.trussProps)({
+  const descriptionEl = description && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { ...(0, import_runtime83.trussProps)({
     fontWeight: "fw4",
     fontSize: "fz_14px",
     lineHeight: "lh_20px",
@@ -19367,7 +19404,7 @@ function ContentHeader(props) {
       "--color": "var(--b-on-surface)"
     }]
   }), ...tid.description, children: description });
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { ...(0, import_runtime82.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { ...(0, import_runtime83.trussProps)({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -19385,13 +19422,14 @@ function ContentHeader(props) {
     /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "df aic jcsb mw0", children: [
       title ? /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "df aic gap1 mw0", children: [
         startAdornment,
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Heading, { ...(0, import_runtime82.trussProps)(titleCss), ...tid.title, children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Heading, { ...(0, import_runtime83.trussProps)(titleCss), ...tid.title, children: title })
       ] }) : descriptionEl,
-      (withAutoSave || actions) && /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "df gap1 fs0", ...tid.actions, children: [
+      showActionsSlot && /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "df gap2 fs0", ...tid.actions, children: [
         withAutoSave && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(AutoSaveIndicator, {}),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(HeaderActions, { actions })
+        rightSlotActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(HeaderActions, { actions: rightSlotActions })
       ] })
     ] }),
+    bottomSlotActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { ...tid.bottomSlot, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(HeaderActions, { actions: bottomSlotActions }) }),
     title && descriptionEl
   ] });
 }
@@ -19423,7 +19461,7 @@ var headingByLevel = {
 };
 
 // src/components/InlineFeedbackBanner.tsx
-var import_runtime83 = require("@homebound/truss/runtime");
+var import_runtime84 = require("@homebound/truss/runtime");
 var import_jsx_runtime111 = require("react/jsx-runtime");
 function InlineFeedbackBanner(props) {
   const {
@@ -19449,7 +19487,7 @@ function InlineFeedbackBanner(props) {
     text: fallbackTagText,
     iconOnly: true
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { ...(0, import_runtime83.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { ...(0, import_runtime84.trussProps)({
     display: "df",
     alignItems: "ais",
     gap: "gap1",
@@ -19468,12 +19506,12 @@ function InlineFeedbackBanner(props) {
     borderStyle: "bss",
     borderWidth: "bw1",
     borderColor: ["bc_var", {
-      "--borderColor": (0, import_runtime83.maybeCssVar)(borderColor)
+      "--borderColor": (0, import_runtime84.maybeCssVar)(borderColor)
     }],
     boxShadow: "bshBasic"
   }), ...tid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("span", { className: "df fs0", children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Tag, { ...tagProps, ...tid.tag }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("span", { ...(0, import_runtime83.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("span", { ...(0, import_runtime84.trussProps)({
       flexGrow: "fg1",
       minWidth: "mw0",
       paddingTop: "pt_1px",
@@ -19506,7 +19544,7 @@ var typeStyles2 = {
 // src/components/JumpLink.tsx
 var import_react88 = require("react");
 var import_react_aria38 = require("react-aria");
-var import_runtime84 = require("@homebound/truss/runtime");
+var import_runtime85 = require("@homebound/truss/runtime");
 var import_jsx_runtime112 = require("react/jsx-runtime");
 function JumpLink(props) {
   const {
@@ -19549,7 +19587,7 @@ function JumpLink(props) {
       });
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("a", { ref, ...(0, import_react_aria38.mergeProps)(linkProps, focusProps, hoverProps), ...tid, ...(0, import_runtime84.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("a", { ref, ...(0, import_react_aria38.mergeProps)(linkProps, focusProps, hoverProps), ...tid, ...(0, import_runtime85.trussProps)({
     ...jumpLinkStyles.baseStyles,
     ...active && jumpLinkStyles.activeStyles,
     ...isHovered && !disabled && jumpLinkStyles.hoverStyles,
@@ -19611,7 +19649,7 @@ var import_react_aria55 = require("react-aria");
 var import_react108 = require("react");
 
 // src/components/LoadingSkeleton.tsx
-var import_runtime85 = require("@homebound/truss/runtime");
+var import_runtime86 = require("@homebound/truss/runtime");
 var import_jsx_runtime113 = require("react/jsx-runtime");
 function LoadingSkeleton({
   rows = 1,
@@ -19624,18 +19662,18 @@ function LoadingSkeleton({
   const rowHeight = sizeToPixels2[size];
   const rowCells = (rowNumber) => {
     const flexGrowForCell = randomizeWidths ? getRandomizedFlexBasisByRowIndex(rowNumber) : 1;
-    return cellArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { ...(0, import_runtime85.trussProps)({
+    return cellArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { ...(0, import_runtime86.trussProps)({
       borderRadius: "br4",
       animation: "anim_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite",
       flexGrow: ["flexGrow_var", {
-        "--flexGrow": (0, import_runtime85.maybeCssVar)(flexGrowForCell)
+        "--flexGrow": (0, import_runtime86.maybeCssVar)(flexGrowForCell)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-loader-fill)"
       }]
     }) }, `row-${rowNumber}-cell-${i}`));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { ...(0, import_runtime85.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { ...(0, import_runtime86.trussProps)({
     display: "df",
     gap: "gap1",
     marginBottom: "mb1",
@@ -19709,10 +19747,10 @@ var import_mobx_react5 = require("mobx-react");
 var import_react89 = require("react");
 var import_react_aria39 = require("react-aria");
 var import_react_stately10 = require("react-stately");
-var import_runtime87 = require("@homebound/truss/runtime");
+var import_runtime88 = require("@homebound/truss/runtime");
 
 // src/inputs/internal/LabeledGroupField.tsx
-var import_runtime86 = require("@homebound/truss/runtime");
+var import_runtime87 = require("@homebound/truss/runtime");
 var import_jsx_runtime115 = require("react/jsx-runtime");
 function LabeledGroupField(props) {
   const {
@@ -19731,14 +19769,14 @@ function LabeledGroupField(props) {
   const isHiddenLabel = labelStyle === "hidden";
   const isLeftLabel = labelStyle === "left";
   const labelElement = /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: isHiddenLabel, inline: isLeftLabel });
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { ...groupProps, ...(0, import_runtime86.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { ...groupProps, ...(0, import_runtime87.trussProps)({
     width: "w100",
     ...isLeftLabel ? {
       display: "df",
       flexDirection: "fdr"
     } : {}
   }), onBlur, onFocus, ...tid, children: [
-    isLeftLabel ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { ...(0, import_runtime86.trussProps)({
+    isLeftLabel ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { ...(0, import_runtime87.trussProps)({
       ...!isHiddenLabel ? {
         width: "w50"
       } : {}
@@ -19777,10 +19815,10 @@ function CheckboxGroup(props) {
   } = (0, import_react_aria39.useCheckboxGroup)(props, state);
   const tid = useTestIds(props, defaultTestId(label));
   const labelSuffix = useLabelSuffix(required, false);
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, labelSuffix, onBlur, onFocus, tid, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { ...(0, import_runtime87.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, labelSuffix, onBlur, onFocus, tid, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { ...(0, import_runtime88.trussProps)({
     display: "dg",
     gridTemplateColumns: ["gtc_var", {
-      "--gridTemplateColumns": (0, import_runtime87.maybeCssVar)(`repeat(${columns}, auto)`)
+      "--gridTemplateColumns": (0, import_runtime88.maybeCssVar)(`repeat(${columns}, auto)`)
     }],
     gap: "gap2"
   }), children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(CheckboxGroupItem, { ...option, groupState: state, selected: state.value.includes(option.value) }, option.value)) }) });
@@ -19971,7 +20009,7 @@ var import_react_stately11 = require("react-stately");
 
 // src/components/internal/DatePicker/DateRangePicker.tsx
 var import_react_day_picker4 = require("react-day-picker");
-var import_runtime88 = require("@homebound/truss/runtime");
+var import_runtime89 = require("@homebound/truss/runtime");
 var import_jsx_runtime119 = require("react/jsx-runtime");
 function DateRangePicker(props) {
   const {
@@ -19982,7 +20020,7 @@ function DateRangePicker(props) {
     useYearPicker
   } = props;
   const tid = useTestIds(props, "datePicker");
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { ...(0, import_runtime88.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { ...(0, import_runtime89.trussProps)({
     display: "dib",
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface-raised)"
@@ -20003,7 +20041,7 @@ function DateRangePicker(props) {
 }
 
 // src/inputs/DateFields/DateFieldBase.tsx
-var import_runtime89 = require("@homebound/truss/runtime");
+var import_runtime90 = require("@homebound/truss/runtime");
 var import_jsx_runtime120 = require("react/jsx-runtime");
 function DateFieldBase(props) {
   const {
@@ -20157,7 +20195,7 @@ function DateFieldBase(props) {
     setInputValue("");
     onChange(void 0);
   } }) });
-  const calendarButton = /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, ...(0, import_runtime89.trussProps)({
+  const calendarButton = /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, ...(0, import_runtime90.trussProps)({
     ...isDisabled ? {
       cursor: "cursorNotAllowed"
     } : {}
@@ -20405,7 +20443,7 @@ var import_mobx_react9 = require("mobx-react");
 
 // src/inputs/MultiLineSelectField.tsx
 var import_react92 = require("react");
-var import_runtime90 = require("@homebound/truss/runtime");
+var import_runtime91 = require("@homebound/truss/runtime");
 var import_jsx_runtime127 = require("react/jsx-runtime");
 function MultiLineSelectField(props) {
   const {
@@ -20420,18 +20458,18 @@ function MultiLineSelectField(props) {
   const tid = useTestIds(props, "");
   const [isDisplayed, setIsDisplayed] = (0, import_react92.useState)(true);
   const currentOptions = options.filter((o) => !values.includes(getOptionValue(o)));
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { ...(0, import_runtime90.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { ...(0, import_runtime91.trussProps)({
     marginTop: "mt1",
     ...labelStyle === "left" ? {
       display: "df"
     } : {}
   }), children: [
-    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { ...(0, import_runtime90.trussProps)({
+    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { ...(0, import_runtime91.trussProps)({
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
     }), children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Label, { ...tid.label, label: props.label }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { ...(0, import_runtime90.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { ...(0, import_runtime91.trussProps)({
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
@@ -20522,7 +20560,7 @@ var import_react_aria42 = require("react-aria");
 // src/inputs/SelectCard/SelectCardShell.tsx
 var import_react93 = require("react");
 var import_react_aria41 = require("react-aria");
-var import_runtime91 = require("@homebound/truss/runtime");
+var import_runtime92 = require("@homebound/truss/runtime");
 var import_jsx_runtime129 = require("react/jsx-runtime");
 function SelectCardShell(props) {
   const {
@@ -20608,7 +20646,7 @@ function SelectCardShell(props) {
       }],
       backgroundColor: "bgBlue50",
       boxShadow: ["boxShadow_var", {
-        "--boxShadow": (0, import_runtime91.maybeCssVar)(`inset 0 0 0 1px ${maybeCssVar("--b-primary" /* Primary */)}`)
+        "--boxShadow": (0, import_runtime92.maybeCssVar)(`inset 0 0 0 1px ${maybeCssVar("--b-primary" /* Primary */)}`)
       }]
     },
     ...isDisabled && (isSelected ? {
@@ -20634,7 +20672,7 @@ function SelectCardShell(props) {
   return maybeTooltip({
     title: resolveTooltip(isDisabled, tooltip),
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("label", { ...(0, import_runtime91.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("label", { ...(0, import_runtime92.trussProps)({
       ...styles,
       ...{
         cursor: "cursorPointer",
@@ -20647,7 +20685,7 @@ function SelectCardShell(props) {
 }
 
 // src/inputs/SelectCard/GridSelectCard.tsx
-var import_runtime92 = require("@homebound/truss/runtime");
+var import_runtime93 = require("@homebound/truss/runtime");
 var import_jsx_runtime130 = require("react/jsx-runtime");
 function GridSelectCard(props) {
   const {
@@ -20667,7 +20705,7 @@ function GridSelectCard(props) {
   const tid = useTestIds(props, defaultTestId(label));
   return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(SelectCardShell, { label, selected: isSelected, disabled: isDisabled, tooltip, view: "grid", layout, __storyState, ...others, children: [
     /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_react_aria42.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("input", { ...inputProps, ...tid.value }) }),
-    image ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("img", { src: image, alt: "", ...(0, import_runtime92.trussProps)({
+    image ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("img", { src: image, alt: "", ...(0, import_runtime93.trussProps)({
       height: "h_100px",
       width: "w_100px",
       objectFit: "objectContain",
@@ -20677,13 +20715,13 @@ function GridSelectCard(props) {
       } : {}
     }), ...tid.img }) : icon && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon, inc: 4, color: isDisabled ? "--b-on-surface-disabled" /* OnSurfaceDisabled */ : "--b-on-surface" /* OnSurface */ }),
     /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("span", { className: "df fdc g_4px w100", children: [
-      tag && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { ...(0, import_runtime92.trussProps)({
+      tag && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { ...(0, import_runtime93.trussProps)({
         display: "df",
         ...layout !== "horizontal" ? {
           justifyContent: "jcc"
         } : {}
       }), children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tag, { type: tag.type, text: tag.text, ...tid.tag }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { ...(0, import_runtime92.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { ...(0, import_runtime93.trussProps)({
         fontWeight: "fw6",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -20693,7 +20731,7 @@ function GridSelectCard(props) {
           }]
         } : {}
       }), children: label }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { ...(0, import_runtime92.trussProps)({
+      description && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { ...(0, import_runtime93.trussProps)({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -20715,10 +20753,10 @@ var import_react_aria44 = require("react-aria");
 
 // src/inputs/SelectCard/StyledRadio.tsx
 var import_react_aria43 = require("react-aria");
-var import_runtime94 = require("@homebound/truss/runtime");
+var import_runtime95 = require("@homebound/truss/runtime");
 
 // src/inputs/internal/radioStyles.ts
-var import_runtime93 = require("@homebound/truss/runtime");
+var import_runtime94 = require("@homebound/truss/runtime");
 var whiteCircle = "data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='4'/%3e%3c/svg%3e";
 var radioReset = {
   ...{
@@ -20774,7 +20812,7 @@ var radioChecked = {
   },
   ...{
     backgroundImage: ["backgroundImage_var", {
-      "--backgroundImage": (0, import_runtime93.maybeCssVar)(`url("${whiteCircle}")`)
+      "--backgroundImage": (0, import_runtime94.maybeCssVar)(`url("${whiteCircle}")`)
     }]
   },
   ...{
@@ -20843,7 +20881,7 @@ function StyledRadio(props) {
     isDisabled
   });
   const tid = useTestIds(props, label ? defaultTestId(label) : void 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("input", { type: "radio", ...(0, import_runtime94.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("input", { type: "radio", ...(0, import_runtime95.trussProps)({
     ...radioReset,
     ...radioDefault,
     ...getRadioStateStyles({
@@ -20858,7 +20896,7 @@ function StyledRadio(props) {
 }
 
 // src/inputs/SelectCard/ListSelectCard.tsx
-var import_runtime95 = require("@homebound/truss/runtime");
+var import_runtime96 = require("@homebound/truss/runtime");
 var import_jsx_runtime132 = require("react/jsx-runtime");
 function ListSelectCard(props) {
   const {
@@ -20882,7 +20920,7 @@ function ListSelectCard(props) {
         // Styled radio is an input, so we can use the inputProps directly
         /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(StyledRadio, { ...tid, label, isDisabled, isSelected, inputProps })
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { ...(0, import_runtime95.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { ...(0, import_runtime96.trussProps)({
         fontWeight: "fw6",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -20897,7 +20935,7 @@ function ListSelectCard(props) {
       }), children: label }),
       tag && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Tag, { type: tag.type, text: tag.text, ...tid.tag })
     ] }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { ...(0, import_runtime95.trussProps)({
+    description && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { ...(0, import_runtime96.trussProps)({
       marginLeft: "ml3",
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -20952,7 +20990,7 @@ function SelectCardCheckboxGroupItem(props) {
 }
 
 // src/inputs/SelectCard/utils.ts
-var import_runtime96 = require("@homebound/truss/runtime");
+var import_runtime97 = require("@homebound/truss/runtime");
 function getNextSelectCardGroupValues({
   currentValues,
   clickedValue,
@@ -20991,14 +21029,14 @@ function getSelectCardOptionsCss({
   return {
     display: "dg",
     gridTemplateColumns: ["gtc_var", {
-      "--gridTemplateColumns": (0, import_runtime96.maybeCssVar)(`repeat(auto-fill, minmax(${cardWidth}px, 1fr))`)
+      "--gridTemplateColumns": (0, import_runtime97.maybeCssVar)(`repeat(auto-fill, minmax(${cardWidth}px, 1fr))`)
     }],
     gap: "gap2"
   };
 }
 
 // src/inputs/SelectCard/MultiSelectCardGroup.tsx
-var import_runtime97 = require("@homebound/truss/runtime");
+var import_runtime98 = require("@homebound/truss/runtime");
 var import_jsx_runtime134 = require("react/jsx-runtime");
 function MultiSelectCardGroup(props) {
   const {
@@ -21040,7 +21078,7 @@ function MultiSelectCardGroup(props) {
     label,
     isDisabled
   }, state);
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { ...(0, import_runtime97.trussProps)(getSelectCardOptionsCss({
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { ...(0, import_runtime98.trussProps)(getSelectCardOptionsCss({
     view,
     hasDescription,
     layout,
@@ -21076,7 +21114,7 @@ var import_mobx_react11 = require("mobx-react");
 var import_react96 = require("react");
 
 // src/forms/SelectedOptionPill.tsx
-var import_runtime98 = require("@homebound/truss/runtime");
+var import_runtime99 = require("@homebound/truss/runtime");
 var import_jsx_runtime136 = require("react/jsx-runtime");
 function SelectedOptionPill(props) {
   const {
@@ -21088,7 +21126,7 @@ function SelectedOptionPill(props) {
   } = props;
   const tid = useTestIds(props, "selectedOptionPill");
   return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "df fdc gap1 w100", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { ...(0, import_runtime98.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { ...(0, import_runtime99.trussProps)({
       // Setting border-radius to 999px to make it a pill shape.
       ...{
         display: "df",
@@ -21107,7 +21145,7 @@ function SelectedOptionPill(props) {
       ...aiMode ? {
         backgroundImage: "aiBackground",
         color: ["color_var", {
-          "--color": (0, import_runtime98.maybeCssVar)("rgba(91, 33, 182, 1)" /* Purple800 */)
+          "--color": (0, import_runtime99.maybeCssVar)("rgba(91, 33, 182, 1)" /* Purple800 */)
         }]
       } : {
         backgroundColor: "bgWhite",
@@ -21481,7 +21519,7 @@ var import_mobx_react13 = require("mobx-react");
 var import_react98 = require("react");
 var import_react_aria48 = require("react-aria");
 var import_react_stately14 = require("react-stately");
-var import_runtime99 = require("@homebound/truss/runtime");
+var import_runtime100 = require("@homebound/truss/runtime");
 var import_jsx_runtime142 = require("react/jsx-runtime");
 var nextNameId = 0;
 function RadioGroupField(props) {
@@ -21518,7 +21556,7 @@ function RadioGroupField(props) {
   }, state);
   return (
     // default styling to position `<Label />` above.
-    /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { ...(0, import_runtime99.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { ...(0, import_runtime100.trussProps)({
       display: "df",
       flexDirection: "fdc",
       gap: "gap1",
@@ -21531,7 +21569,7 @@ function RadioGroupField(props) {
     }), ...tid, children: [
       /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: labelStyle === "hidden" }),
       /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { ...radioGroupProps, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { ...(0, import_runtime99.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { ...(0, import_runtime100.trussProps)({
           display: "df",
           ...layout === "horizontal" ? {
             flexDirection: "fdr",
@@ -21589,7 +21627,7 @@ function Radio(props) {
   } = (0, import_react_aria48.useHover)({
     isDisabled: disabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("label", { ...(0, import_runtime99.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("label", { ...(0, import_runtime100.trussProps)({
     display: "df",
     cursor: "cursorPointer",
     ...disabled ? {
@@ -21601,7 +21639,7 @@ function Radio(props) {
       {
         type: "radio",
         ref,
-        ...(0, import_runtime99.trussProps)({
+        ...(0, import_runtime100.trussProps)({
           ...radioReset,
           ...radioDefault,
           ...getRadioStateStyles({
@@ -21624,7 +21662,7 @@ function Radio(props) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { id: labelId, ...(0, import_runtime99.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { id: labelId, ...(0, import_runtime100.trussProps)({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -21639,7 +21677,7 @@ function Radio(props) {
       }), ...description ? {
         "aria-describedby": descriptionId
       } : {}, children: label }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { id: descriptionId, ...(0, import_runtime99.trussProps)({
+      description && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { id: descriptionId, ...(0, import_runtime100.trussProps)({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -21736,7 +21774,7 @@ var import_tributejs = __toESM(require("tributejs"), 1);
 var import_tribute = require("tributejs/dist/tribute.css");
 var import_trix = require("trix");
 var import_trix2 = require("trix/dist/trix.css");
-var import_runtime100 = require("@homebound/truss/runtime");
+var import_runtime101 = require("@homebound/truss/runtime");
 var import_jsx_runtime145 = require("react/jsx-runtime");
 var RichTextField = withTestMock(RichTextFieldImpl, RichTextFieldMock);
 function RichTextFieldImpl(props) {
@@ -21825,7 +21863,7 @@ function RichTextFieldImpl(props) {
     autoFocus
   } = props;
   if (!readOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)("div", { ...(0, import_runtime100.trussProps)({
+    return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)("div", { ...(0, import_runtime101.trussProps)({
       width: "w100",
       ...!fullWidth ? {
         maxWidth: "maxw_550px"
@@ -21848,14 +21886,14 @@ function RichTextFieldImpl(props) {
       ] })
     ] });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)("div", { ...(0, import_runtime100.trussProps)({
+    return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)("div", { ...(0, import_runtime101.trussProps)({
       width: "w100",
       ...!fullWidth ? {
         maxWidth: "maxw_550px"
       } : {}
     }), children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(Label, { label }),
-      /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("div", { ...(0, import_runtime100.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("div", { ...(0, import_runtime101.trussProps)({
         minHeight: "mh_120px",
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -21991,7 +22029,7 @@ function SelectCardRadioGroupItem(props) {
 }
 
 // src/inputs/SelectCard/SelectCardGroup.tsx
-var import_runtime101 = require("@homebound/truss/runtime");
+var import_runtime102 = require("@homebound/truss/runtime");
 var import_jsx_runtime148 = require("react/jsx-runtime");
 function SelectCardGroup(props) {
   const {
@@ -22027,7 +22065,7 @@ function SelectCardGroup(props) {
     label,
     isDisabled
   }, state);
-  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(LabeledGroupField, { label, labelStyle, labelProps, groupProps: radioGroupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { ...(0, import_runtime101.trussProps)(getSelectCardOptionsCss({
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(LabeledGroupField, { label, labelStyle, labelProps, groupProps: radioGroupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { ...(0, import_runtime102.trussProps)(getSelectCardOptionsCss({
     view,
     hasDescription,
     layout,
@@ -22108,7 +22146,7 @@ var import_mobx_react17 = require("mobx-react");
 // src/inputs/Switch.tsx
 var import_react103 = require("react");
 var import_react_aria51 = require("react-aria");
-var import_runtime102 = require("@homebound/truss/runtime");
+var import_runtime103 = require("@homebound/truss/runtime");
 var import_jsx_runtime151 = require("react/jsx-runtime");
 var __maybeInc15 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22158,7 +22196,7 @@ function Switch(props) {
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
   const tooltip = resolveTooltip(disabled, props.tooltip);
   const tid = useTestIds(otherProps, label);
-  return /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("label", { ...hoverProps, ...(0, import_runtime102.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("label", { ...hoverProps, ...(0, import_runtime103.trussProps)({
     ...{
       position: "relative",
       cursor: "cursorPointer",
@@ -22212,13 +22250,13 @@ function Switch(props) {
         }]
       }
     }, inline: labelStyle === "left" || labelStyle === "filter" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { ...(0, import_runtime102.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { ...(0, import_runtime103.trussProps)({
       ...labelStyle === "left" ? {
         width: ["w_var", {
-          "--width": (0, import_runtime102.maybeCssVar)(__maybeInc15(labelLeftFieldWidth))
+          "--width": (0, import_runtime103.maybeCssVar)(__maybeInc15(labelLeftFieldWidth))
         }]
       } : {}
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { "aria-hidden": "true", ...(0, import_runtime102.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { "aria-hidden": "true", ...(0, import_runtime103.trussProps)({
       ...{
         width: ["w_var", {
           "--width": `${toggleWidth(compact)}px`
@@ -22246,7 +22284,7 @@ function Switch(props) {
         }]
       },
       ...isSelected && isHovered && switchSelectedHoverStyles
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { ...(0, import_runtime102.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { ...(0, import_runtime103.trussProps)({
       ...switchCircleDefaultStyles(compact),
       ...isDisabled && {
         backgroundColor: ["bgColor_var", {
@@ -22260,7 +22298,7 @@ function Switch(props) {
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
       color: ["color_var", {
-        "--color": (0, import_runtime102.maybeCssVar)(isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-on-surface" /* OnSurface */)
+        "--color": (0, import_runtime103.maybeCssVar)(isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-on-surface" /* OnSurface */)
       }],
       ...compact ? {
         lineHeight: "lh_1"
@@ -22310,7 +22348,7 @@ function switchCircleDefaultStyles(isCompact) {
 function switchCircleSelectedStyles(isCompact) {
   return {
     left: ["left_var", {
-      "--left": (0, import_runtime102.maybeCssVar)(__maybeInc15(`calc(100% - ${circleDiameter(isCompact)}px - 2px)`))
+      "--left": (0, import_runtime103.maybeCssVar)(__maybeInc15(`calc(100% - ${circleDiameter(isCompact)}px - 2px)`))
     }]
   };
 }
@@ -22566,7 +22604,7 @@ var import_mobx_react20 = require("mobx-react");
 var import_react106 = require("react");
 var import_react_aria54 = require("react-aria");
 var import_react_stately16 = require("react-stately");
-var import_runtime103 = require("@homebound/truss/runtime");
+var import_runtime104 = require("@homebound/truss/runtime");
 var import_jsx_runtime157 = require("react/jsx-runtime");
 var __maybeInc16 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22598,7 +22636,7 @@ function ToggleChipGroup(props) {
   } = (0, import_react_aria54.useCheckboxGroup)(props, state);
   const tid = useTestIds(props, "toggleChip");
   const labelSuffix = useLabelSuffix(required, false);
-  return /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { ...groupProps, ...(0, import_runtime103.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { ...groupProps, ...(0, import_runtime104.trussProps)({
     position: "relative",
     display: "df",
     flexDirection: "fdc",
@@ -22610,13 +22648,13 @@ function ToggleChipGroup(props) {
     } : {}
   }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(Label, { label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix }),
-    /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { ...(0, import_runtime103.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { ...(0, import_runtime104.trussProps)({
       display: "df",
       gap: "gap1",
       flexWrap: "fww",
       ...labelStyle === "left" ? {
         width: ["w_var", {
-          "--width": (0, import_runtime103.maybeCssVar)(__maybeInc16(labelLeftFieldWidth))
+          "--width": (0, import_runtime104.maybeCssVar)(__maybeInc16(labelLeftFieldWidth))
         }]
       } : {}
     }), children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(ToggleChip2, { value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label, disabled: o.disabled, readonly: o.readonly, startAdornment: o.startAdornment, xss, ...tid[o.value] }, o.value)) })
@@ -22652,15 +22690,15 @@ function ToggleChip2(props) {
   const tooltip = resolveTooltip(disabled);
   const chipStateCss = isSelected ? {
     color: ["color_var", {
-      "--color": (0, import_runtime103.maybeCssVar)(xss?.color ?? "rgba(255, 255, 255, 1)" /* White */)
+      "--color": (0, import_runtime104.maybeCssVar)(xss?.color ?? "rgba(255, 255, 255, 1)" /* White */)
     }],
     backgroundColor: ["bgColor_var", {
-      "--backgroundColor": (0, import_runtime103.maybeCssVar)(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */)
+      "--backgroundColor": (0, import_runtime104.maybeCssVar)(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */)
     }],
     ...!isDisabled ? {
       backgroundColor: ["bgColor_var h_bgColor_var", {
-        "--backgroundColor": (0, import_runtime103.maybeCssVar)(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */),
-        "--h_backgroundColor": (0, import_runtime103.maybeCssVar)(xss?.backgroundColor ?? "rgba(30, 64, 175, 1)" /* Blue800 */)
+        "--backgroundColor": (0, import_runtime104.maybeCssVar)(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */),
+        "--h_backgroundColor": (0, import_runtime104.maybeCssVar)(xss?.backgroundColor ?? "rgba(30, 64, 175, 1)" /* Blue800 */)
       }]
     } : {}
   } : isDisabled ? {
@@ -22675,7 +22713,7 @@ function ToggleChip2(props) {
   return maybeTooltip({
     title: tooltip,
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("label", { ...(0, import_runtime103.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("label", { ...(0, import_runtime104.trussProps)({
       ...{
         position: "relative",
         display: "dif",
@@ -22771,7 +22809,7 @@ function BoundTreeSelectField(props) {
 
 // src/forms/FormLines.tsx
 var import_react107 = require("react");
-var import_runtime104 = require("@homebound/truss/runtime");
+var import_runtime105 = require("@homebound/truss/runtime");
 var import_jsx_runtime160 = require("react/jsx-runtime");
 var __maybeInc17 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -22807,17 +22845,17 @@ function FormLines(props) {
       fullWidth: true
     } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(PresentationProvider, { fieldProps: newFieldProps, children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ...(0, import_runtime104.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(PresentationProvider, { fieldProps: newFieldProps, children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ...(0, import_runtime105.trussProps)({
     display: "df",
     flexDirection: "fdc",
     gap: ["gap_var", {
-      "--gap": (0, import_runtime104.maybeCssVar)(__maybeInc17(gap))
+      "--gap": (0, import_runtime105.maybeCssVar)(__maybeInc17(gap))
     }],
     paddingBottom: ["pb_var", {
-      "--paddingBottom": (0, import_runtime104.maybeCssVar)(__maybeInc17(gap))
+      "--paddingBottom": (0, import_runtime105.maybeCssVar)(__maybeInc17(gap))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime104.maybeCssVar)(__maybeInc17(sizes[width2]))
+      "--width": (0, import_runtime105.maybeCssVar)(__maybeInc17(sizes[width2]))
     }]
   }), children: import_react107.Children.map(children, (child) => {
     if (child && typeof child === "object" && "type" in child && child.type.isFormHeading) {
@@ -22831,7 +22869,7 @@ function FormLines(props) {
   }) }) });
 }
 function FormDivider() {
-  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ...(0, import_runtime104.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ...(0, import_runtime105.trussProps)({
     height: "h_1px",
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface-separator)"
@@ -22848,11 +22886,11 @@ function FieldGroup(props) {
     const width2 = widths2[i] || 1;
     return typeof width2 === `number` ? `${width2}fr` : width2;
   }).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ...(0, import_runtime104.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ...(0, import_runtime105.trussProps)({
     display: "dg",
     gap: "gap2",
     gridTemplateColumns: ["gtc_var", {
-      "--gridTemplateColumns": (0, import_runtime104.maybeCssVar)(gtc)
+      "--gridTemplateColumns": (0, import_runtime105.maybeCssVar)(gtc)
     }]
   }), children });
 }
@@ -22864,7 +22902,7 @@ var sizes = {
 };
 
 // src/forms/BoundForm.tsx
-var import_runtime105 = require("@homebound/truss/runtime");
+var import_runtime106 = require("@homebound/truss/runtime");
 var import_jsx_runtime161 = require("react/jsx-runtime");
 var import_react109 = require("react");
 var reactNodePrefix = "reactNode";
@@ -22919,12 +22957,12 @@ function FormRow({
     component,
     key,
     minWidth
-  }) => /* @__PURE__ */ (0, import_react109.createElement)("div", { ...(0, import_runtime105.trussProps)({
+  }) => /* @__PURE__ */ (0, import_react109.createElement)("div", { ...(0, import_runtime106.trussProps)({
     minWidth: ["mw_var", {
-      "--minWidth": (0, import_runtime105.maybeCssVar)(minWidth)
+      "--minWidth": (0, import_runtime106.maybeCssVar)(minWidth)
     }],
     flexBasis: ["fb_var", {
-      "--flexBasis": (0, import_runtime105.maybeCssVar)(`${itemFlexBasis}%`)
+      "--flexBasis": (0, import_runtime106.maybeCssVar)(`${itemFlexBasis}%`)
     }],
     flexGrow: "fg1"
   }), key: key.toString() }, isLoading ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(LoadingSkeleton, { size: "lg" }) : component)) });
@@ -23069,7 +23107,7 @@ var import_use_debounce6 = require("use-debounce");
 // src/components/RightSidebar.tsx
 var import_framer_motion2 = require("framer-motion");
 var import_react110 = require("react");
-var import_runtime106 = require("@homebound/truss/runtime");
+var import_runtime107 = require("@homebound/truss/runtime");
 var import_jsx_runtime163 = require("react/jsx-runtime");
 var __maybeInc18 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -23112,20 +23150,20 @@ function RightSidebar({
         duration: 0.2
       },
       x: "100%"
-    }, ...(0, import_runtime106.trussProps)({
+    }, ...(0, import_runtime107.trussProps)({
       width: "w100",
       minWidth: ["mw_var", {
-        "--minWidth": (0, import_runtime106.maybeCssVar)(RIGHT_SIDEBAR_MIN_WIDTH)
+        "--minWidth": (0, import_runtime107.maybeCssVar)(RIGHT_SIDEBAR_MIN_WIDTH)
       }],
       zIndex: "z0",
       height: ["h_var", {
-        "--height": (0, import_runtime106.maybeCssVar)(__maybeInc18(`calc(100vh - ${headerHeightPx2}px)`))
+        "--height": (0, import_runtime107.maybeCssVar)(__maybeInc18(`calc(100vh - ${headerHeightPx2}px)`))
       }],
       overflowY: "oya",
       paddingLeft: "pl4",
       paddingRight: "pr3"
     }), children: /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(import_jsx_runtime163.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { ...(0, import_runtime106.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { ...(0, import_runtime107.trussProps)({
         position: "sticky",
         top: "top0",
         backgroundColor: ["bgColor_var", {
@@ -23134,7 +23172,7 @@ function RightSidebar({
       }), children: [
         /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { className: "absolute l_neg24px top0 df fdc aic", children: [
           /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
-          /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { ...(0, import_runtime106.trussProps)({
+          /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { ...(0, import_runtime107.trussProps)({
             position: "absolute",
             top: "tp_48px",
             height: "h_calc_100vh_168px",
@@ -23181,7 +23219,7 @@ function Toast() {
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
 var import_react111 = require("react");
 var import_react_router_dom6 = require("react-router-dom");
-var import_runtime107 = require("@homebound/truss/runtime");
+var import_runtime108 = require("@homebound/truss/runtime");
 var import_jsx_runtime165 = (
   // Adding index to key to prevent rendering issues when multiple items have the same label
   require("react/jsx-runtime")
@@ -23194,7 +23232,7 @@ function PageHeaderBreadcrumbs({
   const [collapsed, setCollapsed] = (0, import_react111.useState)(true);
   function renderBreadcrumb(bc, index, hideDivisor) {
     return /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)(import_react111.Fragment, { children: [
-      index > 0 && !hideDivisor && /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("span", { ...(0, import_runtime107.trussProps)({
+      index > 0 && !hideDivisor && /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("span", { ...(0, import_runtime108.trussProps)({
         fontWeight: "fw6",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -23206,7 +23244,7 @@ function PageHeaderBreadcrumbs({
         marginTop: "mt_2px",
         marginBottom: "mb_2px"
       }), children: "/" }),
-      /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(import_react_router_dom6.Link, { to: bc.href, ...(0, import_runtime107.mergeProps)("navLink", void 0, {
+      /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(import_react_router_dom6.Link, { to: bc.href, ...(0, import_runtime108.mergeProps)("navLink", void 0, {
         fontWeight: "fw6",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -23220,7 +23258,7 @@ function PageHeaderBreadcrumbs({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("div", { className: "df aic mb_4px", children: breadcrumbs.length > 3 && collapsed ? /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)(import_jsx_runtime165.Fragment, { children: [
     renderBreadcrumb(breadcrumbs[0], 0),
-    /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("button", { ...tids.expand, ...(0, import_runtime107.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("button", { ...tids.expand, ...(0, import_runtime108.trussProps)({
       color: ["color_var", {
         "--color": "var(--b-on-surface-muted)"
       }],
@@ -23233,7 +23271,7 @@ function PageHeaderBreadcrumbs({
 }
 
 // src/components/Layout/FormPageLayout.tsx
-var import_runtime108 = require("@homebound/truss/runtime");
+var import_runtime109 = require("@homebound/truss/runtime");
 var import_jsx_runtime166 = require("react/jsx-runtime");
 var headerHeightPx = 120;
 var maxContentWidthPx = 1600;
@@ -23256,14 +23294,14 @@ function FormPageLayoutComponent(props) {
     // since this layout will be replacing most superdrawers/sidebars, we keep the listing mounted below to preserve the users's
     // scroll position & filters
     // Adding "align-items: start" allows "position: sticky" to work within a grid for the sidebars
-    /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("div", { ...(0, import_runtime108.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("div", { ...(0, import_runtime109.trussProps)({
       position: "fixed",
       top: "top0",
       bottom: "bottom0",
       left: "left0",
       right: "right0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime108.maybeCssVar)(zIndices.pageOverlay)
+        "--zIndex": (0, import_runtime109.maybeCssVar)(zIndices.pageOverlay)
       }],
       overflowY: "oya",
       backgroundColor: ["bgColor_var", {
@@ -23272,14 +23310,14 @@ function FormPageLayoutComponent(props) {
       display: "df",
       justifyContent: "jcc",
       alignItems: "aifs"
-    }), ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("div", { ...(0, import_runtime108.trussProps)({
+    }), ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("div", { ...(0, import_runtime109.trussProps)({
       width: "w100",
       maxWidth: ["maxw_var", {
         "--maxWidth": `${maxContentWidthPx}px`
       }],
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": (0, import_runtime108.maybeCssVar)(gridColumns)
+        "--gridTemplateColumns": (0, import_runtime109.maybeCssVar)(gridColumns)
       }],
       gridTemplateRows: "gtr_auto_1fr",
       columnGap: "cg3",
@@ -23288,7 +23326,7 @@ function FormPageLayoutComponent(props) {
       /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(PageHeader, { ...props, ...tids.pageHeader }),
       /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(LeftNav, { sectionsWithRefs, ...tids }),
       /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(FormSections, { sectionsWithRefs, formState, ...tids }),
-      rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("aside", { ...(0, import_runtime108.trussProps)({
+      rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("aside", { ...(0, import_runtime109.trussProps)({
         gridRow: "gr_2",
         gridColumn: "gc_3_4",
         position: "sticky",
@@ -23313,7 +23351,7 @@ function PageHeader(props) {
     notice
   } = useToastContext();
   const tids = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("header", { ...(0, import_runtime108.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("header", { ...(0, import_runtime109.trussProps)({
     gridRow: "gr_1",
     gridColumn: "gc_1_4",
     position: "sticky",
@@ -23322,7 +23360,7 @@ function PageHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime108.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime109.maybeCssVar)(zIndices.pageStickyHeader)
     }],
     ...!notice ? {
       height: ["h_var", {
@@ -23351,7 +23389,7 @@ function FormSections(props) {
   } = props;
   const tids = useTestIds(props);
   const bottomPaddingPx = sectionsWithRefs.length > 1 ? 200 : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("article", { ...(0, import_runtime108.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("article", { ...(0, import_runtime109.trussProps)({
     gridRow: "gr_2",
     gridColumn: "gc_2_3",
     paddingBottom: ["pb_var", {
@@ -23369,13 +23407,13 @@ function FormSections(props) {
       {
         id: sectionKey,
         ref,
-        ...(0, import_runtime108.trussProps)({
+        ...(0, import_runtime109.trussProps)({
           display: "dg",
           gridTemplateColumns: "gtc_50px_1fr",
           gridTemplateRows: "gtr_auto",
           marginBottom: "mb_72px",
           scrollMarginTop: ["scrollMarginTop_var", {
-            "--scrollMarginTop": (0, import_runtime108.maybeCssVar)(`${headerHeightPx}px`)
+            "--scrollMarginTop": (0, import_runtime109.maybeCssVar)(`${headerHeightPx}px`)
           }]
         }),
         ...tids.formSection,
@@ -23400,7 +23438,7 @@ function LeftNav(props) {
     section
   }) => !!section.title), [sectionsWithRefs]);
   const activeSection = useActiveSection(sectionWithTitles);
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("aside", { ...(0, import_runtime108.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("aside", { ...(0, import_runtime109.trussProps)({
     gridRow: "gr_2",
     gridColumn: "gc_1_2",
     position: "sticky",
@@ -23465,7 +23503,7 @@ function SectionNavLink(props) {
     hoverProps,
     isHovered
   } = useHover2({});
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime108.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime109.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -23542,7 +23580,7 @@ function useActiveSection(sectionsWithRefs) {
 }
 
 // src/components/Layout/FullBleed.tsx
-var import_runtime109 = require("@homebound/truss/runtime");
+var import_runtime110 = require("@homebound/truss/runtime");
 var import_react113 = require("react");
 var __maybeInc19 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -23568,24 +23606,24 @@ function FullBleed({
     // ...for some reason this keeps the Layout top padding better than using
     // react-aria's more generic mergeProps.
     {
-      ...(0, import_runtime109.mergeProps)(
+      ...(0, import_runtime110.mergeProps)(
         className,
         style,
         // ScrollableParent applies horizontal padding to its content column, so FullBleed
         // inverts that padding with negative margins before re-applying it to the child.
         {
           marginLeft: ["ml_var", {
-            "--marginLeft": (0, import_runtime109.maybeCssVar)(__maybeInc19(invertSpacing(paddingLeft)))
+            "--marginLeft": (0, import_runtime110.maybeCssVar)(__maybeInc19(invertSpacing(paddingLeft)))
           }],
           marginRight: ["mr_var", {
-            "--marginRight": (0, import_runtime109.maybeCssVar)(__maybeInc19(invertSpacing(paddingRight)))
+            "--marginRight": (0, import_runtime110.maybeCssVar)(__maybeInc19(invertSpacing(paddingRight)))
           }],
           ...!omitPadding ? {
             paddingLeft: ["pl_var", {
-              "--paddingLeft": (0, import_runtime109.maybeCssVar)(__maybeInc19(paddingLeft))
+              "--paddingLeft": (0, import_runtime110.maybeCssVar)(__maybeInc19(paddingLeft))
             }],
             paddingRight: ["pr_var", {
-              "--paddingRight": (0, import_runtime109.maybeCssVar)(__maybeInc19(paddingRight))
+              "--paddingRight": (0, import_runtime110.maybeCssVar)(__maybeInc19(paddingRight))
             }]
           } : {}
         }
@@ -23772,7 +23810,7 @@ function isGridTableProps(props) {
 
 // src/components/Layout/RightPaneLayout/DocumentScrollOverlayRightPaneLayout.tsx
 var import_react124 = require("react");
-var import_runtime112 = require("@homebound/truss/runtime");
+var import_runtime113 = require("@homebound/truss/runtime");
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
 var import_framer_motion3 = require("framer-motion");
@@ -23932,7 +23970,7 @@ function waitForRightPaneExit(onComplete) {
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
-var import_runtime110 = require("@homebound/truss/runtime");
+var import_runtime111 = require("@homebound/truss/runtime");
 var import_jsx_runtime168 = require("react/jsx-runtime");
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -23988,7 +24026,7 @@ function DocumentScrollRightPane({
   } : void 0;
   const pane = /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(import_framer_motion3.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(import_framer_motion3.motion.div, { ref: paneRef, ...{
     [rightPaneContentDataAttribute]: true
-  }, ...tid, ...(0, import_runtime110.mergeProps)(void 0, paneStyle, mobile ? {
+  }, ...tid, ...(0, import_runtime111.mergeProps)(void 0, paneStyle, mobile ? {
     position: "fixed",
     right: "right0",
     bottom: "bottom0",
@@ -23998,20 +24036,20 @@ function DocumentScrollRightPane({
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime110.maybeCssVar)(zIndices.rightPaneMobile)
+      "--zIndex": (0, import_runtime111.maybeCssVar)(zIndices.rightPaneMobile)
     }]
   } : {
     position: "fixed",
     right: "right0",
     overflowY: "oya",
     width: ["w_var", {
-      "--width": (0, import_runtime110.maybeCssVar)(__maybeInc20(paneWidthCss))
+      "--width": (0, import_runtime111.maybeCssVar)(__maybeInc20(paneWidthCss))
     }],
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime110.maybeCssVar)(zIndices.rightPane)
+      "--zIndex": (0, import_runtime111.maybeCssVar)(zIndices.rightPane)
     }],
     borderLeftStyle: "bls_solid",
     borderLeftWidth: "blw_1px",
@@ -24035,7 +24073,7 @@ function DocumentScrollRightPane({
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPaneLayoutRoot.tsx
 var import_react122 = require("react");
-var import_runtime111 = require("@homebound/truss/runtime");
+var import_runtime112 = require("@homebound/truss/runtime");
 var import_jsx_runtime169 = require("react/jsx-runtime");
 var NestedRightPaneLayoutContext = (0, import_react122.createContext)(false);
 function DocumentScrollRightPaneLayoutRoot(props) {
@@ -24051,7 +24089,7 @@ function DocumentScrollRightPaneLayoutRoot(props) {
     "div",
     {
       ref: anchorRef.setRef,
-      ...(0, import_runtime111.mergeProps)(void 0, {
+      ...(0, import_runtime112.mergeProps)(void 0, {
         [beamRightPaneWidthVar]: "0px",
         [beamRightPaneContentMinVar]: "0px"
       }, sm ? {
@@ -24122,7 +24160,7 @@ function DocumentScrollOverlayRightPaneLayout({
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(import_jsx_runtime170.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)("div", { className: "df aifs wfc mw100", children: [
       /* @__PURE__ */ (0, import_jsx_runtime170.jsx)("div", { className: "w100 mwfc", ...tid.main, children }),
-      /* @__PURE__ */ (0, import_jsx_runtime170.jsx)("div", { ref: spacerRef, "aria-hidden": true, ...(0, import_runtime112.mergeProps)(void 0, {
+      /* @__PURE__ */ (0, import_jsx_runtime170.jsx)("div", { ref: spacerRef, "aria-hidden": true, ...(0, import_runtime113.mergeProps)(void 0, {
         width: 0
       }, {
         flexShrink: "fs0",
@@ -24182,7 +24220,7 @@ var import_react126 = require("react");
 var import_react125 = require("react");
 var import_react_aria57 = require("react-aria");
 var import_react_stately17 = require("react-stately");
-var import_runtime113 = require("@homebound/truss/runtime");
+var import_runtime114 = require("@homebound/truss/runtime");
 var import_jsx_runtime171 = require("react/jsx-runtime");
 function EditColumnsButton(props) {
   const {
@@ -24231,7 +24269,7 @@ function EditColumnsButton(props) {
     label: "",
     size: "md",
     variant: "secondaryBlack"
-  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("div", { ...(0, import_runtime113.trussProps)({
+  }, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("div", { ...(0, import_runtime114.trussProps)({
     display: "df",
     flexDirection: "fdc",
     backgroundColor: ["bgColor_var", {
@@ -24248,7 +24286,7 @@ function EditColumnsButton(props) {
       /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis pr1", children: option.label }),
       /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
     ] }, option.value)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { ...(0, import_runtime113.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { ...(0, import_runtime114.trussProps)({
       display: "df",
       justifyContent: "jcc",
       paddingTop: "pt2",
@@ -24290,7 +24328,7 @@ var import_use_debounce7 = require("use-debounce");
 var import_use_query_params3 = require("use-query-params");
 
 // src/components/Layout/GridTableLayout/FilterPanel.tsx
-var import_runtime114 = require("@homebound/truss/runtime");
+var import_runtime115 = require("@homebound/truss/runtime");
 
 // src/components/Layout/GridTableLayout/GroupByField.tsx
 var import_jsx_runtime173 = require("react/jsx-runtime");
@@ -24326,7 +24364,7 @@ function FilterPanelOpen({
   const inDocumentScrollLayout = useDocumentScrollLayout();
   const activeFilterCount = getActiveFilterCount(filter ?? {});
   const filterControls = filter && setFilter ? buildFilterControls(filterImpls, filter, setFilter, tid) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { ...(0, import_runtime114.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { ...(0, import_runtime115.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -24358,7 +24396,7 @@ function FilterPanelClosed({
   if (!filter || !setFilter) return null;
   const chips = safeEntries(filterImpls).flatMap(([key, f]) => chipsForFilterKey(key, f, filter, setFilter, tid));
   if (chips.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { ...(0, import_runtime114.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("div", { ...(0, import_runtime115.trussProps)({
     display: "df",
     gap: "gap1",
     alignItems: "aic",
@@ -24399,7 +24437,7 @@ function chipsForFilterKey(key, f, filter, onChange, testId) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
-var import_runtime115 = require("@homebound/truss/runtime");
+var import_runtime116 = require("@homebound/truss/runtime");
 var import_jsx_runtime175 = require("react/jsx-runtime");
 function GridTableLayoutActionsComponent(props) {
   const {
@@ -24463,7 +24501,7 @@ function GridTableLayoutActionsComponent(props) {
       }
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { ...(0, import_runtime115.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { ...(0, import_runtime116.trussProps)({
     display: "df",
     flexDirection: "fdc",
     gap: "gap1",
@@ -24472,7 +24510,7 @@ function GridTableLayoutActionsComponent(props) {
       paddingBottom: "pb3"
     } : {}
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { ...(0, import_runtime115.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { ...(0, import_runtime116.trussProps)({
       ...{
         display: "df",
         gap: "gap1",
@@ -24497,7 +24535,7 @@ function GridTableLayoutActionsComponent(props) {
         !!actions?.length && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(HeaderActions, { actions, ...testId.actions })
       ] })
     ] }),
-    sm && showSearch && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("div", { ...(0, import_runtime115.trussProps)(pageContentPaddingX), children: searchTextField }),
+    sm && showSearch && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("div", { ...(0, import_runtime116.trussProps)(pageContentPaddingX), children: searchTextField }),
     hasFilterControls && !showInlineControl && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
   ] });
 }
@@ -24569,7 +24607,7 @@ function parseStoredTableView(raw) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-var import_runtime116 = require("@homebound/truss/runtime");
+var import_runtime117 = require("@homebound/truss/runtime");
 var import_jsx_runtime177 = require("react/jsx-runtime");
 var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24627,21 +24665,21 @@ function GridTableLayoutComponent(props) {
     as: cardAs
   } : {}, api, emptyState, filter: clientSearch, style: tableStyle, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey, columnGutter: inDocumentScrollLayout }) });
   const tableScrollContent = /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(import_jsx_runtime177.Fragment, { children: [
-    showTableActions && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ref: tableActionsRef, ...(0, import_runtime116.trussProps)({
+    showTableActions && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ref: tableActionsRef, ...(0, import_runtime117.trussProps)({
       ...inDocumentScrollLayout ? {
         transition: "transitionTop",
         position: "sticky",
         top: ["top_var", {
-          "--top": (0, import_runtime116.maybeCssVar)(__maybeInc21(stickyNavAndHeaderOffset()))
+          "--top": (0, import_runtime117.maybeCssVar)(__maybeInc21(stickyNavAndHeaderOffset()))
         }],
         left: ["left_var", {
-          "--left": (0, import_runtime116.maybeCssVar)(__maybeInc21(documentScrollChromeLeft()))
+          "--left": (0, import_runtime117.maybeCssVar)(__maybeInc21(documentScrollChromeLeft()))
         }],
         width: ["w_var", {
-          "--width": (0, import_runtime116.maybeCssVar)(__maybeInc21(`min(100%, ${documentScrollChromeWidth()})`))
+          "--width": (0, import_runtime117.maybeCssVar)(__maybeInc21(`min(100%, ${documentScrollChromeWidth()})`))
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime116.maybeCssVar)(zIndices.tableActions)
+          "--zIndex": (0, import_runtime117.maybeCssVar)(zIndices.tableActions)
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -24650,9 +24688,9 @@ 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__ */ (0, import_jsx_runtime177.jsx)(DocumentScrollOverlayRightPaneLayout, { paneWidth: rightPane.width, children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ...(0, import_runtime116.trussProps)({
+      rightPane ? /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(DocumentScrollOverlayRightPaneLayout, { paneWidth: rightPane.width, children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ...(0, import_runtime117.trussProps)({
         minWidth: ["mw_var", {
-          "--minWidth": (0, import_runtime116.maybeCssVar)(documentScrollRightPaneContentMinCss())
+          "--minWidth": (0, import_runtime117.maybeCssVar)(documentScrollRightPaneContentMinCss())
         }]
       }), children: tableBody }) }) : tableBody
     ) : /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(ScrollableContent, { virtualized: isVirtualized, children: tableBody })
@@ -24781,7 +24819,7 @@ function PreventBrowserScroll({
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 var import_framer_motion4 = require("framer-motion");
 var import_react130 = require("react");
-var import_runtime117 = require("@homebound/truss/runtime");
+var import_runtime118 = require("@homebound/truss/runtime");
 var import_jsx_runtime179 = require("react/jsx-runtime");
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24801,10 +24839,10 @@ function RightPaneLayout(props) {
   const rightPaneContent = useRightPaneContent();
   (0, import_react130.useEffect)(() => closePane2, [closePane2]);
   return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { className: "h100 df oxh", children: /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(import_jsx_runtime179.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...(0, import_runtime117.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...(0, import_runtime118.trussProps)({
       ...{
         width: ["w_var", {
-          "--width": (0, import_runtime117.maybeCssVar)(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": (0, import_runtime118.maybeCssVar)(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
         }],
         transition: "tsn_width_2s_linear",
         height: "h100",
@@ -24820,13 +24858,13 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": (0, import_runtime117.maybeCssVar)(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": (0, import_runtime118.maybeCssVar)(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
       }
     }), children }),
-    /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { ...(0, import_runtime117.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { ...(0, import_runtime118.trussProps)({
       position: "relative",
       ...!!defaultPaneContent ? {
         width: ["w_var", {
@@ -24834,7 +24872,7 @@ function RightPaneLayout(props) {
         }]
       } : {}
     }), children: [
-      defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...(0, import_runtime117.trussProps)({
+      defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...(0, import_runtime118.trussProps)({
         height: "h100",
         width: ["w_var", {
           "--width": `${paneWidth}px`
@@ -24852,9 +24890,9 @@ function RightPaneLayout(props) {
         {
           layout: "position",
           "data-testid": "rightPaneContent",
-          ...(0, import_runtime117.trussProps)({
+          ...(0, import_runtime118.trussProps)({
             backgroundColor: ["bgColor_var", {
-              "--backgroundColor": (0, import_runtime117.maybeCssVar)(paneBgColor)
+              "--backgroundColor": (0, import_runtime118.maybeCssVar)(paneBgColor)
             }],
             height: "h100",
             width: ["w_var", {
@@ -24889,7 +24927,7 @@ function RightPaneLayout(props) {
 }
 
 // src/components/Layout/RightPaneLayout/RightPanePanel.tsx
-var import_runtime118 = require("@homebound/truss/runtime");
+var import_runtime119 = require("@homebound/truss/runtime");
 var import_jsx_runtime180 = require("react/jsx-runtime");
 function RightPanePanel(props) {
   const {
@@ -24902,7 +24940,7 @@ function RightPanePanel(props) {
     closeRightPane
   } = useRightPaneActions();
   return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { className: "relative df fdc h100", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { ...(0, import_runtime118.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { ...(0, import_runtime119.trussProps)({
       display: "df",
       alignItems: "aic",
       justifyContent: "jcsb",
@@ -24963,7 +25001,7 @@ function SidePanel(props) {
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-var import_runtime119 = require("@homebound/truss/runtime");
+var import_runtime120 = require("@homebound/truss/runtime");
 var import_jsx_runtime183 = require("react/jsx-runtime");
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
@@ -25005,14 +25043,14 @@ function TableReviewLayout(props) {
       bordered: true
     }, stickyHeader: true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { ...(0, import_runtime119.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { ...(0, import_runtime120.trussProps)({
     position: "fixed",
     top: "top0",
     bottom: "bottom0",
     left: "left0",
     right: "right0",
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime119.maybeCssVar)(zIndices.pageOverlay)
+      "--zIndex": (0, import_runtime120.maybeCssVar)(zIndices.pageOverlay)
     }],
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
@@ -25029,7 +25067,7 @@ function TableReviewLayout(props) {
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Button, { label: "Close", onClick: closeAction, ...tid.closeButton })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { ...(0, import_runtime119.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { ...(0, import_runtime120.trussProps)({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -25040,7 +25078,7 @@ function TableReviewLayout(props) {
       }), ...tid.description, children: description })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { className: "fg1 df mh0", ...tid.content, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { ...(0, import_runtime119.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { ...(0, import_runtime120.trussProps)({
         ...{
           flexGrow: "fg1",
           overflowY: "oya",
@@ -25065,7 +25103,7 @@ function TableReviewLayout(props) {
       }, className: "df fdc fs0 relative", children: [
         /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { className: "absolute tp_neg32px df fdc aic l_neg24px z1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
-          /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { ...(0, import_runtime119.trussProps)({
+          /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { ...(0, import_runtime120.trussProps)({
             width: "w_1px",
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": "var(--b-field-border-default)"
@@ -25080,7 +25118,7 @@ function TableReviewLayout(props) {
 }
 
 // src/components/Logos/BeamLogo.tsx
-var import_runtime120 = require("@homebound/truss/runtime");
+var import_runtime121 = require("@homebound/truss/runtime");
 var import_jsx_runtime184 = require("react/jsx-runtime");
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -25091,15 +25129,15 @@ function BeamLogo(props) {
     width: width2 = "auto",
     height = "auto"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("svg", { viewBox: "0 0 500 500", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime120.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("svg", { viewBox: "0 0 500 500", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime121.trussProps)({
     fill: ["fill_var", {
-      "--fill": (0, import_runtime120.maybeCssVar)(fill)
+      "--fill": (0, import_runtime121.maybeCssVar)(fill)
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime120.maybeCssVar)(__maybeInc23(width2))
+      "--width": (0, import_runtime121.maybeCssVar)(__maybeInc23(width2))
     }],
     height: ["h_var", {
-      "--height": (0, import_runtime120.maybeCssVar)(__maybeInc23(height))
+      "--height": (0, import_runtime121.maybeCssVar)(__maybeInc23(height))
     }]
   }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("rect", { x: "10", y: "90", width: "32", height: "320" }),
@@ -25114,7 +25152,7 @@ function BeamLogo(props) {
 }
 
 // src/components/Logos/HomeboundLogo.tsx
-var import_runtime121 = require("@homebound/truss/runtime");
+var import_runtime122 = require("@homebound/truss/runtime");
 var import_jsx_runtime185 = require("react/jsx-runtime");
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -25125,15 +25163,15 @@ function HomeboundLogo(props) {
     width: width2 = "auto",
     height = "auto"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime121.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime122.trussProps)({
     fill: ["fill_var", {
-      "--fill": (0, import_runtime121.maybeCssVar)(fill)
+      "--fill": (0, import_runtime122.maybeCssVar)(fill)
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime121.maybeCssVar)(__maybeInc24(width2))
+      "--width": (0, import_runtime122.maybeCssVar)(__maybeInc24(width2))
     }],
     height: ["h_var", {
-      "--height": (0, import_runtime121.maybeCssVar)(__maybeInc24(height))
+      "--height": (0, import_runtime122.maybeCssVar)(__maybeInc24(height))
     }]
   }), children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("path", { d: "M158.1,97.6H0.2L0,39.7L76.8,0l68,38.7l-3.1,5.3l-65-37L6.2,43.4l0.2,48h151.7V97.6z" }) });
 }
@@ -25141,7 +25179,7 @@ function HomeboundLogo(props) {
 // src/components/MaxLines.tsx
 var import_utils39 = require("@react-aria/utils");
 var import_react132 = require("react");
-var import_runtime122 = require("@homebound/truss/runtime");
+var import_runtime123 = require("@homebound/truss/runtime");
 var import_jsx_runtime186 = require("react/jsx-runtime");
 function MaxLines({
   maxLines,
@@ -25166,10 +25204,10 @@ function MaxLines({
     onResize
   });
   return /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("div", { ref: elRef, ...(0, import_runtime122.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("div", { ref: elRef, ...(0, import_runtime123.trussProps)({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": (0, import_runtime122.maybeCssVar)(maxLines)
+          "--WebkitLineClamp": (0, import_runtime123.maybeCssVar)(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -25182,7 +25220,7 @@ function MaxLines({
 }
 
 // src/components/Pagination.tsx
-var import_runtime123 = require("@homebound/truss/runtime");
+var import_runtime124 = require("@homebound/truss/runtime");
 var import_jsx_runtime187 = require("react/jsx-runtime");
 var defaultPage = {
   offset: 0,
@@ -25215,7 +25253,7 @@ function Pagination(props) {
     }
   }
   const tid = useTestIds(props, "pagination");
-  return /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)("div", { ...(0, import_runtime123.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)("div", { ...(0, import_runtime124.trussProps)({
     display: "df",
     borderColor: ["bc_var", {
       "--borderColor": "var(--b-surface-separator)"
@@ -25273,7 +25311,7 @@ function toPageNumberSize(page) {
 // src/components/ScrollShadows.tsx
 var import_utils40 = require("@react-aria/utils");
 var import_react133 = require("react");
-var import_runtime124 = require("@homebound/truss/runtime");
+var import_runtime125 = require("@homebound/truss/runtime");
 var import_jsx_runtime188 = require("react/jsx-runtime");
 function ScrollShadows(props) {
   const {
@@ -25298,7 +25336,7 @@ function ScrollShadows(props) {
     const commonStyles = {
       position: "absolute",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime124.maybeCssVar)(zIndices.scrollShadow)
+        "--zIndex": (0, import_runtime125.maybeCssVar)(zIndices.scrollShadow)
       }],
       pointerEvents: "pe_none"
     };
@@ -25331,7 +25369,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": (0, import_runtime124.maybeCssVar)(startGradient)
+          "--background": (0, import_runtime125.maybeCssVar)(startGradient)
         }]
       }
     }, {
@@ -25339,7 +25377,7 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": (0, import_runtime124.maybeCssVar)(endGradient)
+          "--background": (0, import_runtime125.maybeCssVar)(endGradient)
         }]
       }
     }];
@@ -25364,10 +25402,10 @@ function ScrollShadows(props) {
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { ...(0, import_runtime124.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { ...(0, import_runtime125.trussProps)({
     display: "df",
     flexDirection: ["fd_var", {
-      "--flexDirection": (0, import_runtime124.maybeCssVar)(!horizontal ? "column" : "row")
+      "--flexDirection": (0, import_runtime125.maybeCssVar)(!horizontal ? "column" : "row")
     }],
     position: "relative",
     overflow: "oh",
@@ -25380,23 +25418,23 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ...(0, import_runtime124.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ...(0, import_runtime125.trussProps)({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": (0, import_runtime124.maybeCssVar)(showStartShadow ? 1 : 0)
+          "--opacity": (0, import_runtime125.maybeCssVar)(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ...(0, import_runtime124.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ...(0, import_runtime125.trussProps)({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": (0, import_runtime124.maybeCssVar)(showEndShadow ? 1 : 0)
+          "--opacity": (0, import_runtime125.maybeCssVar)(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ...(0, import_runtime124.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ...(0, import_runtime125.trussProps)({
       ...xss,
       ...{
         overflow: "oa",
@@ -25418,7 +25456,7 @@ var import_react136 = require("react");
 // src/components/AppNav/AppNavGroupTrigger.tsx
 var import_react134 = require("react");
 var import_react_aria58 = require("react-aria");
-var import_runtime125 = require("@homebound/truss/runtime");
+var import_runtime126 = require("@homebound/truss/runtime");
 var import_jsx_runtime189 = require("react/jsx-runtime");
 function AppNavGroupTrigger(props) {
   const {
@@ -25455,7 +25493,7 @@ function AppNavGroupTrigger(props) {
     ref,
     "aria-expanded": expanded,
     "aria-controls": navGroupId,
-    ...(0, import_runtime125.mergeProps)(navLink, void 0, {
+    ...(0, import_runtime126.mergeProps)(navLink, void 0, {
       ...baseStyles4,
       ...isFocusVisible && focusRingStyles2,
       ...isHovered && hoverStyles4,
@@ -25469,7 +25507,7 @@ function AppNavGroupTrigger(props) {
     })
   }), children: [
     label,
-    /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { ...(0, import_runtime125.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { ...(0, import_runtime126.trussProps)({
       ...{
         display: "df",
         alignItems: "aic",
@@ -25622,7 +25660,7 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-var import_runtime126 = require("@homebound/truss/runtime");
+var import_runtime127 = require("@homebound/truss/runtime");
 var import_jsx_runtime190 = require("react/jsx-runtime");
 var __maybeInc25 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -25667,11 +25705,11 @@ function AppNavGroupDisclosure(props) {
   });
   return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)("div", { className: "df fdc", ...tid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, active: linkGroupHasActiveLink(linkGroup), onClick: onToggle, ...tid }),
-    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...(0, import_runtime126.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...(0, import_runtime127.trussProps)({
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
-        "--height": (0, import_runtime126.maybeCssVar)(__maybeInc25(contentHeight))
+        "--height": (0, import_runtime127.maybeCssVar)(__maybeInc25(contentHeight))
       }]
     }), ...tid.panel, ...!expanded ? {
       inert: true
@@ -25701,7 +25739,7 @@ function AppNavGroupMenu({
 }
 
 // src/components/AppNav/AppNavSectionView.tsx
-var import_runtime127 = require("@homebound/truss/runtime");
+var import_runtime128 = require("@homebound/truss/runtime");
 var import_jsx_runtime192 = require("react/jsx-runtime");
 function AppNavSectionView(props) {
   const {
@@ -25728,7 +25766,7 @@ function AppNavSectionView(props) {
       "--borderColor": "var(--b-surface-separator)"
     }]
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { ...(0, import_runtime127.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { ...(0, import_runtime128.trussProps)({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -25736,7 +25774,7 @@ function AppNavSectionView(props) {
     },
     ...showDivider ? dividerStyles : {}
   }), ...tid, children: [
-    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { ...(0, import_runtime127.trussProps)({
+    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { ...(0, import_runtime128.trussProps)({
       fontWeight: "fw6",
       fontSize: "fz_10px",
       lineHeight: "lh_14px",
@@ -25862,7 +25900,7 @@ function useHasSideNavLayoutProvider() {
 }
 
 // src/components/SideNav/SideNav.tsx
-var import_runtime128 = require("@homebound/truss/runtime");
+var import_runtime129 = require("@homebound/truss/runtime");
 var import_jsx_runtime195 = require("react/jsx-runtime");
 function SideNav(props) {
   const {
@@ -25879,7 +25917,7 @@ function SideNav(props) {
   const hideContent = panelCollapsed && !showContentWhenCollapsed;
   const hideItems = hideContent || panelCollapsed && !allItemsHaveIcons(items);
   return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    !hideContent && top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime128.trussProps)({
+    !hideContent && top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime129.trussProps)({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -25890,7 +25928,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    !hideContent && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime128.trussProps)({
+    !hideContent && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime129.trussProps)({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -25903,7 +25941,7 @@ function SideNav(props) {
         paddingTop: "pt5"
       } : {}
     }), ...tid.items, children: !hideItems && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(AppNavItems, { items, panelCollapsed }) }),
-    !hideContent && footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime128.trussProps)({
+    !hideContent && footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime129.trussProps)({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -25921,7 +25959,7 @@ function SideNav(props) {
 // src/components/Stepper.tsx
 var import_react138 = require("react");
 var import_react_aria59 = require("react-aria");
-var import_runtime129 = require("@homebound/truss/runtime");
+var import_runtime130 = require("@homebound/truss/runtime");
 var import_jsx_runtime196 = require("react/jsx-runtime");
 var import_react139 = require("react");
 var __maybeInc26 = (inc) => {
@@ -25942,7 +25980,7 @@ function Stepper(props) {
   const minStepWidth = 100;
   const gap = 8;
   return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("ol", { ...(0, import_runtime129.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("ol", { ...(0, import_runtime130.trussProps)({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -25952,7 +25990,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ (0, import_react139.createElement)("li", { ...(0, import_runtime129.trussProps)({
+      return /* @__PURE__ */ (0, import_react139.createElement)("li", { ...(0, import_runtime130.trussProps)({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -25964,7 +26002,7 @@ function Stepper(props) {
         }]
       }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime129.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime130.trussProps)({
       marginTop: "mt1",
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-field-border-default)"
@@ -25977,14 +26015,14 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime129.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime130.trussProps)({
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-primary)"
       }],
       transition: "tsn_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": (0, import_runtime129.maybeCssVar)(__maybeInc26(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": (0, import_runtime130.maybeCssVar)(__maybeInc26(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -26020,7 +26058,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime129.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime130.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -26097,7 +26135,7 @@ function StepIcon({
   if (state === "complete") {
     return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { className: "h_24px w_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime129.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { className: "h_24px w_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ...(0, import_runtime130.trussProps)({
     height: "h_10px",
     width: "w_10px",
     borderStyle: "bss",
@@ -26113,7 +26151,7 @@ function StepIcon({
 // src/components/StepperTabs/StepperTab.tsx
 var import_react140 = require("react");
 var import_react_aria60 = require("react-aria");
-var import_runtime130 = require("@homebound/truss/runtime");
+var import_runtime131 = require("@homebound/truss/runtime");
 var import_jsx_runtime197 = require("react/jsx-runtime");
 function StepperTab(props) {
   const {
@@ -26145,7 +26183,7 @@ function StepperTab(props) {
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
   const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const tid = useTestIds(props, "stepperTab");
-  return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("button", { ref, ...(0, import_react_aria60.mergeProps)(buttonProps, focusProps, hoverProps), "aria-label": label, ...(0, import_runtime130.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("button", { ref, ...(0, import_react_aria60.mergeProps)(buttonProps, focusProps, hoverProps), "aria-label": label, ...(0, import_runtime131.trussProps)({
     ...stepperTabStyles.baseStyles,
     ...getStateStyles(active, completed),
     ...isHovered && !disabled ? stepperTabStyles.hoverStyles : {},
@@ -26156,7 +26194,7 @@ function StepperTab(props) {
     !collapsed && /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(import_jsx_runtime197.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("span", { className: "dg jic mw0", children: [
         /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("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__ */ (0, import_jsx_runtime197.jsx)("span", { ...(0, import_runtime130.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("span", { ...(0, import_runtime131.trussProps)({
           gridArea: "ga_1_1",
           overflow: "oh",
           display: "d_negwebkit_box",
@@ -26171,7 +26209,7 @@ function StepperTab(props) {
           } : {}
         }), children: label })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("span", { ...(0, import_runtime130.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("span", { ...(0, import_runtime131.trussProps)({
         flexShrink: "fs0",
         marginLeft: "ml1",
         transition: "transitionAll",
@@ -26183,7 +26221,7 @@ function StepperTab(props) {
         } : {}
       }), children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Icon, { icon: "check", inc: 2.5, ...tid.check }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("span", { "aria-hidden": true, ...(0, import_runtime130.trussProps)(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
+    /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("span", { "aria-hidden": true, ...(0, import_runtime131.trussProps)(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
     /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_react_aria60.VisuallyHidden, { children: completed ? "Complete" : "Not Complete" })
   ] });
 }
@@ -26265,7 +26303,7 @@ var stepperTabStyles = {
 };
 
 // src/components/StepperTabs/StepperTabs.tsx
-var import_runtime131 = require("@homebound/truss/runtime");
+var import_runtime132 = require("@homebound/truss/runtime");
 var import_jsx_runtime198 = require("react/jsx-runtime");
 var import_react141 = require("react");
 function StepperTabs(props) {
@@ -26282,7 +26320,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__ */ (0, import_jsx_runtime198.jsx)("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("ol", { ...(0, import_runtime131.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("ol", { ...(0, import_runtime132.trussProps)({
     padding: "p_0",
     margin: "m_0",
     listStyle: "lis_none",
@@ -26297,7 +26335,7 @@ function StepperTabs(props) {
   }), children: steps.map((step, idx) => {
     const isCurrent = idx === currentStepIndex;
     const isCompleted = idx < currentStepIndex;
-    return /* @__PURE__ */ (0, import_react141.createElement)("li", { ...(0, import_runtime131.trussProps)({
+    return /* @__PURE__ */ (0, import_react141.createElement)("li", { ...(0, import_runtime132.trussProps)({
       display: "df",
       flexGrow: "fg1",
       flexBasis: "fb_0",
@@ -26317,7 +26355,7 @@ var gapPx = 6;
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 var import_react_dom8 = require("react-dom");
-var import_runtime132 = require("@homebound/truss/runtime");
+var import_runtime133 = require("@homebound/truss/runtime");
 var import_jsx_runtime199 = require("react/jsx-runtime");
 function SuperDrawerHeader(props) {
   const {
@@ -26343,7 +26381,7 @@ function SuperDrawerHeader(props) {
       ] }),
       props.right && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { className: "fs0", children: props.right })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { ...(0, import_runtime132.trussProps)({
+    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { ...(0, import_runtime133.trussProps)({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
@@ -26365,7 +26403,7 @@ function isStructuredProps(props) {
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
 var import_framer_motion6 = require("framer-motion");
-var import_runtime133 = require("@homebound/truss/runtime");
+var import_runtime134 = require("@homebound/truss/runtime");
 var import_jsx_runtime200 = require("react/jsx-runtime");
 var SuperDrawerContent = ({
   children,
@@ -26418,7 +26456,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime133.mergeProps)(void 0, {
+      return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime134.mergeProps)(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -26431,7 +26469,7 @@ var SuperDrawerContent = ({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(import_jsx_runtime200.Fragment, { children: [
     wrapWithMotionAndMaybeBack(children),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("footer", { ...(0, import_runtime133.trussProps)({
+    actions && /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("footer", { ...(0, import_runtime134.trussProps)({
       borderTopStyle: "bts_solid",
       borderTopWidth: "btw_1px",
       borderColor: ["bc_var", {
@@ -26517,7 +26555,7 @@ function useDnDGridContext() {
 }
 
 // src/components/DnDGrid/DnDGrid.tsx
-var import_runtime134 = require("@homebound/truss/runtime");
+var import_runtime135 = require("@homebound/truss/runtime");
 var import_jsx_runtime202 = require("react/jsx-runtime");
 function DnDGrid(props) {
   const {
@@ -26702,7 +26740,7 @@ function DnDGrid(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(DnDGridContext.Provider, { value: {
     dragEl,
     onDragHandleKeyDown
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { ref: gridEl, ...(0, import_runtime134.trussProps)({
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { ref: gridEl, ...(0, import_runtime135.trussProps)({
     ...{
       containerType: "ctis",
       display: "dg"
@@ -26732,14 +26770,14 @@ function applyActiveStyles(el, activeStyles3) {
   const {
     className,
     style
-  } = (0, import_runtime134.trussProps)(activeStyles3);
+  } = (0, import_runtime135.trussProps)(activeStyles3);
   if (className) el.classList.add(...className.split(" ").filter(Boolean));
   if (style) setInlineStyles(el, style);
 }
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
 var import_react_aria61 = require("react-aria");
-var import_runtime135 = require("@homebound/truss/runtime");
+var import_runtime136 = require("@homebound/truss/runtime");
 var import_jsx_runtime203 = require("react/jsx-runtime");
 function DnDGridItemHandle(props) {
   const {
@@ -26769,7 +26807,7 @@ function DnDGridItemHandle(props) {
     borderRadius: "br4",
     borderWidth: "bw1"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("button", { ...(0, import_runtime135.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("button", { ...(0, import_runtime136.trussProps)({
     ...compact ? iconButtonCompact : iconButtonNormal,
     ...{
       cursor: "cur_grab",
@@ -26870,7 +26908,7 @@ var BaseFilter = class {
 
 // src/components/internal/CompoundField.tsx
 var import_react145 = require("react");
-var import_runtime136 = require("@homebound/truss/runtime");
+var import_runtime137 = require("@homebound/truss/runtime");
 var import_jsx_runtime204 = require("react/jsx-runtime");
 function CompoundField({
   children
@@ -26906,7 +26944,7 @@ function CompoundField({
     setHasFocusWithin(false);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)("div", { className: "df", onFocusCapture, onBlurCapture, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime136.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime137.trussProps)({
       ...commonStyles,
       ...{
         borderLeftStyle: "bls_solid",
@@ -26921,7 +26959,7 @@ function CompoundField({
     }), children: (0, import_react145.cloneElement)(children[0], {
       internalProps
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime136.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime137.trussProps)({
       ...{
         width: "w_1px",
         flex: "fn",
@@ -26935,7 +26973,7 @@ function CompoundField({
         }]
       }
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime136.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime137.trussProps)({
       ...commonStyles,
       ...{
         flexGrow: "fg1",
@@ -27424,7 +27462,7 @@ var import_react148 = require("react");
 
 // src/components/Grid/useResponsiveGrid.ts
 var import_react146 = require("react");
-var import_runtime137 = require("@homebound/truss/runtime");
+var import_runtime138 = require("@homebound/truss/runtime");
 var __maybeInc27 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -27443,11 +27481,11 @@ function useResponsiveGrid(props) {
     return {
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": (0, import_runtime137.maybeCssVar)(gridTemplateColumns)
+        "--gridTemplateColumns": (0, import_runtime138.maybeCssVar)(gridTemplateColumns)
       }],
       containerType: "ctis",
       gap: ["gap_var", {
-        "--gap": (0, import_runtime137.maybeCssVar)(__maybeInc27(gridGap))
+        "--gap": (0, import_runtime138.maybeCssVar)(__maybeInc27(gridGap))
       }]
     };
   }, [minColumnWidth, gap, columns]);
@@ -27462,7 +27500,7 @@ var gridItemDataAttribute = "data-grid-item-span";
 var ResponsiveGridContext = (0, import_react147.createContext)(void 0);
 
 // src/components/Grid/ResponsiveGrid.tsx
-var import_runtime138 = require("@homebound/truss/runtime");
+var import_runtime139 = require("@homebound/truss/runtime");
 var import_jsx_runtime214 = require("react/jsx-runtime");
 function ResponsiveGrid(props) {
   const {
@@ -27483,12 +27521,12 @@ function ResponsiveGrid(props) {
     gap,
     columns
   }), [minColumnWidth, gap, columns]);
-  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { ...(0, import_runtime138.trussProps)(gridStyles), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("div", { ...(0, import_runtime139.trussProps)(gridStyles), children }) });
 }
 
 // src/components/Grid/ResponsiveGridItem.tsx
 var import_react_aria62 = require("react-aria");
-var import_runtime139 = require("@homebound/truss/runtime");
+var import_runtime140 = require("@homebound/truss/runtime");
 
 // src/components/Grid/useResponsiveGridItem.ts
 var import_react149 = require("react");
@@ -27555,7 +27593,7 @@ function ResponsiveGridItem(props) {
   } = useResponsiveGridItem({
     colSpan
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { ...(0, import_react_aria62.mergeProps)(gridItemProps, (0, import_runtime139.trussProps)(gridItemStyles)), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { ...(0, import_react_aria62.mergeProps)(gridItemProps, (0, import_runtime140.trussProps)(gridItemStyles)), children });
 }
 
 // src/components/HbLoadingSpinner.tsx
@@ -27673,7 +27711,7 @@ function useRegisterMobileSubNav(content2) {
 }
 
 // src/components/Navbar/NavbarMobileMenu.tsx
-var import_runtime140 = require("@homebound/truss/runtime");
+var import_runtime141 = require("@homebound/truss/runtime");
 var import_jsx_runtime219 = require("react/jsx-runtime");
 function NavbarMobileMenu(props) {
   const {
@@ -27724,13 +27762,13 @@ function NavbarMobileDrawer({
   };
   const showSubLevel = mobileSubNav != null && level === "sub";
   return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(import_jsx_runtime219.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(import_framer_motion7.motion.div, { ...(0, import_runtime140.mergeProps)(void 0, overlayTopStyle, {
+    /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(import_framer_motion7.motion.div, { ...(0, import_runtime141.mergeProps)(void 0, overlayTopStyle, {
       position: "fixed",
       right: "right0",
       bottom: "bottom0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime140.maybeCssVar)(zIndices.navbarMobileMenuScrim)
+        "--zIndex": (0, import_runtime141.maybeCssVar)(zIndices.navbarMobileMenuScrim)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-scrim)"
@@ -27745,7 +27783,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: onClose, ...tid.mobileMenuScrim }, "navbarMobileMenuScrim"),
-    /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(import_react_aria63.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(import_framer_motion7.motion.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...(0, import_runtime140.mergeProps)(void 0, overlayTopStyle, {
+    /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(import_react_aria63.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(import_framer_motion7.motion.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...(0, import_runtime141.mergeProps)(void 0, overlayTopStyle, {
       position: "fixed",
       bottom: "bottom0",
       left: "left0",
@@ -27755,7 +27793,7 @@ function NavbarMobileDrawer({
       width: "w_260px",
       overflow: "oh",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime140.maybeCssVar)(zIndices.navbarMobileMenu)
+        "--zIndex": (0, import_runtime141.maybeCssVar)(zIndices.navbarMobileMenu)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
@@ -27770,7 +27808,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: (e) => e.stopPropagation(), ...tid.mobileMenuDrawer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("div", { ...(0, import_runtime140.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("div", { ...(0, import_runtime141.trussProps)({
         ...{
           display: "df",
           alignItems: "aic",
@@ -27792,7 +27830,7 @@ function NavbarMobileDrawer({
       /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("div", { className: "fg1 mh0 oh relative", children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(import_framer_motion7.AnimatePresence, { initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
         import_framer_motion7.motion.nav,
         {
-          ...(0, import_runtime140.trussProps)({
+          ...(0, import_runtime141.trussProps)({
             ...{
               position: "absolute",
               top: "top0",
@@ -27863,7 +27901,7 @@ function useContentOverflow(enabled = true) {
 }
 
 // src/components/Navbar/Navbar.tsx
-var import_runtime141 = require("@homebound/truss/runtime");
+var import_runtime142 = require("@homebound/truss/runtime");
 var import_jsx_runtime220 = require("react/jsx-runtime");
 function Navbar(props) {
   const {
@@ -27883,7 +27921,7 @@ function Navbar(props) {
     overflows
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
-  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)("nav", { ...(0, import_runtime141.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)("nav", { ...(0, import_runtime142.trussProps)({
     ...{
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface-raised)"
@@ -27902,7 +27940,7 @@ function Navbar(props) {
     /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)("div", { className: "df aic gap3 fg1 mw0", children: [
       /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)("div", { className: "df aic fs0 gap2", children: [
         showMobile && /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(NavbarMobileMenu, { items, ...tid }),
-        /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", { ...(0, import_runtime141.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", { ...(0, import_runtime142.trussProps)({
           flexShrink: "fs0",
           ...hideBrandOnMobile && showMobile ? {
             display: "dn"
@@ -27911,7 +27949,7 @@ function Navbar(props) {
       ] }),
       !sm && // Stays mounted while overflowing (hidden) so the items remain measurable and the bar
       // can expand again as space frees up.
-      /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", { ref: containerRef, ...(0, import_runtime141.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", { ref: containerRef, ...(0, import_runtime142.trussProps)({
         display: "df",
         alignItems: "aic",
         flexGrow: "fg1",
@@ -28043,7 +28081,7 @@ var import_react156 = require("react");
 var import_react_aria64 = require("react-aria");
 var import_react_router = require("react-router");
 var import_react_router_dom8 = require("react-router-dom");
-var import_runtime142 = require("@homebound/truss/runtime");
+var import_runtime143 = require("@homebound/truss/runtime");
 var import_jsx_runtime221 = require("react/jsx-runtime");
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -28076,7 +28114,7 @@ function TabContent(props) {
   return (
     // Using FullBleed to allow the tab's bgColor to extend to the edges of the <ScrollableContent /> element.
     // Omit the padding from `FullBleed` if the caller passes in the `paddingLeft/Right` styles.
-    /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime142.trussProps)(contentXss), children: selectedTab.render() }) })
+    /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime143.trussProps)(contentXss), children: selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -28118,7 +28156,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)("div", { ...(0, import_runtime142.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)("div", { ...(0, import_runtime143.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -28187,7 +28225,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...(0, import_runtime142.trussProps)({
+    ...(0, import_runtime143.trussProps)({
       ...baseStyles4,
       // Only tints the label while the tab is unselected; selected keeps its own darker treatment.
       ...aiMode && aiStyles,
@@ -28227,7 +28265,7 @@ function getTabStyles() {
   const borderBottomStyles = {
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": (0, import_runtime142.maybeCssVar)(`${borderBottomWidthPx}px`)
+      "--borderBottomWidth": (0, import_runtime143.maybeCssVar)(`${borderBottomWidthPx}px`)
     }],
     paddingBottom: ["pb_var", {
       "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
@@ -28280,7 +28318,7 @@ function getTabStyles() {
     // The AI label tint is part of the brand ramp rather than a semantic token, same as the sparkle's gradient.
     aiStyles: {
       color: ["color_var", {
-        "--color": (0, import_runtime142.maybeCssVar)("rgba(109, 40, 217, 1)" /* Purple700 */)
+        "--color": (0, import_runtime143.maybeCssVar)("rgba(109, 40, 217, 1)" /* Purple700 */)
       }]
     },
     focusRingStyles: {
@@ -28338,7 +28376,7 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-var import_runtime143 = require("@homebound/truss/runtime");
+var import_runtime144 = require("@homebound/truss/runtime");
 var import_jsx_runtime222 = require("react/jsx-runtime");
 var __maybeInc28 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28369,7 +28407,7 @@ function SideNavLayoutContent(props) {
   const railOffsetPx = !showRail ? 0 : !bp.mdAndUp || collapsed ? railCollapsedWidthPx : railWidthPx;
   const navTop = bannerAndNavbarChromeTop();
   const railViewportHeight = `calc(var(${beamLayoutViewportHeightVar}, 100vh) - var(${beamEnvironmentBannerLayoutHeightVar}, 0px) - var(${beamNavbarLayoutHeightVar}, 0px))`;
-  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { ...(0, import_runtime143.trussProps)({
+  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { ...(0, import_runtime144.trussProps)({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -28393,14 +28431,14 @@ function SideNavLayoutContent(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime143.maybeCssVar)(zIndices.sideNav)
+        "--zIndex": (0, import_runtime144.maybeCssVar)(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": (0, import_runtime143.maybeCssVar)(__maybeInc28(navTop))
+        "--top": (0, import_runtime144.maybeCssVar)(__maybeInc28(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": (0, import_runtime143.maybeCssVar)(__maybeInc28(railViewportHeight))
+        "--height": (0, import_runtime144.maybeCssVar)(__maybeInc28(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -28410,11 +28448,11 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": (0, import_runtime143.maybeCssVar)(__maybeInc28(navTop))
+          "--top": (0, import_runtime144.maybeCssVar)(__maybeInc28(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime143.maybeCssVar)(zIndices.sideNav)
+          "--zIndex": (0, import_runtime144.maybeCssVar)(zIndices.sideNav)
         }]
       },
       ...collapsed ? {
@@ -28429,7 +28467,7 @@ function SideNavLayoutContent(props) {
     showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
     /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(SideNav, { ...sideNav }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { ...(0, import_runtime143.mergeProps)(void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { ...(0, import_runtime144.mergeProps)(void 0, {
     [beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
   }, {
     display: "df",
@@ -28437,7 +28475,7 @@ function SideNavLayoutContent(props) {
     width: "w100"
   }), ...tid, children: [
     contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { ...(0, import_runtime143.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("div", { ...(0, import_runtime144.trussProps)({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -28453,7 +28491,7 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/CenteredLayout/CenteredLayout.tsx
-var import_runtime144 = require("@homebound/truss/runtime");
+var import_runtime145 = require("@homebound/truss/runtime");
 var import_jsx_runtime223 = require("react/jsx-runtime");
 var __maybeInc29 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28469,7 +28507,7 @@ function CenteredLayout(props) {
     mdAndUp
   } = useBreakpoint();
   const rightPane = resolveWithRightPaneOptions(withRightPane);
-  const shell = /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { ...(0, import_runtime144.mergeProps)(void 0, {
+  const shell = /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("div", { ...(0, import_runtime145.mergeProps)(void 0, {
     // layoutContainer descendants (e.g. ContentHeader) read this to inset sticky horizontal chrome within the shell padding.
     [beamLayoutContentPaddingXVar]: mdAndUp ? mdAndUpContentPaddingX : smContentPaddingX,
     // Floor while an ancestor overlay pane is open (`0px` when closed). `md+` only — phones must not get a dummy scrollbar.
@@ -28503,15 +28541,15 @@ var smContentPaddingX = "12px";
 var mdAndUpContentPaddingX = pageContentPaddingXValue;
 var centeredPaddingX = {
   paddingLeft: ["px_var mdandup_pl3", {
-    "--paddingLeft": (0, import_runtime144.maybeCssVar)(__maybeInc29(smContentPaddingX))
+    "--paddingLeft": (0, import_runtime145.maybeCssVar)(__maybeInc29(smContentPaddingX))
   }],
   paddingRight: ["px_var mdandup_pr3", {
-    "--paddingRight": (0, import_runtime144.maybeCssVar)(__maybeInc29(smContentPaddingX))
+    "--paddingRight": (0, import_runtime145.maybeCssVar)(__maybeInc29(smContentPaddingX))
   }]
 };
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-var import_runtime145 = require("@homebound/truss/runtime");
+var import_runtime146 = require("@homebound/truss/runtime");
 var import_jsx_runtime224 = require("react/jsx-runtime");
 var __maybeInc30 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28528,26 +28566,26 @@ function EnvironmentBannerLayout(props) {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
   };
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)("div", { ...(0, import_runtime145.mergeProps)(void 0, style, {
+  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)("div", { ...(0, import_runtime146.mergeProps)(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { ...(0, import_runtime145.mergeProps)(void 0, {
+    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { ...(0, import_runtime146.mergeProps)(void 0, {
       height: environmentBannerSizePx
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { ...(0, import_runtime145.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("div", { ...(0, import_runtime146.trussProps)({
       position: "fixed",
       top: "top0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime145.maybeCssVar)(zIndices.environmentBanner)
+        "--zIndex": (0, import_runtime146.maybeCssVar)(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime145.maybeCssVar)(__maybeInc30(innerWidth))
+        "--width": (0, import_runtime146.maybeCssVar)(__maybeInc30(innerWidth))
       }]
     }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
@@ -28555,14 +28593,14 @@ function EnvironmentBannerLayout(props) {
 }
 
 // src/layouts/FormSectionLayout/FormSectionLayout.tsx
-var import_runtime149 = require("@homebound/truss/runtime");
+var import_runtime150 = require("@homebound/truss/runtime");
 
 // src/forms/FormSection/FormSection.tsx
-var import_runtime147 = require("@homebound/truss/runtime");
+var import_runtime148 = require("@homebound/truss/runtime");
 
 // src/forms/FormSection/FormSectionChild.tsx
 var import_react158 = require("react");
-var import_runtime146 = require("@homebound/truss/runtime");
+var import_runtime147 = require("@homebound/truss/runtime");
 var import_jsx_runtime225 = require("react/jsx-runtime");
 function FormSectionChild(props) {
   const {
@@ -28585,7 +28623,7 @@ function FormSectionChild(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)("div", { ...isDraggable ? {
     ...dragItemProps,
     ref: itemRef
-  } : {}, ...(0, import_runtime146.trussProps)({
+  } : {}, ...(0, import_runtime147.trussProps)({
     display: "df",
     flexDirection: "fdc",
     gap: "gap2",
@@ -28617,12 +28655,12 @@ function FormSection(props) {
     childSections
   } = props;
   const tid = useTestIds(props, "formSection");
-  return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("div", { id: defaultTestId(title), ...(0, import_runtime147.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("div", { id: defaultTestId(title), ...(0, import_runtime148.trussProps)({
     display: "df",
     flexDirection: "fdc",
     gap: "gap2",
     scrollMarginTop: ["scrollMarginTop_var", {
-      "--scrollMarginTop": (0, import_runtime147.maybeCssVar)(stickyNavAndHeaderOffset())
+      "--scrollMarginTop": (0, import_runtime148.maybeCssVar)(stickyNavAndHeaderOffset())
     }]
   }), ...tid.section, children: [
     /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(ContentHeader, { ...tid, title, description, actions, level: 3 }),
@@ -28660,7 +28698,7 @@ function sortByOrderField(childSections) {
 }
 
 // src/layouts/FormSectionLayout/JumpLinksRail.tsx
-var import_runtime148 = require("@homebound/truss/runtime");
+var import_runtime149 = require("@homebound/truss/runtime");
 var import_jsx_runtime227 = require("react/jsx-runtime");
 var __maybeInc31 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28671,7 +28709,7 @@ function JumpLinksRail(props) {
     activeId
   } = props;
   const tid = useTestIds(props, "jumpLinks");
-  return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("nav", { ...(0, import_runtime148.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("nav", { ...(0, import_runtime149.trussProps)({
     display: "df",
     flexDirection: "fdc",
     flexShrink: "fs0",
@@ -28681,7 +28719,7 @@ function JumpLinksRail(props) {
     position: "sticky",
     alignSelf: "asfs",
     top: ["top_var", {
-      "--top": (0, import_runtime148.maybeCssVar)(__maybeInc31(stickyNavAndHeaderOffset()))
+      "--top": (0, import_runtime149.maybeCssVar)(__maybeInc31(stickyNavAndHeaderOffset()))
     }]
   }), ...tid, children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(JumpLink, { label: link.label, href: `#${link.id}`, active: link.id === activeId, ...tid.link }, link.id)) });
 }
@@ -28749,7 +28787,7 @@ function FormSectionLayout(props) {
   });
   const showRail = withJumpLinks && jumpLinks.length >= 2 && !isMobile;
   const activeId = useActiveJumpLink(showRail ? jumpLinks.map((link) => link.id) : []);
-  const content2 = /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)("div", { ...(0, import_runtime149.trussProps)({
+  const content2 = /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)("div", { ...(0, import_runtime150.trussProps)({
     display: "df",
     flexDirection: "fdc",
     gap: "gap8",
@@ -28769,10 +28807,10 @@ function FormSectionLayout(props) {
   const form = /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(CenteredLayout, { size: "sm", children: aiMode ? /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(AiCard, { size: "lg", ...tid, children: content2 }) : content2 });
   const body = showRail ? /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)("div", { className: "df w100 mb4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(JumpLinksRail, { links: jumpLinks, activeId, ...tid.jumpLinks }),
-    /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("div", { ...(0, import_runtime149.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("div", { ...(0, import_runtime150.trussProps)({
       flexGrow: "fg1",
       marginRight: ["mr_var", {
-        "--marginRight": (0, import_runtime149.maybeCssVar)(__maybeInc32(jumpLinksRailReservation))
+        "--marginRight": (0, import_runtime150.maybeCssVar)(__maybeInc32(jumpLinksRailReservation))
       }]
     }), ...tid.column, children: form })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("div", { className: "mb4", children: form });
@@ -28782,7 +28820,7 @@ function FormSectionLayout(props) {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 var import_react163 = require("react");
-var import_runtime150 = require("@homebound/truss/runtime");
+var import_runtime151 = require("@homebound/truss/runtime");
 
 // src/layouts/useAutoHideOnScroll.ts
 var import_react160 = require("react");
@@ -28930,10 +28968,10 @@ function NavbarLayout(props) {
     position: "fixed",
     left: "left0",
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime150.maybeCssVar)(zIndices.navbar)
+      "--zIndex": (0, import_runtime151.maybeCssVar)(zIndices.navbar)
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime150.maybeCssVar)(__maybeInc33(innerWidth))
+      "--width": (0, import_runtime151.maybeCssVar)(__maybeInc33(innerWidth))
     }],
     transition: "transitionTop"
   };
@@ -28942,18 +28980,18 @@ function NavbarLayout(props) {
     top: autoHideState === "hidden" ? `calc(${bannerTop} - ${navHeight}px)` : bannerTop
   };
   const navbarEl = (0, import_react163.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { ...(0, import_runtime150.mergeProps)(void 0, cssVars, {
+  return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { ...(0, import_runtime151.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { ref: spacerRef, ...(0, import_runtime150.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { ref: spacerRef, ...(0, import_runtime151.mergeProps)(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime150.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime151.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
     /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) }) });
 }
@@ -28978,7 +29016,7 @@ function useDocumentTitle(...titleSegments) {
 }
 
 // src/components/Headers/BaseHeader.tsx
-var import_runtime151 = require("@homebound/truss/runtime");
+var import_runtime152 = require("@homebound/truss/runtime");
 var import_jsx_runtime231 = require("react/jsx-runtime");
 function BaseHeader(props) {
   const {
@@ -28991,7 +29029,7 @@ function BaseHeader(props) {
   } = props;
   const tid = useTestIds(otherProps, "header");
   useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)("header", { ...tid, ...(0, import_runtime151.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)("header", { ...tid, ...(0, import_runtime152.trussProps)({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -29005,7 +29043,7 @@ function BaseHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }]
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)("div", { ...(0, import_runtime151.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)("div", { ...(0, import_runtime152.trussProps)({
       ...{
         display: "df",
         justifyContent: "jcsb",
@@ -29021,7 +29059,7 @@ function BaseHeader(props) {
     }), children: [
       /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)("div", { className: "mw0", children: [
         breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ (0, import_jsx_runtime231.jsx)("h1", { ...tid.title, ...(0, import_runtime151.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime231.jsx)("h1", { ...tid.title, ...(0, import_runtime152.trussProps)({
           fontWeight: "fw6",
           fontSize: "fz_20px",
           lineHeight: "lh_28px",
@@ -29037,7 +29075,7 @@ function BaseHeader(props) {
 }
 
 // src/components/Headers/PageHeader.tsx
-var import_runtime152 = require("@homebound/truss/runtime");
+var import_runtime153 = require("@homebound/truss/runtime");
 var import_jsx_runtime232 = require("react/jsx-runtime");
 function PageHeader2(props) {
   const {
@@ -29047,12 +29085,21 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  const hasActions = !!actions && actions.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)("div", { className: "df gap1 fs0", ...tid.actions, children: [
+  const {
+    sm
+  } = useBreakpoint();
+  const {
+    bottomSlotActions,
+    rightSlotActions
+  } = splitHeaderActionsOnSm(actions, sm);
+  return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)("div", { className: "df gap2 fs0", ...tid.actions, children: [
     /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(AutoSaveIndicator, { hideOnIdle: true }),
     rightSlot,
-    hasActions && /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(HeaderActions, { actions, collapseOnSm: true })
-  ] }), bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("div", { ...(0, import_runtime152.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
+    rightSlotActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(HeaderActions, { actions: rightSlotActions, collapseOnSm: true })
+  ] }), bottomSlot: (bottomSlotActions.length > 0 || tabs) && /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)(import_jsx_runtime232.Fragment, { children: [
+    bottomSlotActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("div", { ...(0, import_runtime153.trussProps)(pageContentPaddingX), ...tid.bottomSlot, children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(HeaderActions, { actions: bottomSlotActions }) }),
+    tabs && /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("div", { ...(0, import_runtime153.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Tabs, { ...tabs, ...tid.tabs }) })
+  ] }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -29061,7 +29108,7 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-var import_runtime153 = require("@homebound/truss/runtime");
+var import_runtime154 = require("@homebound/truss/runtime");
 var import_jsx_runtime233 = require("react/jsx-runtime");
 var __maybeInc34 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -29093,13 +29140,13 @@ function PageHeaderLayout(props) {
   const innerCss = {
     position: "fixed",
     left: ["left_var", {
-      "--left": (0, import_runtime153.maybeCssVar)(__maybeInc34(headerLeft))
+      "--left": (0, import_runtime154.maybeCssVar)(__maybeInc34(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime153.maybeCssVar)(__maybeInc34(headerWidth))
+      "--width": (0, import_runtime154.maybeCssVar)(__maybeInc34(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime153.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime154.maybeCssVar)(zIndices.pageStickyHeader)
     }],
     transition: "transitionAll"
   };
@@ -29107,17 +29154,17 @@ function PageHeaderLayout(props) {
     top: autoHideState === "hidden" ? `calc(${outerTop} - ${headerHeight}px)` : outerTop
   };
   const pageHeaderEl = (0, import_react165.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("div", { ...(0, import_runtime153.mergeProps)(void 0, cssVars, {
+  return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("div", { ...(0, import_runtime154.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("div", { ref: spacerRef, ...(0, import_runtime153.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("div", { ref: spacerRef, ...(0, import_runtime154.mergeProps)(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime153.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime154.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
     /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
@@ -29216,7 +29263,7 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-var import_runtime154 = require("@homebound/truss/runtime");
+var import_runtime155 = require("@homebound/truss/runtime");
 var import_jsx_runtime237 = require("react/jsx-runtime");
 var __maybeInc35 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -29267,31 +29314,31 @@ function WorkflowPageLayout(props) {
     };
   }, [showFooter]);
   return /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(DocumentScrollLayoutProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)("div", { ...(0, import_runtime154.mergeProps)(void 0, cssVars, {
+    /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)("div", { ...(0, import_runtime155.mergeProps)(void 0, cssVars, {
       display: "df",
       flexDirection: "fdc",
       width: "w100"
     }), ...tid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { ...(0, import_runtime154.mergeProps)(void 0, {
+      /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { ...(0, import_runtime155.mergeProps)(void 0, {
         height: headerHeight
       }, {
         flexShrink: "fs0",
         width: "w100"
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime154.trussProps)({
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime155.trussProps)({
         position: "fixed",
         left: "left0",
         width: ["w_var", {
-          "--width": (0, import_runtime154.maybeCssVar)(__maybeInc35(headerWidth))
+          "--width": (0, import_runtime155.maybeCssVar)(__maybeInc35(headerWidth))
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime154.maybeCssVar)(zIndices.pageStickyHeader)
+          "--zIndex": (0, import_runtime155.maybeCssVar)(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": (0, import_runtime154.maybeCssVar)(__maybeInc35(outerTop))
+          "--top": (0, import_runtime155.maybeCssVar)(__maybeInc35(outerTop))
         }],
         transition: "transitionAll"
       }), ...tid.header, children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? void 0 : actions, stepperTabs }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { ...(0, import_runtime154.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { ...(0, import_runtime155.trussProps)({
         ...{
           display: "df",
           flexDirection: "fdc",
@@ -29303,28 +29350,28 @@ function WorkflowPageLayout(props) {
         ...aiMode && {
           backgroundImage: "aiBackground",
           minHeight: ["mh_var", {
-            "--minHeight": (0, import_runtime154.maybeCssVar)(documentScrollBodyMinHeight())
+            "--minHeight": (0, import_runtime155.maybeCssVar)(documentScrollBodyMinHeight())
           }]
         }
       }), ...tid.body, children }),
-      showFooter && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { ...(0, import_runtime154.trussProps)({
+      showFooter && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { ...(0, import_runtime155.trussProps)({
         flexShrink: "fs0",
         width: "w100",
         height: ["h_var", {
           "--height": `${mobileFooterHeightPx}px`
         }]
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { ...(0, import_runtime154.trussProps)({
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { ...(0, import_runtime155.trussProps)({
         ...{
           position: "fixed",
           bottom: "bottom0",
           width: ["w_var", {
-            "--width": (0, import_runtime154.maybeCssVar)(__maybeInc35(headerWidth))
+            "--width": (0, import_runtime155.maybeCssVar)(__maybeInc35(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
           }],
           zIndex: ["z_var", {
-            "--zIndex": (0, import_runtime154.maybeCssVar)(zIndices.pageStickyFooter)
+            "--zIndex": (0, import_runtime155.maybeCssVar)(zIndices.pageStickyFooter)
           }],
           display: "df",
           alignItems: "aic",
@@ -29503,7 +29550,7 @@ function BoundSelectAndTextField(props) {
 }
 
 // src/forms/FormHeading.tsx
-var import_runtime155 = require("@homebound/truss/runtime");
+var import_runtime156 = require("@homebound/truss/runtime");
 var import_jsx_runtime242 = (
   // Add space before the heading, but only if it's not first.
   require("react/jsx-runtime")
@@ -29515,7 +29562,7 @@ function FormHeading(props) {
     isFirst = false,
     ...others
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)("h3", { ...(0, import_runtime155.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)("h3", { ...(0, import_runtime156.trussProps)({
     ...{
       fontWeight: "fw4",
       fontSize: "fz_16px",
@@ -29531,7 +29578,7 @@ FormHeading.isFormHeading = true;
 
 // src/forms/StaticField.tsx
 var import_utils49 = require("@react-aria/utils");
-var import_runtime156 = require("@homebound/truss/runtime");
+var import_runtime157 = require("@homebound/truss/runtime");
 var import_jsx_runtime243 = require("react/jsx-runtime");
 function StaticField(props) {
   const {
@@ -29545,14 +29592,14 @@ function StaticField(props) {
   } = props;
   const tid = useTestIds(props, typeof label === "string" ? defaultTestId(label) : "staticField");
   const id = (0, import_utils49.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)("div", { ...(0, import_runtime156.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)("div", { ...(0, import_runtime157.trussProps)({
     ...labelStyle === "left" ? {
       display: "df",
       justifyContent: "jcsb",
       maxWidth: "maxw100"
     } : {}
   }), ...tid.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime243.jsx)("label", { ...(0, import_runtime156.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime243.jsx)("label", { ...(0, import_runtime157.trussProps)({
       display: "db",
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -29562,7 +29609,7 @@ function StaticField(props) {
       }],
       marginBottom: "mb_4px"
     }), htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime243.jsx)("div", { id, ...(0, import_runtime156.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime243.jsx)("div", { id, ...(0, import_runtime157.trussProps)({
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -29709,7 +29756,7 @@ function Autocomplete(props) {
 var import_react171 = require("react");
 var import_react_aria66 = require("react-aria");
 var import_react_stately19 = require("react-stately");
-var import_runtime157 = require("@homebound/truss/runtime");
+var import_runtime158 = require("@homebound/truss/runtime");
 var import_jsx_runtime245 = require("react/jsx-runtime");
 function ToggleButton(props) {
   const {
@@ -29774,7 +29821,7 @@ function ToggleButton(props) {
     ...focusProps,
     ...hoverProps,
     ...pressProps,
-    ...(0, import_runtime157.trussProps)({
+    ...(0, import_runtime158.trussProps)({
       // Gray500 off-state has no semantic match — keep palette (OnSurfaceMuted is Gray700).
       ...{
         borderRadius: "br4",