@homebound/beam 3.15.0 → 3.16.0

package/dist/index.js

@@ -5341,7 +5341,7 @@ function IconButton(props) {
     openInNew,
     active = false,
     compact = false,
-    circle = false,
+    variant = "default",
     download = false,
     forceFocusStyles = false,
     label,
@@ -5371,20 +5371,22 @@ function IconButton(props) {
     isHovered
   } = useHover(ariaProps);
   const testIds = useTestIds(props, icon);
+  const isCircle = variant === "circle";
+  const isOutline = variant === "outline";
   const styles = useMemo5(() => ({
     ...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": maybeCssVar7(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,
@@ -5394,7 +5396,7 @@ function IconButton(props) {
     ...mergeProps2(typeof onPress === "string" ? navLink : void 0, void 0, styles),
     "aria-label": label
   };
-  const buttonContent = /* @__PURE__ */ jsx11(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__ */ jsx11(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",
@@ -5437,6 +5439,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)"
@@ -13085,6 +13098,7 @@ function RadioGroupField(props) {
     onChange,
     options,
     disabled = false,
+    required,
     errorMsg,
     helperText,
     layout = "vertical",
@@ -13099,12 +13113,14 @@ function RadioGroupField(props) {
     isReadOnly: false
   });
   const tid = useTestIds(props, defaultTestId(label));
+  const labelSuffix = useLabelSuffix(required, false);
   const {
     labelProps,
     radioGroupProps
   } = useRadioGroup({
     label,
-    isDisabled: disabled
+    isDisabled: disabled,
+    isRequired: required
   }, state);
   return (
     // default styling to position `<Label />` above.
@@ -13119,7 +13135,7 @@ function RadioGroupField(props) {
         justifyContent: "jcsb"
       } : {}
     }), children: [
-      /* @__PURE__ */ jsx70(Label, { label, ...labelProps, ...tid.label, hidden: labelStyle === "hidden" }),
+      /* @__PURE__ */ jsx70(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: labelStyle === "hidden" }),
       /* @__PURE__ */ jsxs43("div", { ...radioGroupProps, children: [
         /* @__PURE__ */ jsx70("div", { ...trussProps44({
           display: "df",
@@ -14445,17 +14461,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);
-    reaction2(
+    this.disposeExpanded = reaction2(
       () => this.states.expandedColumns.map((cs) => cs.column.id),
       (columnIds) => sessionStorage.setItem(key, JSON.stringify(columnIds))
     );
   }
   loadVisible(storageKey) {
+    this.disposeVisible?.();
     this.visibleIds = loadArrayOrUndefined(storageKey);
-    autorun2(() => {
+    this.disposeVisible = autorun2(() => {
       const columnIds = this.states.allVisibleColumns("web").map((cs) => cs.column.id);
       sessionStorage.setItem(storageKey, JSON.stringify(columnIds));
     });
@@ -17386,6 +17411,7 @@ function BoundRadioGroupField(props) {
     RadioGroupField,
     {
       label,
+      required: field.required,
       value: field.value || void 0,
       onChange: (value) => {
         onChange(value);
@@ -18194,7 +18220,7 @@ function RightSidebar({
           flexDirection: "fdc",
           alignItems: "aic"
         }), children: [
-          /* @__PURE__ */ jsx121(IconButton, { bgColor: "rgba(255, 255, 255, 1)" /* White */, circle: true, onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
+          /* @__PURE__ */ jsx121(IconButton, { bgColor: "rgba(255, 255, 255, 1)" /* White */, variant: "circle", onClick: () => setSelectedIcon(void 0), icon: "x", inc: 3.5 }),
           /* @__PURE__ */ jsx121("div", { className: "absolute top_48px h_calc_100vh_168px w_1px bgGray300" })
         ] }),
         /* @__PURE__ */ jsx121("div", { className: "df aic jcfe gap2 mb3", children: /* @__PURE__ */ jsx121(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) })
@@ -18213,7 +18239,7 @@ function IconButtonList({
   }) => /* @__PURE__ */ jsx121(
     IconButton,
     {
-      circle: true,
+      variant: "circle",
       active: icon === selectedIcon,
       onClick: () => onIconClick(icon),
       icon,
@@ -18651,7 +18677,7 @@ function invertSpacing(value) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import React17, { useEffect as useEffect27, useMemo as useMemo38, useState as useState43 } from "react";
+import React17, { useEffect as useEffect28, useMemo as useMemo38, useState as useState43 } from "react";
 
 // src/components/ButtonMenu.tsx
 import { useRef as useRef45 } from "react";
@@ -18691,7 +18717,7 @@ function isSelectionButtonMenuProps(props) {
 }
 
 // src/components/Filters/FilterDropdownMenu.tsx
-import { memo as memo2, useMemo as useMemo35, useState as useState42 } from "react";
+import { memo as memo2, useEffect as useEffect27, useMemo as useMemo35, useState as useState42 } from "react";
 
 // src/components/CountBadge.tsx
 import { trussProps as trussProps66, maybeCssVar as maybeCssVar39 } from "@homebound/truss/runtime";
@@ -19297,35 +19323,109 @@ function updateFilter(currentFilter, key, value) {
 var filterTestIdPrefix = "filter";
 
 // src/components/Filters/FilterDropdownMenu.tsx
+import { useDebounce as useDebounce2 } from "use-debounce";
+import { StringParam as StringParam2, useQueryParams as useQueryParams3 } from "use-query-params";
+import { trussProps as trussProps69 } from "@homebound/truss/runtime";
 import { Fragment as Fragment32, jsx as jsx140, jsxs as jsxs70 } from "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] = useState42(false);
-  const activeFilterCount = useMemo35(() => getActiveFilterCount(filter), [filter]);
-  const filterImpls = useMemo35(() => buildFilterImpls(filterDefs), [filterDefs]);
+  const [searchIsOpen, setSearchIsOpen] = useState42(false);
+  const [{
+    search: initialValue
+  }, setQueryParams] = useQueryParams3({
+    search: StringParam2
+  });
+  const [searchValue, setSearchValue] = useState42(initialValue || "");
+  const [debouncedSearch] = useDebounce2(searchValue, 300);
+  useEffect27(() => {
+    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 = useMemo35(() => filter ? getActiveFilterCount(filter) : 0, [filter]);
+  const filterImpls = useMemo35(() => 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__ */ jsx140("div", { children: f.render(filter[key], (value) => onChange(updateFilter(filter, key, value)), testId, false, false) }, key));
   };
+  const searchTextField = /* @__PURE__ */ jsx140(TextField, { label: "Search", labelStyle: "hidden", value: searchValue, onChange: (v) => setSearchValue(v ?? ""), placeholder: "Search", clearable: true, startAdornment: /* @__PURE__ */ jsx140(Icon, { icon: "search", color: "rgba(100, 100, 100, 1)" /* Gray700 */ }) });
   return /* @__PURE__ */ jsxs70(Fragment32, { children: [
-    /* @__PURE__ */ jsx140(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ jsxs70("div", { className: "df aic gap1", children: [
+    hasSearch && /* @__PURE__ */ jsx140("div", { ...trussProps69({
+      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__ */ jsx140(Button, { label: "", "aria-label": "Search", icon: "search", onClick: () => setSearchIsOpen(!searchIsOpen), active: searchIsOpen, variant: "secondaryBlack", ...testId.searchButton }),
+    hasFilters && /* @__PURE__ */ jsx140(Button, { label: sm ? "" : "Filter", "aria-label": "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ jsxs70("div", { className: "df aic gap1", children: [
       activeFilterCount > 0 && /* @__PURE__ */ jsx140(CountBadge, { count: activeFilterCount }),
-      /* @__PURE__ */ jsx140(Icon, { icon: isOpen ? "chevronUp" : "chevronDown" })
+      /* @__PURE__ */ jsx140(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__ */ jsxs70("div", { className: "df aic fww gap1 w100", children: [
+    searchIsOpen && /* @__PURE__ */ jsx140("div", { ...trussProps69({
+      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__ */ jsxs70("div", { className: "df aic fww gap1 w100", children: [
       groupBy && /* @__PURE__ */ jsx140(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__ */ jsx140(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn })
+      activeFilterCount > 0 && /* @__PURE__ */ jsx140(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange?.({}), ...testId.clearBtn })
     ] }),
-    !isOpen && /* @__PURE__ */ jsx140(FilterChips, { filter, filterImpls, onChange, onClear: () => onChange({}), testId })
+    hasFilters && !isOpen && filter && onChange && /* @__PURE__ */ jsx140(FilterChips, { filter, filterImpls, onChange, onClear: () => onChange({}), testId })
   ] });
 }
 function FilterChips({
@@ -19459,6 +19559,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 = useMemo36(() => 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);
@@ -19474,7 +19577,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__ */ jsx142(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ jsxs72("div", { className: "dg gtc_1fr_auto gap2 bgWhite pt2 pb2 pr2 pl2 maxw_326px h_bshHover", children: [
+  return /* @__PURE__ */ jsx142(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, hideEndAdornment: sm, ...tid, children: /* @__PURE__ */ jsxs72("div", { className: "dg gtc_1fr_auto gap2 bgWhite pt2 pb2 pr2 pl2 maxw_326px h_bshHover", children: [
     options.map((option) => /* @__PURE__ */ jsxs72(Fragment33, { children: [
       /* @__PURE__ */ jsx142("div", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis pr1", children: option.label }),
       /* @__PURE__ */ jsx142(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}`] })
@@ -19484,7 +19587,7 @@ function EditColumnsButton(props) {
 }
 
 // src/components/Table/TableActions.tsx
-import { trussProps as trussProps69 } from "@homebound/truss/runtime";
+import { trussProps as trussProps70 } from "@homebound/truss/runtime";
 import { jsx as jsx143, jsxs as jsxs73 } from "react/jsx-runtime";
 function TableActions(props) {
   const {
@@ -19492,7 +19595,7 @@ function TableActions(props) {
     children,
     right
   } = props;
-  return /* @__PURE__ */ jsxs73("div", { ...trussProps69({
+  return /* @__PURE__ */ jsxs73("div", { ...trussProps70({
     ...{
       display: "df",
       gap: "gap1",
@@ -19507,10 +19610,6 @@ function TableActions(props) {
   ] });
 }
 
-// src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import { useDebounce as useDebounce2 } from "use-debounce";
-import { StringParam as StringParam2, useQueryParams as useQueryParams3 } from "use-query-params";
-
 // src/components/Layout/layoutTypes.ts
 function isGridTableProps(props) {
   return "rows" in props;
@@ -19520,7 +19619,7 @@ function isGridTableProps(props) {
 import { useMemo as useMemo37 } from "react";
 
 // src/components/LoadingSkeleton.tsx
-import { trussProps as trussProps70, maybeCssVar as maybeCssVar40 } from "@homebound/truss/runtime";
+import { trussProps as trussProps71, maybeCssVar as maybeCssVar40 } from "@homebound/truss/runtime";
 import { jsx as jsx144 } from "react/jsx-runtime";
 function LoadingSkeleton({
   rows = 1,
@@ -19533,7 +19632,7 @@ function LoadingSkeleton({
   const rowHeight = sizeToPixels2[size];
   const rowCells = (rowNumber) => {
     const flexGrowForCell = randomizeWidths ? getRandomizedFlexBasisByRowIndex(rowNumber) : 1;
-    return cellArray.map((_, i) => /* @__PURE__ */ jsx144("div", { ...trussProps70({
+    return cellArray.map((_, i) => /* @__PURE__ */ jsx144("div", { ...trussProps71({
       borderRadius: "br4",
       animation: "animation_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite",
       flexGrow: ["flexGrow_var", {
@@ -19544,7 +19643,7 @@ function LoadingSkeleton({
       }]
     }) }, `row-${rowNumber}-cell-${i}`));
   };
-  return /* @__PURE__ */ jsx144("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ jsx144("div", { ...trussProps70({
+  return /* @__PURE__ */ jsx144("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ jsx144("div", { ...trussProps71({
     display: "df",
     gap: "gap1",
     marginBottom: "mb1",
@@ -19585,7 +19684,7 @@ function LoadingTable(props) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import { trussProps as trussProps71 } from "@homebound/truss/runtime";
+import { trussProps as trussProps72 } from "@homebound/truss/runtime";
 import { Fragment as Fragment35, jsx as jsx146, jsxs as jsxs75 } from "react/jsx-runtime";
 function GridTableLayoutComponent(props) {
   const {
@@ -19612,23 +19711,22 @@ function GridTableLayoutComponent(props) {
   const showTableActions = layoutState?.filterDefs || layoutState?.search || hasHideableColumns;
   const isVirtualized = tableProps.as === "virtual";
   const visibleColumnIds = useComputed(() => api.getVisibleColumnIds(), [api]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (layoutState?.setVisibleColumnIds) {
       layoutState.setVisibleColumnIds(visibleColumnIds);
     }
   }, [visibleColumnIds, layoutState]);
   const visibleColumnsStorageKey = layoutState?.persistedColumnsStorageKey;
   return /* @__PURE__ */ jsxs75(Fragment35, { children: [
-    /* @__PURE__ */ jsx146(Header2, { pageTitle, breadCrumb, primaryAction, secondaryAction, tertiaryAction, actionMenu }),
-    showTableActions && /* @__PURE__ */ jsxs75(TableActions, { right: hasHideableColumns && /* @__PURE__ */ jsx146(EditColumnsButton, { columns, api, tooltip: "Display columns", trigger: {
+    pageTitle && /* @__PURE__ */ jsx146(Header2, { pageTitle, breadCrumb, primaryAction, secondaryAction, tertiaryAction, actionMenu }),
+    showTableActions && /* @__PURE__ */ jsx146(TableActions, { right: hasHideableColumns && /* @__PURE__ */ jsx146(EditColumnsButton, { columns, api, tooltip: "Display columns", trigger: {
       icon: "kanban",
       size: "md",
       label: "",
       variant: "secondaryBlack"
-    }, ...tid.editColumnsButton }), children: [
-      layoutState?.search && /* @__PURE__ */ jsx146(SearchBox, { onSearch: layoutState.setSearchString }),
-      layoutState?.filterDefs && /* @__PURE__ */ jsx146(_FilterDropdownMenu, { filterDefs: layoutState.filterDefs, filter: layoutState.filter, onChange: layoutState.setFilter, groupBy: layoutState.groupBy })
-    ] }),
+    }, ...tid.editColumnsButton }), children: layoutState && (layoutState.filterDefs || layoutState.search) && /* @__PURE__ */ jsx146(_FilterDropdownMenu, { filterDefs: layoutState.filterDefs, filter: layoutState.filter, onChange: layoutState.setFilter, groupBy: layoutState.groupBy, searchProps: layoutState.search ? {
+      onSearch: layoutState.setSearchString
+    } : void 0 }) }),
     /* @__PURE__ */ jsxs75(ScrollableContent, { virtualized: isVirtualized, children: [
       isGridTableProps(tableProps) ? /* @__PURE__ */ jsx146(GridTable, { ...tableProps, api, filter: clientSearch, style: {
         allWhite: true
@@ -19679,7 +19777,7 @@ function useGridTableLayoutState({
     offset: 0,
     limit: persistedPageSize
   });
-  useEffect27(() => {
+  useEffect28(() => {
     if (page.limit !== persistedPageSize) setPersistedPageSize(page.limit);
     setPage((prev) => prev.offset === 0 ? prev : {
       ...prev,
@@ -19716,7 +19814,7 @@ function Header2(props) {
     actionMenu
   } = props;
   const tids = useTestIds(props);
-  return /* @__PURE__ */ jsx146(FullBleed, { children: /* @__PURE__ */ jsxs75("header", { ...trussProps71({
+  return /* @__PURE__ */ jsx146(FullBleed, { children: /* @__PURE__ */ jsxs75("header", { ...trussProps72({
     ...{
       paddingTop: "pt3",
       paddingBottom: "pb3",
@@ -19744,24 +19842,6 @@ function Header2(props) {
     ] })
   ] }) });
 }
-function SearchBox({
-  onSearch
-}) {
-  const [{
-    search: initialValue
-  }, setQueryParams] = useQueryParams3({
-    search: StringParam2
-  });
-  const [value, setValue] = useState43(initialValue || "");
-  const [debouncedSearch] = useDebounce2(value, 300);
-  useEffect27(() => {
-    onSearch(debouncedSearch);
-    setQueryParams({
-      search: debouncedSearch || void 0
-    }, "replaceIn");
-  }, [debouncedSearch, onSearch, setQueryParams]);
-  return /* @__PURE__ */ jsx146("div", { className: "w_244px", children: /* @__PURE__ */ jsx146(TextField, { label: "Search", labelStyle: "hidden", value, onChange: (v) => setValue(v ?? ""), placeholder: "Search", clearable: true, startAdornment: /* @__PURE__ */ jsx146(Icon, { icon: "search", color: "rgba(100, 100, 100, 1)" /* Gray700 */ }) }) });
-}
 
 // src/components/Layout/PreventBrowserScroll.tsx
 import { jsx as jsx147 } from "react/jsx-runtime";
@@ -19813,8 +19893,8 @@ function useRightPaneContext() {
 
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 import { AnimatePresence as AnimatePresence3, motion as motion3 } from "framer-motion";
-import { useEffect as useEffect28 } from "react";
-import { trussProps as trussProps72, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
+import { useEffect as useEffect29 } from "react";
+import { trussProps as trussProps73, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
 import { Fragment as Fragment36, jsx as jsx149, jsxs as jsxs76 } from "react/jsx-runtime";
 var __maybeInc11 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -19832,9 +19912,9 @@ function RightPaneLayout(props) {
     clearPane,
     closePane
   } = useRightPaneContext();
-  useEffect28(() => closePane, [closePane]);
+  useEffect29(() => closePane, [closePane]);
   return /* @__PURE__ */ jsx149("div", { className: "h100 df oxh", children: /* @__PURE__ */ jsxs76(Fragment36, { children: [
-    /* @__PURE__ */ jsx149("div", { ...trussProps72({
+    /* @__PURE__ */ jsx149("div", { ...trussProps73({
       ...{
         width: ["w_var", {
           "--width": maybeCssVar41(__maybeInc11(`calc(100% - ${paneWidth + 24}px)`))
@@ -19859,7 +19939,7 @@ function RightPaneLayout(props) {
         } : {}
       }
     }), children }),
-    /* @__PURE__ */ jsxs76("div", { ...trussProps72({
+    /* @__PURE__ */ jsxs76("div", { ...trussProps73({
       position: "relative",
       ...!!defaultPaneContent ? {
         width: ["w_var", {
@@ -19867,7 +19947,7 @@ function RightPaneLayout(props) {
         }]
       } : {}
     }), children: [
-      defaultPaneContent && /* @__PURE__ */ jsx149("div", { ...trussProps72({
+      defaultPaneContent && /* @__PURE__ */ jsx149("div", { ...trussProps73({
         height: "h100",
         width: ["w_var", {
           "--width": `${paneWidth}px`
@@ -19885,7 +19965,7 @@ function RightPaneLayout(props) {
         {
           layout: "position",
           "data-testid": "rightPaneContent",
-          ...trussProps72({
+          ...trussProps73({
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": maybeCssVar41(paneBgColor)
             }],
@@ -19944,7 +20024,7 @@ function ScrollableFooter(props) {
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
 import { AnimatePresence as AnimatePresence4, motion as motion4 } from "framer-motion";
-import { useEffect as useEffect29, useState as useState45 } from "react";
+import { useEffect as useEffect30, useState as useState45 } from "react";
 
 // src/components/Layout/TableReviewLayout/SidePanel.tsx
 import { jsx as jsx151, jsxs as jsxs77 } from "react/jsx-runtime";
@@ -19968,7 +20048,7 @@ function SidePanel(props) {
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-import { trussProps as trussProps73, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
+import { trussProps as trussProps74, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
 import { jsx as jsx152, jsxs as jsxs78 } from "react/jsx-runtime";
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
@@ -19985,7 +20065,7 @@ function TableReviewLayout(props) {
   } = props;
   const tid = useTestIds(props, "tableReviewLayout");
   const [isPanelVisible, setIsPanelVisible] = useState45(!!panelContent);
-  useEffect29(() => {
+  useEffect30(() => {
     setIsPanelVisible(!!panelContent);
   }, [panelContent]);
   function handleClosePanel() {
@@ -20010,7 +20090,7 @@ function TableReviewLayout(props) {
       bordered: true
     }, stickyHeader: true });
   }
-  return /* @__PURE__ */ jsxs78("div", { ...trussProps73({
+  return /* @__PURE__ */ jsxs78("div", { ...trussProps74({
     position: "fixed",
     top: "top0",
     bottom: "bottom0",
@@ -20035,7 +20115,7 @@ function TableReviewLayout(props) {
       /* @__PURE__ */ jsx152("div", { className: "fw4 fz_14px lh_20px gray700 mt2", ...tid.description, children: description })
     ] }),
     /* @__PURE__ */ jsxs78("div", { className: "fg1 df mh0", ...tid.content, children: [
-      /* @__PURE__ */ jsx152("div", { ...trussProps73({
+      /* @__PURE__ */ jsx152("div", { ...trussProps74({
         ...{
           flexGrow: "fg1",
           overflowY: "oya",
@@ -20058,7 +20138,7 @@ function TableReviewLayout(props) {
         ease: "linear",
         duration: 0.2
       }, className: "df fdc fs0 relative", children: [
-        /* @__PURE__ */ jsxs78("div", { ...trussProps73({
+        /* @__PURE__ */ jsxs78("div", { ...trussProps74({
           position: "absolute",
           top: ["top_var", {
             "--top": `${-32}px`
@@ -20071,7 +20151,7 @@ function TableReviewLayout(props) {
           }],
           zIndex: "z1"
         }), children: [
-          /* @__PURE__ */ jsx152(IconButton, { bgColor: "rgba(255, 255, 255, 1)" /* White */, circle: true, icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
+          /* @__PURE__ */ jsx152(IconButton, { bgColor: "rgba(255, 255, 255, 1)" /* White */, variant: "circle", icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
           /* @__PURE__ */ jsx152("div", { className: "w_1px bgGray300 vh100" })
         ] }),
         /* @__PURE__ */ jsx152("div", { className: "fg1 oh mh0", children: /* @__PURE__ */ jsx152(SidePanel, { ...panelContent }) })
@@ -20181,7 +20261,7 @@ function ButtonDatePicker(props) {
 // src/components/ButtonGroup.tsx
 import { useRef as useRef49 } from "react";
 import { useButton as useButton10, useFocusRing as useFocusRing12, useHover as useHover15 } from "react-aria";
-import { trussProps as trussProps74 } from "@homebound/truss/runtime";
+import { trussProps as trussProps75 } from "@homebound/truss/runtime";
 import { jsx as jsx155, jsxs as jsxs80 } from "react/jsx-runtime";
 function ButtonGroup(props) {
   const {
@@ -20192,7 +20272,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__ */ jsx155("div", { ...tid, ...trussProps74({
+    /* @__PURE__ */ jsx155("div", { ...tid, ...trussProps75({
       ...{
         display: "df",
         lineHeight: "lh_0"
@@ -20241,10 +20321,10 @@ function GroupButton(props) {
     isHovered
   } = useHover15(ariaProps);
   const tid = useTestIds(props);
-  return /* @__PURE__ */ jsx155("span", { ...trussProps74(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
+  return /* @__PURE__ */ jsx155("span", { ...trussProps75(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
     title: resolveTooltip(disabled, tooltip),
     placement: "top",
-    children: /* @__PURE__ */ jsxs80("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps74({
+    children: /* @__PURE__ */ jsxs80("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps75({
       ...{
         fontWeight: "fw6",
         fontSize: "fz_14px",
@@ -20351,7 +20431,7 @@ import { useHover as useHover16 } from "react-aria";
 // src/components/Tag.tsx
 import { useResizeObserver as useResizeObserver4 } from "@react-aria/utils";
 import { useRef as useRef50, useState as useState46 } from "react";
-import { trussProps as trussProps75 } from "@homebound/truss/runtime";
+import { trussProps as trussProps76 } from "@homebound/truss/runtime";
 import { jsx as jsx156, jsxs as jsxs81 } from "react/jsx-runtime";
 function Tag(props) {
   const {
@@ -20375,7 +20455,7 @@ function Tag(props) {
   });
   return maybeTooltip({
     title: !preventTooltip && showTooltip ? text : void 0,
-    children: /* @__PURE__ */ jsxs81("span", { ...tid, ...trussProps75({
+    children: /* @__PURE__ */ jsxs81("span", { ...tid, ...trussProps76({
       ...{
         display: "dif",
         fontWeight: "fw6",
@@ -20425,7 +20505,7 @@ function getStyles(type) {
 }
 
 // src/components/Card.tsx
-import { trussProps as trussProps76, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
+import { trussProps as trussProps77, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
 import { jsx as jsx157, jsxs as jsxs82 } from "react/jsx-runtime";
 function Card(props) {
   const {
@@ -20456,8 +20536,8 @@ function Card(props) {
     ...isHovered && cardHoverStyles,
     ...isDisabled && disabledStyles3
   }), [isDisabled, isHovered, bordered, type, isList]);
-  return /* @__PURE__ */ jsxs82("div", { ...trussProps76(styles), ...hoverProps, ...tid, children: [
-    /* @__PURE__ */ jsx157("div", { ...trussProps76({
+  return /* @__PURE__ */ jsxs82("div", { ...trussProps77(styles), ...hoverProps, ...tid, children: [
+    /* @__PURE__ */ jsx157("div", { ...trussProps77({
       ...{
         height: ["h_var", {
           "--height": `${imgHeight}px`
@@ -20474,14 +20554,14 @@ function Card(props) {
         filter: "filter_brightness_1"
       },
       ...isHovered && !isList && imageHoverStyles
-    }), children: /* @__PURE__ */ jsx157("img", { ...trussProps76({
+    }), children: /* @__PURE__ */ jsx157("img", { ...trussProps77({
       width: "w100",
       height: "h100",
       objectFit: ["objectFit_var", {
         "--objectFit": maybeCssVar43(imageFit)
       }]
     }), src: imgSrc, alt: title, ...tid.img }) }),
-    isHovered && buttonMenuItems && /* @__PURE__ */ jsx157("div", { ...trussProps76({
+    isHovered && buttonMenuItems && /* @__PURE__ */ jsx157("div", { ...trussProps77({
       position: "absolute",
       right: "right1",
       top: "top1",
@@ -20497,7 +20577,7 @@ function Card(props) {
     /* @__PURE__ */ jsxs82("div", { className: "df fdc aifs gap1", children: [
       /* @__PURE__ */ jsxs82("div", { children: [
         /* @__PURE__ */ jsx157("div", { className: "fw6 fz_12px lh_16px gray700", ...tid.subtitle, children: subtitle }),
-        /* @__PURE__ */ jsx157("div", { ...trussProps76({
+        /* @__PURE__ */ jsx157("div", { ...trussProps77({
           fontWeight: "fw6",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -20587,7 +20667,7 @@ function useDnDGridContext() {
 }
 
 // src/components/DnDGrid/DnDGrid.tsx
-import { trussProps as trussProps77 } from "@homebound/truss/runtime";
+import { trussProps as trussProps78 } from "@homebound/truss/runtime";
 import { jsx as jsx159 } from "react/jsx-runtime";
 function DnDGrid(props) {
   const {
@@ -20770,7 +20850,7 @@ function DnDGrid(props) {
   return /* @__PURE__ */ jsx159(DnDGridContext.Provider, { value: {
     dragEl,
     onDragHandleKeyDown
-  }, children: /* @__PURE__ */ jsx159("div", { ref: gridEl, ...trussProps77({
+  }, children: /* @__PURE__ */ jsx159("div", { ref: gridEl, ...trussProps78({
     ...{
       containerType: "ctis",
       display: "dg"
@@ -20783,7 +20863,7 @@ var gridCloneKey = "dndgrid-clone";
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
 import { mergeProps as mergeProps23, useFocusRing as useFocusRing13, useHover as useHover17 } from "react-aria";
-import { trussProps as trussProps78 } from "@homebound/truss/runtime";
+import { trussProps as trussProps79 } from "@homebound/truss/runtime";
 import { jsx as jsx160 } from "react/jsx-runtime";
 function DnDGridItemHandle(props) {
   const {
@@ -20813,7 +20893,7 @@ function DnDGridItemHandle(props) {
     borderRadius: "br4",
     borderWidth: "bw1"
   };
-  return /* @__PURE__ */ jsx160("button", { ...trussProps78({
+  return /* @__PURE__ */ jsx160("button", { ...trussProps79({
     ...compact ? iconButtonCompact2 : iconButtonNormal2,
     ...{
       cursor: "cursor_grab",
@@ -20875,7 +20955,7 @@ var gridItemDataAttribute = "data-grid-item-span";
 var ResponsiveGridContext = createContext10(void 0);
 
 // src/components/Grid/ResponsiveGrid.tsx
-import { trussProps as trussProps79 } from "@homebound/truss/runtime";
+import { trussProps as trussProps80 } from "@homebound/truss/runtime";
 import { jsx as jsx161 } from "react/jsx-runtime";
 function ResponsiveGrid(props) {
   const {
@@ -20896,12 +20976,12 @@ function ResponsiveGrid(props) {
     gap,
     columns
   }), [minColumnWidth, gap, columns]);
-  return /* @__PURE__ */ jsx161(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ jsx161("div", { ...trussProps79(gridStyles), children }) });
+  return /* @__PURE__ */ jsx161(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ jsx161("div", { ...trussProps80(gridStyles), children }) });
 }
 
 // src/components/Grid/ResponsiveGridItem.tsx
 import { mergeProps as mergeProps24 } from "react-aria";
-import { trussProps as trussProps80 } from "@homebound/truss/runtime";
+import { trussProps as trussProps81 } from "@homebound/truss/runtime";
 import { jsx as jsx162 } from "react/jsx-runtime";
 function ResponsiveGridItem(props) {
   const {
@@ -20914,7 +20994,7 @@ function ResponsiveGridItem(props) {
   } = useResponsiveGridItem({
     colSpan
   });
-  return /* @__PURE__ */ jsx162("div", { ...mergeProps24(gridItemProps, trussProps80(gridItemStyles)), children });
+  return /* @__PURE__ */ jsx162("div", { ...mergeProps24(gridItemProps, trussProps81(gridItemStyles)), children });
 }
 
 // src/components/Grid/useResponsiveGrid.ts
@@ -20952,7 +21032,7 @@ function useResponsiveGrid(props) {
 }
 
 // src/components/Grid/useResponsiveGridItem.ts
-import { useContext as useContext20, useEffect as useEffect30, useMemo as useMemo45 } from "react";
+import { useContext as useContext20, useEffect as useEffect31, useMemo as useMemo45 } from "react";
 var injectedResponsiveGridClasses = /* @__PURE__ */ new Set();
 var responsiveGridStyleEl;
 function useResponsiveGridItem(props) {
@@ -20982,7 +21062,7 @@ function useResponsiveGridItem(props) {
   };
 }
 function useResponsiveGridItemStyle(className, cssText) {
-  useEffect30(
+  useEffect31(
     function() {
       if (!className || !cssText || typeof document === "undefined") return;
       if (!responsiveGridStyleEl) {
@@ -21065,7 +21145,7 @@ function HbSpinnerProvider({
 }
 
 // src/components/HomeboundLogo.tsx
-import { trussProps as trussProps81, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
+import { trussProps as trussProps82, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
 import { jsx as jsx164 } from "react/jsx-runtime";
 var __maybeInc13 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -21076,7 +21156,7 @@ function HomeboundLogo(props) {
     width: width2 = "auto",
     height = "auto"
   } = props;
-  return /* @__PURE__ */ jsx164("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...trussProps81({
+  return /* @__PURE__ */ jsx164("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...trussProps82({
     fill: ["fill_var", {
       "--fill": maybeCssVar45(fill)
     }],
@@ -21091,8 +21171,8 @@ function HomeboundLogo(props) {
 
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect3, useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
-import { useCallback as useCallback26, useEffect as useEffect31, useRef as useRef52, useState as useState47 } from "react";
-import { trussProps as trussProps82, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
+import { useCallback as useCallback26, useEffect as useEffect32, useRef as useRef52, useState as useState47 } from "react";
+import { trussProps as trussProps83, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
 import { jsx as jsx165, jsxs as jsxs84 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
@@ -21105,7 +21185,7 @@ function MaxLines({
     if (!elRef.current) return;
     setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, []);
-  useEffect31(() => {
+  useEffect32(() => {
     setExpanded(false);
   }, [children]);
   const onResize = useCallback26(() => {
@@ -21117,7 +21197,7 @@ function MaxLines({
     onResize
   });
   return /* @__PURE__ */ jsxs84("div", { children: [
-    /* @__PURE__ */ jsx165("div", { ref: elRef, ...trussProps82({
+    /* @__PURE__ */ jsx165("div", { ref: elRef, ...trussProps83({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
           "--WebkitLineClamp": maybeCssVar46(maxLines)
@@ -21138,12 +21218,12 @@ import { camelCase as camelCase6 } from "change-case";
 // src/components/AppNav/AppNavGroup.tsx
 import { useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
 import { camelCase as camelCase5, kebabCase } from "change-case";
-import { useCallback as useCallback28, useEffect as useEffect32, useMemo as useMemo48, useState as useState49 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect33, useMemo as useMemo48, useState as useState49 } from "react";
 
 // src/components/AppNav/AppNavGroupTrigger.tsx
 import { useMemo as useMemo47, useRef as useRef53 } from "react";
 import { mergeProps as mergeProps25, useButton as useButton11, useFocusRing as useFocusRing14, useHover as useHover18 } from "react-aria";
-import { trussProps as trussProps83, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
+import { trussProps as trussProps84, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
 import { jsx as jsx166, jsxs as jsxs85 } from "react/jsx-runtime";
 function AppNavGroupTrigger(props) {
   const {
@@ -21187,7 +21267,7 @@ function AppNavGroupTrigger(props) {
     })
   }), children: [
     label,
-    /* @__PURE__ */ jsx166("span", { ...trussProps83({
+    /* @__PURE__ */ jsx166("span", { ...trussProps84({
       ...{
         display: "df",
         alignItems: "aic",
@@ -21340,7 +21420,7 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-import { trussProps as trussProps84, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
+import { trussProps as trussProps85, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
 import { Fragment as Fragment38, jsx as jsx167, jsxs as jsxs86 } from "react/jsx-runtime";
 var __maybeInc14 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -21371,7 +21451,7 @@ function AppNavGroupDisclosure(props) {
     current: contentEl
   }), [contentEl]);
   const [contentHeight, setContentHeight] = useState49(expanded ? "auto" : "0");
-  useEffect32(() => {
+  useEffect33(() => {
     setContentHeight(expanded && contentEl ? `${contentEl.scrollHeight}px` : "0");
   }, [expanded, contentEl]);
   const onResize = useCallback28(() => {
@@ -21385,7 +21465,7 @@ function AppNavGroupDisclosure(props) {
   });
   return /* @__PURE__ */ jsxs86("div", { className: "df fdc", ...tid, children: [
     /* @__PURE__ */ jsx167(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, onClick: onToggle, ...tid }),
-    /* @__PURE__ */ jsx167("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...trussProps84({
+    /* @__PURE__ */ jsx167("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...trussProps85({
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
@@ -21417,7 +21497,7 @@ function AppNavGroupMenu({
 }
 
 // src/components/AppNav/AppNavSectionView.tsx
-import { trussProps as trussProps85 } from "@homebound/truss/runtime";
+import { trussProps as trussProps86 } from "@homebound/truss/runtime";
 import { jsx as jsx169, jsxs as jsxs87 } from "react/jsx-runtime";
 function AppNavSectionView(props) {
   const {
@@ -21443,7 +21523,7 @@ function AppNavSectionView(props) {
       "--borderColor": "var(--b-surface-separator)"
     }]
   };
-  return /* @__PURE__ */ jsxs87("div", { ...trussProps85({
+  return /* @__PURE__ */ jsxs87("div", { ...trussProps86({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -21451,7 +21531,7 @@ function AppNavSectionView(props) {
     },
     ...showDivider ? dividerStyles : {}
   }), ...tid, children: [
-    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ jsx169("div", { ...trussProps85({
+    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ jsx169("div", { ...trussProps86({
       fontWeight: "fw6",
       fontSize: "fz_10px",
       lineHeight: "lh_14px",
@@ -21515,11 +21595,11 @@ function AppNavItems(props) {
 
 // src/components/Navbar/NavbarMobileMenu.tsx
 import { AnimatePresence as AnimatePresence5, motion as motion5 } from "framer-motion";
-import { useEffect as useEffect33, useState as useState50 } from "react";
+import { useEffect as useEffect34, useState as useState50 } from "react";
 import { FocusScope as FocusScope5, usePreventScroll as usePreventScroll2 } from "react-aria";
 import { createPortal as createPortal6 } from "react-dom";
 import { useLocation } from "react-router-dom";
-import { trussProps as trussProps86, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
+import { trussProps as trussProps87, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
 import { Fragment as Fragment40, jsx as jsx171, jsxs as jsxs88 } from "react/jsx-runtime";
 function NavbarMobileMenu(props) {
   const {
@@ -21534,7 +21614,7 @@ function NavbarMobileMenu(props) {
   usePreventScroll2({
     isDisabled: !isOpen
   });
-  useEffect33(() => {
+  useEffect34(() => {
     setIsOpen(false);
   }, [pathname, search]);
   const close = () => setIsOpen(false);
@@ -21549,7 +21629,7 @@ function NavbarMobileDrawer({
   tid
 }) {
   return /* @__PURE__ */ jsxs88(Fragment40, { children: [
-    /* @__PURE__ */ jsx171(motion5.div, { ...trussProps86({
+    /* @__PURE__ */ jsx171(motion5.div, { ...trussProps87({
       position: "fixed",
       top: "top0",
       right: "right0",
@@ -21569,7 +21649,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: onClose, ...tid.mobileMenuScrim }, "navbarMobileMenuScrim"),
-    /* @__PURE__ */ jsx171(FocusScope5, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ jsxs88(motion5.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...trussProps86({
+    /* @__PURE__ */ jsx171(FocusScope5, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ jsxs88(motion5.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...trussProps87({
       position: "fixed",
       top: "top0",
       bottom: "bottom0",
@@ -21614,7 +21694,7 @@ function NavbarMobileDrawer({
 }
 
 // src/components/Navbar/Navbar.tsx
-import { trussProps as trussProps87 } from "@homebound/truss/runtime";
+import { trussProps as trussProps88 } from "@homebound/truss/runtime";
 import { jsx as jsx172, jsxs as jsxs89 } from "react/jsx-runtime";
 function Navbar(props) {
   const {
@@ -21633,7 +21713,7 @@ function Navbar(props) {
     overflows
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
-  return /* @__PURE__ */ jsx172(ContrastScope, { children: /* @__PURE__ */ jsxs89("nav", { ...trussProps87({
+  return /* @__PURE__ */ jsx172(ContrastScope, { children: /* @__PURE__ */ jsxs89("nav", { ...trussProps88({
     backgroundColor: "bgGray800",
     flexShrink: "fs0",
     display: "df",
@@ -21657,7 +21737,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__ */ jsx172("div", { ref: containerRef, ...trussProps87({
+      /* @__PURE__ */ jsx172("div", { ref: containerRef, ...trussProps88({
         display: "df",
         alignItems: "aic",
         flexGrow: "fg1",
@@ -21688,11 +21768,11 @@ function NavbarUserMenu({
 
 // src/components/Tabs.tsx
 import { camelCase as camelCase7 } from "change-case";
-import { useEffect as useEffect34, useMemo as useMemo49, useRef as useRef54, useState as useState51 } from "react";
+import { useEffect as useEffect35, useMemo as useMemo49, useRef as useRef54, useState as useState51 } from "react";
 import { mergeProps as mergeProps26, useFocusRing as useFocusRing15, useHover as useHover19 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link5, useLocation as useLocation2 } from "react-router-dom";
-import { trussProps as trussProps88, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
+import { trussProps as trussProps89, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
 import { Fragment as Fragment41, jsx as jsx173, jsxs as jsxs90 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -21725,7 +21805,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__ */ jsx173(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx173("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps88(contentXss), children: selectedTab.render() }) })
+    /* @__PURE__ */ jsx173(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx173("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps89(contentXss), children: selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -21751,7 +21831,7 @@ function Tabs(props) {
   const tid = useTestIds(others, "tabs");
   const [active, setActive] = useState51(selected);
   const ref = useRef54(null);
-  useEffect34(() => setActive(selected), [selected]);
+  useEffect35(() => setActive(selected), [selected]);
   function onKeyUp(e) {
     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
       const nextTabValue = getNextTabValue(active, e.key, tabs);
@@ -21767,7 +21847,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ jsxs90("div", { ...trussProps88({
+  return /* @__PURE__ */ jsxs90("div", { ...trussProps89({
     ...{
       display: "df",
       alignItems: "aic",
@@ -21831,7 +21911,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...trussProps88({
+    ...trussProps89({
       ...baseStyles5,
       ...active && activeStyles3,
       ...isDisabled && disabledStyles4,
@@ -21952,7 +22032,7 @@ function hideTabs(props) {
 }
 
 // src/components/PageHeader.tsx
-import { trussProps as trussProps89 } from "@homebound/truss/runtime";
+import { trussProps as trussProps90 } from "@homebound/truss/runtime";
 import { jsx as jsx174, jsxs as jsxs91 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
@@ -21962,7 +22042,7 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "pageHeader");
-  return /* @__PURE__ */ jsxs91("header", { ...tid, ...trussProps89({
+  return /* @__PURE__ */ jsxs91("header", { ...tid, ...trussProps90({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -21988,7 +22068,7 @@ function PageHeader2(props) {
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver7 } from "@react-aria/utils";
 import { useCallback as useCallback29, useMemo as useMemo50, useRef as useRef55, useState as useState52 } from "react";
-import { trussProps as trussProps90, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
+import { trussProps as trussProps91, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
 import { jsx as jsx175, jsxs as jsxs92 } from "react/jsx-runtime";
 function ScrollShadows(props) {
   const {
@@ -22079,7 +22159,7 @@ function ScrollShadows(props) {
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ jsxs92("div", { ...trussProps90({
+  return /* @__PURE__ */ jsxs92("div", { ...trussProps91({
     display: "df",
     flexDirection: ["fd_var", {
       "--flexDirection": maybeCssVar50(!horizontal ? "column" : "row")
@@ -22095,7 +22175,7 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ jsx175("div", { ...trussProps90({
+    /* @__PURE__ */ jsx175("div", { ...trussProps91({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -22103,7 +22183,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx175("div", { ...trussProps90({
+    /* @__PURE__ */ jsx175("div", { ...trussProps91({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -22111,7 +22191,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx175("div", { ...trussProps90({
+    /* @__PURE__ */ jsx175("div", { ...trussProps91({
       ...xss,
       ...{
         overflow: "oa",
@@ -22127,7 +22207,7 @@ import {
   createContext as createContext11,
   useCallback as useCallback30,
   useContext as useContext22,
-  useEffect as useEffect35,
+  useEffect as useEffect36,
   useRef as useRef56,
   useState as useState53
 } from "react";
@@ -22160,7 +22240,7 @@ function SideNavLayoutProvider(props) {
   );
   const bp = useBreakpoint();
   const prevMdAndUp = useRef56(bp.mdAndUp);
-  useEffect35(() => {
+  useEffect36(() => {
     if (prevMdAndUp.current && !bp.mdAndUp) {
       setNavStateInternal((prev) => prev === "expanded" ? "collapse" : prev);
     }
@@ -22189,7 +22269,7 @@ function useHasSideNavLayoutProvider() {
 }
 
 // src/components/SideNav/SideNav.tsx
-import { trussProps as trussProps91 } from "@homebound/truss/runtime";
+import { trussProps as trussProps92 } from "@homebound/truss/runtime";
 import { jsx as jsx177, jsxs as jsxs93 } from "react/jsx-runtime";
 function SideNav(props) {
   const {
@@ -22204,7 +22284,7 @@ function SideNav(props) {
   const panelCollapsed = navState === "collapse";
   const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
   return /* @__PURE__ */ jsxs93("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    top !== void 0 && /* @__PURE__ */ jsx177("div", { ...trussProps91({
+    top !== void 0 && /* @__PURE__ */ jsx177("div", { ...trussProps92({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -22215,7 +22295,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ jsx177("div", { ...trussProps91({
+    /* @__PURE__ */ jsx177("div", { ...trussProps92({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -22228,7 +22308,7 @@ function SideNav(props) {
         paddingTop: "pt5"
       } : {}
     }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ jsx177(AppNavItems, { items, panelCollapsed }) }),
-    footer !== void 0 && /* @__PURE__ */ jsx177("div", { ...trussProps91({
+    footer !== void 0 && /* @__PURE__ */ jsx177("div", { ...trussProps92({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -22244,7 +22324,7 @@ function SideNav(props) {
 }
 
 // src/components/Snackbar/useSnackbar.tsx
-import { useCallback as useCallback31, useEffect as useEffect36 } from "react";
+import { useCallback as useCallback31, useEffect as useEffect37 } from "react";
 function useSnackbar() {
   const { setNotices, setOffset } = useSnackbarContext();
   const onClose = useCallback31(
@@ -22294,7 +22374,7 @@ function useSnackbar() {
     [onClose, setNotices]
   );
   const closeNotice = useCallback31((id) => onClose(id), [onClose]);
-  const useSnackbarOffset = ({ bottom }) => useEffect36(() => {
+  const useSnackbarOffset = ({ bottom }) => useEffect37(() => {
     setOffset({ bottom });
     return () => setOffset({});
   }, [bottom]);
@@ -22305,7 +22385,7 @@ var snackbarId = 1;
 // src/components/Stepper.tsx
 import { useRef as useRef57 } from "react";
 import { useButton as useButton12, useFocusRing as useFocusRing16, useHover as useHover20 } from "react-aria";
-import { trussProps as trussProps92, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
+import { trussProps as trussProps93, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
 import { jsx as jsx178, jsxs as jsxs94 } from "react/jsx-runtime";
 import { createElement as createElement4 } from "react";
 var __maybeInc15 = (inc) => {
@@ -22326,7 +22406,7 @@ function Stepper(props) {
   const minStepWidth = 100;
   const gap = 8;
   return /* @__PURE__ */ jsxs94("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ jsx178("ol", { ...trussProps92({
+    /* @__PURE__ */ jsx178("ol", { ...trussProps93({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -22336,7 +22416,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ createElement4("li", { ...trussProps92({
+      return /* @__PURE__ */ createElement4("li", { ...trussProps93({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -22348,7 +22428,7 @@ function Stepper(props) {
         }]
       }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx178(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ jsx178("div", { ...trussProps92({
+    /* @__PURE__ */ jsx178("div", { ...trussProps93({
       marginTop: "mt1",
       backgroundColor: "bgGray300",
       height: "h_4px",
@@ -22359,7 +22439,7 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ jsx178("div", { ...trussProps92({
+    }), children: /* @__PURE__ */ jsx178("div", { ...trussProps93({
       backgroundColor: "bgBlue600",
       transition: "transition_width_200ms",
       height: "h100",
@@ -22400,7 +22480,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ jsxs94("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps92({
+  return /* @__PURE__ */ jsxs94("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps93({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -22468,7 +22548,7 @@ function StepIcon({
   if (state === "complete") {
     return /* @__PURE__ */ jsx178(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ jsx178("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx178("div", { ...trussProps92({
+  return /* @__PURE__ */ jsx178("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx178("div", { ...trussProps93({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -22483,7 +22563,7 @@ function StepIcon({
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 import { createPortal as createPortal7 } from "react-dom";
-import { trussProps as trussProps93 } from "@homebound/truss/runtime";
+import { trussProps as trussProps94 } from "@homebound/truss/runtime";
 import { jsx as jsx179, jsxs as jsxs95 } from "react/jsx-runtime";
 function SuperDrawerHeader(props) {
   const {
@@ -22509,7 +22589,7 @@ function SuperDrawerHeader(props) {
       ] }),
       props.right && /* @__PURE__ */ jsx179("div", { className: "fs0", children: props.right })
     ] }) : /* @__PURE__ */ jsx179("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ jsx179("div", { ...trussProps93({
+    !hideControls && /* @__PURE__ */ jsx179("div", { ...trussProps94({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
@@ -22782,7 +22862,7 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps94, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
+import { trussProps as trussProps95, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
 import { jsx as jsx183, jsxs as jsxs98 } from "react/jsx-runtime";
 function SideNavLayout(props) {
   const hasProvider = useHasSideNavLayoutProvider();
@@ -22807,7 +22887,7 @@ function SideNavLayoutContent(props) {
   const railCollapsedWidthPx = 56;
   const collapsed = navState === "collapse";
   const showRail = sideNav !== void 0 && navState !== "hidden";
-  const rail = showRail && /* @__PURE__ */ jsxs98("div", { ...trussProps94({
+  const rail = showRail && /* @__PURE__ */ jsxs98("div", { ...trussProps95({
     ...{
       position: "absolute",
       top: "top0",