@homebound/beam 3.15.0 → 3.16.0

package/dist/index.cjs

@@ -5766,7 +5766,7 @@ function IconButton(props) {
     openInNew,
     active = false,
     compact = false,
-    circle = false,
+    variant = "default",
     download = false,
     forceFocusStyles = false,
     label,
@@ -5796,20 +5796,22 @@ function IconButton(props) {
     isHovered
   } = (0, import_react_aria2.useHover)(ariaProps);
   const testIds = useTestIds(props, icon);
+  const isCircle = variant === "circle";
+  const isOutline = variant === "outline";
   const styles = (0, import_react10.useMemo)(() => ({
     ...iconButtonStylesReset,
-    ...circle ? iconButtonCircle : compact ? iconButtonCompact : iconButtonNormal,
-    ...isHovered && (circle ? iconButtonCircleStylesHover : iconButtonTokenHover),
-    ...isFocusVisible || forceFocusStyles ? circle ? iconButtonCircleStylesFocus : iconButtonStylesFocus : {},
-    ...active && (circle ? activeStylesCircle : iconButtonTokenHover),
+    ...isCircle ? iconButtonCircle : isOutline ? iconButtonOutline : compact ? iconButtonCompact : iconButtonNormal,
+    ...isHovered && (isCircle || isOutline ? iconButtonCircleStylesHover : iconButtonTokenHover),
+    ...isFocusVisible || forceFocusStyles ? isCircle ? iconButtonCircleStylesFocus : iconButtonStylesFocus : {},
+    ...active && (isCircle || isOutline ? activeStylesCircle : iconButtonTokenHover),
     ...isDisabled && iconButtonStylesDisabled,
     ...bgColor && {
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": (0, import_runtime9.maybeCssVar)(bgColor)
       }]
     }
-  }), [isHovered, isFocusVisible, isDisabled, compact, circle, active, bgColor, forceFocusStyles]);
-  const iconColor = circle ? circleIconColor : defaultIconColor;
+  }), [isHovered, isFocusVisible, isDisabled, compact, isCircle, isOutline, active, bgColor, forceFocusStyles]);
+  const iconColor = isCircle ? circleIconColor : defaultIconColor;
   const buttonAttrs = {
     ...testIds,
     ...buttonProps,
@@ -5819,7 +5821,7 @@ function IconButton(props) {
     ...(0, import_runtime9.mergeProps)(typeof onPress === "string" ? navLink : void 0, void 0, styles),
     "aria-label": label
   };
-  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon, color: color || (isDisabled ? "--b-text-disabled" /* TextDisabled */ : circle && (isHovered || active || isFocusVisible) ? defaultIconColor : iconColor), bgColor, inc: compact ? 2 : circle ? 2.5 : inc });
+  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon, color: color || (isDisabled ? "--b-text-disabled" /* TextDisabled */ : isCircle && (isHovered || active || isFocusVisible) ? defaultIconColor : iconColor), bgColor, inc: compact ? 2 : isCircle ? 2.5 : inc });
   return maybeTooltip({
     title: resolveTooltip(disabled ?? (preventTooltip ? void 0 : label), tooltip),
     placement: "top",
@@ -5862,6 +5864,17 @@ var iconButtonCircle = {
   justifyContent: "jcc",
   alignItems: "aic"
 };
+var iconButtonOutline = {
+  borderRadius: "br8",
+  width: "w_48px",
+  height: "h_40px",
+  borderColor: "bcGray300",
+  borderStyle: "bss",
+  borderWidth: "bw1",
+  display: "df",
+  justifyContent: "jcc",
+  alignItems: "aic"
+};
 var iconButtonTokenHover = {
   backgroundColor: ["bgColor_var", {
     "--backgroundColor": "var(--b-neutral-fill-hover-strong)"
@@ -13510,6 +13523,7 @@ function RadioGroupField(props) {
     onChange,
     options,
     disabled = false,
+    required,
     errorMsg,
     helperText,
     layout = "vertical",
@@ -13524,12 +13538,14 @@ function RadioGroupField(props) {
     isReadOnly: false
   });
   const tid = useTestIds(props, defaultTestId(label));
+  const labelSuffix = useLabelSuffix(required, false);
   const {
     labelProps,
     radioGroupProps
   } = (0, import_react_aria34.useRadioGroup)({
     label,
-    isDisabled: disabled
+    isDisabled: disabled,
+    isRequired: required
   }, state);
   return (
     // default styling to position `<Label />` above.
@@ -13544,7 +13560,7 @@ function RadioGroupField(props) {
         justifyContent: "jcsb"
       } : {}
     }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Label, { label, ...labelProps, ...tid.label, hidden: labelStyle === "hidden" }),
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: labelStyle === "hidden" }),
       /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { ...radioGroupProps, children: [
         /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { ...(0, import_runtime47.trussProps)({
           display: "df",
@@ -14870,17 +14886,26 @@ var ColumnStorage = class {
   }
   expandedIds;
   visibleIds;
+  // `loadExpanded`/`loadVisible` can be called multiple times (i.e. when `props.columns`
+  // change, which also changes the auto-derived storage key). Each call wires up a mobx
+  // autorun/reaction that writes to its key, so we must dispose the previous one. Otherwise
+  // a stale writer keeps firing against an old key and clobbers it with the current visible
+  // set, e.g. a conditional column's key gets overwritten while that column isn't rendered.
+  disposeExpanded;
+  disposeVisible;
   loadExpanded(persistCollapse) {
+    this.disposeExpanded?.();
     const key = `expandedColumn_${persistCollapse}`;
     this.expandedIds = loadArrayOrUndefined(key);
-    (0, import_mobx4.reaction)(
+    this.disposeExpanded = (0, import_mobx4.reaction)(
       () => this.states.expandedColumns.map((cs) => cs.column.id),
       (columnIds) => sessionStorage.setItem(key, JSON.stringify(columnIds))
     );
   }
   loadVisible(storageKey) {
+    this.disposeVisible?.();
     this.visibleIds = loadArrayOrUndefined(storageKey);
-    (0, import_mobx4.autorun)(() => {
+    this.disposeVisible = (0, import_mobx4.autorun)(() => {
       const columnIds = this.states.allVisibleColumns("web").map((cs) => cs.column.id);
       sessionStorage.setItem(storageKey, JSON.stringify(columnIds));
     });
@@ -17811,6 +17836,7 @@ function BoundRadioGroupField(props) {
     RadioGroupField,
     {
       label,
+      required: field.required,
       value: field.value || void 0,
       onChange: (value) => {
         onChange(value);
@@ -18619,7 +18645,7 @@ function RightSidebar({
           flexDirection: "fdc",
           alignItems: "aic"
         }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(IconButton, { bgColor: "rgba(255, 255, 255, 1)" /* White */, circle: true, onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(IconButton, { bgColor: "rgba(255, 255, 255, 1)" /* White */, variant: "circle", onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
           /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "absolute top_48px h_calc_100vh_168px w_1px bgGray300" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "df aic jcfe gap2 mb3", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) })
@@ -18638,7 +18664,7 @@ function IconButtonList({
   }) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     IconButton,
     {
-      circle: true,
+      variant: "circle",
       active: icon === selectedIcon,
       onClick: () => onIconClick(icon),
       icon,
@@ -19722,35 +19748,109 @@ function updateFilter(currentFilter, key, value) {
 var filterTestIdPrefix = "filter";
 
 // src/components/Filters/FilterDropdownMenu.tsx
+var import_use_debounce7 = require("use-debounce");
+var import_use_query_params3 = require("use-query-params");
+var import_runtime74 = require("@homebound/truss/runtime");
 var import_jsx_runtime140 = require("react/jsx-runtime");
 function FilterDropdownMenu(props) {
   const {
     filter,
     onChange,
     filterDefs,
-    groupBy
+    groupBy,
+    searchProps
   } = props;
   const testId = useTestIds(props, filterTestIdPrefix);
+  const {
+    sm
+  } = useBreakpoint();
   const [isOpen, setIsOpen] = (0, import_react98.useState)(false);
-  const activeFilterCount = (0, import_react98.useMemo)(() => getActiveFilterCount(filter), [filter]);
-  const filterImpls = (0, import_react98.useMemo)(() => buildFilterImpls(filterDefs), [filterDefs]);
+  const [searchIsOpen, setSearchIsOpen] = (0, import_react98.useState)(false);
+  const [{
+    search: initialValue
+  }, setQueryParams] = (0, import_use_query_params3.useQueryParams)({
+    search: import_use_query_params3.StringParam
+  });
+  const [searchValue, setSearchValue] = (0, import_react98.useState)(initialValue || "");
+  const [debouncedSearch] = (0, import_use_debounce7.useDebounce)(searchValue, 300);
+  (0, import_react98.useEffect)(() => {
+    if (searchProps) {
+      searchProps.onSearch(debouncedSearch);
+      setQueryParams({
+        search: debouncedSearch || void 0
+      }, "replaceIn");
+    }
+  }, [debouncedSearch, searchProps, setQueryParams]);
+  const hasSearch = !!searchProps;
+  const hasFilters = !!filterDefs && Object.keys(filterDefs ?? {}).length > 0;
+  const activeFilterCount = (0, import_react98.useMemo)(() => filter ? getActiveFilterCount(filter) : 0, [filter]);
+  const filterImpls = (0, import_react98.useMemo)(() => filterDefs ? buildFilterImpls(filterDefs) : {}, [filterDefs]);
   const renderFilters = () => {
+    if (!filter || !onChange) return null;
     const entries = safeEntries(filterImpls);
     const nonCheckbox = entries.filter(([_, f]) => !f.hideLabelInModal);
     const checkbox = entries.filter(([_, f]) => f.hideLabelInModal);
     return [...nonCheckbox, ...checkbox].map(([key, f]) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { children: f.render(filter[key], (value) => onChange(updateFilter(filter, key, value)), testId, false, false) }, key));
   };
+  const searchTextField = /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(TextField, { label: "Search", labelStyle: "hidden", value: searchValue, onChange: (v) => setSearchValue(v ?? ""), placeholder: "Search", clearable: true, startAdornment: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Icon, { icon: "search", color: "rgba(100, 100, 100, 1)" /* Gray700 */ }) });
   return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_jsx_runtime140.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { className: "df aic gap1", children: [
+    hasSearch && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { ...(0, import_runtime74.trussProps)({
+      width: "w_244px",
+      ...sm ? {
+        position: "absolute",
+        overflow: "oh",
+        clip: "cli_inset_50",
+        clipPath: "clp_none",
+        border: "bd_0",
+        height: "h_1px",
+        margin: "m_neg1px",
+        width: "w_1px",
+        padding: "p_0",
+        whiteSpace: "wsnw",
+        opacity: "o0"
+      } : {}
+    }), children: searchTextField }),
+    sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: "", "aria-label": "Search", icon: "search", onClick: () => setSearchIsOpen(!searchIsOpen), active: searchIsOpen, variant: "secondaryBlack", ...testId.searchButton }),
+    hasFilters && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: sm ? "" : "Filter", "aria-label": "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { className: "df aic gap1", children: [
       activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(CountBadge, { count: activeFilterCount }),
-      /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Icon, { icon: isOpen ? "chevronUp" : "chevronDown" })
+      /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Icon, { xss: {
+        ...sm ? {
+          position: "absolute",
+          overflow: "oh",
+          clip: "cli_inset_50",
+          clipPath: "clp_none",
+          border: "bd_0",
+          height: "h_1px",
+          margin: "m_neg1px",
+          width: "w_1px",
+          padding: "p_0",
+          whiteSpace: "wsnw",
+          opacity: "o0"
+        } : {}
+      }, icon: isOpen ? "chevronUp" : "chevronDown" })
     ] }), variant: "secondaryBlack", onClick: () => setIsOpen(!isOpen), active: isOpen, ...testId.button }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { className: "df aic fww gap1 w100", children: [
+    searchIsOpen && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { ...(0, import_runtime74.trussProps)({
+      width: "w100",
+      ...!sm ? {
+        position: "absolute",
+        overflow: "oh",
+        clip: "cli_inset_50",
+        clipPath: "clp_none",
+        border: "bd_0",
+        height: "h_1px",
+        margin: "m_neg1px",
+        width: "w_1px",
+        padding: "p_0",
+        whiteSpace: "wsnw",
+        opacity: "o0"
+      } : {}
+    }), children: searchTextField }),
+    hasFilters && isOpen && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { className: "df aic fww gap1 w100", children: [
       groupBy && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(SelectField, { label: "Group by", labelStyle: "inline", sizeToContent: true, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => g && groupBy.setValue(g) }),
       renderFilters(),
-      activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn })
+      activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange?.({}), ...testId.clearBtn })
     ] }),
-    !isOpen && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(FilterChips, { filter, filterImpls, onChange, onClear: () => onChange({}), testId })
+    hasFilters && !isOpen && filter && onChange && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(FilterChips, { filter, filterImpls, onChange, onClear: () => onChange({}), testId })
   ] });
 }
 function FilterChips({
@@ -19884,6 +19984,9 @@ function EditColumnsButton(props) {
     isDisabled: !!disabled
   }, state, buttonRef);
   const tid = useTestIds(props, isTextButton(trigger) ? labelOr(trigger, "editColumnsButton") : isNavLinkButton(trigger) ? defaultTestId(trigger.navLabel) : isIconButton(trigger) ? trigger.icon : trigger.name);
+  const {
+    sm
+  } = useBreakpoint();
   const options = (0, import_react99.useMemo)(() => columns.filter((column2) => column2.canHide).filter((column2) => {
     if (!column2.name || column2.name.length === 0 || !column2.id || column2.id.length === 0) {
       console.warn("Column is missing 'name' and/or 'id' property required by the Edit Columns button", column2);
@@ -19899,7 +20002,7 @@ function EditColumnsButton(props) {
     api.resetColumnWidths();
     api.setVisibleColumns(columns.filter((column2) => column2.canHide ? ids.includes(column2.id) : true).map((c) => c.id));
   }, [columns, api]);
-  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { className: "dg gtc_1fr_auto gap2 bgWhite pt2 pb2 pr2 pl2 maxw_326px h_bshHover", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, hideEndAdornment: sm, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { className: "dg gtc_1fr_auto gap2 bgWhite pt2 pb2 pr2 pl2 maxw_326px h_bshHover", children: [
     options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_react99.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis pr1", children: option.label }),
       /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
@@ -19909,7 +20012,7 @@ function EditColumnsButton(props) {
 }
 
 // src/components/Table/TableActions.tsx
-var import_runtime74 = require("@homebound/truss/runtime");
+var import_runtime75 = require("@homebound/truss/runtime");
 var import_jsx_runtime143 = require("react/jsx-runtime");
 function TableActions(props) {
   const {
@@ -19917,7 +20020,7 @@ function TableActions(props) {
     children,
     right
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { ...(0, import_runtime74.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { ...(0, import_runtime75.trussProps)({
     ...{
       display: "df",
       gap: "gap1",
@@ -19932,10 +20035,6 @@ function TableActions(props) {
   ] });
 }
 
-// src/components/Layout/GridTableLayout/GridTableLayout.tsx
-var import_use_debounce7 = require("use-debounce");
-var import_use_query_params3 = require("use-query-params");
-
 // src/components/Layout/layoutTypes.ts
 function isGridTableProps(props) {
   return "rows" in props;
@@ -19945,7 +20044,7 @@ function isGridTableProps(props) {
 var import_react100 = require("react");
 
 // src/components/LoadingSkeleton.tsx
-var import_runtime75 = require("@homebound/truss/runtime");
+var import_runtime76 = require("@homebound/truss/runtime");
 var import_jsx_runtime144 = require("react/jsx-runtime");
 function LoadingSkeleton({
   rows = 1,
@@ -19958,18 +20057,18 @@ function LoadingSkeleton({
   const rowHeight = sizeToPixels2[size];
   const rowCells = (rowNumber) => {
     const flexGrowForCell = randomizeWidths ? getRandomizedFlexBasisByRowIndex(rowNumber) : 1;
-    return cellArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { ...(0, import_runtime75.trussProps)({
+    return cellArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { ...(0, import_runtime76.trussProps)({
       borderRadius: "br4",
       animation: "animation_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite",
       flexGrow: ["flexGrow_var", {
-        "--flexGrow": (0, import_runtime75.maybeCssVar)(flexGrowForCell)
+        "--flexGrow": (0, import_runtime76.maybeCssVar)(flexGrowForCell)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-loader-fill)"
       }]
     }) }, `row-${rowNumber}-cell-${i}`));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { ...(0, import_runtime75.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { ...(0, import_runtime76.trussProps)({
     display: "df",
     gap: "gap1",
     marginBottom: "mb1",
@@ -20010,7 +20109,7 @@ function LoadingTable(props) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-var import_runtime76 = require("@homebound/truss/runtime");
+var import_runtime77 = require("@homebound/truss/runtime");
 var import_jsx_runtime146 = require("react/jsx-runtime");
 function GridTableLayoutComponent(props) {
   const {
@@ -20044,16 +20143,15 @@ function GridTableLayoutComponent(props) {
   }, [visibleColumnIds, layoutState]);
   const visibleColumnsStorageKey = layoutState?.persistedColumnsStorageKey;
   return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(import_jsx_runtime146.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Header2, { pageTitle, breadCrumb, primaryAction, secondaryAction, tertiaryAction, actionMenu }),
-    showTableActions && /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(TableActions, { right: hasHideableColumns && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(EditColumnsButton, { columns, api, tooltip: "Display columns", trigger: {
+    pageTitle && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Header2, { pageTitle, breadCrumb, primaryAction, secondaryAction, tertiaryAction, actionMenu }),
+    showTableActions && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(TableActions, { right: hasHideableColumns && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(EditColumnsButton, { columns, api, tooltip: "Display columns", trigger: {
       icon: "kanban",
       size: "md",
       label: "",
       variant: "secondaryBlack"
-    }, ...tid.editColumnsButton }), children: [
-      layoutState?.search && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(SearchBox, { onSearch: layoutState.setSearchString }),
-      layoutState?.filterDefs && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(_FilterDropdownMenu, { filterDefs: layoutState.filterDefs, filter: layoutState.filter, onChange: layoutState.setFilter, groupBy: layoutState.groupBy })
-    ] }),
+    }, ...tid.editColumnsButton }), children: layoutState && (layoutState.filterDefs || layoutState.search) && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(_FilterDropdownMenu, { filterDefs: layoutState.filterDefs, filter: layoutState.filter, onChange: layoutState.setFilter, groupBy: layoutState.groupBy, searchProps: layoutState.search ? {
+      onSearch: layoutState.setSearchString
+    } : void 0 }) }),
     /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(ScrollableContent, { virtualized: isVirtualized, children: [
       isGridTableProps(tableProps) ? /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(GridTable, { ...tableProps, api, filter: clientSearch, style: {
         allWhite: true
@@ -20141,7 +20239,7 @@ function Header2(props) {
     actionMenu
   } = props;
   const tids = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(FullBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("header", { ...(0, import_runtime76.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(FullBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("header", { ...(0, import_runtime77.trussProps)({
     ...{
       paddingTop: "pt3",
       paddingBottom: "pb3",
@@ -20169,24 +20267,6 @@ function Header2(props) {
     ] })
   ] }) });
 }
-function SearchBox({
-  onSearch
-}) {
-  const [{
-    search: initialValue
-  }, setQueryParams] = (0, import_use_query_params3.useQueryParams)({
-    search: import_use_query_params3.StringParam
-  });
-  const [value, setValue] = (0, import_react101.useState)(initialValue || "");
-  const [debouncedSearch] = (0, import_use_debounce7.useDebounce)(value, 300);
-  (0, import_react101.useEffect)(() => {
-    onSearch(debouncedSearch);
-    setQueryParams({
-      search: debouncedSearch || void 0
-    }, "replaceIn");
-  }, [debouncedSearch, onSearch, setQueryParams]);
-  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { className: "w_244px", children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(TextField, { label: "Search", labelStyle: "hidden", value, onChange: (v) => setValue(v ?? ""), placeholder: "Search", clearable: true, startAdornment: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Icon, { icon: "search", color: "rgba(100, 100, 100, 1)" /* Gray700 */ }) }) });
-}
 
 // src/components/Layout/PreventBrowserScroll.tsx
 var import_jsx_runtime147 = require("react/jsx-runtime");
@@ -20239,7 +20319,7 @@ function useRightPaneContext() {
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 var import_framer_motion3 = require("framer-motion");
 var import_react103 = require("react");
-var import_runtime77 = require("@homebound/truss/runtime");
+var import_runtime78 = require("@homebound/truss/runtime");
 var import_jsx_runtime149 = require("react/jsx-runtime");
 var __maybeInc11 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -20259,10 +20339,10 @@ function RightPaneLayout(props) {
   } = useRightPaneContext();
   (0, import_react103.useEffect)(() => closePane, [closePane]);
   return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "h100 df oxh", children: /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)(import_jsx_runtime149.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { ...(0, import_runtime77.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { ...(0, import_runtime78.trussProps)({
       ...{
         width: ["w_var", {
-          "--width": (0, import_runtime77.maybeCssVar)(__maybeInc11(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": (0, import_runtime78.maybeCssVar)(__maybeInc11(`calc(100% - ${paneWidth + 24}px)`))
         }],
         transition: "transition_width_2s_linear",
         height: "h100",
@@ -20278,13 +20358,13 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": (0, import_runtime77.maybeCssVar)(__maybeInc11(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": (0, import_runtime78.maybeCssVar)(__maybeInc11(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
       }
     }), children }),
-    /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { ...(0, import_runtime77.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { ...(0, import_runtime78.trussProps)({
       position: "relative",
       ...!!defaultPaneContent ? {
         width: ["w_var", {
@@ -20292,7 +20372,7 @@ function RightPaneLayout(props) {
         }]
       } : {}
     }), children: [
-      defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { ...(0, import_runtime77.trussProps)({
+      defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { ...(0, import_runtime78.trussProps)({
         height: "h100",
         width: ["w_var", {
           "--width": `${paneWidth}px`
@@ -20310,9 +20390,9 @@ function RightPaneLayout(props) {
         {
           layout: "position",
           "data-testid": "rightPaneContent",
-          ...(0, import_runtime77.trussProps)({
+          ...(0, import_runtime78.trussProps)({
             backgroundColor: ["bgColor_var", {
-              "--backgroundColor": (0, import_runtime77.maybeCssVar)(paneBgColor)
+              "--backgroundColor": (0, import_runtime78.maybeCssVar)(paneBgColor)
             }],
             height: "h100",
             width: ["w_var", {
@@ -20393,7 +20473,7 @@ function SidePanel(props) {
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-var import_runtime78 = require("@homebound/truss/runtime");
+var import_runtime79 = require("@homebound/truss/runtime");
 var import_jsx_runtime152 = require("react/jsx-runtime");
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
@@ -20435,14 +20515,14 @@ function TableReviewLayout(props) {
       bordered: true
     }, stickyHeader: true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { ...(0, import_runtime78.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { ...(0, import_runtime79.trussProps)({
     position: "fixed",
     top: "top0",
     bottom: "bottom0",
     left: "left0",
     right: "right0",
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime78.maybeCssVar)(zIndices.pageOverlay)
+      "--zIndex": (0, import_runtime79.maybeCssVar)(zIndices.pageOverlay)
     }],
     backgroundColor: "bgWhite",
     display: "df",
@@ -20460,7 +20540,7 @@ function TableReviewLayout(props) {
       /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "fw4 fz_14px lh_20px gray700 mt2", ...tid.description, children: description })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "fg1 df mh0", ...tid.content, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { ...(0, import_runtime78.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { ...(0, import_runtime79.trussProps)({
         ...{
           flexGrow: "fg1",
           overflowY: "oya",
@@ -20483,7 +20563,7 @@ function TableReviewLayout(props) {
         ease: "linear",
         duration: 0.2
       }, className: "df fdc fs0 relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { ...(0, import_runtime78.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { ...(0, import_runtime79.trussProps)({
           position: "absolute",
           top: ["top_var", {
             "--top": `${-32}px`
@@ -20496,7 +20576,7 @@ function TableReviewLayout(props) {
           }],
           zIndex: "z1"
         }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(IconButton, { bgColor: "rgba(255, 255, 255, 1)" /* White */, circle: true, icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
+          /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(IconButton, { bgColor: "rgba(255, 255, 255, 1)" /* White */, variant: "circle", icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
           /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "w_1px bgGray300 vh100" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "fg1 oh mh0", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(SidePanel, { ...panelContent }) })
@@ -20606,7 +20686,7 @@ function ButtonDatePicker(props) {
 // src/components/ButtonGroup.tsx
 var import_react107 = require("react");
 var import_react_aria48 = require("react-aria");
-var import_runtime79 = require("@homebound/truss/runtime");
+var import_runtime80 = require("@homebound/truss/runtime");
 var import_jsx_runtime155 = (
   // Disable the button if the ButtonGroup is disabled or if the current button is disabled.
   require("react/jsx-runtime")
@@ -20620,7 +20700,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_runtime155.jsx)("div", { ...tid, ...(0, import_runtime79.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { ...tid, ...(0, import_runtime80.trussProps)({
       ...{
         display: "df",
         lineHeight: "lh_0"
@@ -20666,10 +20746,10 @@ function GroupButton(props) {
     isHovered
   } = (0, import_react_aria48.useHover)(ariaProps);
   const tid = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { ...(0, import_runtime79.trussProps)(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
+  return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { ...(0, import_runtime80.trussProps)(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
     title: resolveTooltip(disabled, tooltip),
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime79.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime80.trussProps)({
       ...{
         fontWeight: "fw6",
         fontSize: "fz_14px",
@@ -20776,7 +20856,7 @@ var import_react_aria49 = require("react-aria");
 // src/components/Tag.tsx
 var import_utils121 = require("@react-aria/utils");
 var import_react108 = require("react");
-var import_runtime80 = require("@homebound/truss/runtime");
+var import_runtime81 = require("@homebound/truss/runtime");
 var import_jsx_runtime156 = require("react/jsx-runtime");
 function Tag(props) {
   const {
@@ -20800,7 +20880,7 @@ function Tag(props) {
   });
   return maybeTooltip({
     title: !preventTooltip && showTooltip ? text : void 0,
-    children: /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("span", { ...tid, ...(0, import_runtime80.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("span", { ...tid, ...(0, import_runtime81.trussProps)({
       ...{
         display: "dif",
         fontWeight: "fw6",
@@ -20850,7 +20930,7 @@ function getStyles(type) {
 }
 
 // src/components/Card.tsx
-var import_runtime81 = require("@homebound/truss/runtime");
+var import_runtime82 = require("@homebound/truss/runtime");
 var import_jsx_runtime157 = require("react/jsx-runtime");
 function Card(props) {
   const {
@@ -20881,8 +20961,8 @@ function Card(props) {
     ...isHovered && cardHoverStyles,
     ...isDisabled && disabledStyles3
   }), [isDisabled, isHovered, bordered, type, isList]);
-  return /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { ...(0, import_runtime81.trussProps)(styles), ...hoverProps, ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { ...(0, import_runtime81.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { ...(0, import_runtime82.trussProps)(styles), ...hoverProps, ...tid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { ...(0, import_runtime82.trussProps)({
       ...{
         height: ["h_var", {
           "--height": `${imgHeight}px`
@@ -20899,14 +20979,14 @@ function Card(props) {
         filter: "filter_brightness_1"
       },
       ...isHovered && !isList && imageHoverStyles
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("img", { ...(0, import_runtime81.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("img", { ...(0, import_runtime82.trussProps)({
       width: "w100",
       height: "h100",
       objectFit: ["objectFit_var", {
-        "--objectFit": (0, import_runtime81.maybeCssVar)(imageFit)
+        "--objectFit": (0, import_runtime82.maybeCssVar)(imageFit)
       }]
     }), src: imgSrc, alt: title, ...tid.img }) }),
-    isHovered && buttonMenuItems && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { ...(0, import_runtime81.trussProps)({
+    isHovered && buttonMenuItems && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { ...(0, import_runtime82.trussProps)({
       position: "absolute",
       right: "right1",
       top: "top1",
@@ -20922,7 +21002,7 @@ function Card(props) {
     /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { className: "df fdc aifs gap1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { className: "fw6 fz_12px lh_16px gray700", ...tid.subtitle, children: subtitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { ...(0, import_runtime81.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { ...(0, import_runtime82.trussProps)({
           fontWeight: "fw6",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -20980,10 +21060,10 @@ var imageHoverStyles = {
 };
 
 // src/components/Copy.tsx
-var import_runtime82 = require("@homebound/truss/runtime");
+var import_runtime83 = require("@homebound/truss/runtime");
 var import_jsx_runtime158 = require("react/jsx-runtime");
 function Copy(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { ...(0, import_runtime82.mergeProps)("beam-copy", void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { ...(0, import_runtime83.mergeProps)("beam-copy", void 0, {
     ...{
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -21012,7 +21092,7 @@ function useDnDGridContext() {
 }
 
 // src/components/DnDGrid/DnDGrid.tsx
-var import_runtime83 = require("@homebound/truss/runtime");
+var import_runtime84 = require("@homebound/truss/runtime");
 var import_jsx_runtime159 = require("react/jsx-runtime");
 function DnDGrid(props) {
   const {
@@ -21195,7 +21275,7 @@ function DnDGrid(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(DnDGridContext.Provider, { value: {
     dragEl,
     onDragHandleKeyDown
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { ref: gridEl, ...(0, import_runtime83.trussProps)({
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { ref: gridEl, ...(0, import_runtime84.trussProps)({
     ...{
       containerType: "ctis",
       display: "dg"
@@ -21208,7 +21288,7 @@ var gridCloneKey = "dndgrid-clone";
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
 var import_react_aria50 = require("react-aria");
-var import_runtime84 = require("@homebound/truss/runtime");
+var import_runtime85 = require("@homebound/truss/runtime");
 var import_jsx_runtime160 = require("react/jsx-runtime");
 function DnDGridItemHandle(props) {
   const {
@@ -21238,7 +21318,7 @@ function DnDGridItemHandle(props) {
     borderRadius: "br4",
     borderWidth: "bw1"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("button", { ...(0, import_runtime84.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("button", { ...(0, import_runtime85.trussProps)({
     ...compact ? iconButtonCompact2 : iconButtonNormal2,
     ...{
       cursor: "cursor_grab",
@@ -21300,7 +21380,7 @@ var gridItemDataAttribute = "data-grid-item-span";
 var ResponsiveGridContext = (0, import_react113.createContext)(void 0);
 
 // src/components/Grid/ResponsiveGrid.tsx
-var import_runtime85 = require("@homebound/truss/runtime");
+var import_runtime86 = require("@homebound/truss/runtime");
 var import_jsx_runtime161 = require("react/jsx-runtime");
 function ResponsiveGrid(props) {
   const {
@@ -21321,12 +21401,12 @@ function ResponsiveGrid(props) {
     gap,
     columns
   }), [minColumnWidth, gap, columns]);
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime85.trussProps)(gridStyles), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { ...(0, import_runtime86.trussProps)(gridStyles), children }) });
 }
 
 // src/components/Grid/ResponsiveGridItem.tsx
 var import_react_aria51 = require("react-aria");
-var import_runtime86 = require("@homebound/truss/runtime");
+var import_runtime87 = require("@homebound/truss/runtime");
 var import_jsx_runtime162 = require("react/jsx-runtime");
 function ResponsiveGridItem(props) {
   const {
@@ -21339,12 +21419,12 @@ function ResponsiveGridItem(props) {
   } = useResponsiveGridItem({
     colSpan
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { ...(0, import_react_aria51.mergeProps)(gridItemProps, (0, import_runtime86.trussProps)(gridItemStyles)), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { ...(0, import_react_aria51.mergeProps)(gridItemProps, (0, import_runtime87.trussProps)(gridItemStyles)), children });
 }
 
 // src/components/Grid/useResponsiveGrid.ts
 var import_react115 = require("react");
-var import_runtime87 = require("@homebound/truss/runtime");
+var import_runtime88 = require("@homebound/truss/runtime");
 var __maybeInc12 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -21363,11 +21443,11 @@ function useResponsiveGrid(props) {
     return {
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": (0, import_runtime87.maybeCssVar)(gridTemplateColumns)
+        "--gridTemplateColumns": (0, import_runtime88.maybeCssVar)(gridTemplateColumns)
       }],
       containerType: "ctis",
       gap: ["gap_var", {
-        "--gap": (0, import_runtime87.maybeCssVar)(__maybeInc12(gridGap))
+        "--gap": (0, import_runtime88.maybeCssVar)(__maybeInc12(gridGap))
       }]
     };
   }, [minColumnWidth, gap, columns]);
@@ -21490,7 +21570,7 @@ function HbSpinnerProvider({
 }
 
 // src/components/HomeboundLogo.tsx
-var import_runtime88 = require("@homebound/truss/runtime");
+var import_runtime89 = require("@homebound/truss/runtime");
 var import_jsx_runtime164 = require("react/jsx-runtime");
 var __maybeInc13 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -21501,15 +21581,15 @@ function HomeboundLogo(props) {
     width: width2 = "auto",
     height = "auto"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime88.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime89.trussProps)({
     fill: ["fill_var", {
-      "--fill": (0, import_runtime88.maybeCssVar)(fill)
+      "--fill": (0, import_runtime89.maybeCssVar)(fill)
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime88.maybeCssVar)(__maybeInc13(width2))
+      "--width": (0, import_runtime89.maybeCssVar)(__maybeInc13(width2))
     }],
     height: ["h_var", {
-      "--height": (0, import_runtime88.maybeCssVar)(__maybeInc13(height))
+      "--height": (0, import_runtime89.maybeCssVar)(__maybeInc13(height))
     }]
   }), children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("path", { d: "M158.1,97.6H0.2L0,39.7L76.8,0l68,38.7l-3.1,5.3l-65-37L6.2,43.4l0.2,48h151.7V97.6z" }) });
 }
@@ -21517,7 +21597,7 @@ function HomeboundLogo(props) {
 // src/components/MaxLines.tsx
 var import_utils129 = require("@react-aria/utils");
 var import_react118 = require("react");
-var import_runtime89 = require("@homebound/truss/runtime");
+var import_runtime90 = require("@homebound/truss/runtime");
 var import_jsx_runtime165 = require("react/jsx-runtime");
 function MaxLines({
   maxLines,
@@ -21542,10 +21622,10 @@ function MaxLines({
     onResize
   });
   return /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("div", { ref: elRef, ...(0, import_runtime89.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("div", { ref: elRef, ...(0, import_runtime90.trussProps)({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": (0, import_runtime89.maybeCssVar)(maxLines)
+          "--WebkitLineClamp": (0, import_runtime90.maybeCssVar)(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -21568,7 +21648,7 @@ var import_react121 = require("react");
 // src/components/AppNav/AppNavGroupTrigger.tsx
 var import_react119 = require("react");
 var import_react_aria52 = require("react-aria");
-var import_runtime90 = require("@homebound/truss/runtime");
+var import_runtime91 = require("@homebound/truss/runtime");
 var import_jsx_runtime166 = require("react/jsx-runtime");
 function AppNavGroupTrigger(props) {
   const {
@@ -21604,7 +21684,7 @@ function AppNavGroupTrigger(props) {
     ref,
     "aria-expanded": expanded,
     "aria-controls": navGroupId,
-    ...(0, import_runtime90.mergeProps)(navLink, void 0, {
+    ...(0, import_runtime91.mergeProps)(navLink, void 0, {
       ...baseStyles5,
       ...isFocusVisible && focusRingStyles2,
       ...isHovered && hoverStyles4,
@@ -21612,7 +21692,7 @@ function AppNavGroupTrigger(props) {
     })
   }), children: [
     label,
-    /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { ...(0, import_runtime90.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { ...(0, import_runtime91.trussProps)({
       ...{
         display: "df",
         alignItems: "aic",
@@ -21765,7 +21845,7 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-var import_runtime91 = require("@homebound/truss/runtime");
+var import_runtime92 = require("@homebound/truss/runtime");
 var import_jsx_runtime167 = require("react/jsx-runtime");
 var __maybeInc14 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -21810,11 +21890,11 @@ function AppNavGroupDisclosure(props) {
   });
   return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { className: "df fdc", ...tid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, onClick: onToggle, ...tid }),
-    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...(0, import_runtime91.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...(0, import_runtime92.trussProps)({
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
-        "--height": (0, import_runtime91.maybeCssVar)(__maybeInc14(contentHeight))
+        "--height": (0, import_runtime92.maybeCssVar)(__maybeInc14(contentHeight))
       }]
     }), ...tid.panel, children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { ref: setContentEl, className: "df fdc pl2", children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(AppNavItems, { items: linkGroup.items, panelCollapsed: false, ...tid }) }) })
   ] });
@@ -21842,7 +21922,7 @@ function AppNavGroupMenu({
 }
 
 // src/components/AppNav/AppNavSectionView.tsx
-var import_runtime92 = require("@homebound/truss/runtime");
+var import_runtime93 = require("@homebound/truss/runtime");
 var import_jsx_runtime169 = require("react/jsx-runtime");
 function AppNavSectionView(props) {
   const {
@@ -21868,7 +21948,7 @@ function AppNavSectionView(props) {
       "--borderColor": "var(--b-surface-separator)"
     }]
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("div", { ...(0, import_runtime92.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("div", { ...(0, import_runtime93.trussProps)({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -21876,7 +21956,7 @@ function AppNavSectionView(props) {
     },
     ...showDivider ? dividerStyles : {}
   }), ...tid, children: [
-    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { ...(0, import_runtime92.trussProps)({
+    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { ...(0, import_runtime93.trussProps)({
       fontWeight: "fw6",
       fontSize: "fz_10px",
       lineHeight: "lh_14px",
@@ -21944,7 +22024,7 @@ var import_react122 = require("react");
 var import_react_aria53 = require("react-aria");
 var import_react_dom6 = require("react-dom");
 var import_react_router_dom5 = require("react-router-dom");
-var import_runtime93 = require("@homebound/truss/runtime");
+var import_runtime94 = require("@homebound/truss/runtime");
 var import_jsx_runtime171 = require("react/jsx-runtime");
 function NavbarMobileMenu(props) {
   const {
@@ -21974,14 +22054,14 @@ function NavbarMobileDrawer({
   tid
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(import_jsx_runtime171.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(import_framer_motion5.motion.div, { ...(0, import_runtime93.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(import_framer_motion5.motion.div, { ...(0, import_runtime94.trussProps)({
       position: "fixed",
       top: "top0",
       right: "right0",
       bottom: "bottom0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime93.maybeCssVar)(zIndices.modalUnderlay)
+        "--zIndex": (0, import_runtime94.maybeCssVar)(zIndices.modalUnderlay)
       }],
       backgroundColor: "backgroundColor_rgba_36_36_36_0_2"
     }), initial: {
@@ -21994,7 +22074,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: onClose, ...tid.mobileMenuScrim }, "navbarMobileMenuScrim"),
-    /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(import_react_aria53.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(import_framer_motion5.motion.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...(0, import_runtime93.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(import_react_aria53.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(import_framer_motion5.motion.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...(0, import_runtime94.trussProps)({
       position: "fixed",
       top: "top0",
       bottom: "bottom0",
@@ -22005,7 +22085,7 @@ function NavbarMobileDrawer({
       width: "w100",
       overflow: "oh",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime93.maybeCssVar)(zIndices.sideNav)
+        "--zIndex": (0, import_runtime94.maybeCssVar)(zIndices.sideNav)
       }],
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
@@ -22039,7 +22119,7 @@ function NavbarMobileDrawer({
 }
 
 // src/components/Navbar/Navbar.tsx
-var import_runtime94 = require("@homebound/truss/runtime");
+var import_runtime95 = require("@homebound/truss/runtime");
 var import_jsx_runtime172 = require("react/jsx-runtime");
 function Navbar(props) {
   const {
@@ -22058,7 +22138,7 @@ function Navbar(props) {
     overflows
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
-  return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("nav", { ...(0, import_runtime94.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("nav", { ...(0, import_runtime95.trussProps)({
     backgroundColor: "bgGray800",
     flexShrink: "fs0",
     display: "df",
@@ -22082,7 +22162,7 @@ function Navbar(props) {
       ] }),
       !sm && // Stays mounted while overflowing (hidden) so the items remain measurable and the bar
       // can expand again as space frees up.
-      /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { ref: containerRef, ...(0, import_runtime94.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { ref: containerRef, ...(0, import_runtime95.trussProps)({
         display: "df",
         alignItems: "aic",
         flexGrow: "fg1",
@@ -22117,7 +22197,7 @@ var import_react123 = require("react");
 var import_react_aria54 = require("react-aria");
 var import_react_router = require("react-router");
 var import_react_router_dom6 = require("react-router-dom");
-var import_runtime95 = require("@homebound/truss/runtime");
+var import_runtime96 = require("@homebound/truss/runtime");
 var import_jsx_runtime173 = require("react/jsx-runtime");
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -22150,7 +22230,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_runtime173.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime95.trussProps)(contentXss), children: selectedTab.render() }) })
+    /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...(0, import_runtime96.trussProps)(contentXss), children: selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -22192,7 +22272,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { ...(0, import_runtime95.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { ...(0, import_runtime96.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -22256,7 +22336,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...(0, import_runtime95.trussProps)({
+    ...(0, import_runtime96.trussProps)({
       ...baseStyles5,
       ...active && activeStyles3,
       ...isDisabled && disabledStyles4,
@@ -22293,7 +22373,7 @@ function getTabStyles() {
   const borderBottomStyles = {
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": (0, import_runtime95.maybeCssVar)(`${borderBottomWidthPx}px`)
+      "--borderBottomWidth": (0, import_runtime96.maybeCssVar)(`${borderBottomWidthPx}px`)
     }],
     paddingBottom: ["pb_var", {
       "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
@@ -22377,7 +22457,7 @@ function hideTabs(props) {
 }
 
 // src/components/PageHeader.tsx
-var import_runtime96 = require("@homebound/truss/runtime");
+var import_runtime97 = require("@homebound/truss/runtime");
 var import_jsx_runtime174 = require("react/jsx-runtime");
 function PageHeader2(props) {
   const {
@@ -22387,7 +22467,7 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "pageHeader");
-  return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("header", { ...tid, ...(0, import_runtime96.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)("header", { ...tid, ...(0, import_runtime97.trussProps)({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -22413,7 +22493,7 @@ function PageHeader2(props) {
 // src/components/ScrollShadows.tsx
 var import_utils139 = require("@react-aria/utils");
 var import_react124 = require("react");
-var import_runtime97 = require("@homebound/truss/runtime");
+var import_runtime98 = require("@homebound/truss/runtime");
 var import_jsx_runtime175 = require("react/jsx-runtime");
 function ScrollShadows(props) {
   const {
@@ -22438,7 +22518,7 @@ function ScrollShadows(props) {
     const commonStyles = {
       position: "absolute",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime97.maybeCssVar)(zIndices.scrollShadow)
+        "--zIndex": (0, import_runtime98.maybeCssVar)(zIndices.scrollShadow)
       }],
       pointerEvents: "pointerEvents_none"
     };
@@ -22471,7 +22551,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": (0, import_runtime97.maybeCssVar)(startGradient)
+          "--background": (0, import_runtime98.maybeCssVar)(startGradient)
         }]
       }
     }, {
@@ -22479,7 +22559,7 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": (0, import_runtime97.maybeCssVar)(endGradient)
+          "--background": (0, import_runtime98.maybeCssVar)(endGradient)
         }]
       }
     }];
@@ -22504,10 +22584,10 @@ function ScrollShadows(props) {
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { ...(0, import_runtime97.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { ...(0, import_runtime98.trussProps)({
     display: "df",
     flexDirection: ["fd_var", {
-      "--flexDirection": (0, import_runtime97.maybeCssVar)(!horizontal ? "column" : "row")
+      "--flexDirection": (0, import_runtime98.maybeCssVar)(!horizontal ? "column" : "row")
     }],
     position: "relative",
     overflow: "oh",
@@ -22520,23 +22600,23 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("div", { ...(0, import_runtime97.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("div", { ...(0, import_runtime98.trussProps)({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": (0, import_runtime97.maybeCssVar)(showStartShadow ? 1 : 0)
+          "--opacity": (0, import_runtime98.maybeCssVar)(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("div", { ...(0, import_runtime97.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("div", { ...(0, import_runtime98.trussProps)({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": (0, import_runtime97.maybeCssVar)(showEndShadow ? 1 : 0)
+          "--opacity": (0, import_runtime98.maybeCssVar)(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("div", { ...(0, import_runtime97.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime175.jsx)("div", { ...(0, import_runtime98.trussProps)({
       ...xss,
       ...{
         overflow: "oa",
@@ -22607,7 +22687,7 @@ function useHasSideNavLayoutProvider() {
 }
 
 // src/components/SideNav/SideNav.tsx
-var import_runtime98 = require("@homebound/truss/runtime");
+var import_runtime99 = require("@homebound/truss/runtime");
 var import_jsx_runtime177 = require("react/jsx-runtime");
 function SideNav(props) {
   const {
@@ -22622,7 +22702,7 @@ function SideNav(props) {
   const panelCollapsed = navState === "collapse";
   const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
   return /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ...(0, import_runtime98.trussProps)({
+    top !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ...(0, import_runtime99.trussProps)({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -22633,7 +22713,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ...(0, import_runtime98.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ...(0, import_runtime99.trussProps)({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -22646,7 +22726,7 @@ function SideNav(props) {
         paddingTop: "pt5"
       } : {}
     }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(AppNavItems, { items, panelCollapsed }) }),
-    footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ...(0, import_runtime98.trussProps)({
+    footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("div", { ...(0, import_runtime99.trussProps)({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -22723,7 +22803,7 @@ var snackbarId = 1;
 // src/components/Stepper.tsx
 var import_react127 = require("react");
 var import_react_aria55 = require("react-aria");
-var import_runtime99 = require("@homebound/truss/runtime");
+var import_runtime100 = require("@homebound/truss/runtime");
 var import_jsx_runtime178 = require("react/jsx-runtime");
 var import_react128 = require("react");
 var __maybeInc15 = (inc) => {
@@ -22744,7 +22824,7 @@ function Stepper(props) {
   const minStepWidth = 100;
   const gap = 8;
   return /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("ol", { ...(0, import_runtime99.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("ol", { ...(0, import_runtime100.trussProps)({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -22754,7 +22834,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ (0, import_react128.createElement)("li", { ...(0, import_runtime99.trussProps)({
+      return /* @__PURE__ */ (0, import_react128.createElement)("li", { ...(0, import_runtime100.trussProps)({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -22766,7 +22846,7 @@ function Stepper(props) {
         }]
       }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { ...(0, import_runtime99.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { ...(0, import_runtime100.trussProps)({
       marginTop: "mt1",
       backgroundColor: "bgGray300",
       height: "h_4px",
@@ -22777,12 +22857,12 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { ...(0, import_runtime99.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { ...(0, import_runtime100.trussProps)({
       backgroundColor: "bgBlue600",
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": (0, import_runtime99.maybeCssVar)(__maybeInc15(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": (0, import_runtime100.maybeCssVar)(__maybeInc15(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -22818,7 +22898,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime99.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...(0, import_runtime100.trussProps)({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -22886,7 +22966,7 @@ function StepIcon({
   if (state === "complete") {
     return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { ...(0, import_runtime99.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { ...(0, import_runtime100.trussProps)({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -22901,7 +22981,7 @@ function StepIcon({
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 var import_react_dom7 = require("react-dom");
-var import_runtime100 = require("@homebound/truss/runtime");
+var import_runtime101 = require("@homebound/truss/runtime");
 var import_jsx_runtime179 = require("react/jsx-runtime");
 function SuperDrawerHeader(props) {
   const {
@@ -22927,7 +23007,7 @@ function SuperDrawerHeader(props) {
       ] }),
       props.right && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { className: "fs0", children: props.right })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...(0, import_runtime100.trussProps)({
+    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...(0, import_runtime101.trussProps)({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
@@ -23107,7 +23187,7 @@ function canClose(canCloseCheck) {
 }
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
-var import_runtime101 = require("@homebound/truss/runtime");
+var import_runtime102 = require("@homebound/truss/runtime");
 var import_jsx_runtime182 = require("react/jsx-runtime");
 var SuperDrawerContent = ({
   children,
@@ -23156,7 +23236,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime101.mergeProps)(void 0, {
+      return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime102.mergeProps)(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -23200,7 +23280,7 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-var import_runtime102 = require("@homebound/truss/runtime");
+var import_runtime103 = require("@homebound/truss/runtime");
 var import_jsx_runtime183 = require("react/jsx-runtime");
 function SideNavLayout(props) {
   const hasProvider = useHasSideNavLayoutProvider();
@@ -23225,7 +23305,7 @@ function SideNavLayoutContent(props) {
   const railCollapsedWidthPx = 56;
   const collapsed = navState === "collapse";
   const showRail = sideNav !== void 0 && navState !== "hidden";
-  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { ...(0, import_runtime102.trussProps)({
+  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { ...(0, import_runtime103.trussProps)({
     ...{
       position: "absolute",
       top: "top0",
@@ -23249,7 +23329,7 @@ function SideNavLayoutContent(props) {
       overflow: "oh",
       transition: "transitionWidth",
       zIndex: ["zIndex_var", {
-        "--zIndex": (0, import_runtime102.maybeCssVar)(zIndices.sideNav)
+        "--zIndex": (0, import_runtime103.maybeCssVar)(zIndices.sideNav)
       }]
     },
     ...collapsed ? {