@homebound/beam 3.0.3 → 3.0.5

package/dist/index.cjs

@@ -143,7 +143,7 @@ __export(index_exports, {
   RightPaneProvider: () => RightPaneProvider,
   RightSidebar: () => RightSidebar,
   Row: () => Row,
-  RuntimeStyle: () => import_runtime2.RuntimeStyle,
+  RuntimeCss: () => RuntimeCss,
   ScrollShadows: () => ScrollShadows,
   ScrollableContent: () => ScrollableContent,
   ScrollableParent: () => ScrollableParent,
@@ -305,7 +305,7 @@ __export(index_exports, {
   useResponsiveGridItem: () => useResponsiveGridItem,
   useRightPane: () => useRightPane,
   useRightPaneContext: () => useRightPaneContext,
-  useRuntimeStyle: () => import_runtime2.useRuntimeStyle,
+  useRuntimeStyle: () => useRuntimeStyle,
   useScrollableParent: () => useScrollableParent,
   useSessionStorage: () => useSessionStorage,
   useSetupColumnSizes: () => useSetupColumnSizes,
@@ -322,7 +322,6 @@ module.exports = __toCommonJS(index_exports);
 
 // src/Css.ts
 var import_runtime = require("@homebound/truss/runtime");
-var import_runtime2 = require("@homebound/truss/runtime");
 var CssBuilder = class _CssBuilder {
   constructor(opts) {
     this.opts = opts;
@@ -4178,12 +4177,20 @@ var CssBuilder = class _CssBuilder {
       return this;
     }
     const newRules = typeof propOrStyles === "string" ? { [propOrStyles]: value } : propOrStyles;
+    if (typeof propOrStyles !== "string" && newRules.$css) {
+      throw new Error("add() received a Css expression \u2014 use with() to compose Css expressions");
+    }
     const rules = this.selector ? { ...this.rules, [this.selector]: { ...this.rules[this.selector], ...newRules } } : { ...this.rules, ...newRules };
     return this.newCss({ rules });
   }
-  /** Inline a partial style hash, skipping any undefined values. */
-  addCss(props) {
-    return this.add(omitUndefinedValues(props));
+  with(cssProp) {
+    if (!this.enabled) {
+      return this;
+    }
+    const { $css, ...rest } = cssProp;
+    const filtered = omitUndefinedValues(rest);
+    const rules = this.selector ? { ...this.rules, [this.selector]: { ...this.rules[this.selector], ...filtered } } : { ...this.rules, ...filtered };
+    return this.newCss({ rules });
   }
   /** Marker for the build-time transform to append a raw className. */
   className(className) {
@@ -4317,6 +4324,16 @@ var Css = new CssBuilder({
   elseApplied: false,
   runtimeError: void 0
 });
+var RuntimeCss = new CssBuilder({
+  rules: {},
+  enabled: true,
+  selector: void 0,
+  elseApplied: false,
+  runtimeError: void 0
+});
+function useRuntimeStyle(css2) {
+  (0, import_runtime.useRuntimeStyle)(css2);
+}
 var Breakpoints = /* @__PURE__ */ ((Breakpoints2) => {
   Breakpoints2["print"] = "@media print";
   Breakpoints2["sm"] = "@media screen and (max-width: 599px)";
@@ -4531,7 +4548,7 @@ function pluralize(count, noun, pluralNoun) {
 }
 
 // src/components/Tooltip.tsx
-var import_runtime3 = require("@homebound/truss/runtime");
+var import_runtime2 = require("@homebound/truss/runtime");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var gapCrossingDelay = 100;
 function Tooltip(props) {
@@ -4610,7 +4627,7 @@ function Popper(props) {
     }],
     placement
   });
-  return (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref: popperRef, ...attributes.popper, ...ariaProps, onMouseEnter, onMouseLeave, ...(0, import_runtime3.mergeProps)(void 0, styles.popper, {
+  return (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref: popperRef, ...attributes.popper, ...ariaProps, onMouseEnter, onMouseLeave, ...(0, import_runtime2.mergeProps)(void 0, styles.popper, {
     ...{
       maxWidth: "maxw_320px",
       backgroundColor: ["bgColor_var", {
@@ -4644,7 +4661,7 @@ function resolveTooltip(disabled, tooltip, readOnly) {
 }
 
 // src/components/Icon.tsx
-var import_runtime4 = require("@homebound/truss/runtime");
+var import_runtime3 = require("@homebound/truss/runtime");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Icon = import_react4.default.memo((props) => {
   const {
@@ -4660,7 +4677,7 @@ var Icon = import_react4.default.memo((props) => {
   return maybeTooltip({
     title: tooltip,
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { "aria-hidden": true, width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime4.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { "aria-hidden": true, width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime3.trussProps)({
       ...{
         fill: ["fill_var", {
           "--fill": color
@@ -5158,7 +5175,7 @@ function usePresentationContext() {
 }
 
 // src/components/Chip.tsx
-var import_runtime5 = require("@homebound/truss/runtime");
+var import_runtime4 = require("@homebound/truss/runtime");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ChipTypes = {
   caution: "caution",
@@ -5191,7 +5208,7 @@ function Chip(props) {
   return maybeTooltip({
     title,
     placement: "bottom",
-    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { ...(0, import_runtime5.trussProps)(styles), ...tid, children: [
+    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { ...(0, import_runtime4.trussProps)(styles), ...tid, children: [
       icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon, inc: 2, xss: {
         flexShrink: "fs0"
       } }),
@@ -5253,7 +5270,7 @@ var pyHeight = (compact) => compact ? 2 : 4;
 var minhPx = (compact) => compact ? 20 : 24;
 
 // src/components/Chips.tsx
-var import_runtime6 = require("@homebound/truss/runtime");
+var import_runtime5 = require("@homebound/truss/runtime");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function Chips(props) {
   const {
@@ -5265,7 +5282,7 @@ function Chips(props) {
     xss = {},
     wrap = presentationWrap
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...(0, import_runtime6.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...(0, import_runtime5.trussProps)({
     ...{
       display: "df",
       alignItems: "aifs",
@@ -5273,7 +5290,7 @@ function Chips(props) {
       whiteSpace: "whiteSpace_normal"
     },
     ...wrap !== false ? {
-      flexWrap: "flexWrap_wrap"
+      flexWrap: "fww"
     } : {},
     ...xss
   }), children: values.map((value, i) => {
@@ -5299,7 +5316,7 @@ var import_react_dom2 = require("react-dom");
 
 // src/components/Layout/ScrollableParent.tsx
 var import_react7 = require("react");
-var import_runtime7 = require("@homebound/truss/runtime");
+var import_runtime6 = require("@homebound/truss/runtime");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var __maybeInc = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -5339,7 +5356,7 @@ function ScrollableParent(props) {
   (0, import_react7.useEffect)(() => {
     scrollableRef.current.appendChild(scrollableEl);
   }, [scrollableEl]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ScrollableParentContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Tag2, { ...(0, import_runtime7.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ScrollableParentContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Tag2, { ...(0, import_runtime6.trussProps)({
     ...{
       minHeight: "mh0",
       minWidth: "mw0",
@@ -5349,7 +5366,7 @@ function ScrollableParent(props) {
     },
     ...xss
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ...(0, import_runtime7.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ...(0, import_runtime6.trussProps)({
       ...{
         paddingLeft: ["pl_var", {
           "--paddingLeft": __maybeInc(context.paddingLeft)
@@ -5374,7 +5391,7 @@ function useScrollableParent() {
 }
 
 // src/components/Layout/ScrollableContent.tsx
-var import_runtime8 = require("@homebound/truss/runtime");
+var import_runtime7 = require("@homebound/truss/runtime");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var __maybeInc2 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -5402,7 +5419,7 @@ function ScrollableContent(props) {
   }
   const showBottomSpacer = !omitBottomPadding && !virtualized;
   const virtualizedScrollParent = virtualized ? scrollableEl.parentElement : null;
-  return (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VirtualizedScrollParentContext.Provider, { value: virtualizedScrollParent, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ...(0, import_runtime8.trussProps)({
+  return (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VirtualizedScrollParentContext.Provider, { value: virtualizedScrollParent, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ...(0, import_runtime7.trussProps)({
     ...{
       height: "h100",
       paddingRight: ["pr_var", {
@@ -5430,7 +5447,7 @@ function useVirtualizedScrollParent() {
 }
 
 // src/components/Loader.tsx
-var import_runtime9 = require("@homebound/truss/runtime");
+var import_runtime8 = require("@homebound/truss/runtime");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function Loader({
   size = "lg",
@@ -5438,7 +5455,7 @@ function Loader({
 }) {
   const [dimensions, borderSize] = sizeToPixels[size];
   const [bgColor, spinnerColor] = contrast ? ["rgba(141, 141, 141, 1)" /* Gray600 */, "rgba(236, 235, 235, 1)" /* Gray200 */] : ["rgba(255,255,255,1)" /* White */, "rgba(29, 78, 216, 1)" /* Blue700 */];
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "aria-label": "Loading", ...(0, import_runtime9.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "aria-label": "Loading", ...(0, import_runtime8.trussProps)({
     borderRadius: "br100",
     borderStyle: "bss",
     borderWidth: ["bw_var", {
@@ -5594,7 +5611,7 @@ function getButtonOrLink(content, onClick, attrs, openInNew = false, downloadLin
 }
 
 // src/components/IconButton.tsx
-var import_runtime10 = require("@homebound/truss/runtime");
+var import_runtime9 = require("@homebound/truss/runtime");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function IconButton(props) {
   const {
@@ -5666,7 +5683,7 @@ function IconButton(props) {
     ...focusProps,
     ...hoverProps,
     ref,
-    ...(0, import_runtime10.mergeProps)(typeof onPress === "string" ? navLink : void 0, void 0, styles),
+    ...(0, import_runtime9.mergeProps)(typeof onPress === "string" ? navLink : void 0, void 0, styles),
     "aria-label": label
   };
   const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon, color: color || (isDisabled ? "rgba(201, 201, 201, 1)" /* Gray400 */ : circle && (isHovered || active || isFocusVisible) ? defaultIconColor : iconColor), bgColor, inc: compact ? 2 : circle ? 2.5 : inc });
@@ -5740,7 +5757,7 @@ var activeStyles = {
 
 // src/components/Table/components/ExpandableHeader.tsx
 var import_react18 = require("react");
-var import_runtime11 = require("@homebound/truss/runtime");
+var import_runtime10 = require("@homebound/truss/runtime");
 
 // src/hooks/useBreakpoint.tsx
 var import_fast_deep_equal = __toESM(require("fast-deep-equal"), 1);
@@ -5965,7 +5982,7 @@ function ExpandableHeader(props) {
     hoverProps,
     isHovered
   } = useHover2({});
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { ...hoverProps, ...(0, import_runtime11.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { ...hoverProps, ...(0, import_runtime10.trussProps)({
     display: "df",
     fontWeight: "fw4",
     fontSize: "fz_12px",
@@ -5996,7 +6013,7 @@ function ExpandableHeader(props) {
     }
     tableState.toggleExpandedColumn(column2.id);
   }, "data-testid": "expandableColumn", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { ...(0, import_runtime11.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { ...(0, import_runtime10.trussProps)({
       display: "df",
       alignItems: "aic",
       ...applyStickyStyles ? {
@@ -6018,7 +6035,7 @@ function ExpandableHeader(props) {
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "tal oh d_negwebkit_box wbo_vertical to_ellipsis wlc_2", children: title }),
       tooltipEl
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { ...(0, import_runtime11.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { ...(0, import_runtime10.trussProps)({
       ...applyStickyStyles ? {
         position: "sticky",
         right: "right_12px",
@@ -6032,7 +6049,7 @@ function ExpandableHeader(props) {
 
 // src/components/Table/components/SortHeader.tsx
 var import_react19 = require("react");
-var import_runtime12 = require("@homebound/truss/runtime");
+var import_runtime11 = require("@homebound/truss/runtime");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function SortHeader(props) {
   const {
@@ -6068,7 +6085,7 @@ function SortHeader(props) {
       } : {}
     }
   }, inc: 2, ...tid.icon }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ...tid, ...(0, import_runtime12.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ...tid, ...(0, import_runtime11.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -6086,7 +6103,7 @@ function SortHeader(props) {
 }
 
 // src/components/Table/utils/utils.tsx
-var import_runtime13 = require("@homebound/truss/runtime");
+var import_runtime12 = require("@homebound/truss/runtime");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment, column2, isExpandableHeader, isExpandable, minStickyLeftOffset, isKeptSelectedRow) {
   if (isKeptSelectedRow && column2.id === "beamCollapseColumn") {
@@ -6100,7 +6117,7 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
   }
   const tooltip = isGridCellContent(maybeContent) ? maybeContent.tooltip : void 0;
   const tooltipEl = tooltip ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fs0 ml_4px", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { icon: "infoCircle", tooltip, inc: 2, color: "rgba(141, 141, 141, 1)" /* Gray600 */ }) }) : null;
-  content = isGridCellContent(maybeContent) && !!maybeContent.onClick ? getButtonOrLink(content, maybeContent.onClick, (0, import_runtime13.trussProps)({
+  content = isGridCellContent(maybeContent) && !!maybeContent.onClick ? getButtonOrLink(content, maybeContent.onClick, (0, import_runtime12.trussProps)({
     maxWidth: "maxw100",
     color: "blue700",
     textAlign: "ta_inherit",
@@ -6335,7 +6352,7 @@ var import_react_day_picker3 = require("react-day-picker");
 // src/components/internal/DatePicker/Day.tsx
 var import_react21 = require("react");
 var import_react_day_picker = require("react-day-picker");
-var import_runtime14 = require("@homebound/truss/runtime");
+var import_runtime13 = require("@homebound/truss/runtime");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function Day(props) {
   const tid = useTestIds(props, "datePickerDay");
@@ -6369,7 +6386,7 @@ function Day(props) {
   } = activeModifiers;
   const showRangeStyles = !(range_end === true && range_start === true);
   const showActiveStyles = !disabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { ...otherProps, ref: buttonRef, type: "button", ...(0, import_runtime14.mergeProps)("beam-day-button", void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { ...otherProps, ref: buttonRef, type: "button", ...(0, import_runtime13.mergeProps)("beam-day-button", void 0, {
     position: "relative",
     paddingBottom: "pb_4px",
     outline: "outline0",
@@ -6381,7 +6398,7 @@ function Day(props) {
   }, ...disabled && {
     "data-disabled": ""
   }, ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ...(0, import_runtime14.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ...(0, import_runtime13.trussProps)({
       ...{
         overflow: "oh",
         color: "gray900",
@@ -6406,7 +6423,7 @@ function Day(props) {
         color: "gray500"
       }
     }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ...(0, import_runtime14.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ...(0, import_runtime13.trussProps)({
         marginTop: ["mt_var", {
           "--marginTop": `${-2}px`
         }]
@@ -6414,7 +6431,7 @@ function Day(props) {
       indicatorDot && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "div",
         {
-          ...(0, import_runtime14.trussProps)({
+          ...(0, import_runtime13.trussProps)({
             position: "absolute",
             bottom: "bottom_4px",
             width: "w_4px",
@@ -6429,7 +6446,7 @@ function Day(props) {
         }
       )
     ] }),
-    showRangeStyles && range_start && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { ...(0, import_runtime14.trussProps)({
+    showRangeStyles && range_start && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { ...(0, import_runtime13.trussProps)({
       ...rangeBaseStyles,
       ...{
         right: ["right_var", {
@@ -6438,7 +6455,7 @@ function Day(props) {
         width: "w_8px"
       }
     }) }),
-    showRangeStyles && range_end && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { ...(0, import_runtime14.trussProps)({
+    showRangeStyles && range_end && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { ...(0, import_runtime13.trussProps)({
       ...rangeBaseStyles,
       ...{
         width: "w_8px",
@@ -6447,7 +6464,7 @@ function Day(props) {
         }]
       }
     }) }),
-    showRangeStyles && range_middle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { ...(0, import_runtime14.trussProps)({
+    showRangeStyles && range_middle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { ...(0, import_runtime13.trussProps)({
       ...rangeBaseStyles,
       ...{
         left: ["left_var", {
@@ -6594,7 +6611,7 @@ var import_react_stately2 = require("react-stately");
 
 // src/components/internal/MenuSection.tsx
 var import_react_aria4 = require("react-aria");
-var import_runtime15 = require("@homebound/truss/runtime");
+var import_runtime14 = require("@homebound/truss/runtime");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function MenuSectionImpl(props) {
   const {
@@ -6616,7 +6633,7 @@ function MenuSectionImpl(props) {
   const tid = useTestIds(props);
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
     isPersistentSection && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { ...separatorProps, className: "bts_solid btw_1px bcGray200" }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { ...itemProps, ...(0, import_runtime15.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { ...itemProps, ...(0, import_runtime14.trussProps)({
       color: "gray900",
       ...!isPersistentSection ? {
         overflow: "oa"
@@ -6629,7 +6646,7 @@ function MenuSectionImpl(props) {
 }
 
 // src/components/internal/Menu.tsx
-var import_runtime24 = require("@homebound/truss/runtime");
+var import_runtime23 = require("@homebound/truss/runtime");
 
 // src/inputs/internal/MenuSearchField.tsx
 var import_textfield = require("@react-aria/textfield");
@@ -6640,7 +6657,7 @@ var import_react26 = require("react");
 var import_react_aria8 = require("react-aria");
 
 // src/components/HelperText.tsx
-var import_runtime16 = require("@homebound/truss/runtime");
+var import_runtime15 = require("@homebound/truss/runtime");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function HelperText(props) {
   const {
@@ -6648,7 +6665,7 @@ function HelperText(props) {
     contrast = false,
     ...others
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ...(0, import_runtime16.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ...(0, import_runtime15.trussProps)({
     color: "gray700",
     fontWeight: "fw4",
     fontSize: "fz_12px",
@@ -6663,7 +6680,7 @@ function HelperText(props) {
 // src/components/Label.tsx
 var import_react22 = __toESM(require("react"), 1);
 var import_react_aria5 = require("react-aria");
-var import_runtime17 = require("@homebound/truss/runtime");
+var import_runtime16 = require("@homebound/truss/runtime");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function LabelComponent(props) {
   const {
@@ -6677,7 +6694,7 @@ function LabelComponent(props) {
     xss,
     ...others
   } = props;
-  const labelEl = /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { ...labelProps, ...others, ...(0, import_runtime17.trussProps)({
+  const labelEl = /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { ...labelProps, ...others, ...(0, import_runtime16.trussProps)({
     ...{
       display: "dif",
       alignItems: "aic",
@@ -6712,7 +6729,7 @@ function InlineLabel({
   multiline = false,
   ...others
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { ...labelProps, ...others, ...(0, import_runtime17.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { ...labelProps, ...others, ...(0, import_runtime16.trussProps)({
     fontWeight: "fw4",
     fontSize: "fz_14px",
     lineHeight: "lh_20px",
@@ -6745,11 +6762,11 @@ function CssReset() {
 }
 
 // src/components/Table/components/cell.tsx
-var import_runtime18 = require("@homebound/truss/runtime");
+var import_runtime17 = require("@homebound/truss/runtime");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var defaultRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "td" : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Cell, { ...(0, import_runtime18.mergeProps)(classNames, void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Cell, { ...(0, import_runtime17.mergeProps)(classNames, void 0, {
     ...css2,
     ...{
       cursor: "cursor_default"
@@ -6760,7 +6777,7 @@ var defaultRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, class
 };
 var headerRenderFn = (column2, as, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "th" : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Cell, { ...(0, import_runtime18.mergeProps)(classNames, void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Cell, { ...(0, import_runtime17.mergeProps)(classNames, void 0, {
     ...css2
   }), ...as === "table" && {
     colSpan
@@ -6769,15 +6786,15 @@ var headerRenderFn = (column2, as, colSpan) => (key, css2, content, row, rowStyl
 var rowLinkRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const to = rowStyle.rowLink(row);
   if (as === "table") {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("td", { ...(0, import_runtime18.mergeProps)(classNames, void 0, {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("td", { ...(0, import_runtime17.mergeProps)(classNames, void 0, {
       ...css2
-    }), colSpan, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime18.mergeProps)(navLink, void 0, {
+    }), colSpan, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime17.mergeProps)(navLink, void 0, {
       textDecoration: "tdn",
       color: "color_unset",
       display: "db"
     }), children: content }) }, key);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime18.mergeProps)(`${navLink} ${classNames}`, void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime17.mergeProps)(`${navLink} ${classNames}`, void 0, {
     ...{
       textDecoration: "tdn",
       color: "color_unset"
@@ -6787,7 +6804,7 @@ var rowLinkRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, class
 };
 var rowClickRenderFn = (as, api, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "td" : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Cell, { ...(0, import_runtime18.mergeProps)(classNames, void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Cell, { ...(0, import_runtime17.mergeProps)(classNames, void 0, {
     ...css2
   }), onClick: (e) => {
     rowStyle.onClick(row, api);
@@ -6799,7 +6816,7 @@ var rowClickRenderFn = (as, api, colSpan) => (key, css2, content, row, rowStyle,
 
 // src/components/Table/components/ColumnResizeHandle.tsx
 var import_react23 = require("react");
-var import_runtime19 = require("@homebound/truss/runtime");
+var import_runtime18 = require("@homebound/truss/runtime");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function findScrollableParent(element) {
   if (!element) return null;
@@ -6964,7 +6981,7 @@ function ColumnResizeHandle({
     };
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref: handleRef, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => !isDragging && setIsHovering(false), ...(0, import_runtime19.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref: handleRef, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => !isDragging && setIsHovering(false), ...(0, import_runtime18.trussProps)({
       position: "absolute",
       top: "top0",
       bottom: "bottom0",
@@ -6980,7 +6997,7 @@ function ColumnResizeHandle({
         backgroundColor: "h_bgGray700 h_bgGray700"
       } : {}
     }), ...tid.handle, "data-column-id": columnId, "data-column-index": columnIndex }),
-    isDragging && guideLineX !== null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...(0, import_runtime19.trussProps)({
+    isDragging && guideLineX !== null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...(0, import_runtime18.trussProps)({
       position: "fixed",
       top: ["top_var", {
         "--top": `${guideLineTop}px`
@@ -7002,7 +7019,7 @@ function ColumnResizeHandle({
 
 // src/components/Table/components/KeptGroupRow.tsx
 var import_react24 = require("react");
-var import_runtime20 = require("@homebound/truss/runtime");
+var import_runtime19 = require("@homebound/truss/runtime");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var __maybeInc3 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -7021,7 +7038,7 @@ function KeptGroupRow(props) {
     tableState
   } = (0, import_react24.useContext)(TableStateContext);
   const numHiddenSelectedRows = useComputed(() => tableState.keptRows.length, [tableState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CellTag, { ...(0, import_runtime20.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CellTag, { ...(0, import_runtime19.trussProps)({
     ...style.cellCss,
     ...style.betweenRowsCss,
     ...isLastBodyRow && style.lastRowCellCss,
@@ -7819,7 +7836,7 @@ function canClientSideSort(value) {
 
 // src/components/Table/components/Row.tsx
 var import_use_debounce2 = require("use-debounce");
-var import_runtime21 = require("@homebound/truss/runtime");
+var import_runtime20 = require("@homebound/truss/runtime");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var __maybeInc4 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -7987,7 +8004,7 @@ function RowImpl(props) {
   const ref = (0, import_react25.useRef)(null);
   const dragOverCallback = (0, import_react25.useCallback)((row2, evt) => onDragOver?.(row2, evt), [onDragOver]);
   const onDragOverDebounced = (0, import_use_debounce2.useDebouncedCallback)(dragOverCallback, 100);
-  const RowContent = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RowTag, { ...(0, import_runtime21.mergeProps)(BorderHoverParent, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
+  const RowContent = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RowTag, { ...(0, import_runtime20.mergeProps)(BorderHoverParent, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
     const maybeExpandedColumn = expandColumnHidden ? columns[columnIndex - 1] : column2;
     const isExpanded = tableState.isExpandedColumn(maybeExpandedColumn.id);
     if (column2.hideOnExpand && isExpanded) {
@@ -8152,7 +8169,7 @@ function RowImpl(props) {
       const currentSizeStr = columnSizes[columnIndex];
       const minWidthPx = column2.mw ? parseInt(column2.mw.replace("px", ""), 10) : 100;
       const currentWidthPx = parseWidthToPx(currentSizeStr, void 0) ?? resizedWidths?.[column2.id] ?? minWidthPx;
-      const cellElementWithHandle = import_react25.default.cloneElement(cellElement, (0, import_react_aria6.mergeProps)(cellElement.props, (0, import_runtime21.trussProps)({
+      const cellElementWithHandle = import_react25.default.cloneElement(cellElement, (0, import_react_aria6.mergeProps)(cellElement.props, (0, import_runtime20.trussProps)({
         ...!maybeSticky && {
           position: "relative"
         }
@@ -8169,7 +8186,7 @@ function RowImpl(props) {
   return row.draggable ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
-      ...(0, import_runtime21.trussProps)(containerCss),
+      ...(0, import_runtime20.trussProps)(containerCss),
       onDrop: (evt) => onDrop?.(row, evt),
       onDragEnter: (evt) => onDragEnter?.(row, evt),
       onDragOver: (evt) => {
@@ -8204,7 +8221,7 @@ function useLabelSuffix(required, readOnly) {
 
 // src/inputs/ErrorMessage.tsx
 var import_react_aria7 = require("react-aria");
-var import_runtime22 = require("@homebound/truss/runtime");
+var import_runtime21 = require("@homebound/truss/runtime");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function ErrorMessage(props) {
   const {
@@ -8214,7 +8231,7 @@ function ErrorMessage(props) {
     hidden = false,
     ...others
   } = props;
-  const errorEl = errorMsg ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ...(0, import_runtime22.trussProps)({
+  const errorEl = errorMsg ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ...(0, import_runtime21.trussProps)({
     color: "red600",
     fontWeight: "fw4",
     fontSize: "fz_14px",
@@ -8237,7 +8254,7 @@ function getFieldWidth(fullWidth) {
 }
 
 // src/inputs/TextFieldBase.tsx
-var import_runtime23 = require("@homebound/truss/runtime");
+var import_runtime22 = require("@homebound/truss/runtime");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var __maybeInc5 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -8617,12 +8634,12 @@ function TextFieldBase(props) {
     ...xss
   };
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ...(0, import_runtime23.trussProps)(fieldStyles.container), ...groupProps, ...focusWithinProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ...(0, import_runtime22.trussProps)(fieldStyles.container), ...groupProps, ...focusWithinProps, children: [
       label && labelStyle !== "inline" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { labelProps, hidden: labelStyle === "hidden" || compound, label, inline: labelStyle !== "above", suffix: labelSuffix, contrast, ...tid.label }),
       maybeTooltip({
         title: tooltip,
         placement: "top",
-        children: inputProps.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ...(0, import_runtime23.mergeProps)(BorderHoverChild, void 0, {
+        children: inputProps.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ...(0, import_runtime22.mergeProps)(BorderHoverChild, void 0, {
           // Use input wrapper to get common styles, but then we need to override some
           ...fieldStyles.inputWrapperReadOnly,
           ...multiline ? {
@@ -8646,7 +8663,7 @@ function TextFieldBase(props) {
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "div",
           {
-            ...(0, import_runtime23.mergeProps)(BorderHoverChild, void 0, {
+            ...(0, import_runtime22.mergeProps)(BorderHoverChild, void 0, {
               ...fieldStyles.inputWrapper,
               ...inputProps.disabled ? fieldStyles.disabled : {},
               ...showFocus ? fieldStyles.focus : {},
@@ -8674,7 +8691,7 @@ function TextFieldBase(props) {
                 {
                   tabIndex: -1,
                   ...tid.unfocusedPlaceholderContainer,
-                  ...(0, import_runtime23.trussProps)({
+                  ...(0, import_runtime22.trussProps)({
                     ...{
                       display: "df",
                       alignSelf: "asc",
@@ -8702,7 +8719,7 @@ function TextFieldBase(props) {
                   children: unfocusedPlaceholder
                 }
               ),
-              multiline ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("textarea", { ...fieldElementProps, ...errorMessageProps, ref: fieldRef, rows: 1, ...(0, import_runtime23.trussProps)(fieldElementCss), ...tid }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("input", { ...fieldElementProps, ...errorMessageProps, ref: fieldRef, ...(0, import_runtime23.trussProps)(fieldElementCss), ...tid }),
+              multiline ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("textarea", { ...fieldElementProps, ...errorMessageProps, ref: fieldRef, rows: 1, ...(0, import_runtime22.trussProps)(fieldElementCss), ...tid }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("input", { ...fieldElementProps, ...errorMessageProps, ref: fieldRef, ...(0, import_runtime22.trussProps)(fieldElementCss), ...tid }),
               isFocused && clearable && onChange && inputProps.value && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { icon: "xCircle", color: "rgba(100, 100, 100, 1)" /* Gray700 */, onClick: () => {
                 onChange(void 0);
                 fieldRef.current?.focus();
@@ -8719,7 +8736,7 @@ function TextFieldBase(props) {
       ] })
     ] }),
     labelStyle === "left" && (alwaysShowHelperText || !compound && !inputProps.disabled && !inputProps.readOnly && (errorMsg && !errorInTooltip || helperText)) && // Reduces the margin between the error/helper text and input field
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ...(0, import_runtime23.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ...(0, import_runtime22.trussProps)({
       marginTop: ["mt_var", {
         "--marginTop": `${-8}px`
       }]
@@ -8846,7 +8863,7 @@ function Menu(props) {
     label: "items",
     items
   }), [items]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_aria9.FocusScope, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...(0, import_runtime24.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_aria9.FocusScope, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...(0, import_runtime23.trussProps)({
     // Using `max-height: inherit` allows us to take advantage of the height set on the overlay container,
     // which updates based on the available space for the overlay within the viewport
     ...{
@@ -8883,7 +8900,7 @@ var import_react_router_dom3 = require("react-router-dom");
 
 // src/components/Avatar/Avatar.tsx
 var import_react29 = require("react");
-var import_runtime25 = require("@homebound/truss/runtime");
+var import_runtime24 = require("@homebound/truss/runtime");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var __typography4 = {
   xs2: {
@@ -8966,7 +8983,7 @@ function Avatar({
     }],
     overflow: "oh"
   };
-  const img = showFallback ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...(0, import_runtime25.trussProps)({
+  const img = showFallback ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...(0, import_runtime24.trussProps)({
     ...styles,
     ...{
       ...__typography4[sizeToFallbackTypeScale[size]] ?? {},
@@ -8976,13 +8993,13 @@ function Avatar({
       alignItems: "aic",
       justifyContent: "jcc"
     }
-  }), ...tid, children: name ? nameToInitials(name) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { icon: "userCircle", inc: sizeToIconInc[size] }) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { src, alt: name, ...(0, import_runtime25.trussProps)({
+  }), ...tid, children: name ? nameToInitials(name) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { icon: "userCircle", inc: sizeToIconInc[size] }) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { src, alt: name, ...(0, import_runtime24.trussProps)({
     ...styles,
     ...{
       objectFit: "objectCover"
     }
   }), onError: () => setShowFallback(true), loading: "lazy", ...tid });
-  return showName && name ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...(0, import_runtime25.trussProps)({
+  return showName && name ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...(0, import_runtime24.trussProps)({
     display: "dif",
     alignItems: "aic",
     gap: "gap1",
@@ -8991,7 +9008,7 @@ function Avatar({
     } : {}
   }), children: [
     img,
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { ...(0, import_runtime25.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { ...(0, import_runtime24.trussProps)({
       ...__typography4[sizeToTypeScale[size]] ?? {}
     }), children: name })
   ] }) : maybeTooltip({
@@ -9031,7 +9048,7 @@ function nameToInitials(name) {
 // src/components/Avatar/AvatarButton.tsx
 var import_react30 = require("react");
 var import_react_aria10 = require("react-aria");
-var import_runtime26 = require("@homebound/truss/runtime");
+var import_runtime25 = require("@homebound/truss/runtime");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function AvatarButton(props) {
   const {
@@ -9087,11 +9104,11 @@ function AvatarButton(props) {
     ...focusProps,
     ...hoverProps,
     ref,
-    ...(0, import_runtime26.mergeProps)(typeof onPress === "string" ? navLink : void 0, void 0, styles)
+    ...(0, import_runtime25.mergeProps)(typeof onPress === "string" ? navLink : void 0, void 0, styles)
   };
   const content = /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Avatar, { ...avatarProps, ...tid, disableTooltip: true }),
-    isPressed && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { ...(0, import_runtime26.trussProps)(pressedOverlayCss) })
+    isPressed && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { ...(0, import_runtime25.trussProps)(pressedOverlayCss) })
   ] });
   return maybeTooltip({
     // Default the tooltip to the avatar's name, if defined.
@@ -9142,7 +9159,7 @@ var import_react_aria13 = require("react-aria");
 // src/components/Button.tsx
 var import_react31 = require("react");
 var import_react_aria11 = require("react-aria");
-var import_runtime27 = require("@homebound/truss/runtime");
+var import_runtime26 = require("@homebound/truss/runtime");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function Button(props) {
   const {
@@ -9219,7 +9236,7 @@ function Button(props) {
     ...buttonProps,
     ...focusProps,
     ...hoverProps,
-    ...(0, import_runtime27.mergeProps)(asLink ? navLink : void 0, void 0, {
+    ...(0, import_runtime26.mergeProps)(asLink ? navLink : void 0, void 0, {
       ...{
         fontWeight: "fw6",
         fontSize: "fz_14px",
@@ -9624,7 +9641,7 @@ var iconStyles = {
 // src/components/NavLink.tsx
 var import_react32 = require("react");
 var import_react_aria12 = require("react-aria");
-var import_runtime28 = require("@homebound/truss/runtime");
+var import_runtime27 = require("@homebound/truss/runtime");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function NavLink(props) {
   const {
@@ -9680,7 +9697,7 @@ function NavLink(props) {
     tabIndex: isDisabled ? -1 : 0,
     /** aria-current represents the current page within a set of pages */
     "aria-current": active ? "page" : void 0,
-    ...(0, import_runtime28.trussProps)({
+    ...(0, import_runtime27.trussProps)({
       ...baseStyles5,
       ...active && activeStyles4,
       ...isDisabled && disabledStyles4,
@@ -9898,7 +9915,7 @@ function ButtonModal(props) {
 }
 
 // src/components/Avatar/AvatarGroup.tsx
-var import_runtime29 = require("@homebound/truss/runtime");
+var import_runtime28 = require("@homebound/truss/runtime");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function AvatarGroup(props) {
   const {
@@ -9909,7 +9926,7 @@ function AvatarGroup(props) {
   const visibleAvatars = avatars.slice(0, maxVisibleAvatars);
   const menuAvatars = avatars.slice(maxVisibleAvatars);
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "df aic gap1 fw6 fz_12px lh_16px", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "df aic", children: visibleAvatars.map((avatar, idx) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ...(0, import_runtime29.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "df aic", children: visibleAvatars.map((avatar, idx) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ...(0, import_runtime28.trussProps)({
       borderRadius: "br100",
       borderStyle: "bss",
       borderWidth: "borderWidth_3px",
@@ -9923,7 +9940,7 @@ function AvatarGroup(props) {
     menuAvatars.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ButtonModal, { trigger: {
       label: `+ ${menuAvatars.length} more`,
       variant: "text"
-    }, hideEndAdornment: true, content: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ...(0, import_runtime29.trussProps)({
+    }, hideEndAdornment: true, content: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ...(0, import_runtime28.trussProps)({
       display: "df",
       flexDirection: "fdc",
       gap: "gap1",
@@ -9950,7 +9967,7 @@ var sizeToOverlap = {
 };
 
 // src/components/internal/MenuItem.tsx
-var import_runtime30 = require("@homebound/truss/runtime");
+var import_runtime29 = require("@homebound/truss/runtime");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function MenuItemImpl(props) {
   const {
@@ -9997,7 +10014,7 @@ function MenuItemImpl(props) {
     },
     onClose
   }, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("li", { ...menuItemProps, ...hoverProps, ref, ...(0, import_runtime30.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("li", { ...menuItemProps, ...hoverProps, ref, ...(0, import_runtime29.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -10075,7 +10092,7 @@ function maybeWrapInLink(onClick, content, disabled) {
   if (disabled || typeof onClick !== "string") {
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children: content });
   }
-  return isAbsoluteUrl(onClick) ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("a", { href: onClick, target: "_blank", rel: "noopener noreferrer", ...(0, import_runtime30.mergeProps)("navLink", void 0, {
+  return isAbsoluteUrl(onClick) ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("a", { href: onClick, target: "_blank", rel: "noopener noreferrer", ...(0, import_runtime29.mergeProps)("navLink", void 0, {
     display: "df",
     alignItems: "aic",
     justifyContent: "jcsb",
@@ -10122,12 +10139,12 @@ function Popover(props) {
 var import_react46 = require("react");
 var import_react_aria27 = require("react-aria");
 var import_react_stately6 = require("react-stately");
-var import_runtime42 = require("@homebound/truss/runtime");
+var import_runtime41 = require("@homebound/truss/runtime");
 
 // src/inputs/internal/ComboBoxInput.tsx
 var import_react45 = require("react");
 var import_react_aria26 = require("react-aria");
-var import_runtime41 = require("@homebound/truss/runtime");
+var import_runtime40 = require("@homebound/truss/runtime");
 
 // src/inputs/hooks/useGrowingTextField.tsx
 var import_utils32 = require("@react-aria/utils");
@@ -10193,12 +10210,12 @@ function useGrowingTextField({ inputRef, inputWrapRef, value, disabled, maxLines
 var import_react44 = __toESM(require("react"), 1);
 var import_react_aria25 = require("react-aria");
 var import_react_stately5 = require("react-stately");
-var import_runtime40 = require("@homebound/truss/runtime");
+var import_runtime39 = require("@homebound/truss/runtime");
 
 // src/inputs/internal/ListBox.tsx
 var import_react43 = require("react");
 var import_react_aria24 = require("react-aria");
-var import_runtime39 = require("@homebound/truss/runtime");
+var import_runtime38 = require("@homebound/truss/runtime");
 
 // src/inputs/internal/constants.ts
 var persistentItemHeight = 42;
@@ -10206,7 +10223,7 @@ var sectionSeparatorHeight = 1;
 
 // src/inputs/internal/ListBoxSection.tsx
 var import_react_aria23 = require("react-aria");
-var import_runtime38 = require("@homebound/truss/runtime");
+var import_runtime37 = require("@homebound/truss/runtime");
 
 // src/inputs/internal/Option.tsx
 var import_react39 = require("react");
@@ -10221,7 +10238,7 @@ var import_react_stately4 = require("react-stately");
 // src/inputs/ChipTextField.tsx
 var import_react37 = require("react");
 var import_react_aria18 = require("react-aria");
-var import_runtime31 = require("@homebound/truss/runtime");
+var import_runtime30 = require("@homebound/truss/runtime");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function ChipTextField(props) {
   const {
@@ -10281,7 +10298,7 @@ function ChipTextField(props) {
       target.innerHTML = target.textContent?.replace(/[A\n\r]/g, " ") ?? "";
     }
     onChange(target.textContent ?? "");
-  }, ...focusProps, ...(0, import_runtime31.trussProps)({
+  }, ...focusProps, ...(0, import_runtime30.trussProps)({
     ...chipBaseStyles(fieldProps?.compact),
     ...{
       minWidth: "mw_32px",
@@ -10294,7 +10311,7 @@ function ChipTextField(props) {
 }
 
 // src/inputs/internal/ListBoxChip.tsx
-var import_runtime32 = require("@homebound/truss/runtime");
+var import_runtime31 = require("@homebound/truss/runtime");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function ListBoxChip({
   label
@@ -10302,7 +10319,7 @@ function ListBoxChip({
   const {
     fieldProps
   } = usePresentationContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { ...(0, import_runtime32.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { ...(0, import_runtime31.trussProps)({
     ...chipBaseStyles(fieldProps?.compact),
     ...{
       whiteSpace: "wsnw",
@@ -10363,7 +10380,7 @@ function defaultOptionLabel(opt) {
 }
 
 // src/inputs/ChipSelectField.tsx
-var import_runtime33 = require("@homebound/truss/runtime");
+var import_runtime32 = require("@homebound/truss/runtime");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function ChipSelectField(props) {
   const firstRender = (0, import_react38.useRef)(true);
@@ -10541,7 +10558,7 @@ function ChipSelectField(props) {
     maybeTooltip({
       title: resolveTooltip(disabled),
       placement: "top",
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { ref: wrapperRef, ...(0, import_runtime33.trussProps)({
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { ref: wrapperRef, ...(0, import_runtime32.trussProps)({
         ...chipStyles,
         ...{
           position: "relative",
@@ -10559,7 +10576,7 @@ function ChipSelectField(props) {
         } : {}
       }), children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Label, { label, labelProps, hidden: true, ...tid.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("button", { ...(0, import_react_aria19.mergeProps)(focusProps, buttonProps), ref: buttonRef, ...(0, import_runtime33.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("button", { ...(0, import_react_aria19.mergeProps)(focusProps, buttonProps), ref: buttonRef, ...(0, import_runtime32.trussProps)({
           ...{
             textAlign: "tal",
             borderRadius: "br16",
@@ -10575,7 +10592,7 @@ function ChipSelectField(props) {
           },
           ...isDisabled ? chipDisabledStyles : chipHoverOnlyStyles
         }), title: state.selectedItem ? state.selectedItem.textValue : placeholder, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { ...valueProps, className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wbba", children: state.selectedItem ? state.selectedItem.textValue : placeholder }) }),
-        showClearButton && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("button", { ...clearFocusProps, ...(0, import_runtime33.trussProps)({
+        showClearButton && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("button", { ...clearFocusProps, ...(0, import_runtime32.trussProps)({
           ...{
             paddingRight: "pr_4px",
             borderRadius: "borderRadius_0_16px_16px_0",
@@ -10621,7 +10638,7 @@ function CreateNewField(props) {
 }
 
 // src/inputs/internal/Option.tsx
-var import_runtime34 = require("@homebound/truss/runtime");
+var import_runtime33 = require("@homebound/truss/runtime");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function Option(props) {
   const {
@@ -10675,7 +10692,7 @@ function Option(props) {
   return maybeTooltip({
     title: disabledReason,
     placement: "right",
-    children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("li", { ...(0, import_react_aria20.mergeProps)(optionProps, hoverProps), "data-label": item.textValue, ref, ...(0, import_runtime34.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("li", { ...(0, import_react_aria20.mergeProps)(optionProps, hoverProps), "data-label": item.textValue, ref, ...(0, import_runtime33.trussProps)({
       ...{
         display: "df",
         alignItems: "aic",
@@ -10714,7 +10731,7 @@ var import_react42 = require("react");
 var import_react_virtuoso = require("react-virtuoso");
 
 // src/inputs/internal/LoadingDots.tsx
-var import_runtime35 = require("@homebound/truss/runtime");
+var import_runtime34 = require("@homebound/truss/runtime");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function LoadingDots({
   contrast
@@ -10736,19 +10753,19 @@ function LoadingDots({
   };
   const tid = useTestIds({});
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "pt2 pb2 df jcc", ...tid.loadingDots, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { "aria-label": "Loading", className: "df gap_4px", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...(0, import_runtime35.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...(0, import_runtime34.trussProps)({
       ...dotCss,
       ...{
         animationDelay: "animationDelay_0ms"
       }
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...(0, import_runtime35.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...(0, import_runtime34.trussProps)({
       ...dotCss,
       ...{
         animationDelay: "animationDelay_300ms"
       }
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...(0, import_runtime35.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...(0, import_runtime34.trussProps)({
       ...dotCss,
       ...{
         animationDelay: "animationDelay_600ms"
@@ -10764,7 +10781,7 @@ var import_react_aria22 = require("react-aria");
 // src/inputs/CheckboxBase.tsx
 var import_react40 = require("react");
 var import_react_aria21 = require("react-aria");
-var import_runtime36 = require("@homebound/truss/runtime");
+var import_runtime35 = require("@homebound/truss/runtime");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function CheckboxBase(props) {
   const {
@@ -10792,7 +10809,7 @@ function CheckboxBase(props) {
   return maybeTooltip({
     title: tooltip,
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Tag2, { ...(0, import_runtime36.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Tag2, { ...(0, import_runtime35.trussProps)({
       display: "df",
       cursor: "cursorPointer",
       position: "relative",
@@ -10808,17 +10825,17 @@ function CheckboxBase(props) {
       /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(StyledCheckbox, { ...props, isFocusVisible, ...tid }),
       !checkboxOnly && // Use a mtPx(-2) to better align the label with the checkbox.
       // Not using align-items: center as the checkbox would align with all content below, where we really want it to stay only aligned with the label
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { ...(0, import_runtime36.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { ...(0, import_runtime35.trussProps)({
         marginLeft: "ml1",
         marginTop: ["mt_var", {
           "--marginTop": `${-2}px`
         }]
       }), children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ...(0, import_runtime36.trussProps)({
+        label && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ...(0, import_runtime35.trussProps)({
           ...labelStyles,
           ...isDisabled && disabledColor
         }), children: label }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ...(0, import_runtime36.trussProps)({
+        description && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ...(0, import_runtime35.trussProps)({
           ...descStyles,
           ...isDisabled && disabledColor
         }), children: description }),
@@ -10900,7 +10917,7 @@ function StyledCheckbox(props) {
   });
   const markIcon = isIndeterminate ? dashSmall : isSelected ? checkmarkSmall : "";
   const tid = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { ...hoverProps, ...(0, import_runtime36.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { ...hoverProps, ...(0, import_runtime35.trussProps)({
     ...baseStyles2,
     ...(isSelected && !isDisabled || isIndeterminate) && filledBoxStyles,
     ...(isSelected && !isDisabled || isIndeterminate) && isHovered && filledBoxHoverStyles,
@@ -10910,11 +10927,11 @@ function StyledCheckbox(props) {
     ...isHovered && hoverBorderStyles
   }), "aria-hidden": "true", "data-checked": isSelected ? true : isIndeterminate ? "mixed" : false, ...tid.checkbox, children: markIcon });
 }
-var checkmarkSmall = /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("svg", { width: "16", height: "16", ...(0, import_runtime36.trussProps)(markSvgStyles), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M6.66669 10.3907L4.47135 8.19533L3.52869 9.138L6.66669 12.276L13.138 5.80467L12.1954 4.862L6.66669 10.3907Z", fill: "rgba(255,255,255,1)" /* White */ }) });
-var dashSmall = /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("svg", { width: "16", height: "16", ...(0, import_runtime36.trussProps)(markSvgStyles), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("rect", { x: "4", y: "7.5", width: "8", height: "1.35", fill: "rgba(255,255,255,1)" /* White */ }) });
+var checkmarkSmall = /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("svg", { width: "16", height: "16", ...(0, import_runtime35.trussProps)(markSvgStyles), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M6.66669 10.3907L4.47135 8.19533L3.52869 9.138L6.66669 12.276L13.138 5.80467L12.1954 4.862L6.66669 10.3907Z", fill: "rgba(255,255,255,1)" /* White */ }) });
+var dashSmall = /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("svg", { width: "16", height: "16", ...(0, import_runtime35.trussProps)(markSvgStyles), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("rect", { x: "4", y: "7.5", width: "8", height: "1.35", fill: "rgba(255,255,255,1)" /* White */ }) });
 
 // src/inputs/TreeSelectField/TreeOption.tsx
-var import_runtime37 = require("@homebound/truss/runtime");
+var import_runtime36 = require("@homebound/truss/runtime");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 function TreeOption(props) {
   const {
@@ -10974,7 +10991,7 @@ function TreeOption(props) {
       }]
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("li", { ...hoverProps, ...(0, import_runtime37.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("li", { ...hoverProps, ...(0, import_runtime36.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -11157,11 +11174,11 @@ function ListBoxSection(props) {
   const childNodes = [...section.childNodes];
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
     isPersistentSection && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("li", { ...separatorProps, className: "bts_solid btw_1px bcGray200" }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("li", { ...itemProps, ...(0, import_runtime38.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("li", { ...itemProps, ...(0, import_runtime37.trussProps)({
       ...!isPersistentSection ? {
         overflow: "oa"
       } : {}
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("ul", { ...(0, import_runtime38.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("ul", { ...(0, import_runtime37.trussProps)({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -11237,7 +11254,7 @@ function ListBox(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.selectionManager.selectedKeys.size]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { ...(0, import_runtime39.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { ...(0, import_runtime38.trussProps)({
     backgroundColor: "bgWhite",
     borderRadius: "br4",
     width: "w100",
@@ -11673,7 +11690,7 @@ function TreeSelectFieldBase(props) {
     minWidth: 320
   };
   const fieldMaxWidth = getFieldWidth(fullWidth);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { ...(0, import_runtime40.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { ...(0, import_runtime39.trussProps)({
     display: "df",
     flexDirection: "fdc",
     width: "w100",
@@ -11768,7 +11785,7 @@ function ComboBoxInput(props) {
   });
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TextFieldBase, { ...otherProps, ...multilineProps, unfocusedPlaceholder: showChipSelection && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Chips, { compact: otherProps.compact, values: chipLabels, wrap: allowWrap }), inputRef, inputWrapRef, errorMsg, contrast, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? {
     fontWeight: "fw5"
-  } : {}, startAdornment: showNumSelection && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(CountBadge, { count: isTree ? selectedOptionsLabels?.length ?? 0 : state.selectionManager.selectedKeys.size, "data-testid": "selectedOptionsCount" }) }) || showFieldDecoration && fieldDecoration(selectedOptions[0]), endAdornment: !inputProps.readOnly && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, ...(0, import_runtime41.trussProps)({
+  } : void 0, startAdornment: showNumSelection && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(CountBadge, { count: isTree ? selectedOptionsLabels?.length ?? 0 : state.selectionManager.selectedKeys.size, "data-testid": "selectedOptionsCount" }) }) || showFieldDecoration && fieldDecoration(selectedOptions[0]), endAdornment: !inputProps.readOnly && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, ...(0, import_runtime40.trussProps)({
     ...{
       borderRadius: "br4",
       outline: "outline0",
@@ -12102,7 +12119,7 @@ function ComboBoxBase(props) {
     minWidth: 200
   };
   const fieldMaxWidth = getFieldWidth(fullWidth);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { ...(0, import_runtime42.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { ...(0, import_runtime41.trussProps)({
     display: "df",
     flexDirection: "fdc",
     width: "w100",
@@ -12326,7 +12343,7 @@ function Checkbox(props) {
 var import_react49 = require("react");
 var import_react_aria30 = require("react-aria");
 var import_react_stately9 = require("react-stately");
-var import_runtime43 = require("@homebound/truss/runtime");
+var import_runtime42 = require("@homebound/truss/runtime");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 function CheckboxGroup(props) {
   const {
@@ -12354,18 +12371,18 @@ function CheckboxGroup(props) {
   } = (0, import_react_aria30.useCheckboxGroup)(props, state);
   const tid = useTestIds(props);
   const labelSuffix = useLabelSuffix(required, false);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { ...groupProps, ...(0, import_runtime43.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { ...groupProps, ...(0, import_runtime42.trussProps)({
     ...labelStyle === "left" ? {
       display: "df",
       flexDirection: "fdr"
     } : {}
   }), onBlur, onFocus, ...tid, children: [
-    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { ...(0, import_runtime43.trussProps)({
+    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { ...(0, import_runtime42.trussProps)({
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
     }), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { ...(0, import_runtime43.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { ...(0, import_runtime42.trussProps)({
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
         "--gridTemplateColumns": `repeat(${columns}, auto)`
@@ -12501,7 +12518,7 @@ function isValidDate(d) {
 }
 
 // src/inputs/DateFields/DateFieldBase.tsx
-var import_runtime44 = require("@homebound/truss/runtime");
+var import_runtime43 = require("@homebound/truss/runtime");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 function DateFieldBase(props) {
   const {
@@ -12644,7 +12661,7 @@ function DateFieldBase(props) {
     setInputValue("");
     onChange(void 0);
   } }) });
-  const calendarButton = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, ...(0, import_runtime44.trussProps)({
+  const calendarButton = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, ...(0, import_runtime43.trussProps)({
     ...isDisabled ? {
       cursor: "cursorNotAllowed"
     } : {}
@@ -12731,7 +12748,7 @@ function DateRangeField(props) {
 var import_react52 = require("react");
 var import_react_aria32 = require("react-aria");
 var import_react_stately11 = require("react-stately");
-var import_runtime45 = require("@homebound/truss/runtime");
+var import_runtime44 = require("@homebound/truss/runtime");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 function IconCard(props) {
   const {
@@ -12773,10 +12790,10 @@ function IconCard(props) {
   return maybeTooltip({
     title: resolveTooltip(isDisabled, tooltip),
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("button", { ...(0, import_runtime45.trussProps)(styles), ...hoverProps, onClick: toggleState.toggle, disabled: isDisabled, ...tid, children: [
+    children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("button", { ...(0, import_runtime44.trussProps)(styles), ...hoverProps, onClick: toggleState.toggle, disabled: isDisabled, ...tid, children: [
       /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_aria32.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("input", { ref, ...inputProps, ...tid.value }) }),
       /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Icon, { icon, inc: 4, color: isDisabled ? "rgba(221, 220, 220, 1)" /* Gray300 */ : "rgba(36, 36, 36, 1)" /* Gray900 */ }),
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { ...(0, import_runtime45.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { ...(0, import_runtime44.trussProps)({
         fontWeight: "fw4",
         fontSize: "fz_12px",
         lineHeight: "lh_16px",
@@ -12821,7 +12838,7 @@ var iconCardStylesHover = {
 
 // src/inputs/MultiLineSelectField.tsx
 var import_react53 = require("react");
-var import_runtime46 = require("@homebound/truss/runtime");
+var import_runtime45 = require("@homebound/truss/runtime");
 var import_jsx_runtime66 = require("react/jsx-runtime");
 function MultiLineSelectField(props) {
   const {
@@ -12836,18 +12853,18 @@ function MultiLineSelectField(props) {
   const tid = useTestIds(props, "");
   const [isDisplayed, setIsDisplayed] = (0, import_react53.useState)(true);
   const currentOptions = options.filter((o) => !values.includes(getOptionValue(o)));
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ...(0, import_runtime46.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ...(0, import_runtime45.trussProps)({
     marginTop: "mt1",
     ...labelStyle === "left" ? {
       display: "df"
     } : {}
   }), children: [
-    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { ...(0, import_runtime46.trussProps)({
+    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { ...(0, import_runtime45.trussProps)({
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
     }), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Label, { ...tid.label, label: props.label }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ...(0, import_runtime46.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ...(0, import_runtime45.trussProps)({
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
@@ -12979,6 +12996,7 @@ function NumberField(props) {
     wip: false
   });
   const lastSentRef = (0, import_react54.useRef)(void 0);
+  const focusValueRef = (0, import_react54.useRef)(void 0);
   const [, forceRender] = (0, import_react54.useState)(0);
   const propValue = value === void 0 ? Number.NaN : value / factor;
   if (valueRef.current.wip && !Object.is(valueRef.current.value, propValue)) {
@@ -12994,7 +13012,7 @@ function NumberField(props) {
     // // This is called on blur with the final/committed value.
     onChange: (value2) => {
       const formatted = formatValue(value2, factor, numFractionDigits, numIntegerDigits, positiveOnly);
-      if (formatted !== lastSentRef.current) return;
+      if (formatted !== lastSentRef.current && formatted === focusValueRef.current) return;
       onChange(formatted);
     },
     onFocus: () => {
@@ -13003,6 +13021,7 @@ function NumberField(props) {
         value: value === void 0 ? Number.NaN : value / factor
       };
       lastSentRef.current = value;
+      focusValueRef.current = value;
     },
     onBlur: () => {
       valueRef.current = {
@@ -13080,7 +13099,7 @@ function formatValue(value, factor, numFractionDigits, numIntegerDigits, positiv
 var import_react55 = require("react");
 var import_react_aria34 = require("react-aria");
 var import_react_stately13 = require("react-stately");
-var import_runtime47 = require("@homebound/truss/runtime");
+var import_runtime46 = require("@homebound/truss/runtime");
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var nextNameId = 0;
 function RadioGroupField(props) {
@@ -13113,7 +13132,7 @@ function RadioGroupField(props) {
   }, state);
   return (
     // default styling to position `<Label />` above.
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { ...(0, import_runtime47.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { ...(0, import_runtime46.trussProps)({
       display: "df",
       flexDirection: "fdc",
       gap: "gap1",
@@ -13173,7 +13192,7 @@ function Radio(props) {
   } = (0, import_react_aria34.useHover)({
     isDisabled: disabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("label", { ...(0, import_runtime47.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("label", { ...(0, import_runtime46.trussProps)({
     display: "df",
     cursor: "cursorPointer",
     marginBottom: "mb1",
@@ -13186,7 +13205,7 @@ function Radio(props) {
       {
         type: "radio",
         ref,
-        ...(0, import_runtime47.trussProps)({
+        ...(0, import_runtime46.trussProps)({
           ...radioReset,
           ...radioDefault,
           ...!disabled && state.selectedValue === value ? radioChecked : radioUnchecked,
@@ -13207,7 +13226,7 @@ function Radio(props) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { id: labelId, ...(0, import_runtime47.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { id: labelId, ...(0, import_runtime46.trussProps)({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -13218,7 +13237,7 @@ function Radio(props) {
       }), ...description ? {
         "aria-describedby": descriptionId
       } : {}, children: label }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { id: descriptionId, ...(0, import_runtime47.trussProps)({
+      description && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { id: descriptionId, ...(0, import_runtime46.trussProps)({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -13361,7 +13380,7 @@ var import_tributejs = __toESM(require("tributejs"), 1);
 var import_tribute = require("tributejs/dist/tribute.css");
 var import_trix = require("trix/dist/trix");
 var import_trix2 = require("trix/dist/trix.css");
-var import_runtime48 = require("@homebound/truss/runtime");
+var import_runtime47 = require("@homebound/truss/runtime");
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var RichTextField = withTestMock(RichTextFieldImpl, RichTextFieldMock);
 function RichTextFieldImpl(props) {
@@ -13441,7 +13460,7 @@ function RichTextFieldImpl(props) {
     autoFocus
   } = props;
   if (!readOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { ...(0, import_runtime48.trussProps)({
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { ...(0, import_runtime47.trussProps)({
       width: "w100",
       ...!fullWidth ? {
         maxWidth: "maxw_550px"
@@ -13464,7 +13483,7 @@ function RichTextFieldImpl(props) {
       ] })
     ] });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { ...(0, import_runtime48.trussProps)({
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { ...(0, import_runtime47.trussProps)({
       width: "w100",
       ...!fullWidth ? {
         maxWidth: "maxw_550px"
@@ -13538,7 +13557,7 @@ function SelectField(props) {
 // src/inputs/Switch.tsx
 var import_react59 = require("react");
 var import_react_aria35 = require("react-aria");
-var import_runtime49 = require("@homebound/truss/runtime");
+var import_runtime48 = require("@homebound/truss/runtime");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var __maybeInc6 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -13588,7 +13607,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_runtime73.jsxs)("label", { ...hoverProps, ...(0, import_runtime49.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("label", { ...hoverProps, ...(0, import_runtime48.trussProps)({
     ...{
       position: "relative",
       cursor: "cursorPointer",
@@ -13631,13 +13650,13 @@ function Switch(props) {
         color: "gray900"
       } : {}
     }, inline: labelStyle === "left" || labelStyle === "filter" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { ...(0, import_runtime49.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { ...(0, import_runtime48.trussProps)({
       ...labelStyle === "left" ? {
         width: ["w_var", {
           "--width": __maybeInc6(labelLeftFieldWidth)
         }]
       } : {}
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { "aria-hidden": "true", ...(0, import_runtime49.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { "aria-hidden": "true", ...(0, import_runtime48.trussProps)({
       ...{
         width: ["w_var", {
           "--width": `${toggleWidth(compact)}px`
@@ -13659,7 +13678,7 @@ function Switch(props) {
         backgroundColor: "bgBlue700"
       },
       ...isSelected && isHovered && switchSelectedHoverStyles
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { ...(0, import_runtime49.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { ...(0, import_runtime48.trussProps)({
       ...switchCircleDefaultStyles(compact),
       ...isDisabled && {
         backgroundColor: "bgGray100"
@@ -13845,7 +13864,7 @@ function TextField(props) {
 var import_react62 = require("react");
 var import_react_aria38 = require("react-aria");
 var import_react_stately14 = require("react-stately");
-var import_runtime50 = require("@homebound/truss/runtime");
+var import_runtime49 = require("@homebound/truss/runtime");
 var import_jsx_runtime76 = require("react/jsx-runtime");
 function ToggleButton(props) {
   const {
@@ -13910,7 +13929,7 @@ function ToggleButton(props) {
     ...focusProps,
     ...hoverProps,
     ...pressProps,
-    ...(0, import_runtime50.trussProps)({
+    ...(0, import_runtime49.trussProps)({
       ...{
         borderRadius: "br4",
         display: "dif",
@@ -13966,7 +13985,7 @@ var togglePressStyles = {
 var import_react63 = require("react");
 var import_react_aria39 = require("react-aria");
 var import_react_stately15 = require("react-stately");
-var import_runtime51 = require("@homebound/truss/runtime");
+var import_runtime50 = require("@homebound/truss/runtime");
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var __maybeInc7 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -13998,7 +14017,7 @@ function ToggleChipGroup(props) {
   } = (0, import_react_aria39.useCheckboxGroup)(props, state);
   const tid = useTestIds(props, "toggleChip");
   const labelSuffix = useLabelSuffix(required, false);
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { ...groupProps, ...(0, import_runtime51.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { ...groupProps, ...(0, import_runtime50.trussProps)({
     position: "relative",
     display: "df",
     flexDirection: "fdc",
@@ -14010,7 +14029,7 @@ function ToggleChipGroup(props) {
     } : {}
   }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Label, { label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix }),
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { ...(0, import_runtime51.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { ...(0, import_runtime50.trussProps)({
       display: "df",
       gap: "gap1",
       flexWrap: "flexWrap_wrap",
@@ -14075,7 +14094,7 @@ function ToggleChip2(props) {
   return maybeTooltip({
     title: tooltip,
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("label", { ...(0, import_runtime51.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("label", { ...(0, import_runtime50.trussProps)({
       ...{
         position: "relative",
         display: "dif",
@@ -15357,7 +15376,7 @@ function useRenderCount() {
 }
 
 // src/components/Table/GridTable.tsx
-var import_runtime52 = require("@homebound/truss/runtime");
+var import_runtime51 = require("@homebound/truss/runtime");
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var runningInJest = false;
 function setRunningInJest() {
@@ -15629,7 +15648,7 @@ function GridTable(props) {
     tableContainerRef
   }), [tableState, tableContainerRef]);
   return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TableStateContext.Provider, { value: rowStateContext, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(PresentationProvider, { fieldProps, wrap: style?.presentationSettings?.wrap, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ref: resizeRef, ...(0, import_runtime52.trussProps)(getTableRefWidthStyles(as === "virtual")) }),
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ref: resizeRef, ...(0, import_runtime51.trussProps)(getTableRefWidthStyles(as === "virtual")) }),
     renders[_as](style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, tableContainerRef, persistScrollPosition)
   ] }) });
 }
@@ -15639,7 +15658,7 @@ var renders = {
   virtual: renderVirtual
 };
 function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, _virtuosoRangeRef, tableHeadRows, stickyOffset, _infiniteScroll, tableContainerRef, _persistScrollPosition) {
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { ref: tableContainerRef, ...(0, import_runtime52.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { ref: tableContainerRef, ...(0, import_runtime51.trussProps)({
     // Use `fit-content` to ensure the width of the table takes up the full width of its content.
     // Otherwise, the table's width would be that of its container, which may not be as wide as the table itself.
     // In cases where we have sticky columns on a very wide table, then the container which the columns "stick" to (which is the table),
@@ -15655,7 +15674,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstR
     } : {},
     ...xss
   }), "data-testid": id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...(0, import_runtime52.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...(0, import_runtime51.trussProps)({
       ...stickyHeader ? {
         position: "sticky",
         top: ["top_var", {
@@ -15668,7 +15687,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstR
     }), children: tableHeadRows }),
     /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { children: [
       keptSelectedRows,
-      firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...(0, import_runtime52.trussProps)({
+      firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...(0, import_runtime51.trussProps)({
         ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
         ...style.firstRowMessageCss,
         ...visibleDataRows.length === 0 && style.lastRowCss,
@@ -15681,7 +15700,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstR
   ] });
 }
 function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, _virtuosoRangeRef, tableHeadRows, stickyOffset, _infiniteScroll, tableContainerRef, _persistScrollPosition) {
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("table", { ref: tableContainerRef, ...(0, import_runtime52.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("table", { ref: tableContainerRef, ...(0, import_runtime51.trussProps)({
     ...{
       width: "w100",
       borderCollapse: "borderCollapse_separate",
@@ -15695,7 +15714,7 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firs
     } : {},
     ...xss
   }), "data-testid": id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("thead", { ...(0, import_runtime52.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("thead", { ...(0, import_runtime51.trussProps)({
       ...stickyHeader ? {
         position: "sticky",
         top: ["top_var", {
@@ -15708,11 +15727,11 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firs
     }), children: tableHeadRows }),
     /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("tbody", { children: [
       keptSelectedRows,
-      firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("tr", { ...(0, import_runtime52.trussProps)({
+      firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("tr", { ...(0, import_runtime51.trussProps)({
         ...tableRowPrintBreakCss,
         ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
         ...visibleDataRows.length === 0 && style.lastRowCss
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("td", { colSpan: columns.length, ...(0, import_runtime52.trussProps)({
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("td", { colSpan: columns.length, ...(0, import_runtime51.trussProps)({
         ...style.betweenRowsCss,
         ...style.firstRowMessageCss,
         ...visibleDataRows.length === 0 && style.lastRowCellCss,
@@ -15755,7 +15774,7 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
         } })),
         List: VirtualRoot(style, columns, id, xss),
         Footer: () => {
-          return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...(0, import_runtime52.trussProps)({
+          return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...(0, import_runtime51.trussProps)({
             ...style.virtualFooterPaddingBottomPx !== void 0 ? {
               paddingBottom: ["pb_var", {
                 "--paddingBottom": `${style.virtualFooterPaddingBottomPx ?? 0}px`
@@ -15778,11 +15797,11 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
           if (index === 0) {
             return (
               // Ensure the fallback message is the same width as the table
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...(0, import_runtime52.trussProps)({
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...(0, import_runtime51.trussProps)({
                 ...getTableRefWidthStyles(true),
                 ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
                 ...visibleDataRows.length === 0 && style.lastRowCss
-              }), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...(0, import_runtime52.trussProps)({
+              }), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...(0, import_runtime51.trussProps)({
                 ...style.firstRowMessageCss,
                 ...visibleDataRows.length === 0 && style.lastRowCellCss,
                 ...visibleDataRows.length === 0 && style.lastRowFirstCellCss,
@@ -15827,7 +15846,7 @@ var VirtualRoot = (0, import_memoize_one.default)((gs, _columns, id, xss) => {
     style,
     children
   }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ref, ...(0, import_runtime52.mergeProps)(void 0, style, {
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ref, ...(0, import_runtime51.mergeProps)(void 0, style, {
       ...gs.rootCss,
       ...gs.minWidthPx ? {
         minWidth: ["mw_var", {
@@ -15843,7 +15862,7 @@ var VirtualRoot = (0, import_memoize_one.default)((gs, _columns, id, xss) => {
 });
 
 // src/components/ToggleChip.tsx
-var import_runtime53 = require("@homebound/truss/runtime");
+var import_runtime52 = require("@homebound/truss/runtime");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 function ToggleChip(props) {
   const {
@@ -15862,7 +15881,7 @@ function ToggleChip(props) {
   } = useHover2({});
   const compact = fieldProps?.compact;
   const tid = useTestIds(props, "chip");
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("button", { type: "button", ...(0, import_runtime53.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("button", { type: "button", ...(0, import_runtime52.trussProps)({
     ...chipBaseStyles(compact),
     ...isHovered && !disabled && chipHoverStyles,
     // Use a lower right-padding to get closer to the `X` circle when clearable, i.e. not disabled
@@ -15878,7 +15897,7 @@ function ToggleChip(props) {
     ...xss
   }), disabled, onClick, ...hoverProps, ...tid, children: [
     icon && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "fs0", ...tid.icon, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Icon, { icon, color: "rgba(36, 36, 36, 1)" /* Gray900 */, inc: 2 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { ...(0, import_runtime53.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { ...(0, import_runtime52.trussProps)({
       textAlign: "tal",
       overflow: "oh",
       display: "d_negwebkit_box",
@@ -15890,7 +15909,7 @@ function ToggleChip(props) {
         paddingRight: "pr0"
       } : {}
     }), title: text, children: text }),
-    !disabled && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { ...(0, import_runtime53.trussProps)({
+    !disabled && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { ...(0, import_runtime52.trussProps)({
       ...{
         flexShrink: "fs0",
         borderRadius: "br16",
@@ -15912,7 +15931,7 @@ var chipDisabledStyles = {
 };
 
 // src/components/ToggleChips.tsx
-var import_runtime54 = require("@homebound/truss/runtime");
+var import_runtime53 = require("@homebound/truss/runtime");
 var import_jsx_runtime82 = require("react/jsx-runtime");
 function ToggleChips(props) {
   const {
@@ -15922,7 +15941,7 @@ function ToggleChips(props) {
     xss
   } = props;
   const tid = useTestIds(props, "toggleChips");
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ...(0, import_runtime54.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ...(0, import_runtime53.trussProps)({
     ...{
       display: "df",
       flexWrap: "flexWrap_wrap",
@@ -15936,7 +15955,7 @@ function ToggleChips(props) {
 var import_utils69 = require("@react-aria/utils");
 var import_react73 = require("react");
 var import_react_aria40 = require("react-aria");
-var import_runtime55 = require("@homebound/truss/runtime");
+var import_runtime54 = require("@homebound/truss/runtime");
 var import_jsx_runtime83 = require("react/jsx-runtime");
 var __maybeInc8 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -16036,7 +16055,7 @@ function Accordion(props) {
     },
     ...xss
   }), [compact, disabled, isFocusVisible, titleOnClick, xss]);
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { ...tid.container, ...(0, import_runtime55.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { ...tid.container, ...(0, import_runtime54.trussProps)({
     ...{
       borderColor: "bcGray300",
       ...topBorder ? {
@@ -16055,13 +16074,13 @@ function Accordion(props) {
     } : {}
   }), children: [
     titleOnClick ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { ...focusProps, "aria-controls": id, "aria-expanded": expanded, className: "df", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("button", { ...tid.title, disabled, ...(0, import_runtime55.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("button", { ...tid.title, disabled, ...(0, import_runtime54.trussProps)({
         ...touchableStyle,
         ...{
           flexGrow: "fg1"
         }
       }), onClick: titleOnClick, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("button", { ...tid.toggle, disabled, ...(0, import_runtime55.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("button", { ...tid.toggle, disabled, ...(0, import_runtime54.trussProps)({
         ...touchableStyle,
         ...{
           paddingLeft: "pl2",
@@ -16073,7 +16092,7 @@ function Accordion(props) {
           } : {}
         }
       }), onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(RotatingChevronIcon, { expanded }) })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("button", { ...tid.title, ...focusProps, "aria-controls": id, "aria-expanded": expanded, disabled, ...(0, import_runtime55.trussProps)({
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("button", { ...tid.title, ...focusProps, "aria-controls": id, "aria-expanded": expanded, disabled, ...(0, import_runtime54.trussProps)({
       ...{
         width: "w100"
       },
@@ -16082,13 +16101,13 @@ function Accordion(props) {
       /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "fg1 tal", children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(RotatingChevronIcon, { expanded })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { ...tid.details, id, "aria-hidden": !expanded, ...(0, import_runtime55.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { ...tid.details, id, "aria-hidden": !expanded, ...(0, import_runtime54.trussProps)({
       overflow: "oh",
       height: ["h_var", {
         "--height": __maybeInc8(contentHeight)
       }],
       transition: "transition_height_250ms_ease_in_out"
-    }), children: expanded && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { ...(0, import_runtime55.trussProps)({
+    }), children: expanded && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { ...(0, import_runtime54.trussProps)({
       paddingLeft: "pl2",
       paddingRight: "pr2",
       paddingBottom: "pb2",
@@ -16103,7 +16122,7 @@ function Accordion(props) {
   ] });
 }
 function RotatingChevronIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { ...(0, import_runtime55.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { ...(0, import_runtime54.trussProps)({
     flexShrink: "fs0",
     transition: "transition_transform_250ms_linear",
     transform: ["transform_var", {
@@ -16203,7 +16222,7 @@ function Indicator({
 }
 
 // src/components/Banner.tsx
-var import_runtime56 = require("@homebound/truss/runtime");
+var import_runtime55 = require("@homebound/truss/runtime");
 var import_jsx_runtime86 = require("react/jsx-runtime");
 function Banner(props) {
   const {
@@ -16214,7 +16233,7 @@ function Banner(props) {
     ...others
   } = props;
   const tid = useTestIds(others, "banner");
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { ...(0, import_runtime56.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { ...(0, import_runtime55.trussProps)({
     ...variantStyles2[type],
     ...{
       display: "df",
@@ -16338,7 +16357,7 @@ function useModal() {
 }
 
 // src/components/Modal/Modal.tsx
-var import_runtime57 = require("@homebound/truss/runtime");
+var import_runtime56 = require("@homebound/truss/runtime");
 var import_jsx_runtime88 = require("react/jsx-runtime");
 function Modal(props) {
   const {
@@ -16419,7 +16438,7 @@ function Modal(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [modalBodyRef, modalFooterRef, modalHeaderRef]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_react_aria41.OverlayContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(AutoSaveStatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "fixed tp_0 bot_0 l_0 r_0 df aic jcc bgc_rgba_36_36_36_0_6 z4", ...underlayProps, ...testId.underlay, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_react_aria41.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { ...(0, import_runtime57.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_react_aria41.OverlayContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(AutoSaveStatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "fixed tp_0 bot_0 l_0 r_0 df aic jcc bgc_rgba_36_36_36_0_6 z4", ...underlayProps, ...testId.underlay, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_react_aria41.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { ...(0, import_runtime56.trussProps)({
     borderRadius: "br24",
     backgroundColor: "bgWhite",
     boxShadow: "bshModal",
@@ -16445,7 +16464,7 @@ function Modal(props) {
       borderRadius: "br0"
     } : {}
   }), ref, ...overlayProps, ...dialogProps, ...modalProps, ...testId, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("header", { ...(0, import_runtime57.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("header", { ...(0, import_runtime56.trussProps)({
       display: "df",
       flexDirection: "fdrr",
       paddingTop: "pt3",
@@ -16462,7 +16481,7 @@ function Modal(props) {
       /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "fs0 pl1", children: allowClosing && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) }),
       /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("h1", { className: "fg1 fw6 fz_30px lh_36px gray900", ref: modalHeaderRef, ...titleProps, ...testId.title })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("main", { ref: modalBodyRef, ...(0, import_runtime57.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("main", { ref: modalBodyRef, ...(0, import_runtime56.trussProps)({
       flexGrow: "fg1",
       overflowY: "oya",
       ...hasScroll ? {
@@ -16495,7 +16514,7 @@ function ModalBody({
   const testId = useTestIds({}, testIdPrefix);
   return (0, import_react_dom3.createPortal)(
     // If `virtualized`, then we are expecting the `children` will handle their own scrollbar, so have the overflow hidden and adjust padding
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { ...(0, import_runtime57.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { ...(0, import_runtime56.trussProps)({
       height: "h100",
       ...virtualized ? {
         overflow: "oh",
@@ -16516,7 +16535,7 @@ function ModalFooter({
     modalFooterDiv
   } = useBeamContext();
   const testId = useTestIds({}, testIdPrefix);
-  return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { ...(0, import_runtime57.trussProps)({
+  return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { ...(0, import_runtime56.trussProps)({
     ...{
       paddingTop: "pt3",
       paddingBottom: "pb3",
@@ -16551,7 +16570,7 @@ function getSize(size) {
 var import_react79 = require("react");
 
 // src/components/Snackbar/SnackbarNotice.tsx
-var import_runtime58 = require("@homebound/truss/runtime");
+var import_runtime57 = require("@homebound/truss/runtime");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 function SnackbarNotice(props) {
   const {
@@ -16569,7 +16588,7 @@ function SnackbarNotice(props) {
     /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
       "span",
       {
-        ...(0, import_runtime58.trussProps)({
+        ...(0, import_runtime57.trussProps)({
           overflow: "oh",
           display: "d_negwebkit_box",
           WebkitBoxOrient: "wbo_vertical",
@@ -16590,7 +16609,7 @@ function SnackbarNotice(props) {
       }
     ),
     (action || !reallyHideClose) && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("span", { className: "fs0 df aic", children: [
-      action && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { ...(0, import_runtime58.trussProps)({
+      action && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { ...(0, import_runtime57.trussProps)({
         textTransform: "ttu",
         fontWeight: "fw4",
         fontSize: "fz_14px",
@@ -16628,7 +16647,7 @@ var typeToIcon2 = {
 };
 
 // src/components/Snackbar/Snackbar.tsx
-var import_runtime59 = require("@homebound/truss/runtime");
+var import_runtime58 = require("@homebound/truss/runtime");
 var import_jsx_runtime90 = require("react/jsx-runtime");
 function Snackbar({
   notices,
@@ -16639,7 +16658,7 @@ function Snackbar({
     "div",
     {
       ...tid.snackbarWrapper,
-      ...(0, import_runtime59.trussProps)({
+      ...(0, import_runtime58.trussProps)({
         position: "fixed",
         zIndex: "z9999",
         bottom: ["bottom_var", {
@@ -16690,7 +16709,7 @@ var SuperDrawerWidth = /* @__PURE__ */ ((SuperDrawerWidth2) => {
 })(SuperDrawerWidth || {});
 
 // src/components/SuperDrawer/SuperDrawer.tsx
-var import_runtime60 = require("@homebound/truss/runtime");
+var import_runtime59 = require("@homebound/truss/runtime");
 var import_jsx_runtime92 = require("react/jsx-runtime");
 var import_react81 = require("react");
 function SuperDrawer() {
@@ -16752,7 +16771,7 @@ function SuperDrawer() {
     /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
       import_framer_motion.motion.aside,
       {
-        ...(0, import_runtime60.trussProps)({
+        ...(0, import_runtime59.trussProps)({
           backgroundColor: "bgWhite",
           height: "h100",
           maxWidth: ["maxw_var", {
@@ -17053,7 +17072,7 @@ var import_mobx_react8 = require("mobx-react");
 // src/inputs/IconCardGroup.tsx
 var import_react82 = require("react");
 var import_react_aria42 = require("react-aria");
-var import_runtime61 = require("@homebound/truss/runtime");
+var import_runtime60 = require("@homebound/truss/runtime");
 var import_jsx_runtime99 = require("react/jsx-runtime");
 function IconCardGroup(props) {
   const {
@@ -17100,7 +17119,7 @@ function IconCardGroup(props) {
     ...fieldPropsAria
   });
   return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { ...groupProps, children: [
-    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { ...(0, import_runtime61.trussProps)({
+    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { ...(0, import_runtime60.trussProps)({
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
@@ -17646,7 +17665,7 @@ function BoundTreeSelectField(props) {
 
 // src/forms/FormLines.tsx
 var import_react83 = require("react");
-var import_runtime62 = require("@homebound/truss/runtime");
+var import_runtime61 = require("@homebound/truss/runtime");
 var import_jsx_runtime113 = require("react/jsx-runtime");
 var __maybeInc9 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -17682,7 +17701,7 @@ function FormLines(props) {
       fullWidth: true
     } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(PresentationProvider, { fieldProps: newFieldProps, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { ...(0, import_runtime62.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(PresentationProvider, { fieldProps: newFieldProps, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { ...(0, import_runtime61.trussProps)({
     display: "df",
     flexDirection: "fdc",
     gap: ["gap_var", {
@@ -17718,7 +17737,7 @@ function FieldGroup(props) {
     const width2 = widths2[i] || 1;
     return typeof width2 === `number` ? `${width2}fr` : width2;
   }).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { ...(0, import_runtime62.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { ...(0, import_runtime61.trussProps)({
     display: "dg",
     gap: "gap2",
     gridTemplateColumns: ["gtc_var", {
@@ -17734,7 +17753,7 @@ var sizes = {
 };
 
 // src/forms/BoundForm.tsx
-var import_runtime63 = require("@homebound/truss/runtime");
+var import_runtime62 = require("@homebound/truss/runtime");
 var import_jsx_runtime114 = require("react/jsx-runtime");
 var import_react85 = require("react");
 var reactNodePrefix = "reactNode";
@@ -17789,7 +17808,7 @@ function FormRow({
     component,
     key,
     minWidth
-  }) => /* @__PURE__ */ (0, import_react85.createElement)("div", { ...(0, import_runtime63.trussProps)({
+  }) => /* @__PURE__ */ (0, import_react85.createElement)("div", { ...(0, import_runtime62.trussProps)({
     minWidth: ["mw_var", {
       "--minWidth": minWidth
     }],
@@ -17907,7 +17926,7 @@ function boundTreeSelectField(props) {
 
 // src/components/internal/CompoundField.tsx
 var import_react86 = require("react");
-var import_runtime64 = require("@homebound/truss/runtime");
+var import_runtime63 = require("@homebound/truss/runtime");
 var import_jsx_runtime115 = require("react/jsx-runtime");
 function CompoundField({
   children
@@ -17941,7 +17960,7 @@ function CompoundField({
     setHasFocusWithin(false);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "df", onFocusCapture, onBlurCapture, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { ...(0, import_runtime64.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { ...(0, import_runtime63.trussProps)({
       ...commonStyles,
       ...{
         borderLeftStyle: "bls_solid",
@@ -17954,7 +17973,7 @@ function CompoundField({
     }), children: (0, import_react86.cloneElement)(children[0], {
       internalProps
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { ...(0, import_runtime64.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { ...(0, import_runtime63.trussProps)({
       ...{
         width: "w_1px",
         flex: "fn",
@@ -17964,7 +17983,7 @@ function CompoundField({
         backgroundColor: "bgBlue700"
       }
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { ...(0, import_runtime64.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { ...(0, import_runtime63.trussProps)({
       ...commonStyles,
       ...{
         flexGrow: "fg1",
@@ -18008,7 +18027,7 @@ function BoundSelectAndTextField(props) {
 }
 
 // src/forms/FormHeading.tsx
-var import_runtime65 = require("@homebound/truss/runtime");
+var import_runtime64 = require("@homebound/truss/runtime");
 var import_jsx_runtime117 = (
   // Add space before the heading, but only if it's not first.
   require("react/jsx-runtime")
@@ -18020,7 +18039,7 @@ function FormHeading(props) {
     isFirst = false,
     ...others
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("h3", { ...(0, import_runtime65.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("h3", { ...(0, import_runtime64.trussProps)({
     ...{
       fontWeight: "fw4",
       fontSize: "fz_16px",
@@ -18036,7 +18055,7 @@ FormHeading.isFormHeading = true;
 
 // src/forms/StaticField.tsx
 var import_utils101 = require("@react-aria/utils");
-var import_runtime66 = require("@homebound/truss/runtime");
+var import_runtime65 = require("@homebound/truss/runtime");
 var import_jsx_runtime118 = require("react/jsx-runtime");
 function StaticField(props) {
   const {
@@ -18050,7 +18069,7 @@ function StaticField(props) {
   } = props;
   const tid = useTestIds(props, typeof label === "string" ? defaultTestId(label) : "staticField");
   const id = (0, import_utils101.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { ...(0, import_runtime66.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { ...(0, import_runtime65.trussProps)({
     ...labelStyle === "left" ? {
       display: "df",
       justifyContent: "jcsb",
@@ -18058,7 +18077,7 @@ function StaticField(props) {
     } : {}
   }), ...tid.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("label", { className: "db fw4 fz_14px lh_20px gray700 mb_4px", htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { id, ...(0, import_runtime66.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { id, ...(0, import_runtime65.trussProps)({
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -18106,7 +18125,7 @@ var import_use_debounce6 = require("use-debounce");
 // src/components/RightSidebar.tsx
 var import_framer_motion2 = require("framer-motion");
 var import_react87 = require("react");
-var import_runtime67 = require("@homebound/truss/runtime");
+var import_runtime66 = require("@homebound/truss/runtime");
 var import_jsx_runtime120 = require("react/jsx-runtime");
 var RIGHT_SIDEBAR_MIN_WIDTH = "250px";
 function RightSidebar({
@@ -18146,7 +18165,7 @@ function RightSidebar({
         duration: 0.2
       },
       x: "100%"
-    }, ...(0, import_runtime67.trussProps)({
+    }, ...(0, import_runtime66.trussProps)({
       width: "w100",
       minWidth: ["mw_var", {
         "--minWidth": RIGHT_SIDEBAR_MIN_WIDTH
@@ -18160,7 +18179,7 @@ function RightSidebar({
       paddingRight: "pr3"
     }), children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "sticky top0 bgWhite", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { ...(0, import_runtime67.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { ...(0, import_runtime66.trussProps)({
           position: "absolute",
           left: ["left_var", {
             "--left": `${-24}px`
@@ -18231,7 +18250,7 @@ function Toast() {
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
 var import_react89 = require("react");
 var import_react_router_dom4 = require("react-router-dom");
-var import_runtime68 = require("@homebound/truss/runtime");
+var import_runtime67 = require("@homebound/truss/runtime");
 var import_jsx_runtime123 = (
   // Adding index to key to prevent rendering issues when multiple items have the same label
   require("react/jsx-runtime")
@@ -18245,7 +18264,7 @@ function PageHeaderBreadcrumbs({
   function renderBreadcrumb(bc, index, hideDivisor) {
     return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_react89.Fragment, { children: [
       index > 0 && !hideDivisor && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { className: "fw6 fz_14px lh_20px gray700 ml1 mr1 mt_2px mb_2px", children: "/" }),
-      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_react_router_dom4.Link, { to: bc.href, ...(0, import_runtime68.mergeProps)("navLink", void 0, {
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_react_router_dom4.Link, { to: bc.href, ...(0, import_runtime67.mergeProps)("navLink", void 0, {
         fontWeight: "fw6",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -18263,7 +18282,7 @@ function PageHeaderBreadcrumbs({
 }
 
 // src/components/Layout/FormPageLayout.tsx
-var import_runtime69 = require("@homebound/truss/runtime");
+var import_runtime68 = require("@homebound/truss/runtime");
 var import_jsx_runtime124 = require("react/jsx-runtime");
 var headerHeightPx = 120;
 var maxContentWidthPx = 1600;
@@ -18286,7 +18305,7 @@ function FormPageLayoutComponent(props) {
     // since this layout will be replacing most superdrawers/sidebars, we keep the listing mounted below to preserve the users's
     // scroll position & filters
     // Adding "align-items: start" allows "position: sticky" to work within a grid for the sidebars
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: "fixed top0 bottom0 left0 right0 z_1000 oya bgWhite df jcc aifs", ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { ...(0, import_runtime69.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: "fixed top0 bottom0 left0 right0 z_1000 oya bgWhite df jcc aifs", ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { ...(0, import_runtime68.trussProps)({
       width: "w100",
       maxWidth: ["maxw_var", {
         "--maxWidth": `${maxContentWidthPx}px`
@@ -18302,7 +18321,7 @@ function FormPageLayoutComponent(props) {
       /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(PageHeader, { ...props, ...tids.pageHeader }),
       /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(LeftNav, { sectionsWithRefs, ...tids }),
       /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(FormSections, { sectionsWithRefs, formState, ...tids }),
-      rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("aside", { ...(0, import_runtime69.trussProps)({
+      rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("aside", { ...(0, import_runtime68.trussProps)({
         gridRow: "gr_2",
         gridColumn: "gc_3_4",
         position: "sticky",
@@ -18327,7 +18346,7 @@ function PageHeader(props) {
     notice
   } = useToastContext();
   const tids = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("header", { ...(0, import_runtime69.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("header", { ...(0, import_runtime68.trussProps)({
     gridRow: "gr_1",
     gridColumn: "gc_1_4",
     position: "sticky",
@@ -18361,7 +18380,7 @@ function FormSections(props) {
   } = props;
   const tids = useTestIds(props);
   const bottomPaddingPx = sectionsWithRefs.length > 1 ? 200 : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("article", { ...(0, import_runtime69.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("article", { ...(0, import_runtime68.trussProps)({
     gridRow: "gr_2",
     gridColumn: "gc_2_3",
     paddingBottom: ["pb_var", {
@@ -18379,7 +18398,7 @@ function FormSections(props) {
       {
         id: sectionKey,
         ref,
-        ...(0, import_runtime69.trussProps)({
+        ...(0, import_runtime68.trussProps)({
           display: "dg",
           gridTemplateColumns: "gtc_50px_1fr",
           gridTemplateRows: "gtr_auto",
@@ -18410,7 +18429,7 @@ function LeftNav(props) {
     section
   }) => !!section.title), [sectionsWithRefs]);
   const activeSection = useActiveSection(sectionWithTitles);
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("aside", { ...(0, import_runtime69.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("aside", { ...(0, import_runtime68.trussProps)({
     gridRow: "gr_2",
     gridColumn: "gc_1_2",
     position: "sticky",
@@ -18479,7 +18498,7 @@ function SectionNavLink(props) {
     hoverProps,
     isHovered
   } = useHover2({});
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime69.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime68.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -18554,7 +18573,7 @@ function useActiveSection(sectionsWithRefs) {
 }
 
 // src/components/Layout/FullBleed.tsx
-var import_runtime70 = require("@homebound/truss/runtime");
+var import_runtime69 = require("@homebound/truss/runtime");
 var import_react91 = require("react");
 var __maybeInc10 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -18580,7 +18599,7 @@ function FullBleed({
     // ...for some reason this keeps the Layout top padding better than using
     // react-aria's more generic mergeProps.
     {
-      ...(0, import_runtime70.mergeProps)(
+      ...(0, import_runtime69.mergeProps)(
         className,
         style,
         // ScrollableParent applies horizontal padding to its content column, so FullBleed
@@ -18666,7 +18685,7 @@ function isSelectionButtonMenuProps(props) {
 var import_react96 = require("react");
 
 // src/components/CountBadge.tsx
-var import_runtime71 = require("@homebound/truss/runtime");
+var import_runtime70 = require("@homebound/truss/runtime");
 var import_jsx_runtime126 = require("react/jsx-runtime");
 function CountBadge(props) {
   const {
@@ -18678,7 +18697,7 @@ function CountBadge(props) {
   } = props;
   const tid = useTestIds(otherProps, "countBadge");
   if (hideIfZero && count === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { ...tid, ...(0, import_runtime71.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { ...tid, ...(0, import_runtime70.trussProps)({
     ...{
       height: ["sq_var", {
         "--height": `${count > 100 ? 18 : 16}px`
@@ -19079,7 +19098,7 @@ function OpenModal(props) {
 }
 
 // src/components/Filters/FilterModal.tsx
-var import_runtime72 = require("@homebound/truss/runtime");
+var import_runtime71 = require("@homebound/truss/runtime");
 var import_jsx_runtime136 = require("react/jsx-runtime");
 function FilterModal(props) {
   const {
@@ -19116,7 +19135,7 @@ function ModalFilterItem({
   label,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { ...(0, import_runtime72.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { ...(0, import_runtime71.trussProps)({
     marginBottom: "mb4",
     ...!label ? {
       borderTopStyle: "bts_solid",
@@ -19125,7 +19144,7 @@ function ModalFilterItem({
     } : {}
   }), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("h2", { className: "fw4 fz_16px lh_24px mb2", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { ...(0, import_runtime72.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { ...(0, import_runtime71.trussProps)({
       ...!label ? {
         paddingTop: "pt3"
       } : {}
@@ -19135,7 +19154,7 @@ function ModalFilterItem({
 
 // src/components/Filters/Filters.tsx
 var import_react95 = require("react");
-var import_runtime73 = require("@homebound/truss/runtime");
+var import_runtime72 = require("@homebound/truss/runtime");
 var import_jsx_runtime137 = require("react/jsx-runtime");
 function Filters(props) {
   const {
@@ -19159,7 +19178,7 @@ function Filters(props) {
   }, [numberOfInlineFilters, vertical, filterDefs]);
   const numModalFilters = safeKeys(modalFilters).filter((fk) => filter[fk] !== void 0).length;
   const maybeGroupByField = groupBy ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(SelectField, { label: "Group by", labelStyle: !vertical ? "inline" : "above", sizeToContent: !vertical, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => g && groupBy.setValue(g) }) }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { ...(0, import_runtime73.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { ...(0, import_runtime72.trussProps)({
     ...vertical ? {
       display: "df",
       flexDirection: "fdc",
@@ -19410,7 +19429,7 @@ function EditColumnsButton(props) {
 }
 
 // src/components/Table/TableActions.tsx
-var import_runtime74 = require("@homebound/truss/runtime");
+var import_runtime73 = require("@homebound/truss/runtime");
 var import_jsx_runtime142 = require("react/jsx-runtime");
 function TableActions(props) {
   const {
@@ -19418,7 +19437,7 @@ function TableActions(props) {
     children,
     right
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { ...(0, import_runtime74.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { ...(0, import_runtime73.trussProps)({
     ...{
       display: "df",
       gap: "gap1",
@@ -19441,7 +19460,7 @@ var import_use_query_params3 = require("use-query-params");
 var import_react98 = require("react");
 
 // src/components/LoadingSkeleton.tsx
-var import_runtime75 = require("@homebound/truss/runtime");
+var import_runtime74 = require("@homebound/truss/runtime");
 var import_jsx_runtime143 = require("react/jsx-runtime");
 function LoadingSkeleton({
   rows = 1,
@@ -19455,7 +19474,7 @@ function LoadingSkeleton({
   const rowHeight = sizeToPixels2[size];
   const rowCells = (rowNumber) => {
     const flexGrowForCell = randomizeWidths ? getRandomizedFlexBasisByRowIndex(rowNumber) : 1;
-    return cellArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { ...(0, import_runtime75.trussProps)({
+    return cellArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { ...(0, import_runtime74.trussProps)({
       borderRadius: "br4",
       animation: "animation_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite",
       flexGrow: ["flexGrow_var", {
@@ -19467,7 +19486,7 @@ function LoadingSkeleton({
       } : {}
     }) }, `row-${rowNumber}-cell-${i}`));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { ...(0, import_runtime75.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { ...(0, import_runtime74.trussProps)({
     display: "df",
     gap: "gap1",
     marginBottom: "mb1",
@@ -19508,7 +19527,7 @@ function LoadingTable(props) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-var import_runtime76 = require("@homebound/truss/runtime");
+var import_runtime75 = require("@homebound/truss/runtime");
 var import_jsx_runtime145 = require("react/jsx-runtime");
 function isGridTableProps(props) {
   return "rows" in props;
@@ -19642,7 +19661,7 @@ function Header2(props) {
     actionMenu
   } = props;
   const tids = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(FullBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)("header", { ...(0, import_runtime76.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(FullBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)("header", { ...(0, import_runtime75.trussProps)({
     ...{
       paddingTop: "pt3",
       paddingBottom: "pb3",
@@ -19740,7 +19759,7 @@ function useRightPaneContext() {
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 var import_framer_motion3 = require("framer-motion");
 var import_react101 = require("react");
-var import_runtime77 = require("@homebound/truss/runtime");
+var import_runtime76 = require("@homebound/truss/runtime");
 var import_jsx_runtime148 = require("react/jsx-runtime");
 var __maybeInc11 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -19760,7 +19779,7 @@ function RightPaneLayout(props) {
   } = useRightPaneContext();
   (0, import_react101.useEffect)(() => closePane, [closePane]);
   return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "h100 df oxh", children: /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(import_jsx_runtime148.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { ...(0, import_runtime77.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { ...(0, import_runtime76.trussProps)({
       ...{
         width: ["w_var", {
           "--width": __maybeInc11(`calc(100% - ${paneWidth + 24}px)`)
@@ -19785,7 +19804,7 @@ function RightPaneLayout(props) {
         } : {}
       }
     }), children }),
-    /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { ...(0, import_runtime77.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { ...(0, import_runtime76.trussProps)({
       position: "relative",
       ...!!defaultPaneContent ? {
         width: ["w_var", {
@@ -19793,7 +19812,7 @@ function RightPaneLayout(props) {
         }]
       } : {}
     }), children: [
-      defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { ...(0, import_runtime77.trussProps)({
+      defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { ...(0, import_runtime76.trussProps)({
         height: "h100",
         width: ["w_var", {
           "--width": `${paneWidth}px`
@@ -19811,7 +19830,7 @@ function RightPaneLayout(props) {
         {
           layout: "position",
           "data-testid": "rightPaneContent",
-          ...(0, import_runtime77.trussProps)({
+          ...(0, import_runtime76.trussProps)({
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": paneBgColor
             }],
@@ -19957,7 +19976,7 @@ function ButtonDatePicker(props) {
 // src/components/ButtonGroup.tsx
 var import_react104 = require("react");
 var import_react_aria48 = require("react-aria");
-var import_runtime78 = require("@homebound/truss/runtime");
+var import_runtime77 = require("@homebound/truss/runtime");
 var import_jsx_runtime151 = (
   // Disable the button if the ButtonGroup is disabled or if the current button is disabled.
   require("react/jsx-runtime")
@@ -19971,7 +19990,7 @@ function ButtonGroup(props) {
   const tid = useTestIds(props, "buttonGroup");
   return (
     // Adding `line-height: 0` prevent inheriting line-heights that might throw off sizing within the button group.
-    /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { ...tid, ...(0, import_runtime78.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { ...tid, ...(0, import_runtime77.trussProps)({
       ...{
         display: "df",
         lineHeight: "lh_0"
@@ -20017,10 +20036,10 @@ function GroupButton(props) {
     isHovered
   } = (0, import_react_aria48.useHover)(ariaProps);
   const tid = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { ...(0, import_runtime78.trussProps)(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
+  return /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { ...(0, import_runtime77.trussProps)(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
     title: resolveTooltip(disabled, tooltip),
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime78.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime77.trussProps)({
       ...{
         fontWeight: "fw6",
         fontSize: "fz_14px",
@@ -20127,7 +20146,7 @@ var import_react_aria49 = require("react-aria");
 // src/components/Tag.tsx
 var import_utils118 = require("@react-aria/utils");
 var import_react105 = require("react");
-var import_runtime79 = require("@homebound/truss/runtime");
+var import_runtime78 = require("@homebound/truss/runtime");
 var import_jsx_runtime152 = require("react/jsx-runtime");
 function Tag(props) {
   const {
@@ -20151,7 +20170,7 @@ function Tag(props) {
   });
   return maybeTooltip({
     title: !preventTooltip && showTooltip ? text : void 0,
-    children: /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("span", { ...tid, ...(0, import_runtime79.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("span", { ...tid, ...(0, import_runtime78.trussProps)({
       ...{
         display: "dif",
         fontWeight: "fw6",
@@ -20201,7 +20220,7 @@ function getStyles(type) {
 }
 
 // src/components/Card.tsx
-var import_runtime80 = require("@homebound/truss/runtime");
+var import_runtime79 = require("@homebound/truss/runtime");
 var import_jsx_runtime153 = require("react/jsx-runtime");
 function Card(props) {
   const {
@@ -20232,8 +20251,8 @@ function Card(props) {
     ...isHovered && cardHoverStyles,
     ...isDisabled && disabledStyles3
   }), [isDisabled, isHovered, bordered, type, isList]);
-  return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { ...(0, import_runtime80.trussProps)(styles), ...hoverProps, ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { ...(0, import_runtime80.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { ...(0, import_runtime79.trussProps)(styles), ...hoverProps, ...tid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { ...(0, import_runtime79.trussProps)({
       ...{
         height: ["h_var", {
           "--height": `${imgHeight}px`
@@ -20250,14 +20269,14 @@ function Card(props) {
         filter: "filter_brightness_1"
       },
       ...isHovered && !isList && imageHoverStyles
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("img", { ...(0, import_runtime80.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("img", { ...(0, import_runtime79.trussProps)({
       width: "w100",
       height: "h100",
       objectFit: ["objectFit_var", {
         "--objectFit": imageFit
       }]
     }), src: imgSrc, alt: title, ...tid.img }) }),
-    isHovered && buttonMenuItems && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { ...(0, import_runtime80.trussProps)({
+    isHovered && buttonMenuItems && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { ...(0, import_runtime79.trussProps)({
       position: "absolute",
       right: "right1",
       top: "top1",
@@ -20273,7 +20292,7 @@ function Card(props) {
     /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "df fdc aifs gap1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "fw6 fz_12px lh_16px gray700", ...tid.subtitle, children: subtitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { ...(0, import_runtime80.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { ...(0, import_runtime79.trussProps)({
           fontWeight: "fw6",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -20331,10 +20350,10 @@ var imageHoverStyles = {
 };
 
 // src/components/Copy.tsx
-var import_runtime81 = require("@homebound/truss/runtime");
+var import_runtime80 = require("@homebound/truss/runtime");
 var import_jsx_runtime154 = require("react/jsx-runtime");
 function Copy(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { ...(0, import_runtime81.mergeProps)("beam-copy", void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { ...(0, import_runtime80.mergeProps)("beam-copy", void 0, {
     ...{
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -20363,7 +20382,7 @@ function useDnDGridContext() {
 }
 
 // src/components/DnDGrid/DnDGrid.tsx
-var import_runtime82 = require("@homebound/truss/runtime");
+var import_runtime81 = require("@homebound/truss/runtime");
 var import_jsx_runtime155 = require("react/jsx-runtime");
 function DnDGrid(props) {
   const {
@@ -20544,7 +20563,7 @@ function DnDGrid(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(DnDGridContext.Provider, { value: {
     dragEl,
     onDragHandleKeyDown
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { ref: gridEl, ...(0, import_runtime82.trussProps)({
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { ref: gridEl, ...(0, import_runtime81.trussProps)({
     ...{
       containerType: "ctis",
       display: "dg"
@@ -20557,7 +20576,7 @@ var gridCloneKey = "dndgrid-clone";
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
 var import_react_aria50 = require("react-aria");
-var import_runtime83 = require("@homebound/truss/runtime");
+var import_runtime82 = require("@homebound/truss/runtime");
 var import_jsx_runtime156 = require("react/jsx-runtime");
 function DnDGridItemHandle(props) {
   const {
@@ -20587,7 +20606,7 @@ function DnDGridItemHandle(props) {
     borderRadius: "br4",
     borderWidth: "bw1"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("button", { ...(0, import_runtime83.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("button", { ...(0, import_runtime82.trussProps)({
     ...compact ? iconButtonCompact2 : iconButtonNormal2,
     ...{
       cursor: "cursor_grab",
@@ -20649,7 +20668,7 @@ var gridItemDataAttribute = "data-grid-item-span";
 var ResponsiveGridContext = (0, import_react110.createContext)(void 0);
 
 // src/components/Grid/ResponsiveGrid.tsx
-var import_runtime84 = require("@homebound/truss/runtime");
+var import_runtime83 = require("@homebound/truss/runtime");
 var import_jsx_runtime157 = require("react/jsx-runtime");
 function ResponsiveGrid(props) {
   const {
@@ -20670,12 +20689,12 @@ function ResponsiveGrid(props) {
     gap,
     columns
   }), [minColumnWidth, gap, columns]);
-  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { ...(0, import_runtime84.trussProps)(gridStyles), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { ...(0, import_runtime83.trussProps)(gridStyles), children }) });
 }
 
 // src/components/Grid/ResponsiveGridItem.tsx
 var import_react_aria51 = require("react-aria");
-var import_runtime85 = require("@homebound/truss/runtime");
+var import_runtime84 = require("@homebound/truss/runtime");
 var import_jsx_runtime158 = require("react/jsx-runtime");
 function ResponsiveGridItem(props) {
   const {
@@ -20688,7 +20707,7 @@ function ResponsiveGridItem(props) {
   } = useResponsiveGridItem({
     colSpan
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { ...(0, import_react_aria51.mergeProps)(gridItemProps, (0, import_runtime85.trussProps)(gridItemStyles)), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { ...(0, import_react_aria51.mergeProps)(gridItemProps, (0, import_runtime84.trussProps)(gridItemStyles)), children });
 }
 
 // src/components/Grid/useResponsiveGrid.ts
@@ -20840,7 +20859,7 @@ function HbSpinnerProvider({
 // src/components/MaxLines.tsx
 var import_utils126 = require("@react-aria/utils");
 var import_react115 = require("react");
-var import_runtime86 = require("@homebound/truss/runtime");
+var import_runtime85 = require("@homebound/truss/runtime");
 var import_jsx_runtime160 = require("react/jsx-runtime");
 function MaxLines({
   maxLines,
@@ -20865,7 +20884,7 @@ function MaxLines({
     onResize
   });
   return /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ref: elRef, ...(0, import_runtime86.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ref: elRef, ...(0, import_runtime85.trussProps)({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
           "--WebkitLineClamp": maxLines
@@ -20883,7 +20902,7 @@ function MaxLines({
 // src/components/ScrollShadows.tsx
 var import_utils127 = require("@react-aria/utils");
 var import_react116 = require("react");
-var import_runtime87 = require("@homebound/truss/runtime");
+var import_runtime86 = require("@homebound/truss/runtime");
 var import_jsx_runtime161 = require("react/jsx-runtime");
 function ScrollShadows(props) {
   const {
@@ -20972,7 +20991,7 @@ function ScrollShadows(props) {
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { ...(0, import_runtime87.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { ...(0, import_runtime86.trussProps)({
     display: "df",
     flexDirection: ["fd_var", {
       "--flexDirection": !horizontal ? "column" : "row"
@@ -20988,7 +21007,7 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime87.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime86.trussProps)({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -20996,7 +21015,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime87.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime86.trussProps)({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -21004,7 +21023,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime87.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime86.trussProps)({
       ...xss,
       ...{
         overflow: "oa",
@@ -21077,7 +21096,7 @@ var snackbarId = 1;
 // src/components/Stepper.tsx
 var import_react118 = require("react");
 var import_react_aria52 = require("react-aria");
-var import_runtime88 = require("@homebound/truss/runtime");
+var import_runtime87 = require("@homebound/truss/runtime");
 var import_jsx_runtime162 = require("react/jsx-runtime");
 var import_react119 = require("react");
 var __maybeInc13 = (inc) => {
@@ -21098,7 +21117,7 @@ function Stepper(props) {
   const minStepWidth = 100;
   const gap = 8;
   return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("ol", { ...(0, import_runtime88.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("ol", { ...(0, import_runtime87.trussProps)({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -21108,7 +21127,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ (0, import_react119.createElement)("li", { ...(0, import_runtime88.trussProps)({
+      return /* @__PURE__ */ (0, import_react119.createElement)("li", { ...(0, import_runtime87.trussProps)({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -21120,7 +21139,7 @@ function Stepper(props) {
         }]
       }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { ...(0, import_runtime88.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { ...(0, import_runtime87.trussProps)({
       marginTop: "mt1",
       backgroundColor: "bgGray300",
       height: "h_4px",
@@ -21131,7 +21150,7 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { ...(0, import_runtime88.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { ...(0, import_runtime87.trussProps)({
       backgroundColor: "bgBlue600",
       transition: "transition_width_200ms",
       height: "h100",
@@ -21172,7 +21191,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime88.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime87.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -21240,7 +21259,7 @@ function StepIcon({
   if (state === "complete") {
     return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { ...(0, import_runtime88.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { ...(0, import_runtime87.trussProps)({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -21255,7 +21274,7 @@ function StepIcon({
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 var import_react_dom5 = require("react-dom");
-var import_runtime89 = require("@homebound/truss/runtime");
+var import_runtime88 = require("@homebound/truss/runtime");
 var import_jsx_runtime163 = require("react/jsx-runtime");
 function SuperDrawerHeader(props) {
   const {
@@ -21281,7 +21300,7 @@ function SuperDrawerHeader(props) {
       ] }),
       props.right && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "fs0", children: props.right })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { ...(0, import_runtime89.trussProps)({
+    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { ...(0, import_runtime88.trussProps)({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
@@ -21461,7 +21480,7 @@ function canClose(canCloseCheck) {
 }
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
-var import_runtime90 = require("@homebound/truss/runtime");
+var import_runtime89 = require("@homebound/truss/runtime");
 var import_jsx_runtime166 = require("react/jsx-runtime");
 var SuperDrawerContent = ({
   children,
@@ -21510,7 +21529,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_framer_motion4.motion.div, { ...(0, import_runtime90.mergeProps)(void 0, {
+      return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_framer_motion4.motion.div, { ...(0, import_runtime89.mergeProps)(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -21551,7 +21570,7 @@ var import_react121 = require("react");
 var import_react_aria53 = require("react-aria");
 var import_react_router2 = require("react-router");
 var import_react_router_dom5 = require("react-router-dom");
-var import_runtime91 = require("@homebound/truss/runtime");
+var import_runtime90 = require("@homebound/truss/runtime");
 var import_jsx_runtime167 = require("react/jsx-runtime");
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -21584,7 +21603,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_runtime167.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime91.trussProps)(contentXss), children: isRouteTab(selectedTab) ? /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_react_router2.Route, { path: selectedTab.path, render: selectedTab.render }) : selectedTab.render() }) })
+    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime90.trussProps)(contentXss), children: isRouteTab(selectedTab) ? /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_react_router2.Route, { path: selectedTab.path, render: selectedTab.render }) : selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -21623,7 +21642,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { ...(0, import_runtime91.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { ...(0, import_runtime90.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -21687,7 +21706,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...(0, import_runtime91.trussProps)({
+    ...(0, import_runtime90.trussProps)({
       ...baseStyles5,
       ...active && activeStyles4,
       ...isDisabled && disabledStyles4,
@@ -21929,7 +21948,7 @@ function useToast() {
   RightPaneProvider,
   RightSidebar,
   Row,
-  RuntimeStyle,
+  RuntimeCss,
   ScrollShadows,
   ScrollableContent,
   ScrollableParent,