@homebound/beam 3.0.0-alpha.10 → 3.0.0-alpha.11

package/dist/index.cjs

@@ -143,6 +143,7 @@ __export(index_exports, {
   RightPaneProvider: () => RightPaneProvider,
   RightSidebar: () => RightSidebar,
   Row: () => Row,
+  RuntimeStyle: () => import_runtime2.RuntimeStyle,
   ScrollShadows: () => ScrollShadows,
   ScrollableContent: () => ScrollableContent,
   ScrollableParent: () => ScrollableParent,
@@ -319,6 +320,7 @@ 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;
@@ -4066,6 +4068,12 @@ var CssBuilder = class _CssBuilder {
   }
   // aliases
   get $() {
+    if (this.opts.runtimeError) {
+      throw new Error(this.opts.runtimeError);
+    }
+    if (this.selector !== void 0) {
+      throw new Error("Selector-based Css helpers cannot be used in RuntimeStyle css expressions.");
+    }
     return this.rules;
   }
   get onHover() {
@@ -4094,11 +4102,11 @@ var CssBuilder = class _CssBuilder {
   }
   /** Marks this element as a default hover marker (for ancestor pseudo selectors). */
   get marker() {
-    return this;
+    return this.unsupportedRuntime("marker cannot be used in RuntimeStyle css expressions.");
   }
   /** Marks this element with a user-defined marker. */
   markerOf(_marker) {
-    return this;
+    return this.unsupportedRuntime("markerOf() cannot be used in RuntimeStyle css expressions.");
   }
   /** Creates a marker token for use with markerOf() and when(). */
   newMarker() {
@@ -4108,14 +4116,14 @@ var CssBuilder = class _CssBuilder {
     return this[key];
   }
   when(_selectorOrMarker, _relationship, _pseudo) {
-    return this;
+    return this.unsupportedRuntime("when() cannot be used in RuntimeStyle css expressions.");
   }
   ifContainer(_props) {
-    return this;
+    return this.unsupportedRuntime("ifContainer() cannot be used in RuntimeStyle css expressions.");
   }
   /** Apply styles within a pseudo-element (e.g. `"::placeholder"`, `"::selection"`). */
   element(_pseudoElement) {
-    return this;
+    return this.unsupportedRuntime("element() cannot be used in RuntimeStyle css expressions.");
   }
   get ifPrint() {
     return this.newCss({ selector: "@media print" });
@@ -4145,7 +4153,7 @@ var CssBuilder = class _CssBuilder {
     if (typeof condOrMediaQuery === "boolean") {
       return new _CssBuilder({ ...this.opts, enabled: condOrMediaQuery, elseApplied: false });
     }
-    return this.newCss({ selector: condOrMediaQuery, elseApplied: false });
+    return this.unsupportedRuntime("if(mediaQuery) cannot be used in RuntimeStyle css expressions.");
   }
   get else() {
     if (this.selector !== void 0) {
@@ -4174,12 +4182,16 @@ var CssBuilder = class _CssBuilder {
   /** Marker for the build-time transform to append a raw className. */
   className(className) {
     void className;
-    return this;
+    return this.unsupportedRuntime("className() cannot be used in RuntimeStyle css expressions.");
   }
   /** Convert a style hash into `{ className, style }` props for manual spreading into non-`css=` contexts. */
   props(styles) {
     return (0, import_runtime.trussProps)(styles);
   }
+  /** Tagged template literal for raw CSS in .css.ts files; passes through the string as-is. */
+  raw(strings, ...values) {
+    return String.raw(strings, ...values);
+  }
   get rules() {
     return this.opts.rules;
   }
@@ -4189,6 +4201,9 @@ var CssBuilder = class _CssBuilder {
   get selector() {
     return this.opts.selector;
   }
+  unsupportedRuntime(message) {
+    return this.newCss({ runtimeError: message });
+  }
   newCss(opts) {
     return new _CssBuilder({ ...this.opts, ...opts });
   }
@@ -4284,7 +4299,13 @@ var Palette = /* @__PURE__ */ ((Palette4) => {
   return Palette4;
 })(Palette || {});
 var marker = /* @__PURE__ */ Symbol.for("truss-default-marker");
-var Css = new CssBuilder({ rules: {}, enabled: true, selector: void 0, elseApplied: false });
+var Css = new CssBuilder({
+  rules: {},
+  enabled: true,
+  selector: void 0,
+  elseApplied: false,
+  runtimeError: void 0
+});
 var Breakpoints = /* @__PURE__ */ ((Breakpoints2) => {
   Breakpoints2["print"] = "@media print";
   Breakpoints2["sm"] = "@media screen and (max-width: 599px)";
@@ -4499,7 +4520,7 @@ function pluralize(count, noun, pluralNoun) {
 }
 
 // src/components/Tooltip.tsx
-var import_runtime2 = require("@homebound/truss/runtime");
+var import_runtime3 = require("@homebound/truss/runtime");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var gapCrossingDelay = 100;
 function Tooltip(props) {
@@ -4578,7 +4599,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_runtime2.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_runtime3.mergeProps)(void 0, styles.popper, {
     ...{
       maxWidth: "maxw_320px",
       backgroundColor: ["bgColor_var", {
@@ -4612,7 +4633,7 @@ function resolveTooltip(disabled, tooltip, readOnly) {
 }
 
 // src/components/Icon.tsx
-var import_runtime3 = require("@homebound/truss/runtime");
+var import_runtime4 = require("@homebound/truss/runtime");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Icon = import_react4.default.memo((props) => {
   const {
@@ -4628,7 +4649,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_runtime3.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_runtime4.trussProps)({
       ...{
         fill: ["fill_var", {
           "--fill": color
@@ -5126,7 +5147,7 @@ function usePresentationContext() {
 }
 
 // src/components/Chip.tsx
-var import_runtime4 = require("@homebound/truss/runtime");
+var import_runtime5 = require("@homebound/truss/runtime");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ChipTypes = {
   caution: "caution",
@@ -5159,7 +5180,7 @@ function Chip(props) {
   return maybeTooltip({
     title,
     placement: "bottom",
-    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { ...(0, import_runtime4.trussProps)(styles), ...tid, children: [
+    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { ...(0, import_runtime5.trussProps)(styles), ...tid, children: [
       icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon, inc: 2, xss: {
         flexShrink: "fs0"
       } }),
@@ -5221,7 +5242,7 @@ var pyHeight = (compact) => compact ? 2 : 4;
 var minhPx = (compact) => compact ? 20 : 24;
 
 // src/components/Chips.tsx
-var import_runtime5 = require("@homebound/truss/runtime");
+var import_runtime6 = require("@homebound/truss/runtime");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function Chips(props) {
   const {
@@ -5233,7 +5254,7 @@ function Chips(props) {
     xss = {},
     wrap = presentationWrap
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...(0, import_runtime5.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...(0, import_runtime6.trussProps)({
     ...{
       display: "df",
       alignItems: "aifs",
@@ -5262,7 +5283,7 @@ var import_react71 = __toESM(require("react"), 1);
 var import_react_virtuoso2 = require("react-virtuoso");
 
 // src/components/Loader.tsx
-var import_runtime6 = require("@homebound/truss/runtime");
+var import_runtime7 = require("@homebound/truss/runtime");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function Loader({
   size = "lg",
@@ -5270,7 +5291,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_runtime7.jsx)("div", { "aria-label": "Loading", ...(0, import_runtime6.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "aria-label": "Loading", ...(0, import_runtime7.trussProps)({
     borderRadius: "br100",
     borderStyle: "bss",
     borderWidth: ["bw_var", {
@@ -5426,7 +5447,7 @@ function getButtonOrLink(content, onClick, attrs, openInNew = false, downloadLin
 }
 
 // src/components/IconButton.tsx
-var import_runtime7 = require("@homebound/truss/runtime");
+var import_runtime8 = require("@homebound/truss/runtime");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function IconButton(props) {
   const {
@@ -5498,7 +5519,7 @@ function IconButton(props) {
     ...focusProps,
     ...hoverProps,
     ref,
-    ...(0, import_runtime7.mergeProps)(typeof onPress === "string" ? navLink : void 0, void 0, styles),
+    ...(0, import_runtime8.mergeProps)(typeof onPress === "string" ? navLink : void 0, void 0, styles),
     "aria-label": label
   };
   const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime9.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 });
@@ -5572,7 +5593,7 @@ var activeStyles = {
 
 // src/components/Table/components/ExpandableHeader.tsx
 var import_react16 = require("react");
-var import_runtime8 = require("@homebound/truss/runtime");
+var import_runtime9 = require("@homebound/truss/runtime");
 
 // src/hooks/useBreakpoint.tsx
 var import_fast_deep_equal = __toESM(require("fast-deep-equal"), 1);
@@ -5797,7 +5818,7 @@ function ExpandableHeader(props) {
     hoverProps,
     isHovered
   } = useHover2({});
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { ...hoverProps, ...(0, import_runtime8.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { ...hoverProps, ...(0, import_runtime9.trussProps)({
     display: "df",
     fontWeight: "fw4",
     fontSize: "fz_12px",
@@ -5828,7 +5849,7 @@ function ExpandableHeader(props) {
     }
     tableState.toggleExpandedColumn(column2.id);
   }, "data-testid": "expandableColumn", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { ...(0, import_runtime8.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { ...(0, import_runtime9.trussProps)({
       display: "df",
       alignItems: "aic",
       ...applyStickyStyles ? {
@@ -5850,7 +5871,7 @@ function ExpandableHeader(props) {
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "tal oh d_negwebkit_box wbo_vertical to_ellipsis wlc_2", children: title }),
       tooltipEl
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { ...(0, import_runtime8.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { ...(0, import_runtime9.trussProps)({
       ...applyStickyStyles ? {
         position: "sticky",
         right: "right_12px",
@@ -5864,7 +5885,7 @@ function ExpandableHeader(props) {
 
 // src/components/Table/components/SortHeader.tsx
 var import_react17 = require("react");
-var import_runtime9 = require("@homebound/truss/runtime");
+var import_runtime10 = require("@homebound/truss/runtime");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function SortHeader(props) {
   const {
@@ -5900,7 +5921,7 @@ function SortHeader(props) {
       } : {}
     }
   }, inc: 2, ...tid.icon }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ...tid, ...(0, import_runtime9.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ...tid, ...(0, import_runtime10.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -5918,7 +5939,7 @@ function SortHeader(props) {
 }
 
 // src/components/Table/utils/utils.tsx
-var import_runtime10 = require("@homebound/truss/runtime");
+var import_runtime11 = require("@homebound/truss/runtime");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment, column2, isExpandableHeader, isExpandable, minStickyLeftOffset, isKeptSelectedRow) {
   if (isKeptSelectedRow && column2.id === "beamCollapseColumn") {
@@ -5932,7 +5953,7 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
   }
   const tooltip = isGridCellContent(maybeContent) ? maybeContent.tooltip : void 0;
   const tooltipEl = tooltip ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "fs0 ml_4px", children: /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime10.trussProps)({
+  content = isGridCellContent(maybeContent) && !!maybeContent.onClick ? getButtonOrLink(content, maybeContent.onClick, (0, import_runtime11.trussProps)({
     maxWidth: "maxw100",
     color: "blue700",
     textAlign: "ta_inherit",
@@ -6167,7 +6188,7 @@ var import_react_day_picker3 = require("react-day-picker");
 // src/components/internal/DatePicker/Day.tsx
 var import_react19 = require("react");
 var import_react_day_picker = require("react-day-picker");
-var import_runtime11 = require("@homebound/truss/runtime");
+var import_runtime12 = require("@homebound/truss/runtime");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function Day(props) {
   const tid = useTestIds(props, "datePickerDay");
@@ -6201,7 +6222,7 @@ function Day(props) {
   } = activeModifiers;
   const showRangeStyles = !(range_end === true && range_start === true);
   const showActiveStyles = !disabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { ...otherProps, ref: buttonRef, type: "button", ...(0, import_runtime11.mergeProps)("beam-day-button", void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { ...otherProps, ref: buttonRef, type: "button", ...(0, import_runtime12.mergeProps)("beam-day-button", void 0, {
     position: "relative",
     paddingBottom: "pb_4px",
     outline: "outline0",
@@ -6213,7 +6234,7 @@ function Day(props) {
   }, ...disabled && {
     "data-disabled": ""
   }, ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ...(0, import_runtime11.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ...(0, import_runtime12.trussProps)({
       ...{
         overflow: "oh",
         color: "gray900",
@@ -6238,7 +6259,7 @@ function Day(props) {
         color: "gray500"
       }
     }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ...(0, import_runtime11.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ...(0, import_runtime12.trussProps)({
         marginTop: ["mt_var", {
           "--marginTop": `${-2}px`
         }]
@@ -6246,7 +6267,7 @@ function Day(props) {
       indicatorDot && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "div",
         {
-          ...(0, import_runtime11.trussProps)({
+          ...(0, import_runtime12.trussProps)({
             position: "absolute",
             bottom: "bottom_4px",
             width: "w_4px",
@@ -6261,7 +6282,7 @@ function Day(props) {
         }
       )
     ] }),
-    showRangeStyles && range_start && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { ...(0, import_runtime11.trussProps)({
+    showRangeStyles && range_start && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { ...(0, import_runtime12.trussProps)({
       ...rangeBaseStyles,
       ...{
         right: ["right_var", {
@@ -6270,7 +6291,7 @@ function Day(props) {
         width: "w_8px"
       }
     }) }),
-    showRangeStyles && range_end && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { ...(0, import_runtime11.trussProps)({
+    showRangeStyles && range_end && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { ...(0, import_runtime12.trussProps)({
       ...rangeBaseStyles,
       ...{
         width: "w_8px",
@@ -6279,7 +6300,7 @@ function Day(props) {
         }]
       }
     }) }),
-    showRangeStyles && range_middle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { ...(0, import_runtime11.trussProps)({
+    showRangeStyles && range_middle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { ...(0, import_runtime12.trussProps)({
       ...rangeBaseStyles,
       ...{
         left: ["left_var", {
@@ -6426,7 +6447,7 @@ var import_react_stately2 = require("react-stately");
 
 // src/components/internal/MenuSection.tsx
 var import_react_aria4 = require("react-aria");
-var import_runtime12 = require("@homebound/truss/runtime");
+var import_runtime13 = require("@homebound/truss/runtime");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function MenuSectionImpl(props) {
   const {
@@ -6448,7 +6469,7 @@ function MenuSectionImpl(props) {
   const tid = useTestIds(props);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     isPersistentSection && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { ...separatorProps, className: "bts_solid btw_1px bcGray200" }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { ...itemProps, ...(0, import_runtime12.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { ...itemProps, ...(0, import_runtime13.trussProps)({
       color: "gray900",
       ...!isPersistentSection ? {
         overflow: "oa"
@@ -6461,7 +6482,7 @@ function MenuSectionImpl(props) {
 }
 
 // src/components/internal/Menu.tsx
-var import_runtime22 = require("@homebound/truss/runtime");
+var import_runtime23 = require("@homebound/truss/runtime");
 
 // src/inputs/internal/MenuSearchField.tsx
 var import_textfield = require("@react-aria/textfield");
@@ -6472,7 +6493,7 @@ var import_react25 = require("react");
 var import_react_aria8 = require("react-aria");
 
 // src/components/HelperText.tsx
-var import_runtime13 = require("@homebound/truss/runtime");
+var import_runtime14 = require("@homebound/truss/runtime");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function HelperText(props) {
   const {
@@ -6480,7 +6501,7 @@ function HelperText(props) {
     contrast = false,
     ...others
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ...(0, import_runtime13.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ...(0, import_runtime14.trussProps)({
     color: "gray700",
     fontWeight: "fw4",
     fontSize: "fz_12px",
@@ -6495,7 +6516,7 @@ function HelperText(props) {
 // src/components/Label.tsx
 var import_react20 = __toESM(require("react"), 1);
 var import_react_aria5 = require("react-aria");
-var import_runtime14 = require("@homebound/truss/runtime");
+var import_runtime15 = require("@homebound/truss/runtime");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function LabelComponent(props) {
   const {
@@ -6509,7 +6530,7 @@ function LabelComponent(props) {
     xss,
     ...others
   } = props;
-  const labelEl = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { ...labelProps, ...others, ...(0, import_runtime14.trussProps)({
+  const labelEl = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { ...labelProps, ...others, ...(0, import_runtime15.trussProps)({
     ...{
       display: "dif",
       alignItems: "aic",
@@ -6544,7 +6565,7 @@ function InlineLabel({
   multiline = false,
   ...others
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { ...labelProps, ...others, ...(0, import_runtime14.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { ...labelProps, ...others, ...(0, import_runtime15.trussProps)({
     fontWeight: "fw4",
     fontSize: "fz_14px",
     lineHeight: "lh_20px",
@@ -6577,11 +6598,11 @@ function CssReset() {
 }
 
 // src/components/Table/components/cell.tsx
-var import_runtime15 = require("@homebound/truss/runtime");
+var import_runtime16 = require("@homebound/truss/runtime");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var defaultRenderFn = (as, colSpan) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "td" : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Cell, { ...(0, import_runtime15.mergeProps)(classNames, void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Cell, { ...(0, import_runtime16.mergeProps)(classNames, void 0, {
     ...css,
     ...{
       cursor: "cursor_default"
@@ -6592,7 +6613,7 @@ var defaultRenderFn = (as, colSpan) => (key, css, content, row, rowStyle, classN
 };
 var headerRenderFn = (column2, as, colSpan) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "th" : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Cell, { ...(0, import_runtime15.mergeProps)(classNames, void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Cell, { ...(0, import_runtime16.mergeProps)(classNames, void 0, {
     ...css
   }), ...as === "table" && {
     colSpan
@@ -6601,15 +6622,15 @@ var headerRenderFn = (column2, as, colSpan) => (key, css, content, row, rowStyle
 var rowLinkRenderFn = (as, colSpan) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
   const to = rowStyle.rowLink(row);
   if (as === "table") {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { ...(0, import_runtime15.mergeProps)(classNames, void 0, {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { ...(0, import_runtime16.mergeProps)(classNames, void 0, {
       ...css
-    }), colSpan, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime15.mergeProps)(navLink, void 0, {
+    }), colSpan, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime16.mergeProps)(navLink, void 0, {
       textDecoration: "tdn",
       color: "color_unset",
       display: "db"
     }), children: content }) }, key);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime15.mergeProps)(`${navLink} ${classNames}`, void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime16.mergeProps)(`${navLink} ${classNames}`, void 0, {
     ...{
       textDecoration: "tdn",
       color: "color_unset"
@@ -6619,7 +6640,7 @@ var rowLinkRenderFn = (as, colSpan) => (key, css, content, row, rowStyle, classN
 };
 var rowClickRenderFn = (as, api, colSpan) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "td" : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Cell, { ...(0, import_runtime15.mergeProps)(classNames, void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Cell, { ...(0, import_runtime16.mergeProps)(classNames, void 0, {
     ...css
   }), onClick: (e) => {
     rowStyle.onClick(row, api);
@@ -6634,7 +6655,7 @@ var import_react22 = require("react");
 
 // src/components/Layout/ScrollableParent.tsx
 var import_react21 = require("react");
-var import_runtime16 = require("@homebound/truss/runtime");
+var import_runtime17 = require("@homebound/truss/runtime");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var __maybeInc = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -6674,7 +6695,7 @@ function ScrollableParent(props) {
   (0, import_react21.useEffect)(() => {
     scrollableRef.current.appendChild(scrollableEl);
   }, [scrollableEl]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ScrollableParentContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Tag2, { ...(0, import_runtime16.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ScrollableParentContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Tag2, { ...(0, import_runtime17.trussProps)({
     ...{
       minHeight: "mh0",
       minWidth: "mw0",
@@ -6684,7 +6705,7 @@ function ScrollableParent(props) {
     },
     ...xss
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ...(0, import_runtime16.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ...(0, import_runtime17.trussProps)({
       ...{
         paddingLeft: ["pl_var", {
           "--paddingLeft": __maybeInc(context.paddingLeft)
@@ -6709,7 +6730,7 @@ function useScrollableParent() {
 }
 
 // src/components/Table/components/ColumnResizeHandle.tsx
-var import_runtime17 = require("@homebound/truss/runtime");
+var import_runtime18 = require("@homebound/truss/runtime");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function findScrollableParent(element) {
   if (!element) return null;
@@ -6874,7 +6895,7 @@ function ColumnResizeHandle({
     };
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref: handleRef, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => !isDragging && setIsHovering(false), ...(0, import_runtime17.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref: handleRef, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => !isDragging && setIsHovering(false), ...(0, import_runtime18.trussProps)({
       position: "absolute",
       top: "top0",
       bottom: "bottom0",
@@ -6890,7 +6911,7 @@ function ColumnResizeHandle({
         backgroundColor: "bgGray700"
       } : {}
     }), ...tid.handle, "data-column-id": columnId, "data-column-index": columnIndex }),
-    isDragging && guideLineX !== null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...(0, import_runtime17.trussProps)({
+    isDragging && guideLineX !== null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...(0, import_runtime18.trussProps)({
       position: "fixed",
       top: ["top_var", {
         "--top": `${guideLineTop}px`
@@ -6912,7 +6933,7 @@ function ColumnResizeHandle({
 
 // src/components/Table/components/KeptGroupRow.tsx
 var import_react23 = require("react");
-var import_runtime18 = require("@homebound/truss/runtime");
+var import_runtime19 = require("@homebound/truss/runtime");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var __maybeInc2 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -6931,7 +6952,7 @@ function KeptGroupRow(props) {
     tableState
   } = (0, import_react23.useContext)(TableStateContext);
   const numHiddenSelectedRows = useComputed(() => tableState.keptRows.length, [tableState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CellTag, { ...(0, import_runtime18.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CellTag, { ...(0, import_runtime19.trussProps)({
     ...style.cellCss,
     ...style.betweenRowsCss,
     ...isLastBodyRow && style.lastRowCellCss,
@@ -7729,7 +7750,7 @@ function canClientSideSort(value) {
 
 // src/components/Table/components/Row.tsx
 var import_use_debounce2 = require("use-debounce");
-var import_runtime19 = require("@homebound/truss/runtime");
+var import_runtime20 = require("@homebound/truss/runtime");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var __maybeInc3 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -7897,7 +7918,7 @@ function RowImpl(props) {
   const ref = (0, import_react24.useRef)(null);
   const dragOverCallback = (0, import_react24.useCallback)((row2, evt) => onDragOver?.(row2, evt), [onDragOver]);
   const onDragOverDebounced = (0, import_use_debounce2.useDebouncedCallback)(dragOverCallback, 100);
-  const RowContent = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RowTag, { ...(0, import_runtime19.mergeProps)(BorderHoverParent, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
+  const RowContent = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RowTag, { ...(0, import_runtime20.mergeProps)(BorderHoverParent, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ (0, import_jsx_runtime27.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) {
@@ -8062,7 +8083,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_react24.default.cloneElement(cellElement, (0, import_react_aria6.mergeProps)(cellElement.props, (0, import_runtime19.trussProps)({
+      const cellElementWithHandle = import_react24.default.cloneElement(cellElement, (0, import_react_aria6.mergeProps)(cellElement.props, (0, import_runtime20.trussProps)({
         ...!maybeSticky && {
           position: "relative"
         }
@@ -8079,7 +8100,7 @@ function RowImpl(props) {
   return row.draggable ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
-      ...(0, import_runtime19.trussProps)(containerCss),
+      ...(0, import_runtime20.trussProps)(containerCss),
       onDrop: (evt) => onDrop?.(row, evt),
       onDragEnter: (evt) => onDragEnter?.(row, evt),
       onDragOver: (evt) => {
@@ -8109,7 +8130,7 @@ function useLabelSuffix(required, readOnly) {
 
 // src/inputs/ErrorMessage.tsx
 var import_react_aria7 = require("react-aria");
-var import_runtime20 = require("@homebound/truss/runtime");
+var import_runtime21 = require("@homebound/truss/runtime");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function ErrorMessage(props) {
   const {
@@ -8119,7 +8140,7 @@ function ErrorMessage(props) {
     hidden = false,
     ...others
   } = props;
-  const errorEl = errorMsg ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ...(0, import_runtime20.trussProps)({
+  const errorEl = errorMsg ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ...(0, import_runtime21.trussProps)({
     color: "red600",
     fontWeight: "fw4",
     fontSize: "fz_14px",
@@ -8142,7 +8163,7 @@ function getFieldWidth(fullWidth) {
 }
 
 // src/inputs/TextFieldBase.tsx
-var import_runtime21 = require("@homebound/truss/runtime");
+var import_runtime22 = require("@homebound/truss/runtime");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var __maybeInc4 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -8522,12 +8543,12 @@ function TextFieldBase(props) {
     ...xss
   };
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ...(0, import_runtime21.trussProps)(fieldStyles.container), ...groupProps, ...focusWithinProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ...(0, import_runtime22.trussProps)(fieldStyles.container), ...groupProps, ...focusWithinProps, children: [
       label && labelStyle !== "inline" && /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsxs)("div", { ...(0, import_runtime21.mergeProps)(BorderHoverChild, void 0, {
+        children: inputProps.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime29.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 ? {
@@ -8551,7 +8572,7 @@ function TextFieldBase(props) {
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           "div",
           {
-            ...(0, import_runtime21.mergeProps)(BorderHoverChild, void 0, {
+            ...(0, import_runtime22.mergeProps)(BorderHoverChild, void 0, {
               ...fieldStyles.inputWrapper,
               ...inputProps.disabled ? fieldStyles.disabled : {},
               ...showFocus ? fieldStyles.focus : {},
@@ -8579,7 +8600,7 @@ function TextFieldBase(props) {
                 {
                   tabIndex: -1,
                   ...tid.unfocusedPlaceholderContainer,
-                  ...(0, import_runtime21.trussProps)({
+                  ...(0, import_runtime22.trussProps)({
                     ...{
                       display: "df",
                       alignSelf: "asc",
@@ -8607,7 +8628,7 @@ function TextFieldBase(props) {
                   children: unfocusedPlaceholder
                 }
               ),
-              multiline ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("textarea", { ...fieldElementProps, ...errorMessageProps, ref: fieldRef, rows: 1, ...(0, import_runtime21.trussProps)(fieldElementCss), ...tid }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("input", { ...fieldElementProps, ...errorMessageProps, ref: fieldRef, ...(0, import_runtime21.trussProps)(fieldElementCss), ...tid }),
+              multiline ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("textarea", { ...fieldElementProps, ...errorMessageProps, ref: fieldRef, rows: 1, ...(0, import_runtime22.trussProps)(fieldElementCss), ...tid }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("input", { ...fieldElementProps, ...errorMessageProps, ref: fieldRef, ...(0, import_runtime22.trussProps)(fieldElementCss), ...tid }),
               isFocused && clearable && onChange && inputProps.value && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconButton, { icon: "xCircle", color: "rgba(100, 100, 100, 1)" /* Gray700 */, onClick: () => {
                 onChange(void 0);
                 fieldRef.current?.focus();
@@ -8624,7 +8645,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_runtime29.jsxs)("div", { ...(0, import_runtime21.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ...(0, import_runtime22.trussProps)({
       marginTop: ["mt_var", {
         "--marginTop": `${-8}px`
       }]
@@ -8751,7 +8772,7 @@ function Menu(props) {
     label: "items",
     items
   }), [items]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_aria9.FocusScope, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ...(0, import_runtime22.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_aria9.FocusScope, { children: /* @__PURE__ */ (0, import_jsx_runtime31.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
     ...{
@@ -8788,7 +8809,7 @@ var import_react_router_dom3 = require("react-router-dom");
 
 // src/components/Avatar/Avatar.tsx
 var import_react28 = require("react");
-var import_runtime23 = require("@homebound/truss/runtime");
+var import_runtime24 = require("@homebound/truss/runtime");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var __typography4 = {
   xs2: {
@@ -8871,7 +8892,7 @@ function Avatar({
     }],
     overflow: "oh"
   };
-  const img = showFallback ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...(0, import_runtime23.trussProps)({
+  const img = showFallback ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...(0, import_runtime24.trussProps)({
     ...styles,
     ...{
       ...__typography4[sizeToFallbackTypeScale[size]] ?? {},
@@ -8881,13 +8902,13 @@ function Avatar({
       alignItems: "aic",
       justifyContent: "jcc"
     }
-  }), ...tid, children: name ? nameToInitials(name) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { icon: "userCircle", inc: sizeToIconInc[size] }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src, alt: name, ...(0, import_runtime23.trussProps)({
+  }), ...tid, children: name ? nameToInitials(name) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { icon: "userCircle", inc: sizeToIconInc[size] }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsxs)("div", { ...(0, import_runtime23.trussProps)({
+  return showName && name ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...(0, import_runtime24.trussProps)({
     display: "dif",
     alignItems: "aic",
     gap: "gap1",
@@ -8896,7 +8917,7 @@ function Avatar({
     } : {}
   }), children: [
     img,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { ...(0, import_runtime23.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { ...(0, import_runtime24.trussProps)({
       ...__typography4[sizeToTypeScale[size]] ?? {}
     }), children: name })
   ] }) : maybeTooltip({
@@ -8936,7 +8957,7 @@ function nameToInitials(name) {
 // src/components/Avatar/AvatarButton.tsx
 var import_react29 = require("react");
 var import_react_aria10 = require("react-aria");
-var import_runtime24 = require("@homebound/truss/runtime");
+var import_runtime25 = require("@homebound/truss/runtime");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function AvatarButton(props) {
   const {
@@ -8992,11 +9013,11 @@ function AvatarButton(props) {
     ...focusProps,
     ...hoverProps,
     ref,
-    ...(0, import_runtime24.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_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Avatar, { ...avatarProps, ...tid, disableTooltip: true }),
-    isPressed && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { ...(0, import_runtime24.trussProps)(pressedOverlayCss) })
+    isPressed && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { ...(0, import_runtime25.trussProps)(pressedOverlayCss) })
   ] });
   return maybeTooltip({
     // Default the tooltip to the avatar's name, if defined.
@@ -9047,7 +9068,7 @@ var import_react_aria13 = require("react-aria");
 // src/components/Button.tsx
 var import_react30 = require("react");
 var import_react_aria11 = require("react-aria");
-var import_runtime25 = require("@homebound/truss/runtime");
+var import_runtime26 = require("@homebound/truss/runtime");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function Button(props) {
   const {
@@ -9124,7 +9145,7 @@ function Button(props) {
     ...buttonProps,
     ...focusProps,
     ...hoverProps,
-    ...(0, import_runtime25.mergeProps)(asLink ? navLink : void 0, void 0, {
+    ...(0, import_runtime26.mergeProps)(asLink ? navLink : void 0, void 0, {
       ...{
         fontWeight: "fw6",
         fontSize: "fz_14px",
@@ -9529,7 +9550,7 @@ var iconStyles = {
 // src/components/NavLink.tsx
 var import_react31 = require("react");
 var import_react_aria12 = require("react-aria");
-var import_runtime26 = require("@homebound/truss/runtime");
+var import_runtime27 = require("@homebound/truss/runtime");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function NavLink(props) {
   const {
@@ -9585,7 +9606,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_runtime26.trussProps)({
+    ...(0, import_runtime27.trussProps)({
       ...baseStyles5,
       ...active && activeStyles4,
       ...isDisabled && disabledStyles4,
@@ -9796,7 +9817,7 @@ function ButtonModal(props) {
 }
 
 // src/components/Avatar/AvatarGroup.tsx
-var import_runtime27 = require("@homebound/truss/runtime");
+var import_runtime28 = require("@homebound/truss/runtime");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function AvatarGroup(props) {
   const {
@@ -9807,7 +9828,7 @@ function AvatarGroup(props) {
   const visibleAvatars = avatars.slice(0, maxVisibleAvatars);
   const menuAvatars = avatars.slice(maxVisibleAvatars);
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "df aic gap1 fw6 fz_12px lh_16px", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "df aic", children: visibleAvatars.map((avatar, idx) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ...(0, import_runtime27.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "df aic", children: visibleAvatars.map((avatar, idx) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ...(0, import_runtime28.trussProps)({
       borderRadius: "br100",
       borderStyle: "bss",
       borderWidth: "borderWidth_3px",
@@ -9821,7 +9842,7 @@ function AvatarGroup(props) {
     menuAvatars.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ButtonModal, { trigger: {
       label: `+ ${menuAvatars.length} more`,
       variant: "text"
-    }, hideEndAdornment: true, content: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ...(0, import_runtime27.trussProps)({
+    }, hideEndAdornment: true, content: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ...(0, import_runtime28.trussProps)({
       display: "df",
       flexDirection: "fdc",
       gap: "gap1",
@@ -9848,7 +9869,7 @@ var sizeToOverlap = {
 };
 
 // src/components/internal/MenuItem.tsx
-var import_runtime28 = require("@homebound/truss/runtime");
+var import_runtime29 = require("@homebound/truss/runtime");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function MenuItemImpl(props) {
   const {
@@ -9895,7 +9916,7 @@ function MenuItemImpl(props) {
     },
     onClose
   }, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("li", { ...menuItemProps, ...hoverProps, ref, ...(0, import_runtime28.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("li", { ...menuItemProps, ...hoverProps, ref, ...(0, import_runtime29.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -9973,7 +9994,7 @@ function maybeWrapInLink(onClick, content, disabled) {
   if (disabled || typeof onClick !== "string") {
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: content });
   }
-  return isAbsoluteUrl(onClick) ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("a", { href: onClick, target: "_blank", rel: "noopener noreferrer", ...(0, import_runtime28.mergeProps)("navLink", void 0, {
+  return isAbsoluteUrl(onClick) ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("a", { href: onClick, target: "_blank", rel: "noopener noreferrer", ...(0, import_runtime29.mergeProps)("navLink", void 0, {
     display: "df",
     alignItems: "aic",
     justifyContent: "jcsb",
@@ -10020,12 +10041,12 @@ function Popover(props) {
 var import_react45 = require("react");
 var import_react_aria27 = require("react-aria");
 var import_react_stately6 = require("react-stately");
-var import_runtime40 = require("@homebound/truss/runtime");
+var import_runtime41 = require("@homebound/truss/runtime");
 
 // src/inputs/internal/ComboBoxInput.tsx
 var import_react44 = require("react");
 var import_react_aria26 = require("react-aria");
-var import_runtime39 = require("@homebound/truss/runtime");
+var import_runtime40 = require("@homebound/truss/runtime");
 
 // src/inputs/hooks/useGrowingTextField.tsx
 var import_utils32 = require("@react-aria/utils");
@@ -10091,12 +10112,12 @@ function useGrowingTextField({ inputRef, inputWrapRef, value, disabled, maxLines
 var import_react43 = __toESM(require("react"), 1);
 var import_react_aria25 = require("react-aria");
 var import_react_stately5 = require("react-stately");
-var import_runtime38 = require("@homebound/truss/runtime");
+var import_runtime39 = require("@homebound/truss/runtime");
 
 // src/inputs/internal/ListBox.tsx
 var import_react42 = require("react");
 var import_react_aria24 = require("react-aria");
-var import_runtime37 = require("@homebound/truss/runtime");
+var import_runtime38 = require("@homebound/truss/runtime");
 
 // src/inputs/internal/constants.ts
 var persistentItemHeight = 42;
@@ -10104,7 +10125,7 @@ var sectionSeparatorHeight = 1;
 
 // src/inputs/internal/ListBoxSection.tsx
 var import_react_aria23 = require("react-aria");
-var import_runtime36 = require("@homebound/truss/runtime");
+var import_runtime37 = require("@homebound/truss/runtime");
 
 // src/inputs/internal/Option.tsx
 var import_react38 = require("react");
@@ -10119,7 +10140,7 @@ var import_react_stately4 = require("react-stately");
 // src/inputs/ChipTextField.tsx
 var import_react36 = require("react");
 var import_react_aria18 = require("react-aria");
-var import_runtime29 = require("@homebound/truss/runtime");
+var import_runtime30 = require("@homebound/truss/runtime");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 function ChipTextField(props) {
   const {
@@ -10179,7 +10200,7 @@ function ChipTextField(props) {
       target.innerHTML = target.textContent?.replace(/[A\n\r]/g, " ") ?? "";
     }
     onChange(target.textContent ?? "");
-  }, ...focusProps, ...(0, import_runtime29.trussProps)({
+  }, ...focusProps, ...(0, import_runtime30.trussProps)({
     ...chipBaseStyles(fieldProps?.compact),
     ...{
       minWidth: "mw_32px",
@@ -10192,7 +10213,7 @@ function ChipTextField(props) {
 }
 
 // src/inputs/internal/ListBoxChip.tsx
-var import_runtime30 = require("@homebound/truss/runtime");
+var import_runtime31 = require("@homebound/truss/runtime");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function ListBoxChip({
   label
@@ -10200,7 +10221,7 @@ function ListBoxChip({
   const {
     fieldProps
   } = usePresentationContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { ...(0, import_runtime30.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { ...(0, import_runtime31.trussProps)({
     ...chipBaseStyles(fieldProps?.compact),
     ...{
       whiteSpace: "wsnw",
@@ -10261,7 +10282,7 @@ function defaultOptionLabel(opt) {
 }
 
 // src/inputs/ChipSelectField.tsx
-var import_runtime31 = require("@homebound/truss/runtime");
+var import_runtime32 = require("@homebound/truss/runtime");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function ChipSelectField(props) {
   const firstRender = (0, import_react37.useRef)(true);
@@ -10439,7 +10460,7 @@ function ChipSelectField(props) {
     maybeTooltip({
       title: resolveTooltip(disabled),
       placement: "top",
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ref: wrapperRef, ...(0, import_runtime31.trussProps)({
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ref: wrapperRef, ...(0, import_runtime32.trussProps)({
         ...chipStyles,
         ...{
           position: "relative",
@@ -10457,7 +10478,7 @@ function ChipSelectField(props) {
         } : {}
       }), children: [
         /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Label, { label, labelProps, hidden: true, ...tid.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { ...(0, import_react_aria19.mergeProps)(focusProps, buttonProps), ref: buttonRef, ...(0, import_runtime31.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { ...(0, import_react_aria19.mergeProps)(focusProps, buttonProps), ref: buttonRef, ...(0, import_runtime32.trussProps)({
           ...{
             textAlign: "tal",
             borderRadius: "br16",
@@ -10473,7 +10494,7 @@ function ChipSelectField(props) {
           },
           ...isDisabled ? chipDisabledStyles : chipHoverOnlyStyles
         }), title: state.selectedItem ? state.selectedItem.textValue : placeholder, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44.jsx)("button", { ...clearFocusProps, ...(0, import_runtime31.trussProps)({
+        showClearButton && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { ...clearFocusProps, ...(0, import_runtime32.trussProps)({
           ...{
             paddingRight: "pr_4px",
             borderRadius: "borderRadius_0_16px_16px_0",
@@ -10519,7 +10540,7 @@ function CreateNewField(props) {
 }
 
 // src/inputs/internal/Option.tsx
-var import_runtime32 = require("@homebound/truss/runtime");
+var import_runtime33 = require("@homebound/truss/runtime");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function Option(props) {
   const {
@@ -10573,7 +10594,7 @@ function Option(props) {
   return maybeTooltip({
     title: disabledReason,
     placement: "right",
-    children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("li", { ...(0, import_react_aria20.mergeProps)(optionProps, hoverProps), "data-label": item.textValue, ref, ...(0, import_runtime32.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("li", { ...(0, import_react_aria20.mergeProps)(optionProps, hoverProps), "data-label": item.textValue, ref, ...(0, import_runtime33.trussProps)({
       ...{
         display: "df",
         alignItems: "aic",
@@ -10612,7 +10633,7 @@ var import_react41 = require("react");
 var import_react_virtuoso = require("react-virtuoso");
 
 // src/inputs/internal/LoadingDots.tsx
-var import_runtime33 = require("@homebound/truss/runtime");
+var import_runtime34 = require("@homebound/truss/runtime");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function LoadingDots({
   contrast
@@ -10634,19 +10655,19 @@ function LoadingDots({
   };
   const tid = useTestIds({});
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "pt2 pb2 df jcc", ...tid.loadingDots, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { "aria-label": "Loading", className: "df gap_4px", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...(0, import_runtime33.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...(0, import_runtime34.trussProps)({
       ...dotCss,
       ...{
         animationDelay: "animationDelay_0ms"
       }
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...(0, import_runtime33.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...(0, import_runtime34.trussProps)({
       ...dotCss,
       ...{
         animationDelay: "animationDelay_300ms"
       }
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...(0, import_runtime33.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...(0, import_runtime34.trussProps)({
       ...dotCss,
       ...{
         animationDelay: "animationDelay_600ms"
@@ -10662,7 +10683,7 @@ var import_react_aria22 = require("react-aria");
 // src/inputs/CheckboxBase.tsx
 var import_react39 = require("react");
 var import_react_aria21 = require("react-aria");
-var import_runtime34 = require("@homebound/truss/runtime");
+var import_runtime35 = require("@homebound/truss/runtime");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function CheckboxBase(props) {
   const {
@@ -10690,7 +10711,7 @@ function CheckboxBase(props) {
   return maybeTooltip({
     title: tooltip,
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Tag2, { ...(0, import_runtime34.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Tag2, { ...(0, import_runtime35.trussProps)({
       display: "df",
       cursor: "cursorPointer",
       position: "relative",
@@ -10706,17 +10727,17 @@ function CheckboxBase(props) {
       /* @__PURE__ */ (0, import_jsx_runtime47.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_runtime47.jsxs)("div", { ...(0, import_runtime34.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { ...(0, import_runtime35.trussProps)({
         marginLeft: "ml1",
         marginTop: ["mt_var", {
           "--marginTop": `${-2}px`
         }]
       }), children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...(0, import_runtime34.trussProps)({
+        label && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...(0, import_runtime35.trussProps)({
           ...labelStyles,
           ...isDisabled && disabledColor
         }), children: label }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...(0, import_runtime34.trussProps)({
+        description && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...(0, import_runtime35.trussProps)({
           ...descStyles,
           ...isDisabled && disabledColor
         }), children: description }),
@@ -10798,7 +10819,7 @@ function StyledCheckbox(props) {
   });
   const markIcon = isIndeterminate ? dashSmall : isSelected ? checkmarkSmall : "";
   const tid = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { ...hoverProps, ...(0, import_runtime34.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { ...hoverProps, ...(0, import_runtime35.trussProps)({
     ...baseStyles2,
     ...(isSelected && !isDisabled || isIndeterminate) && filledBoxStyles,
     ...(isSelected && !isDisabled || isIndeterminate) && isHovered && filledBoxHoverStyles,
@@ -10808,11 +10829,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_runtime47.jsx)("svg", { width: "16", height: "16", ...(0, import_runtime34.trussProps)(markSvgStyles), children: /* @__PURE__ */ (0, import_jsx_runtime47.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_runtime47.jsx)("svg", { width: "16", height: "16", ...(0, import_runtime34.trussProps)(markSvgStyles), children: /* @__PURE__ */ (0, import_jsx_runtime47.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_runtime47.jsx)("svg", { width: "16", height: "16", ...(0, import_runtime35.trussProps)(markSvgStyles), children: /* @__PURE__ */ (0, import_jsx_runtime47.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_runtime47.jsx)("svg", { width: "16", height: "16", ...(0, import_runtime35.trussProps)(markSvgStyles), children: /* @__PURE__ */ (0, import_jsx_runtime47.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_runtime35 = require("@homebound/truss/runtime");
+var import_runtime36 = require("@homebound/truss/runtime");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function TreeOption(props) {
   const {
@@ -10872,7 +10893,7 @@ function TreeOption(props) {
       }]
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("li", { ...hoverProps, ...(0, import_runtime35.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("li", { ...hoverProps, ...(0, import_runtime36.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -11055,11 +11076,11 @@ function ListBoxSection(props) {
   const childNodes = [...section.childNodes];
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
     isPersistentSection && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { ...separatorProps, className: "bts_solid btw_1px bcGray200" }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { ...itemProps, ...(0, import_runtime36.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { ...itemProps, ...(0, import_runtime37.trussProps)({
       ...!isPersistentSection ? {
         overflow: "oa"
       } : {}
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ul", { ...(0, import_runtime36.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ul", { ...(0, import_runtime37.trussProps)({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -11135,7 +11156,7 @@ function ListBox(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.selectionManager.selectedKeys.size]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { ...(0, import_runtime37.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { ...(0, import_runtime38.trussProps)({
     backgroundColor: "bgWhite",
     borderRadius: "br4",
     width: "w100",
@@ -11571,7 +11592,7 @@ function TreeSelectFieldBase(props) {
     minWidth: 320
   };
   const fieldMaxWidth = getFieldWidth(fullWidth);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { ...(0, import_runtime38.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { ...(0, import_runtime39.trussProps)({
     display: "df",
     flexDirection: "fdc",
     width: "w100",
@@ -11666,7 +11687,7 @@ function ComboBoxInput(props) {
   });
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TextFieldBase, { ...otherProps, ...multilineProps, unfocusedPlaceholder: showChipSelection && /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)(Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, ...(0, import_runtime39.trussProps)({
+  } : {}, startAdornment: showNumSelection && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, ...(0, import_runtime40.trussProps)({
     ...{
       borderRadius: "br4",
       outline: "outline0",
@@ -12000,7 +12021,7 @@ function ComboBoxBase(props) {
     minWidth: 200
   };
   const fieldMaxWidth = getFieldWidth(fullWidth);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { ...(0, import_runtime40.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { ...(0, import_runtime41.trussProps)({
     display: "df",
     flexDirection: "fdc",
     width: "w100",
@@ -12224,7 +12245,7 @@ function Checkbox(props) {
 var import_react48 = require("react");
 var import_react_aria30 = require("react-aria");
 var import_react_stately9 = require("react-stately");
-var import_runtime41 = require("@homebound/truss/runtime");
+var import_runtime42 = require("@homebound/truss/runtime");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 function CheckboxGroup(props) {
   const {
@@ -12252,18 +12273,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_runtime58.jsxs)("div", { ...groupProps, ...(0, import_runtime41.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { ...groupProps, ...(0, import_runtime42.trussProps)({
     ...labelStyle === "left" ? {
       display: "df",
       flexDirection: "fdr"
     } : {}
   }), onBlur, onFocus, ...tid, children: [
-    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { ...(0, import_runtime41.trussProps)({
+    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { ...(0, import_runtime42.trussProps)({
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
     }), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { ...(0, import_runtime41.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { ...(0, import_runtime42.trussProps)({
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
         "--gridTemplateColumns": `repeat(${columns}, auto)`
@@ -12399,7 +12420,7 @@ function isValidDate(d) {
 }
 
 // src/inputs/DateFields/DateFieldBase.tsx
-var import_runtime42 = require("@homebound/truss/runtime");
+var import_runtime43 = require("@homebound/truss/runtime");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 function DateFieldBase(props) {
   const {
@@ -12542,7 +12563,7 @@ function DateFieldBase(props) {
     setInputValue("");
     onChange(void 0);
   } }) });
-  const calendarButton = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, ...(0, import_runtime42.trussProps)({
+  const calendarButton = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, ...(0, import_runtime43.trussProps)({
     ...isDisabled ? {
       cursor: "cursorNotAllowed"
     } : {}
@@ -12629,7 +12650,7 @@ function DateRangeField(props) {
 var import_react51 = require("react");
 var import_react_aria32 = require("react-aria");
 var import_react_stately11 = require("react-stately");
-var import_runtime43 = require("@homebound/truss/runtime");
+var import_runtime44 = require("@homebound/truss/runtime");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 function IconCard(props) {
   const {
@@ -12671,10 +12692,10 @@ function IconCard(props) {
   return maybeTooltip({
     title: resolveTooltip(isDisabled, tooltip),
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("button", { ...(0, import_runtime43.trussProps)(styles), ...hoverProps, onClick: toggleState.toggle, disabled: isDisabled, ...tid, children: [
+    children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("button", { ...(0, import_runtime44.trussProps)(styles), ...hoverProps, onClick: toggleState.toggle, disabled: isDisabled, ...tid, children: [
       /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_aria32.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("input", { ref, ...inputProps, ...tid.value }) }),
       /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { icon, inc: 4, color: isDisabled ? "rgba(221, 220, 220, 1)" /* Gray300 */ : "rgba(36, 36, 36, 1)" /* Gray900 */ }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { ...(0, import_runtime43.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { ...(0, import_runtime44.trussProps)({
         fontWeight: "fw4",
         fontSize: "fz_12px",
         lineHeight: "lh_16px",
@@ -12719,7 +12740,7 @@ var iconCardStylesHover = {
 
 // src/inputs/MultiLineSelectField.tsx
 var import_react52 = require("react");
-var import_runtime44 = require("@homebound/truss/runtime");
+var import_runtime45 = require("@homebound/truss/runtime");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 function MultiLineSelectField(props) {
   const {
@@ -12734,18 +12755,18 @@ function MultiLineSelectField(props) {
   const tid = useTestIds(props, "");
   const [isDisplayed, setIsDisplayed] = (0, import_react52.useState)(true);
   const currentOptions = options.filter((o) => !values.includes(getOptionValue(o)));
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { ...(0, import_runtime44.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { ...(0, import_runtime45.trussProps)({
     marginTop: "mt1",
     ...labelStyle === "left" ? {
       display: "df"
     } : {}
   }), children: [
-    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { ...(0, import_runtime44.trussProps)({
+    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { ...(0, import_runtime45.trussProps)({
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
     }), children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Label, { ...tid.label, label: props.label }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { ...(0, import_runtime44.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { ...(0, import_runtime45.trussProps)({
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
@@ -12974,7 +12995,7 @@ function formatValue(value, factor, numFractionDigits, numIntegerDigits, positiv
 var import_react54 = require("react");
 var import_react_aria34 = require("react-aria");
 var import_react_stately13 = require("react-stately");
-var import_runtime45 = require("@homebound/truss/runtime");
+var import_runtime46 = require("@homebound/truss/runtime");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var nextNameId = 0;
 function RadioGroupField(props) {
@@ -13007,7 +13028,7 @@ function RadioGroupField(props) {
   }, state);
   return (
     // default styling to position `<Label />` above.
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { ...(0, import_runtime45.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { ...(0, import_runtime46.trussProps)({
       display: "df",
       flexDirection: "fdc",
       gap: "gap1",
@@ -13067,7 +13088,7 @@ function Radio(props) {
   } = (0, import_react_aria34.useHover)({
     isDisabled: disabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("label", { ...(0, import_runtime45.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("label", { ...(0, import_runtime46.trussProps)({
     display: "df",
     cursor: "cursorPointer",
     marginBottom: "mb1",
@@ -13080,7 +13101,7 @@ function Radio(props) {
       {
         type: "radio",
         ref,
-        ...(0, import_runtime45.trussProps)({
+        ...(0, import_runtime46.trussProps)({
           ...radioReset,
           ...radioDefault,
           ...!disabled && state.selectedValue === value ? radioChecked : radioUnchecked,
@@ -13101,7 +13122,7 @@ function Radio(props) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { id: labelId, ...(0, import_runtime45.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { id: labelId, ...(0, import_runtime46.trussProps)({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -13112,7 +13133,7 @@ function Radio(props) {
       }), ...description ? {
         "aria-describedby": descriptionId
       } : {}, children: label }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { id: descriptionId, ...(0, import_runtime45.trussProps)({
+      description && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { id: descriptionId, ...(0, import_runtime46.trussProps)({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -13255,7 +13276,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_runtime46 = require("@homebound/truss/runtime");
+var import_runtime47 = require("@homebound/truss/runtime");
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var RichTextField = withTestMock(RichTextFieldImpl, RichTextFieldMock);
 function RichTextFieldImpl(props) {
@@ -13335,7 +13356,7 @@ function RichTextFieldImpl(props) {
     autoFocus
   } = props;
   if (!readOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { ...(0, import_runtime46.trussProps)({
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { ...(0, import_runtime47.trussProps)({
       width: "w100",
       ...!fullWidth ? {
         maxWidth: "maxw_550px"
@@ -13358,7 +13379,7 @@ function RichTextFieldImpl(props) {
       ] })
     ] });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { ...(0, import_runtime46.trussProps)({
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { ...(0, import_runtime47.trussProps)({
       width: "w100",
       ...!fullWidth ? {
         maxWidth: "maxw_550px"
@@ -13432,7 +13453,7 @@ function SelectField(props) {
 // src/inputs/Switch.tsx
 var import_react58 = require("react");
 var import_react_aria35 = require("react-aria");
-var import_runtime47 = require("@homebound/truss/runtime");
+var import_runtime48 = require("@homebound/truss/runtime");
 var import_jsx_runtime72 = require("react/jsx-runtime");
 var __maybeInc5 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -13482,7 +13503,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_runtime72.jsxs)("label", { ...hoverProps, ...(0, import_runtime47.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("label", { ...hoverProps, ...(0, import_runtime48.trussProps)({
     ...{
       position: "relative",
       cursor: "cursorPointer",
@@ -13525,13 +13546,13 @@ function Switch(props) {
         color: "gray900"
       } : {}
     }, inline: labelStyle === "left" || labelStyle === "filter" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { ...(0, import_runtime47.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { ...(0, import_runtime48.trussProps)({
       ...labelStyle === "left" ? {
         width: ["w_var", {
           "--width": __maybeInc5(labelLeftFieldWidth)
         }]
       } : {}
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { "aria-hidden": "true", ...(0, import_runtime47.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { "aria-hidden": "true", ...(0, import_runtime48.trussProps)({
       ...{
         width: ["w_var", {
           "--width": `${toggleWidth(compact)}px`
@@ -13553,7 +13574,7 @@ function Switch(props) {
         backgroundColor: "bgBlue700"
       },
       ...isSelected && isHovered && switchSelectedHoverStyles
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { ...(0, import_runtime47.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { ...(0, import_runtime48.trussProps)({
       ...switchCircleDefaultStyles(compact),
       ...isDisabled && {
         backgroundColor: "bgGray100"
@@ -13739,7 +13760,7 @@ function TextField(props) {
 var import_react61 = require("react");
 var import_react_aria38 = require("react-aria");
 var import_react_stately14 = require("react-stately");
-var import_runtime48 = require("@homebound/truss/runtime");
+var import_runtime49 = require("@homebound/truss/runtime");
 var import_jsx_runtime75 = require("react/jsx-runtime");
 function ToggleButton(props) {
   const {
@@ -13804,7 +13825,7 @@ function ToggleButton(props) {
     ...focusProps,
     ...hoverProps,
     ...pressProps,
-    ...(0, import_runtime48.trussProps)({
+    ...(0, import_runtime49.trussProps)({
       ...{
         borderRadius: "br4",
         display: "dif",
@@ -13860,7 +13881,7 @@ var togglePressStyles = {
 var import_react62 = require("react");
 var import_react_aria39 = require("react-aria");
 var import_react_stately15 = require("react-stately");
-var import_runtime49 = require("@homebound/truss/runtime");
+var import_runtime50 = require("@homebound/truss/runtime");
 var import_jsx_runtime76 = require("react/jsx-runtime");
 var __maybeInc6 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -13892,7 +13913,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_runtime76.jsxs)("div", { ...groupProps, ...(0, import_runtime49.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { ...groupProps, ...(0, import_runtime50.trussProps)({
     position: "relative",
     display: "df",
     flexDirection: "fdc",
@@ -13904,7 +13925,7 @@ function ToggleChipGroup(props) {
     } : {}
   }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Label, { label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { ...(0, import_runtime49.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { ...(0, import_runtime50.trussProps)({
       display: "df",
       gap: "gap1",
       flexWrap: "flexWrap_wrap",
@@ -13969,7 +13990,7 @@ function ToggleChip2(props) {
   return maybeTooltip({
     title: tooltip,
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("label", { ...(0, import_runtime49.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("label", { ...(0, import_runtime50.trussProps)({
       ...{
         position: "relative",
         display: "dif",
@@ -15251,7 +15272,7 @@ function useRenderCount() {
 }
 
 // src/components/Table/GridTable.tsx
-var import_runtime50 = require("@homebound/truss/runtime");
+var import_runtime51 = require("@homebound/truss/runtime");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var runningInJest = false;
 function setRunningInJest() {
@@ -15523,7 +15544,7 @@ function GridTable(props) {
     tableContainerRef
   }), [tableState, tableContainerRef]);
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(TableStateContext.Provider, { value: rowStateContext, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(PresentationProvider, { fieldProps, wrap: style?.presentationSettings?.wrap, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ref: resizeRef, ...(0, import_runtime50.trussProps)(getTableRefWidthStyles(as === "virtual")) }),
+    /* @__PURE__ */ (0, import_jsx_runtime79.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)
   ] }) });
 }
@@ -15533,7 +15554,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_runtime79.jsxs)("div", { ref: tableContainerRef, ...(0, import_runtime50.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime79.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),
@@ -15549,7 +15570,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstR
     } : {},
     ...xss
   }), "data-testid": id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ...(0, import_runtime50.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ...(0, import_runtime51.trussProps)({
       ...stickyHeader ? {
         position: "sticky",
         top: ["top_var", {
@@ -15562,7 +15583,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstR
     }), children: tableHeadRows }),
     /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { children: [
       keptSelectedRows,
-      firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ...(0, import_runtime50.trussProps)({
+      firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ...(0, import_runtime51.trussProps)({
         ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
         ...style.firstRowMessageCss,
         ...visibleDataRows.length === 0 && style.lastRowCss,
@@ -15575,7 +15596,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_runtime79.jsxs)("table", { ref: tableContainerRef, ...(0, import_runtime50.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("table", { ref: tableContainerRef, ...(0, import_runtime51.trussProps)({
     ...{
       width: "w100",
       borderCollapse: "borderCollapse_separate",
@@ -15589,7 +15610,7 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firs
     } : {},
     ...xss
   }), "data-testid": id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("thead", { ...(0, import_runtime50.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("thead", { ...(0, import_runtime51.trussProps)({
       ...stickyHeader ? {
         position: "sticky",
         top: ["top_var", {
@@ -15602,11 +15623,11 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firs
     }), children: tableHeadRows }),
     /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("tbody", { children: [
       keptSelectedRows,
-      firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("tr", { ...(0, import_runtime50.trussProps)({
+      firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("tr", { ...(0, import_runtime51.trussProps)({
         ...tableRowPrintBreakCss,
         ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
         ...visibleDataRows.length === 0 && style.lastRowCss
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("td", { colSpan: columns.length, ...(0, import_runtime50.trussProps)({
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("td", { colSpan: columns.length, ...(0, import_runtime51.trussProps)({
         ...style.betweenRowsCss,
         ...style.firstRowMessageCss,
         ...visibleDataRows.length === 0 && style.lastRowCellCss,
@@ -15645,7 +15666,7 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
         } })),
         List: VirtualRoot(style, columns, id, xss),
         Footer: () => {
-          return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ...(0, import_runtime50.trussProps)({
+          return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ...(0, import_runtime51.trussProps)({
             ...style.virtualFooterPaddingBottomPx !== void 0 ? {
               paddingBottom: ["pb_var", {
                 "--paddingBottom": `${style.virtualFooterPaddingBottomPx ?? 0}px`
@@ -15668,11 +15689,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_runtime79.jsx)("div", { ...(0, import_runtime50.trussProps)({
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ...(0, import_runtime51.trussProps)({
                 ...getTableRefWidthStyles(true),
                 ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
                 ...visibleDataRows.length === 0 && style.lastRowCss
-              }), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ...(0, import_runtime50.trussProps)({
+              }), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ...(0, import_runtime51.trussProps)({
                 ...style.firstRowMessageCss,
                 ...visibleDataRows.length === 0 && style.lastRowCellCss,
                 ...visibleDataRows.length === 0 && style.lastRowFirstCellCss,
@@ -15717,7 +15738,7 @@ var VirtualRoot = (0, import_memoize_one.default)((gs, _columns, id, xss) => {
     style,
     children
   }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ref, ...(0, import_runtime50.mergeProps)(void 0, style, {
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ref, ...(0, import_runtime51.mergeProps)(void 0, style, {
       ...gs.rootCss,
       ...gs.minWidthPx ? {
         minWidth: ["mw_var", {
@@ -15733,7 +15754,7 @@ var VirtualRoot = (0, import_memoize_one.default)((gs, _columns, id, xss) => {
 });
 
 // src/components/ToggleChip.tsx
-var import_runtime51 = require("@homebound/truss/runtime");
+var import_runtime52 = require("@homebound/truss/runtime");
 var import_jsx_runtime80 = require("react/jsx-runtime");
 function ToggleChip(props) {
   const {
@@ -15752,7 +15773,7 @@ function ToggleChip(props) {
   } = useHover2({});
   const compact = fieldProps?.compact;
   const tid = useTestIds(props, "chip");
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("button", { type: "button", ...(0, import_runtime51.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime80.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
@@ -15768,7 +15789,7 @@ function ToggleChip(props) {
     ...xss
   }), disabled, onClick, ...hoverProps, ...tid, children: [
     icon && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "fs0", ...tid.icon, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Icon, { icon, color: "rgba(36, 36, 36, 1)" /* Gray900 */, inc: 2 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { ...(0, import_runtime51.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { ...(0, import_runtime52.trussProps)({
       textAlign: "tal",
       overflow: "oh",
       display: "d_negwebkit_box",
@@ -15780,7 +15801,7 @@ function ToggleChip(props) {
         paddingRight: "pr0"
       } : {}
     }), title: text, children: text }),
-    !disabled && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { ...(0, import_runtime51.trussProps)({
+    !disabled && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { ...(0, import_runtime52.trussProps)({
       ...{
         flexShrink: "fs0",
         borderRadius: "br16",
@@ -15802,7 +15823,7 @@ var chipDisabledStyles = {
 };
 
 // src/components/ToggleChips.tsx
-var import_runtime52 = require("@homebound/truss/runtime");
+var import_runtime53 = require("@homebound/truss/runtime");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 function ToggleChips(props) {
   const {
@@ -15812,7 +15833,7 @@ function ToggleChips(props) {
     xss
   } = props;
   const tid = useTestIds(props, "toggleChips");
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { ...(0, import_runtime52.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { ...(0, import_runtime53.trussProps)({
     ...{
       display: "df",
       flexWrap: "flexWrap_wrap",
@@ -15826,7 +15847,7 @@ function ToggleChips(props) {
 var import_utils69 = require("@react-aria/utils");
 var import_react72 = require("react");
 var import_react_aria40 = require("react-aria");
-var import_runtime53 = require("@homebound/truss/runtime");
+var import_runtime54 = require("@homebound/truss/runtime");
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var __maybeInc7 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -15926,7 +15947,7 @@ function Accordion(props) {
     },
     ...xss
   }), [compact, disabled, isFocusVisible, titleOnClick, xss]);
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { ...tid.container, ...(0, import_runtime53.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { ...tid.container, ...(0, import_runtime54.trussProps)({
     ...{
       borderColor: "bcGray300",
       ...topBorder ? {
@@ -15945,13 +15966,13 @@ function Accordion(props) {
     } : {}
   }), children: [
     titleOnClick ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { ...focusProps, "aria-controls": id, "aria-expanded": expanded, className: "df", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("button", { ...tid.title, disabled, ...(0, import_runtime53.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("button", { ...tid.title, disabled, ...(0, import_runtime54.trussProps)({
         ...touchableStyle,
         ...{
           flexGrow: "fg1"
         }
       }), onClick: titleOnClick, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("button", { ...tid.toggle, disabled, ...(0, import_runtime53.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("button", { ...tid.toggle, disabled, ...(0, import_runtime54.trussProps)({
         ...touchableStyle,
         ...{
           paddingLeft: "pl2",
@@ -15963,7 +15984,7 @@ function Accordion(props) {
           } : {}
         }
       }), onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(RotatingChevronIcon, { expanded }) })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("button", { ...tid.title, ...focusProps, "aria-controls": id, "aria-expanded": expanded, disabled, ...(0, import_runtime53.trussProps)({
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("button", { ...tid.title, ...focusProps, "aria-controls": id, "aria-expanded": expanded, disabled, ...(0, import_runtime54.trussProps)({
       ...{
         width: "w100"
       },
@@ -15972,13 +15993,13 @@ function Accordion(props) {
       /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "fg1 tal", children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(RotatingChevronIcon, { expanded })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ...tid.details, id, "aria-hidden": !expanded, ...(0, import_runtime53.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ...tid.details, id, "aria-hidden": !expanded, ...(0, import_runtime54.trussProps)({
       overflow: "oh",
       height: ["h_var", {
         "--height": __maybeInc7(contentHeight)
       }],
       transition: "transition_height_250ms_ease_in_out"
-    }), children: expanded && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ...(0, import_runtime53.trussProps)({
+    }), children: expanded && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ...(0, import_runtime54.trussProps)({
       paddingLeft: "pl2",
       paddingRight: "pr2",
       paddingBottom: "pb2",
@@ -15993,7 +16014,7 @@ function Accordion(props) {
   ] });
 }
 function RotatingChevronIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { ...(0, import_runtime53.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { ...(0, import_runtime54.trussProps)({
     flexShrink: "fs0",
     transition: "transition_transform_250ms_linear",
     transform: ["transform_var", {
@@ -16093,7 +16114,7 @@ function Indicator({
 }
 
 // src/components/Banner.tsx
-var import_runtime54 = require("@homebound/truss/runtime");
+var import_runtime55 = require("@homebound/truss/runtime");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 function Banner(props) {
   const {
@@ -16104,7 +16125,7 @@ function Banner(props) {
     ...others
   } = props;
   const tid = useTestIds(others, "banner");
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { ...(0, import_runtime54.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { ...(0, import_runtime55.trussProps)({
     ...variantStyles2[type],
     ...{
       display: "df",
@@ -16228,7 +16249,7 @@ function useModal() {
 }
 
 // src/components/Modal/Modal.tsx
-var import_runtime55 = require("@homebound/truss/runtime");
+var import_runtime56 = require("@homebound/truss/runtime");
 var import_jsx_runtime87 = require("react/jsx-runtime");
 function Modal(props) {
   const {
@@ -16309,7 +16330,7 @@ function Modal(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [modalBodyRef, modalFooterRef, modalHeaderRef]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react_aria41.OverlayContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(AutoSaveStatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime87.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_runtime87.jsx)(import_react_aria41.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { ...(0, import_runtime55.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react_aria41.OverlayContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(AutoSaveStatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime87.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_runtime87.jsx)(import_react_aria41.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { ...(0, import_runtime56.trussProps)({
     borderRadius: "br24",
     backgroundColor: "bgWhite",
     boxShadow: "bshModal",
@@ -16335,7 +16356,7 @@ function Modal(props) {
       borderRadius: "br0"
     } : {}
   }), ref, ...overlayProps, ...dialogProps, ...modalProps, ...testId, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("header", { ...(0, import_runtime55.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("header", { ...(0, import_runtime56.trussProps)({
       display: "df",
       flexDirection: "fdrr",
       paddingTop: "pt3",
@@ -16352,7 +16373,7 @@ function Modal(props) {
       /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "fs0 pl1", children: allowClosing && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) }),
       /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("h1", { className: "fg1 fw6 fz_30px lh_36px gray900", ref: modalHeaderRef, ...titleProps, ...testId.title })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("main", { ref: modalBodyRef, ...(0, import_runtime55.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("main", { ref: modalBodyRef, ...(0, import_runtime56.trussProps)({
       flexGrow: "fg1",
       overflowY: "oya",
       ...hasScroll ? {
@@ -16385,7 +16406,7 @@ function ModalBody({
   const testId = useTestIds({}, testIdPrefix);
   return (0, import_react_dom2.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_runtime87.jsx)("div", { ...(0, import_runtime55.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ...(0, import_runtime56.trussProps)({
       height: "h100",
       ...virtualized ? {
         overflow: "oh",
@@ -16406,7 +16427,7 @@ function ModalFooter({
     modalFooterDiv
   } = useBeamContext();
   const testId = useTestIds({}, testIdPrefix);
-  return (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ...(0, import_runtime55.trussProps)({
+  return (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ...(0, import_runtime56.trussProps)({
     ...{
       paddingTop: "pt3",
       paddingBottom: "pb3",
@@ -16441,7 +16462,7 @@ function getSize(size) {
 var import_react78 = require("react");
 
 // src/components/Snackbar/SnackbarNotice.tsx
-var import_runtime56 = require("@homebound/truss/runtime");
+var import_runtime57 = require("@homebound/truss/runtime");
 var import_jsx_runtime88 = require("react/jsx-runtime");
 function SnackbarNotice(props) {
   const {
@@ -16459,7 +16480,7 @@ function SnackbarNotice(props) {
     /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       "span",
       {
-        ...(0, import_runtime56.trussProps)({
+        ...(0, import_runtime57.trussProps)({
           overflow: "oh",
           display: "d_negwebkit_box",
           WebkitBoxOrient: "wbo_vertical",
@@ -16480,7 +16501,7 @@ function SnackbarNotice(props) {
       }
     ),
     (action || !reallyHideClose) && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("span", { className: "fs0 df aic", children: [
-      action && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { ...(0, import_runtime56.trussProps)({
+      action && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { ...(0, import_runtime57.trussProps)({
         textTransform: "ttu",
         fontWeight: "fw4",
         fontSize: "fz_14px",
@@ -16518,7 +16539,7 @@ var typeToIcon2 = {
 };
 
 // src/components/Snackbar/Snackbar.tsx
-var import_runtime57 = require("@homebound/truss/runtime");
+var import_runtime58 = require("@homebound/truss/runtime");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 function Snackbar({
   notices,
@@ -16529,7 +16550,7 @@ function Snackbar({
     "div",
     {
       ...tid.snackbarWrapper,
-      ...(0, import_runtime57.trussProps)({
+      ...(0, import_runtime58.trussProps)({
         position: "fixed",
         zIndex: "z9999",
         bottom: ["bottom_var", {
@@ -16580,7 +16601,7 @@ var SuperDrawerWidth = /* @__PURE__ */ ((SuperDrawerWidth2) => {
 })(SuperDrawerWidth || {});
 
 // src/components/SuperDrawer/SuperDrawer.tsx
-var import_runtime58 = require("@homebound/truss/runtime");
+var import_runtime59 = require("@homebound/truss/runtime");
 var import_jsx_runtime91 = require("react/jsx-runtime");
 var import_react80 = require("react");
 function SuperDrawer() {
@@ -16642,7 +16663,7 @@ function SuperDrawer() {
     /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
       import_framer_motion.motion.aside,
       {
-        ...(0, import_runtime58.trussProps)({
+        ...(0, import_runtime59.trussProps)({
           backgroundColor: "bgWhite",
           height: "h100",
           maxWidth: ["maxw_var", {
@@ -16943,7 +16964,7 @@ var import_mobx_react8 = require("mobx-react");
 // src/inputs/IconCardGroup.tsx
 var import_react81 = require("react");
 var import_react_aria42 = require("react-aria");
-var import_runtime59 = require("@homebound/truss/runtime");
+var import_runtime60 = require("@homebound/truss/runtime");
 var import_jsx_runtime98 = require("react/jsx-runtime");
 function IconCardGroup(props) {
   const {
@@ -16990,7 +17011,7 @@ function IconCardGroup(props) {
     ...fieldPropsAria
   });
   return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { ...groupProps, children: [
-    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { ...(0, import_runtime59.trussProps)({
+    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { ...(0, import_runtime60.trussProps)({
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
@@ -17536,7 +17557,7 @@ function BoundTreeSelectField(props) {
 
 // src/forms/FormLines.tsx
 var import_react82 = require("react");
-var import_runtime60 = require("@homebound/truss/runtime");
+var import_runtime61 = require("@homebound/truss/runtime");
 var import_jsx_runtime112 = require("react/jsx-runtime");
 var __maybeInc8 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -17572,7 +17593,7 @@ function FormLines(props) {
       fullWidth: true
     } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(PresentationProvider, { fieldProps: newFieldProps, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { ...(0, import_runtime60.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(PresentationProvider, { fieldProps: newFieldProps, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { ...(0, import_runtime61.trussProps)({
     display: "df",
     flexDirection: "fdc",
     gap: ["gap_var", {
@@ -17608,7 +17629,7 @@ function FieldGroup(props) {
     const width2 = widths2[i] || 1;
     return typeof width2 === `number` ? `${width2}fr` : width2;
   }).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { ...(0, import_runtime60.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { ...(0, import_runtime61.trussProps)({
     display: "dg",
     gap: "gap2",
     gridTemplateColumns: ["gtc_var", {
@@ -17624,7 +17645,7 @@ var sizes = {
 };
 
 // src/forms/BoundForm.tsx
-var import_runtime61 = require("@homebound/truss/runtime");
+var import_runtime62 = require("@homebound/truss/runtime");
 var import_jsx_runtime113 = require("react/jsx-runtime");
 var import_react84 = require("react");
 var reactNodePrefix = "reactNode";
@@ -17679,7 +17700,7 @@ function FormRow({
     component,
     key,
     minWidth
-  }) => /* @__PURE__ */ (0, import_react84.createElement)("div", { ...(0, import_runtime61.trussProps)({
+  }) => /* @__PURE__ */ (0, import_react84.createElement)("div", { ...(0, import_runtime62.trussProps)({
     minWidth: ["mw_var", {
       "--minWidth": minWidth
     }],
@@ -17797,7 +17818,7 @@ function boundTreeSelectField(props) {
 
 // src/components/internal/CompoundField.tsx
 var import_react85 = require("react");
-var import_runtime62 = require("@homebound/truss/runtime");
+var import_runtime63 = require("@homebound/truss/runtime");
 var import_jsx_runtime114 = require("react/jsx-runtime");
 function CompoundField({
   children
@@ -17831,7 +17852,7 @@ function CompoundField({
     setHasFocusWithin(false);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "df", onFocusCapture, onBlurCapture, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { ...(0, import_runtime62.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { ...(0, import_runtime63.trussProps)({
       ...commonStyles,
       ...{
         borderLeftStyle: "bls_solid",
@@ -17844,7 +17865,7 @@ function CompoundField({
     }), children: (0, import_react85.cloneElement)(children[0], {
       internalProps
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { ...(0, import_runtime62.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { ...(0, import_runtime63.trussProps)({
       ...{
         width: "w_1px",
         flex: "fn",
@@ -17854,7 +17875,7 @@ function CompoundField({
         backgroundColor: "bgBlue700"
       }
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { ...(0, import_runtime62.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { ...(0, import_runtime63.trussProps)({
       ...commonStyles,
       ...{
         flexGrow: "fg1",
@@ -17898,7 +17919,7 @@ function BoundSelectAndTextField(props) {
 }
 
 // src/forms/FormHeading.tsx
-var import_runtime63 = require("@homebound/truss/runtime");
+var import_runtime64 = require("@homebound/truss/runtime");
 var import_jsx_runtime116 = (
   // Add space before the heading, but only if it's not first.
   require("react/jsx-runtime")
@@ -17910,7 +17931,7 @@ function FormHeading(props) {
     isFirst = false,
     ...others
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("h3", { ...(0, import_runtime63.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("h3", { ...(0, import_runtime64.trussProps)({
     ...{
       fontWeight: "fw4",
       fontSize: "fz_16px",
@@ -17926,7 +17947,7 @@ FormHeading.isFormHeading = true;
 
 // src/forms/StaticField.tsx
 var import_utils101 = require("@react-aria/utils");
-var import_runtime64 = require("@homebound/truss/runtime");
+var import_runtime65 = require("@homebound/truss/runtime");
 var import_jsx_runtime117 = require("react/jsx-runtime");
 function StaticField(props) {
   const {
@@ -17940,7 +17961,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_runtime117.jsxs)("div", { ...(0, import_runtime64.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { ...(0, import_runtime65.trussProps)({
     ...labelStyle === "left" ? {
       display: "df",
       justifyContent: "jcsb",
@@ -17948,7 +17969,7 @@ function StaticField(props) {
     } : {}
   }), ...tid.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("label", { className: "db fw4 fz_14px lh_20px gray700 mb_4px", htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { id, ...(0, import_runtime64.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { id, ...(0, import_runtime65.trussProps)({
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -17996,7 +18017,7 @@ var import_use_debounce6 = require("use-debounce");
 // src/components/RightSidebar.tsx
 var import_framer_motion2 = require("framer-motion");
 var import_react86 = require("react");
-var import_runtime65 = require("@homebound/truss/runtime");
+var import_runtime66 = require("@homebound/truss/runtime");
 var import_jsx_runtime119 = require("react/jsx-runtime");
 var RIGHT_SIDEBAR_MIN_WIDTH = "250px";
 function RightSidebar({
@@ -18036,7 +18057,7 @@ function RightSidebar({
         duration: 0.2
       },
       x: "100%"
-    }, ...(0, import_runtime65.trussProps)({
+    }, ...(0, import_runtime66.trussProps)({
       width: "w100",
       minWidth: ["mw_var", {
         "--minWidth": RIGHT_SIDEBAR_MIN_WIDTH
@@ -18050,7 +18071,7 @@ function RightSidebar({
       paddingRight: "pr3"
     }), children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "sticky top0 bgWhite", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { ...(0, import_runtime65.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { ...(0, import_runtime66.trussProps)({
           position: "absolute",
           left: ["left_var", {
             "--left": `${-24}px`
@@ -18121,7 +18142,7 @@ function Toast() {
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
 var import_react88 = require("react");
 var import_react_router_dom4 = require("react-router-dom");
-var import_runtime66 = require("@homebound/truss/runtime");
+var import_runtime67 = require("@homebound/truss/runtime");
 var import_jsx_runtime122 = (
   // Adding index to key to prevent rendering issues when multiple items have the same label
   require("react/jsx-runtime")
@@ -18135,7 +18156,7 @@ function PageHeaderBreadcrumbs({
   function renderBreadcrumb(bc, index, hideDivisor) {
     return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_react88.Fragment, { children: [
       index > 0 && !hideDivisor && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "fw6 fz_14px lh_20px gray700 ml1 mr1 mt_2px mb_2px", children: "/" }),
-      /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_react_router_dom4.Link, { to: bc.href, ...(0, import_runtime66.mergeProps)("navLink", void 0, {
+      /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_react_router_dom4.Link, { to: bc.href, ...(0, import_runtime67.mergeProps)("navLink", void 0, {
         fontWeight: "fw6",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -18153,7 +18174,7 @@ function PageHeaderBreadcrumbs({
 }
 
 // src/components/Layout/FormPageLayout.tsx
-var import_runtime67 = require("@homebound/truss/runtime");
+var import_runtime68 = require("@homebound/truss/runtime");
 var import_jsx_runtime123 = require("react/jsx-runtime");
 var headerHeightPx = 120;
 var maxContentWidthPx = 1600;
@@ -18176,7 +18197,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_runtime123.jsx)("div", { className: "fixed top0 bottom0 left0 right0 z_1000 oya bgWhite df jcc aifs", ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { ...(0, import_runtime67.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "fixed top0 bottom0 left0 right0 z_1000 oya bgWhite df jcc aifs", ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { ...(0, import_runtime68.trussProps)({
       width: "w100",
       maxWidth: ["maxw_var", {
         "--maxWidth": `${maxContentWidthPx}px`
@@ -18192,7 +18213,7 @@ function FormPageLayoutComponent(props) {
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(PageHeader, { ...props, ...tids.pageHeader }),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(LeftNav, { sectionsWithRefs, ...tids }),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(FormSections, { sectionsWithRefs, formState, ...tids }),
-      rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("aside", { ...(0, import_runtime67.trussProps)({
+      rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("aside", { ...(0, import_runtime68.trussProps)({
         gridRow: "gr_2",
         gridColumn: "gc_3_4",
         position: "sticky",
@@ -18217,7 +18238,7 @@ function PageHeader(props) {
     notice
   } = useToastContext();
   const tids = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("header", { ...(0, import_runtime67.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("header", { ...(0, import_runtime68.trussProps)({
     gridRow: "gr_1",
     gridColumn: "gc_1_4",
     position: "sticky",
@@ -18251,7 +18272,7 @@ function FormSections(props) {
   } = props;
   const tids = useTestIds(props);
   const bottomPaddingPx = sectionsWithRefs.length > 1 ? 200 : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("article", { ...(0, import_runtime67.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("article", { ...(0, import_runtime68.trussProps)({
     gridRow: "gr_2",
     gridColumn: "gc_2_3",
     paddingBottom: ["pb_var", {
@@ -18269,7 +18290,7 @@ function FormSections(props) {
       {
         id: sectionKey,
         ref,
-        ...(0, import_runtime67.trussProps)({
+        ...(0, import_runtime68.trussProps)({
           display: "dg",
           gridTemplateColumns: "gtc_50px_1fr",
           gridTemplateRows: "gtr_auto",
@@ -18300,7 +18321,7 @@ function LeftNav(props) {
     section
   }) => !!section.title), [sectionsWithRefs]);
   const activeSection = useActiveSection(sectionWithTitles);
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("aside", { ...(0, import_runtime67.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("aside", { ...(0, import_runtime68.trussProps)({
     gridRow: "gr_2",
     gridColumn: "gc_1_2",
     position: "sticky",
@@ -18369,7 +18390,7 @@ function SectionNavLink(props) {
     hoverProps,
     isHovered
   } = useHover2({});
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime67.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("button", { ref: buttonRef, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime68.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -18444,7 +18465,7 @@ function useActiveSection(sectionsWithRefs) {
 }
 
 // src/components/Layout/FullBleed.tsx
-var import_runtime68 = require("@homebound/truss/runtime");
+var import_runtime69 = require("@homebound/truss/runtime");
 var import_react90 = require("react");
 var __maybeInc9 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -18470,7 +18491,7 @@ function FullBleed({
     // ...for some reason this keeps the Layout top padding better than using
     // react-aria's more generic mergeProps.
     {
-      ...(0, import_runtime68.mergeProps)(
+      ...(0, import_runtime69.mergeProps)(
         className,
         style,
         // ScrollableParent applies horizontal padding to its content column, so FullBleed
@@ -18556,7 +18577,7 @@ function isSelectionButtonMenuProps(props) {
 var import_react95 = require("react");
 
 // src/components/CountBadge.tsx
-var import_runtime69 = require("@homebound/truss/runtime");
+var import_runtime70 = require("@homebound/truss/runtime");
 var import_jsx_runtime125 = require("react/jsx-runtime");
 function CountBadge(props) {
   const {
@@ -18568,7 +18589,7 @@ function CountBadge(props) {
   } = props;
   const tid = useTestIds(otherProps, "countBadge");
   if (hideIfZero && count === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { ...tid, ...(0, import_runtime69.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { ...tid, ...(0, import_runtime70.trussProps)({
     ...{
       height: ["sq_var", {
         "--height": `${count > 100 ? 18 : 16}px`
@@ -18969,7 +18990,7 @@ function OpenModal(props) {
 }
 
 // src/components/Filters/FilterModal.tsx
-var import_runtime70 = require("@homebound/truss/runtime");
+var import_runtime71 = require("@homebound/truss/runtime");
 var import_jsx_runtime135 = require("react/jsx-runtime");
 function FilterModal(props) {
   const {
@@ -19006,7 +19027,7 @@ function ModalFilterItem({
   label,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { ...(0, import_runtime70.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { ...(0, import_runtime71.trussProps)({
     marginBottom: "mb4",
     ...!label ? {
       borderTopStyle: "bts_solid",
@@ -19015,7 +19036,7 @@ function ModalFilterItem({
     } : {}
   }), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("h2", { className: "fw4 fz_16px lh_24px mb2", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { ...(0, import_runtime70.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { ...(0, import_runtime71.trussProps)({
       ...!label ? {
         paddingTop: "pt3"
       } : {}
@@ -19025,7 +19046,7 @@ function ModalFilterItem({
 
 // src/components/Filters/Filters.tsx
 var import_react94 = require("react");
-var import_runtime71 = require("@homebound/truss/runtime");
+var import_runtime72 = require("@homebound/truss/runtime");
 var import_jsx_runtime136 = require("react/jsx-runtime");
 function Filters(props) {
   const {
@@ -19049,7 +19070,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_runtime136.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime136.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_runtime136.jsxs)("div", { ...(0, import_runtime71.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { ...(0, import_runtime72.trussProps)({
     ...vertical ? {
       display: "df",
       flexDirection: "fdc",
@@ -19300,7 +19321,7 @@ function EditColumnsButton(props) {
 }
 
 // src/components/Table/TableActions.tsx
-var import_runtime72 = require("@homebound/truss/runtime");
+var import_runtime73 = require("@homebound/truss/runtime");
 var import_jsx_runtime141 = require("react/jsx-runtime");
 function TableActions(props) {
   const {
@@ -19308,7 +19329,7 @@ function TableActions(props) {
     children,
     right
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { ...(0, import_runtime72.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { ...(0, import_runtime73.trussProps)({
     ...{
       display: "df",
       gap: "gap1",
@@ -19330,7 +19351,7 @@ var import_use_query_params3 = require("use-query-params");
 // src/components/Layout/ScrollableContent.tsx
 var import_react97 = require("react");
 var import_react_dom4 = require("react-dom");
-var import_runtime73 = require("@homebound/truss/runtime");
+var import_runtime74 = require("@homebound/truss/runtime");
 var import_jsx_runtime142 = require("react/jsx-runtime");
 var __maybeInc10 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -19356,7 +19377,7 @@ function ScrollableContent(props) {
     return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_jsx_runtime142.Fragment, { children });
   }
   const showBottomSpacer = !omitBottomPadding && !virtualized;
-  return (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { ...(0, import_runtime73.trussProps)({
+  return (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { ...(0, import_runtime74.trussProps)({
     ...{
       height: "h100",
       paddingRight: ["pr_var", {
@@ -19384,7 +19405,7 @@ function ScrollableContent(props) {
 var import_react98 = require("react");
 
 // src/components/LoadingSkeleton.tsx
-var import_runtime74 = require("@homebound/truss/runtime");
+var import_runtime75 = require("@homebound/truss/runtime");
 var import_jsx_runtime143 = require("react/jsx-runtime");
 function LoadingSkeleton({
   rows = 1,
@@ -19398,7 +19419,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_runtime74.trussProps)({
+    return cellArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { ...(0, import_runtime75.trussProps)({
       borderRadius: "br4",
       animation: "animation_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite",
       flexGrow: ["flexGrow_var", {
@@ -19410,7 +19431,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_runtime74.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_runtime75.trussProps)({
     display: "df",
     gap: "gap1",
     marginBottom: "mb1",
@@ -19451,7 +19472,7 @@ function LoadingTable(props) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-var import_runtime75 = require("@homebound/truss/runtime");
+var import_runtime76 = require("@homebound/truss/runtime");
 var import_jsx_runtime145 = require("react/jsx-runtime");
 function isGridTableProps(props) {
   return "rows" in props;
@@ -19585,7 +19606,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_runtime75.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(FullBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)("header", { ...(0, import_runtime76.trussProps)({
     ...{
       paddingTop: "pt3",
       paddingBottom: "pb3",
@@ -19683,7 +19704,7 @@ function useRightPaneContext() {
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 var import_framer_motion3 = require("framer-motion");
 var import_react101 = require("react");
-var import_runtime76 = require("@homebound/truss/runtime");
+var import_runtime77 = require("@homebound/truss/runtime");
 var import_jsx_runtime148 = require("react/jsx-runtime");
 var __maybeInc11 = (inc) => {
   return typeof inc === "string" ? inc : `${inc * 8}px`;
@@ -19703,7 +19724,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_runtime76.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { ...(0, import_runtime77.trussProps)({
       ...{
         width: ["w_var", {
           "--width": __maybeInc11(`calc(100% - ${paneWidth + 24}px)`)
@@ -19728,7 +19749,7 @@ function RightPaneLayout(props) {
         } : {}
       }
     }), children }),
-    /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { ...(0, import_runtime76.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { ...(0, import_runtime77.trussProps)({
       position: "relative",
       ...!!defaultPaneContent ? {
         width: ["w_var", {
@@ -19736,7 +19757,7 @@ function RightPaneLayout(props) {
         }]
       } : {}
     }), children: [
-      defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { ...(0, import_runtime76.trussProps)({
+      defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { ...(0, import_runtime77.trussProps)({
         height: "h100",
         width: ["w_var", {
           "--width": `${paneWidth}px`
@@ -19754,7 +19775,7 @@ function RightPaneLayout(props) {
         {
           layout: "position",
           "data-testid": "rightPaneContent",
-          ...(0, import_runtime76.trussProps)({
+          ...(0, import_runtime77.trussProps)({
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": paneBgColor
             }],
@@ -19900,7 +19921,7 @@ function ButtonDatePicker(props) {
 // src/components/ButtonGroup.tsx
 var import_react104 = require("react");
 var import_react_aria48 = require("react-aria");
-var import_runtime77 = require("@homebound/truss/runtime");
+var import_runtime78 = 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")
@@ -19914,7 +19935,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_runtime77.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { ...tid, ...(0, import_runtime78.trussProps)({
       ...{
         display: "df",
         lineHeight: "lh_0"
@@ -19960,10 +19981,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_runtime77.trussProps)(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
+  return /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { ...(0, import_runtime78.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_runtime77.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime78.trussProps)({
       ...{
         fontWeight: "fw6",
         fontSize: "fz_14px",
@@ -20070,7 +20091,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_runtime78 = require("@homebound/truss/runtime");
+var import_runtime79 = require("@homebound/truss/runtime");
 var import_jsx_runtime152 = require("react/jsx-runtime");
 function Tag(props) {
   const {
@@ -20094,7 +20115,7 @@ function Tag(props) {
   });
   return maybeTooltip({
     title: !preventTooltip && showTooltip ? text : void 0,
-    children: /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("span", { ...tid, ...(0, import_runtime78.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("span", { ...tid, ...(0, import_runtime79.trussProps)({
       ...{
         display: "dif",
         fontWeight: "fw6",
@@ -20144,7 +20165,7 @@ function getStyles(type) {
 }
 
 // src/components/Card.tsx
-var import_runtime79 = require("@homebound/truss/runtime");
+var import_runtime80 = require("@homebound/truss/runtime");
 var import_jsx_runtime153 = require("react/jsx-runtime");
 function Card(props) {
   const {
@@ -20175,8 +20196,8 @@ function Card(props) {
     ...isHovered && cardHoverStyles,
     ...isDisabled && disabledStyles3
   }), [isDisabled, isHovered, bordered, type, isList]);
-  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)({
+  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)({
       ...{
         height: ["h_var", {
           "--height": `${imgHeight}px`
@@ -20193,14 +20214,14 @@ function Card(props) {
         filter: "filter_brightness_1"
       },
       ...isHovered && !isList && imageHoverStyles
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("img", { ...(0, import_runtime79.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("img", { ...(0, import_runtime80.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_runtime79.trussProps)({
+    isHovered && buttonMenuItems && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { ...(0, import_runtime80.trussProps)({
       position: "absolute",
       right: "right1",
       top: "top1",
@@ -20216,7 +20237,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_runtime79.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { ...(0, import_runtime80.trussProps)({
           fontWeight: "fw6",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -20274,10 +20295,10 @@ var imageHoverStyles = {
 };
 
 // src/components/Copy.tsx
-var import_runtime80 = require("@homebound/truss/runtime");
+var import_runtime81 = 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_runtime80.mergeProps)("beam-copy", void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { ...(0, import_runtime81.mergeProps)("beam-copy", void 0, {
     ...{
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -20306,7 +20327,7 @@ function useDnDGridContext() {
 }
 
 // src/components/DnDGrid/DnDGrid.tsx
-var import_runtime81 = require("@homebound/truss/runtime");
+var import_runtime82 = require("@homebound/truss/runtime");
 var import_jsx_runtime155 = require("react/jsx-runtime");
 function DnDGrid(props) {
   const {
@@ -20487,7 +20508,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_runtime81.trussProps)({
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { ref: gridEl, ...(0, import_runtime82.trussProps)({
     ...{
       containerType: "ctis",
       display: "dg"
@@ -20500,7 +20521,7 @@ var gridCloneKey = "dndgrid-clone";
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
 var import_react_aria50 = require("react-aria");
-var import_runtime82 = require("@homebound/truss/runtime");
+var import_runtime83 = require("@homebound/truss/runtime");
 var import_jsx_runtime156 = require("react/jsx-runtime");
 function DnDGridItemHandle(props) {
   const {
@@ -20530,7 +20551,7 @@ function DnDGridItemHandle(props) {
     borderRadius: "br4",
     borderWidth: "bw1"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("button", { ...(0, import_runtime82.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("button", { ...(0, import_runtime83.trussProps)({
     ...compact ? iconButtonCompact2 : iconButtonNormal2,
     ...{
       cursor: "cursor_grab",
@@ -20592,7 +20613,7 @@ var gridItemDataAttribute = "data-grid-item-span";
 var ResponsiveGridContext = (0, import_react110.createContext)(void 0);
 
 // src/components/Grid/ResponsiveGrid.tsx
-var import_runtime83 = require("@homebound/truss/runtime");
+var import_runtime84 = require("@homebound/truss/runtime");
 var import_jsx_runtime157 = require("react/jsx-runtime");
 function ResponsiveGrid(props) {
   const {
@@ -20613,12 +20634,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_runtime83.trussProps)(gridStyles), children }) });
+  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 }) });
 }
 
 // src/components/Grid/ResponsiveGridItem.tsx
 var import_react_aria51 = require("react-aria");
-var import_runtime84 = require("@homebound/truss/runtime");
+var import_runtime85 = require("@homebound/truss/runtime");
 var import_jsx_runtime158 = require("react/jsx-runtime");
 function ResponsiveGridItem(props) {
   const {
@@ -20631,7 +20652,7 @@ function ResponsiveGridItem(props) {
   } = useResponsiveGridItem({
     colSpan
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { ...(0, import_react_aria51.mergeProps)(gridItemProps, (0, import_runtime84.trussProps)(gridItemStyles)), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { ...(0, import_react_aria51.mergeProps)(gridItemProps, (0, import_runtime85.trussProps)(gridItemStyles)), children });
 }
 
 // src/components/Grid/useResponsiveGrid.ts
@@ -20783,7 +20804,7 @@ function HbSpinnerProvider({
 // src/components/MaxLines.tsx
 var import_utils126 = require("@react-aria/utils");
 var import_react115 = require("react");
-var import_runtime85 = require("@homebound/truss/runtime");
+var import_runtime86 = require("@homebound/truss/runtime");
 var import_jsx_runtime160 = require("react/jsx-runtime");
 function MaxLines({
   maxLines,
@@ -20808,7 +20829,7 @@ function MaxLines({
     onResize
   });
   return /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ref: elRef, ...(0, import_runtime85.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { ref: elRef, ...(0, import_runtime86.trussProps)({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
           "--WebkitLineClamp": maxLines
@@ -20826,7 +20847,7 @@ function MaxLines({
 // src/components/ScrollShadows.tsx
 var import_utils127 = require("@react-aria/utils");
 var import_react116 = require("react");
-var import_runtime86 = require("@homebound/truss/runtime");
+var import_runtime87 = require("@homebound/truss/runtime");
 var import_jsx_runtime161 = require("react/jsx-runtime");
 function ScrollShadows(props) {
   const {
@@ -20915,7 +20936,7 @@ function ScrollShadows(props) {
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { ...(0, import_runtime86.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { ...(0, import_runtime87.trussProps)({
     display: "df",
     flexDirection: ["fd_var", {
       "--flexDirection": !horizontal ? "column" : "row"
@@ -20931,7 +20952,7 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime86.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime87.trussProps)({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -20939,7 +20960,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime86.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime87.trussProps)({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -20947,7 +20968,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime86.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime87.trussProps)({
       ...xss,
       ...{
         overflow: "oa",
@@ -21020,7 +21041,7 @@ var snackbarId = 1;
 // src/components/Stepper.tsx
 var import_react118 = require("react");
 var import_react_aria52 = require("react-aria");
-var import_runtime87 = require("@homebound/truss/runtime");
+var import_runtime88 = require("@homebound/truss/runtime");
 var import_jsx_runtime162 = require("react/jsx-runtime");
 var import_react119 = require("react");
 var __maybeInc13 = (inc) => {
@@ -21041,7 +21062,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_runtime87.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("ol", { ...(0, import_runtime88.trussProps)({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -21051,7 +21072,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ (0, import_react119.createElement)("li", { ...(0, import_runtime87.trussProps)({
+      return /* @__PURE__ */ (0, import_react119.createElement)("li", { ...(0, import_runtime88.trussProps)({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -21063,7 +21084,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_runtime87.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { ...(0, import_runtime88.trussProps)({
       marginTop: "mt1",
       backgroundColor: "bgGray300",
       height: "h_4px",
@@ -21074,7 +21095,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_runtime87.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { ...(0, import_runtime88.trussProps)({
       backgroundColor: "bgBlue600",
       transition: "transition_width_200ms",
       height: "h100",
@@ -21115,7 +21136,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_runtime87.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime88.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -21183,7 +21204,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_runtime87.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_runtime88.trussProps)({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -21198,7 +21219,7 @@ function StepIcon({
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 var import_react_dom5 = require("react-dom");
-var import_runtime88 = require("@homebound/truss/runtime");
+var import_runtime89 = require("@homebound/truss/runtime");
 var import_jsx_runtime163 = require("react/jsx-runtime");
 function SuperDrawerHeader(props) {
   const {
@@ -21224,7 +21245,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_runtime88.trussProps)({
+    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { ...(0, import_runtime89.trussProps)({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
@@ -21404,7 +21425,7 @@ function canClose(canCloseCheck) {
 }
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
-var import_runtime89 = require("@homebound/truss/runtime");
+var import_runtime90 = require("@homebound/truss/runtime");
 var import_jsx_runtime166 = require("react/jsx-runtime");
 var SuperDrawerContent = ({
   children,
@@ -21453,7 +21474,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_framer_motion4.motion.div, { ...(0, import_runtime89.mergeProps)(void 0, {
+      return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_framer_motion4.motion.div, { ...(0, import_runtime90.mergeProps)(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -21494,7 +21515,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_runtime90 = require("@homebound/truss/runtime");
+var import_runtime91 = require("@homebound/truss/runtime");
 var import_jsx_runtime167 = require("react/jsx-runtime");
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -21527,7 +21548,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_runtime90.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_runtime91.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) {
@@ -21566,7 +21587,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { ...(0, import_runtime90.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { ...(0, import_runtime91.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -21630,7 +21651,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...(0, import_runtime90.trussProps)({
+    ...(0, import_runtime91.trussProps)({
       ...baseStyles5,
       ...active && activeStyles4,
       ...isDisabled && disabledStyles4,
@@ -21872,6 +21893,7 @@ function useToast() {
   RightPaneProvider,
   RightSidebar,
   Row,
+  RuntimeStyle,
   ScrollShadows,
   ScrollableContent,
   ScrollableParent,