@homebound/beam 3.34.0 → 3.35.0

package/dist/index.cjs

@@ -50,14 +50,14 @@ __export(index_exports, {
   BoundDateField: () => BoundDateField,
   BoundDateRangeField: () => BoundDateRangeField,
   BoundForm: () => BoundForm,
-  BoundIconCardField: () => BoundIconCardField,
-  BoundIconCardGroupField: () => BoundIconCardGroupField,
   BoundMultiLineSelectField: () => BoundMultiLineSelectField,
   BoundMultiSelectField: () => BoundMultiSelectField,
   BoundNumberField: () => BoundNumberField,
   BoundRadioGroupField: () => BoundRadioGroupField,
   BoundRichTextField: () => BoundRichTextField,
   BoundSelectAndTextField: () => BoundSelectAndTextField,
+  BoundSelectCardField: () => BoundSelectCardField,
+  BoundSelectCardGroupField: () => BoundSelectCardGroupField,
   BoundSelectField: () => BoundSelectField,
   BoundSwitchField: () => BoundSwitchField,
   BoundTextAreaField: () => BoundTextAreaField,
@@ -117,7 +117,6 @@ __export(index_exports, {
   HomeboundLogo: () => HomeboundLogo,
   Icon: () => Icon,
   IconButton: () => IconButton,
-  IconCard: () => IconCard,
   Icons: () => Icons,
   KEPT_GROUP: () => KEPT_GROUP,
   Loader: () => Loader,
@@ -159,6 +158,8 @@ __export(index_exports, {
   ScrollableContent: () => ScrollableContent,
   ScrollableFooter: () => ScrollableFooter,
   ScrollableParent: () => ScrollableParent,
+  SelectCard: () => SelectCard,
+  SelectCardGroup: () => SelectCardGroup,
   SelectField: () => SelectField,
   SelectToggle: () => SelectToggle,
   SideNav: () => SideNav,
@@ -207,13 +208,13 @@ __export(index_exports, {
   boundCheckboxGroupField: () => boundCheckboxGroupField,
   boundDateField: () => boundDateField,
   boundDateRangeField: () => boundDateRangeField,
-  boundIconCardField: () => boundIconCardField,
-  boundIconCardGroupField: () => boundIconCardGroupField,
   boundMultiSelectField: () => boundMultiSelectField,
   boundMultilineSelectField: () => boundMultilineSelectField,
   boundNumberField: () => boundNumberField,
   boundRadioGroupField: () => boundRadioGroupField,
   boundRichTextField: () => boundRichTextField,
+  boundSelectCardField: () => boundSelectCardField,
+  boundSelectCardGroupField: () => boundSelectCardGroupField,
   boundSelectField: () => boundSelectField,
   boundSwitchField: () => boundSwitchField,
   boundTextAreaField: () => boundTextAreaField,
@@ -253,6 +254,7 @@ __export(index_exports, {
   emptyCell: () => emptyCell,
   ensureClientSideSortValueIsSortable: () => ensureClientSideSortValueIsSortable,
   environmentBannerSizePx: () => environmentBannerSizePx,
+  fillRowStyles: () => fillRowStyles,
   filterTestIdPrefix: () => filterTestIdPrefix,
   formatDate: () => formatDate,
   formatDateRange: () => formatDateRange,
@@ -269,7 +271,6 @@ __export(index_exports, {
   getTableStyles: () => getTableStyles,
   headerRenderFn: () => headerRenderFn,
   hoverStyles: () => hoverStyles,
-  iconCardStylesHover: () => iconCardStylesHover,
   increment: () => increment,
   insertAtIndex: () => insertAtIndex,
   isContentColumn: () => isContentColumn,
@@ -311,7 +312,6 @@ __export(index_exports, {
   rowClickRenderFn: () => rowClickRenderFn,
   rowLinkRenderFn: () => rowLinkRenderFn,
   selectColumn: () => selectColumn,
-  selectedStyles: () => selectedStyles,
   setDefaultStyle: () => setDefaultStyle,
   setEnvironmentFavicon: () => setEnvironmentFavicon,
   setGridTableDefaults: () => setGridTableDefaults,
@@ -5342,7 +5342,21 @@ var Icons = {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M1.28481 17.9291C1.68761 18.0252 1.93583 18.4306 1.83991 18.8335L1.68148 19.4996H2.36957C2.78374 19.4997 3.11896 19.836 3.11896 20.2501C3.11871 20.6641 2.78359 20.9995 2.36957 20.9995H1.68148C0.712759 20.9995 -0.00204962 20.095 0.222017 19.1527L0.381609 18.4854C0.47768 18.0826 0.881956 17.8332 1.28481 17.9291ZM6.49699 19.4996L6.64849 19.5146C6.99008 19.5847 7.24638 19.8878 7.24638 20.2501C7.24616 20.6122 6.98991 20.9144 6.64849 20.9845L6.49699 20.9995H5.1208C4.70687 20.9994 4.37166 20.664 4.37141 20.2501C4.37141 19.836 4.70672 19.4997 5.1208 19.4996H6.49699ZM10.6244 19.4996C11.0386 19.4996 11.3738 19.8359 11.3738 20.2501C11.3736 20.6641 11.0384 20.9995 10.6244 20.9995H9.24822C8.8343 20.9994 8.49909 20.664 8.49883 20.2501C8.49883 19.836 8.83415 19.4998 9.24822 19.4996H10.6244ZM14.7518 19.4996C15.166 19.4996 15.5012 19.8359 15.5012 20.2501C15.501 20.6641 15.1659 20.9995 14.7518 20.9995H13.3756C12.9617 20.9994 12.6265 20.664 12.6263 20.2501C12.6263 19.836 12.9616 19.4998 13.3756 19.4996H14.7518ZM18.8793 19.4996C19.2935 19.4996 19.6298 19.8359 19.6298 20.2501C19.6296 20.6641 19.2933 20.9995 18.8793 20.9995H17.5031C17.0892 20.9993 16.7539 20.664 16.7537 20.2501C16.7537 19.836 17.089 19.4998 17.5031 19.4996H18.8793ZM22.7765 17.9511C23.1826 17.8707 23.5771 18.1348 23.6578 18.5409L23.7896 19.2082C23.9734 20.1356 23.2641 20.9995 22.3186 20.9995H21.6305C21.2166 20.9993 20.8814 20.664 20.8811 20.2501C20.8811 19.836 21.2164 19.4998 21.6305 19.4996H22.3186L22.1868 18.8335L22.1717 18.682C22.1737 18.333 22.421 18.0216 22.7765 17.9511ZM23.1293 15.8741C23.2099 16.2803 22.9456 16.6757 22.5395 16.7565C22.1333 16.8371 21.7378 16.5728 21.6571 16.1667L21.3923 14.8333L22.1289 14.6875L22.8644 14.5407L23.1293 15.8741ZM2.47481 16.1667C2.37869 16.5694 1.97442 16.8177 1.57161 16.7218C1.16887 16.6257 0.920596 16.2214 1.01651 15.8186L2.47481 16.1667ZM2.23658 13.9301C2.63953 14.026 2.88878 14.4303 2.79284 14.8333L2.47481 16.1667L1.74508 15.992L1.01651 15.8186L1.33338 14.4852C1.42946 14.0824 1.83377 13.8342 2.23658 13.9301ZM21.9821 13.9509C22.3883 13.8703 22.7837 14.1345 22.8644 14.5407L21.3923 14.8333C21.3117 14.4271 21.576 14.0317 21.9821 13.9509ZM22.3348 11.8739C22.4154 12.2802 22.1513 12.6756 21.745 12.7562C21.3894 12.8266 21.0426 12.6329 20.9077 12.311L20.8638 12.1664L20.5989 10.833L21.3344 10.6873L22.0699 10.5405L22.3348 11.8739ZM3.18951 9.92985C3.59224 10.0259 3.84052 10.4302 3.74461 10.833L3.42774 12.1664L3.37801 12.3099C3.23088 12.626 2.87702 12.8065 2.52454 12.7227C2.12159 12.6268 1.87234 12.2213 1.96828 11.8184L2.28631 10.485C2.38252 10.0824 2.78676 9.83396 3.18951 9.92985ZM21.1887 9.95182C21.5948 9.87125 21.9891 10.1345 22.0699 10.5405L20.5989 10.833C20.5183 10.4268 20.7826 10.0325 21.1887 9.95182ZM19.9374 5.99902C20.6533 5.99902 21.2703 6.50534 21.4096 7.20753L21.5414 7.87481L21.5553 8.02515C21.5534 8.37415 21.3073 8.68547 20.9516 8.75604C20.5963 8.82651 20.2496 8.63336 20.1144 8.31195L20.0704 8.16624L19.9374 7.50011H19.0828C18.6686 7.50011 18.3323 7.16379 18.3323 6.74957C18.3323 6.33535 18.6686 5.99902 19.0828 5.99902H19.9374ZM5.39373 5.99902C5.80794 5.99902 6.14427 6.33535 6.14427 6.74957C6.14427 7.16379 5.80794 7.50011 5.39373 7.50011H4.5391L4.37951 8.16624C4.28352 8.56913 3.87923 8.81843 3.47631 8.7225C3.07363 8.62647 2.82552 8.22204 2.92121 7.8193L3.07964 7.15202C3.24058 6.47639 3.84455 5.99902 4.5391 5.99902H5.39373ZM10.5273 5.99902C10.9415 5.99904 11.2778 6.33536 11.2778 6.74957C11.2778 7.16378 10.9415 7.5001 10.5273 7.50011H8.81571C8.40174 7.49982 8.06632 7.16361 8.06632 6.74957C8.06632 6.33553 8.40174 5.99931 8.81571 5.99902H10.5273ZM15.6608 5.99902C16.0748 5.99932 16.4102 6.33554 16.4102 6.74957C16.4102 7.1636 16.0748 7.49982 15.6608 7.50011H13.9493C13.535 7.50011 13.1987 7.16378 13.1987 6.74957C13.1987 6.33536 13.535 5.99903 13.9493 5.99902H15.6608Z" }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10.6309 14.7413V10.9913H13.6309V14.7413C13.6309 15.1538 13.9684 15.4913 14.3809 15.4913H16.6309C17.0434 15.4913 17.3809 15.1538 17.3809 14.7413V9.4913H18.6559C19.0009 9.4913 19.1659 9.0638 18.9034 8.8388L12.6334 3.19125C12.3484 2.93625 11.9134 2.93625 11.6284 3.19125L5.35831 8.8388C5.10331 9.0638 5.26081 9.4913 5.60581 9.4913H6.88082V14.7413C6.88082 15.1538 7.21833 15.4913 7.63083 15.4913H9.88085C10.2934 15.4913 10.6309 15.1538 10.6309 14.7413Z" })
   ] }),
-  houseFilled: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9.82369 19.9192V14.5155H14.1715V19.9192C14.1715 20.5137 14.6606 21 15.2584 21H18.5193C19.1171 21 19.6062 20.5137 19.6062 19.9192V12.3539H21.454C21.954 12.3539 22.1932 11.7379 21.8127 11.4137L12.7258 3.27559C12.3128 2.90814 11.6824 2.90814 11.2693 3.27559L2.18245 11.4137C1.81288 11.7379 2.04114 12.3539 2.54114 12.3539H4.38895V19.9192C4.38895 20.5137 4.87808 21 5.4759 21H8.73674C9.33456 21 9.82369 20.5137 9.82369 19.9192Z" }) })
+  houseFilled: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9.82369 19.9192V14.5155H14.1715V19.9192C14.1715 20.5137 14.6606 21 15.2584 21H18.5193C19.1171 21 19.6062 20.5137 19.6062 19.9192V12.3539H21.454C21.954 12.3539 22.1932 11.7379 21.8127 11.4137L12.7258 3.27559C12.3128 2.90814 11.6824 2.90814 11.2693 3.27559L2.18245 11.4137C1.81288 11.7379 2.04114 12.3539 2.54114 12.3539H4.38895V19.9192C4.38895 20.5137 4.87808 21 5.4759 21H8.73674C9.33456 21 9.82369 20.5137 9.82369 19.9192Z" }) }),
+  // Option Type / slot icons
+  single: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 15V17H5V15H9ZM9 9H5V17C3.96435 17 3.113 16.2128 3.01074 15.2041L3 15V9C3 7.89543 3.89543 7 5 7H9L9.2041 7.01074C10.2128 7.113 11 7.96435 11 9V15C11 16.1046 10.1046 17 9 17V9Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 15V17H15V15H19ZM19 9H15V17C13.9643 17 13.113 16.2128 13.0107 15.2041L13 15V9C13 7.89543 13.8954 7 15 7H19L19.2041 7.01074C20.2128 7.113 21 7.96435 21 9V15C21 16.1046 20.1046 17 19 17V9Z" })
+  ] }),
+  linked: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 15V17H5V15H9ZM19 15V17H15V15H19ZM19 9H15V17C13.8954 17 13 16.1046 13 15V9C13 7.89543 13.8954 7 15 7H19C20.1046 7 21 7.89543 21 9V15C21 16.1046 20.1046 17 19 17V9ZM9 9H5V17C3.89543 17 3 16.1046 3 15V9C3 7.89543 3.89543 7 5 7H9C10.1046 7 11 7.89543 11 9V15C11 16.1046 10.1046 17 9 17V9Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7 11H17V13H7V11Z" })
+  ] }),
+  package: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 15V17H5V15H9ZM9 9H5V17C3.96435 17 3.113 16.2128 3.01074 15.2041L3 15V9C3 7.89543 3.89543 7 5 7H9L9.2041 7.01074C10.2128 7.113 11 7.96435 11 9V15C11 16.1046 10.1046 17 9 17V9Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 18V20H4V18H20ZM22 16V8C22 6.89543 21.1046 6 20 6H4C2.89543 6 2 6.89543 2 8V16C2 17.1046 2.89543 18 4 18V20C1.79086 20 0 18.2091 0 16V8C0 5.79086 1.79086 4 4 4H20L20.2061 4.00488C22.3194 4.11211 24 5.85996 24 8V16L23.9951 16.2061C23.8913 18.2512 22.2512 19.8913 20.2061 19.9951L20 20V18C21.1046 18 22 17.1046 22 16Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 15V17H15V15H19ZM19 9H15V17C13.9643 17 13.113 16.2128 13.0107 15.2041L13 15V9C13 7.89543 13.8954 7 15 7H19L19.2041 7.01074C20.2128 7.113 21 7.96435 21 9V15C21 16.1046 20.1046 17 19 17V9Z" })
+  ] })
 };
 
 // src/components/PresentationContext.tsx
@@ -5502,7 +5516,7 @@ function Chips(props) {
 // src/components/Table/GridTable.tsx
 var import_memoize_one = __toESM(require("memoize-one"), 1);
 var import_mobx10 = require("mobx");
-var import_react80 = __toESM(require("react"), 1);
+var import_react81 = __toESM(require("react"), 1);
 var import_react_virtuoso2 = require("react-virtuoso");
 
 // src/components/Layout/ScrollableContent.tsx
@@ -5693,7 +5707,7 @@ var sizeToPixels = {
 // src/components/Table/GridTableApi.ts
 var import_mobx9 = require("mobx");
 var import_mobx_utils = require("mobx-utils");
-var import_react71 = require("react");
+var import_react72 = require("react");
 
 // src/components/Table/types.ts
 var nonKindGridColumnKeys = [
@@ -7762,7 +7776,7 @@ function PinToggle({ rowId }) {
 }
 
 // src/components/Table/components/SelectToggle.tsx
-var import_react70 = require("react");
+var import_react71 = require("react");
 
 // src/inputs/Autocomplete.tsx
 var import_react53 = require("react");
@@ -8744,7 +8758,7 @@ function memoizedTableStyles() {
           // Header's will add `lineClamp2` more locally in their renders.
           // Also `unset`-ing the white-space: nowrap defined in `cellCss` below.
           ...{
-            color: "gray700",
+            color: "gray900",
             fontWeight: "fw6",
             fontSize: "fz_12px",
             lineHeight: "lh_16px",
@@ -10392,7 +10406,7 @@ function Button(props) {
   } = (0, import_react_aria12.useHover)(ariaProps);
   const {
     baseStyles: baseStyles5,
-    hoverStyles: hoverStyles4,
+    hoverStyles: hoverStyles5,
     disabledStyles: disabledStyles4,
     pressedStyles: pressedStyles2,
     focusStyles: focusStyles2
@@ -10421,7 +10435,7 @@ function Button(props) {
         textTransform: "tt_inherit"
       },
       ...baseStyles5,
-      ...isHovered && !isPressed && !active ? hoverStyles4 : {},
+      ...isHovered && !isPressed && !active ? hoverStyles5 : {},
       ...isPressed || active ? pressedStyles2 : {},
       ...isDisabled || asyncInProgress ? {
         ...disabledStyles4,
@@ -10824,7 +10838,7 @@ function NavLink(props) {
     baseStyles: baseStyles5,
     activeStyles: activeStyles3,
     focusRingStyles: focusRingStyles2,
-    hoverStyles: hoverStyles4,
+    hoverStyles: hoverStyles5,
     disabledStyles: disabledStyles4,
     pressedStyles: pressedStyles2
   } = (0, import_react37.useMemo)(() => getNavLinkStyles(variant), [variant]);
@@ -10844,7 +10858,7 @@ function NavLink(props) {
       ...active && activeStyles3,
       ...isDisabled && disabledStyles4,
       ...isFocusVisible && focusRingStyles2,
-      ...isHovered && hoverStyles4,
+      ...isHovered && hoverStyles5,
       ...isPressed && pressedStyles2
     })
   };
@@ -13985,102 +13999,10 @@ function DateRangeField(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DateFieldBase, { ...props, mode: "range" });
 }
 
-// src/inputs/IconCard.tsx
+// src/inputs/MultiLineSelectField.tsx
 var import_react58 = require("react");
-var import_react_aria33 = require("react-aria");
-var import_react_stately11 = require("react-stately");
 var import_runtime45 = require("@homebound/truss/runtime");
 var import_jsx_runtime68 = require("react/jsx-runtime");
-function IconCard(props) {
-  const {
-    selected: isSelected = false,
-    disabled: isDisabled = false,
-    icon,
-    cardRef,
-    label,
-    tooltip,
-    ...otherProps
-  } = props;
-  const ref = useGetRef(cardRef);
-  const ariaProps = {
-    isSelected,
-    isDisabled,
-    ...otherProps
-  };
-  const checkboxProps = {
-    ...ariaProps,
-    "aria-label": label
-  };
-  const {
-    hoverProps,
-    isHovered
-  } = (0, import_react_aria33.useHover)({
-    isDisabled
-  });
-  const toggleState = (0, import_react_stately11.useToggleState)(ariaProps);
-  const {
-    inputProps
-  } = (0, import_react_aria33.useCheckbox)(checkboxProps, toggleState, ref);
-  const styles = (0, import_react58.useMemo)(() => ({
-    ...baseStyles3,
-    ...isHovered && iconCardStylesHover,
-    ...isSelected && selectedStyles,
-    ...isDisabled && disabledStyles2
-  }), [isDisabled, isHovered, isSelected]);
-  const tid = useTestIds(props, defaultTestId(label));
-  return maybeTooltip({
-    title: resolveTooltip(isDisabled, tooltip),
-    placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("button", { ...(0, import_runtime45.trussProps)(styles), ...hoverProps, onClick: toggleState.toggle, disabled: isDisabled, ...tid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react_aria33.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("input", { ref, ...inputProps, ...tid.value }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Icon, { icon, inc: 4, color: isDisabled ? "rgba(221, 220, 220, 1)" /* Gray300 */ : "rgba(36, 36, 36, 1)" /* Gray900 */ }),
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { ...(0, import_runtime45.trussProps)({
-        fontWeight: "fw4",
-        fontSize: "fz_12px",
-        lineHeight: "lh_16px",
-        ...isDisabled ? {
-          color: "gray300"
-        } : {}
-      }), children: label })
-    ] })
-  });
-}
-var baseStyles3 = {
-  display: "df",
-  flexDirection: "fdc",
-  alignItems: "aic",
-  justifyContent: "jcc",
-  width: "w_130px",
-  height: "h_114px",
-  borderStyle: "bss",
-  borderWidth: "bw1",
-  borderRadius: "br8",
-  borderColor: "bcGray300",
-  backgroundColor: "bgWhite",
-  gap: "gap_12px",
-  paddingTop: "pt2",
-  paddingBottom: "pb2",
-  paddingRight: "pr2",
-  paddingLeft: "pl2",
-  textAlign: "tac"
-};
-var selectedStyles = {
-  borderWidth: "bw2",
-  borderColor: "bcBlue500",
-  backgroundColor: "bgBlue50"
-};
-var disabledStyles2 = {
-  borderColor: "bcGray200",
-  backgroundColor: "bgGray50"
-};
-var iconCardStylesHover = {
-  backgroundColor: "bgGray100"
-};
-
-// src/inputs/MultiLineSelectField.tsx
-var import_react59 = require("react");
-var import_runtime46 = require("@homebound/truss/runtime");
-var import_jsx_runtime69 = require("react/jsx-runtime");
 function MultiLineSelectField(props) {
   const {
     options,
@@ -14092,29 +14014,29 @@ function MultiLineSelectField(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(props, "");
-  const [isDisplayed, setIsDisplayed] = (0, import_react59.useState)(true);
+  const [isDisplayed, setIsDisplayed] = (0, import_react58.useState)(true);
   const currentOptions = options.filter((o) => !values.includes(getOptionValue(o)));
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { ...(0, import_runtime46.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { ...(0, import_runtime45.trussProps)({
     marginTop: "mt1",
     ...labelStyle === "left" ? {
       display: "df"
     } : {}
   }), children: [
-    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { ...(0, import_runtime46.trussProps)({
+    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { ...(0, import_runtime45.trussProps)({
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Label, { ...tid.label, label: props.label }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { ...(0, import_runtime46.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Label, { ...tid.label, label: props.label }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { ...(0, import_runtime45.trussProps)({
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
     }), children: [
       values.map((value, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "mb1 pl1 df", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "wsnw oh to_ellipsis w100", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SelectField, { ...otherProps, ...tid.selectField, labelStyle: "hidden", value, onSelect: () => {
+        return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "mb1 pl1 df", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "wsnw oh to_ellipsis w100", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(SelectField, { ...otherProps, ...tid.selectField, labelStyle: "hidden", value, onSelect: () => {
           }, options, getOptionValue, getOptionLabel, compact: true, readOnly: true }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Button, { ...tid.deleteSelected, variant: "tertiary", label: "", "aria-label": `Delete selected ${otherProps.label}`, icon: "x", onClick: () => {
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Button, { ...tid.deleteSelected, variant: "tertiary", label: "", "aria-label": `Delete selected ${otherProps.label}`, icon: "x", onClick: () => {
             const selectedOptions = options.filter((o) => values.includes(getOptionValue(o)) && getOptionValue(o) !== value);
             const selectedValues = selectedOptions.map((o) => getOptionValue(o));
             onSelect(selectedValues, selectedOptions);
@@ -14122,17 +14044,17 @@ function MultiLineSelectField(props) {
           } })
         ] }, index);
       }),
-      isDisplayed && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mb1", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SelectField, { ...tid.selectField, label: otherProps.label, labelStyle: "hidden", getOptionValue, getOptionLabel, value: "", onSelect: (value) => {
+      isDisplayed && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "mb1", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(SelectField, { ...tid.selectField, label: otherProps.label, labelStyle: "hidden", getOptionValue, getOptionLabel, value: "", onSelect: (value) => {
         onSelect([...values, value], options);
         setIsDisplayed(false);
       }, options: currentOptions, disabled: otherProps.disabled }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Button, { ...tid.addAnother, label: "Add Another", variant: "tertiary", onClick: () => setIsDisplayed(true), disabled: isDisplayed || currentOptions.length === 0 })
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Button, { ...tid.addAnother, label: "Add Another", variant: "tertiary", onClick: () => setIsDisplayed(true), disabled: isDisplayed || currentOptions.length === 0 })
     ] })
   ] });
 }
 
 // src/inputs/MultiSelectField.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 function MultiSelectField(props) {
   const {
     getOptionValue = (opt) => opt.id,
@@ -14141,15 +14063,15 @@ function MultiSelectField(props) {
     // if unset, assume O implements HasName
     ...otherProps
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ComboBoxBase, { multiselect: true, getOptionLabel, getOptionValue, ...otherProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ComboBoxBase, { multiselect: true, getOptionLabel, getOptionValue, ...otherProps });
 }
 
 // src/inputs/NumberField.tsx
 var import_number = require("@internationalized/number");
-var import_react60 = require("react");
-var import_react_aria34 = require("react-aria");
-var import_react_stately12 = require("react-stately");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_react59 = require("react");
+var import_react_aria33 = require("react-aria");
+var import_react_stately11 = require("react-stately");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 function NumberField(props) {
   const {
     fieldProps
@@ -14189,7 +14111,7 @@ function NumberField(props) {
   const isReadOnly = !!readOnly;
   const factor = type === "percent" ? 100 : type === "cents" ? 100 : type === "mills" ? 1e3 : type === "basisPoints" ? 1e4 : 1;
   const signDisplay = displayDirection ? "always" : "auto";
-  const defaultFormatOptions = (0, import_react60.useMemo)(() => ({
+  const defaultFormatOptions = (0, import_react59.useMemo)(() => ({
     [truncate ? "maximumFractionDigits" : "minimumFractionDigits"]: numFractionDigits,
     ...numIntegerDigits !== void 0 && {
       minimumIntegerDigits: numIntegerDigits
@@ -14199,8 +14121,8 @@ function NumberField(props) {
   }), [truncate, numIntegerDigits, useGrouping, signDisplay, numFractionDigits]);
   const {
     locale
-  } = (0, import_react_aria34.useLocale)();
-  const formatOptions = (0, import_react60.useMemo)(() => {
+  } = (0, import_react_aria33.useLocale)();
+  const formatOptions = (0, import_react59.useMemo)(() => {
     if (numberFormatOptions !== void 0) {
       return numberFormatOptions;
     }
@@ -14232,13 +14154,13 @@ function NumberField(props) {
       ...typeFormat
     };
   }, [type, numberFormatOptions, defaultFormatOptions, numFractionDigits]);
-  const numberParser = (0, import_react60.useMemo)(() => new import_number.NumberParser(locale, formatOptions), [locale, formatOptions]);
-  const valueRef = (0, import_react60.useRef)({
+  const numberParser = (0, import_react59.useMemo)(() => new import_number.NumberParser(locale, formatOptions), [locale, formatOptions]);
+  const valueRef = (0, import_react59.useRef)({
     wip: false
   });
-  const lastSentRef = (0, import_react60.useRef)(void 0);
-  const focusValueRef = (0, import_react60.useRef)(void 0);
-  const [, forceRender] = (0, import_react60.useState)(0);
+  const lastSentRef = (0, import_react59.useRef)(void 0);
+  const focusValueRef = (0, import_react59.useRef)(void 0);
+  const [, forceRender] = (0, import_react59.useState)(0);
   const propValue = value === void 0 ? Number.NaN : value / factor;
   if (valueRef.current.wip && !Object.is(valueRef.current.value, propValue)) {
     const lastSentInternal = lastSentRef.current === void 0 ? Number.NaN : lastSentRef.current / factor;
@@ -14284,17 +14206,17 @@ function NumberField(props) {
     formatOptions,
     ...otherProps
   };
-  const state = (0, import_react_stately12.useNumberFieldState)(useProps);
-  const inputRef = (0, import_react60.useRef)(null);
+  const state = (0, import_react_stately11.useNumberFieldState)(useProps);
+  const inputRef = (0, import_react59.useRef)(null);
   const {
     labelProps,
     inputProps,
     groupProps
-  } = (0, import_react_aria34.useNumberField)(useProps, state, inputRef);
+  } = (0, import_react_aria33.useNumberField)(useProps, state, inputRef);
   if (readOnly && !inputRef.current) {
     inputRef.current = document.createElement("input");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     TextFieldBase,
     {
       xss: {
@@ -14305,7 +14227,7 @@ function NumberField(props) {
       labelProps,
       label,
       required,
-      inputProps: (0, import_react_aria34.mergeProps)(inputProps, {
+      inputProps: (0, import_react_aria33.mergeProps)(inputProps, {
         size: sizeToContent ? String(inputProps.value ?? "").length || 1 : void 0
       }),
       onChange: (rawInputValue) => {
@@ -14337,11 +14259,11 @@ function formatValue(value, factor, numFractionDigits, numIntegerDigits, positiv
 }
 
 // src/inputs/RadioGroupField.tsx
-var import_react61 = require("react");
-var import_react_aria35 = require("react-aria");
-var import_react_stately13 = require("react-stately");
-var import_runtime47 = require("@homebound/truss/runtime");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_react60 = require("react");
+var import_react_aria34 = require("react-aria");
+var import_react_stately12 = require("react-stately");
+var import_runtime46 = require("@homebound/truss/runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var nextNameId = 0;
 function RadioGroupField(props) {
   const {
@@ -14357,8 +14279,8 @@ function RadioGroupField(props) {
     layout = "vertical",
     ...otherProps
   } = props;
-  const name = (0, import_react61.useMemo)(() => `radio-group-${++nextNameId}`, []);
-  const state = (0, import_react_stately13.useRadioGroupState)({
+  const name = (0, import_react60.useMemo)(() => `radio-group-${++nextNameId}`, []);
+  const state = (0, import_react_stately12.useRadioGroupState)({
     name,
     value,
     onChange: (value2) => onChange(value2),
@@ -14370,14 +14292,14 @@ function RadioGroupField(props) {
   const {
     labelProps,
     radioGroupProps
-  } = (0, import_react_aria35.useRadioGroup)({
+  } = (0, import_react_aria34.useRadioGroup)({
     label,
     isDisabled: disabled,
     isRequired: required
   }, state);
   return (
     // default styling to position `<Label />` above.
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { ...(0, import_runtime47.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { ...(0, import_runtime46.trussProps)({
       display: "df",
       flexDirection: "fdc",
       gap: "gap1",
@@ -14388,9 +14310,9 @@ function RadioGroupField(props) {
         justifyContent: "jcsb"
       } : {}
     }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: labelStyle === "hidden" }),
-      /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { ...radioGroupProps, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { ...(0, import_runtime47.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: labelStyle === "hidden" }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { ...radioGroupProps, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { ...(0, import_runtime46.trussProps)({
           display: "df",
           ...layout === "horizontal" ? {
             flexDirection: "fdr",
@@ -14401,14 +14323,14 @@ function RadioGroupField(props) {
             gap: "gap1"
           }
         }), children: options.map((option) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_react61.Fragment, { children: maybeTooltip({
+          return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_react60.Fragment, { children: maybeTooltip({
             title: resolveTooltip(option.disabled),
             placement: "bottom",
-            children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Radio, { parentId: name, option, state, isOptionDisabled: !!option.disabled, ...otherProps, ...tid[option.value] })
+            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Radio, { parentId: name, option, state, isOptionDisabled: !!option.disabled, ...otherProps, ...tid[option.value] })
           }) }, option.value);
         }) }),
-        errorMsg && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ErrorMessage, { errorMsg, ...tid.errorMsg }),
-        helperText && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(HelperText, { helperText })
+        errorMsg && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ErrorMessage, { errorMsg, ...tid.errorMsg }),
+        helperText && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(HelperText, { helperText })
       ] })
     ] })
   );
@@ -14427,11 +14349,11 @@ function Radio(props) {
   } = props;
   const labelId = `${parentId}-${value}-label`;
   const descriptionId = `${parentId}-${value}-description`;
-  const ref = (0, import_react61.useRef)(null);
+  const ref = (0, import_react60.useRef)(null);
   const {
     inputProps,
     isDisabled
-  } = (0, import_react_aria35.useRadio)({
+  } = (0, import_react_aria34.useRadio)({
     value,
     "aria-labelledby": labelId,
     isDisabled: isOptionDisabled
@@ -14440,26 +14362,26 @@ function Radio(props) {
   const {
     focusProps,
     isFocusVisible
-  } = (0, import_react_aria35.useFocusRing)();
+  } = (0, import_react_aria34.useFocusRing)();
   const {
     hoverProps,
     isHovered
-  } = (0, import_react_aria35.useHover)({
+  } = (0, import_react_aria34.useHover)({
     isDisabled: disabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("label", { ...(0, import_runtime47.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("label", { ...(0, import_runtime46.trussProps)({
     display: "df",
     cursor: "cursorPointer",
     ...disabled ? {
       cursor: "cursor_initial"
     } : {}
   }), ...hoverProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       "input",
       {
         type: "radio",
         ref,
-        ...(0, import_runtime47.trussProps)({
+        ...(0, import_runtime46.trussProps)({
           ...radioReset,
           ...radioDefault,
           ...!disabled && state.selectedValue === value ? radioChecked : radioUnchecked,
@@ -14479,8 +14401,8 @@ function Radio(props) {
         ...others
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { id: labelId, ...(0, import_runtime47.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { id: labelId, ...(0, import_runtime46.trussProps)({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -14491,7 +14413,7 @@ function Radio(props) {
       }), ...description ? {
         "aria-describedby": descriptionId
       } : {}, children: label }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { id: descriptionId, ...(0, import_runtime47.trussProps)({
+      description && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { id: descriptionId, ...(0, import_runtime46.trussProps)({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -14555,7 +14477,7 @@ var radioChecked = {
   // And use backgroundImage to draw a white dot in the middle of the background
   ...{
     backgroundImage: ["backgroundImage_var", {
-      "--backgroundImage": (0, import_runtime47.maybeCssVar)(`url("${whiteCircle}")`)
+      "--backgroundImage": (0, import_runtime46.maybeCssVar)(`url("${whiteCircle}")`)
     }]
   },
   // Make our border the same color as the dot
@@ -14596,19 +14518,19 @@ var radioDisabled = {
 
 // src/inputs/RichTextField.tsx
 var import_dompurify = __toESM(require("dompurify"), 1);
-var import_react63 = require("react");
+var import_react62 = require("react");
 
 // src/inputs/RichTextField.mock.tsx
 var import_change_case5 = require("change-case");
-var import_react62 = require("react");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_react61 = require("react");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 function RichTextFieldMock(props) {
   const { onBlur = () => {
   }, onFocus = () => {
   }, readOnly } = props;
-  const [value, setValue] = (0, import_react62.useState)(props.value || "");
+  const [value, setValue] = (0, import_react61.useState)(props.value || "");
   const tid = useTestIds(props, defaultTestId2(props.label || "richTextField"));
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     "input",
     {
       type: "text",
@@ -14634,8 +14556,8 @@ var import_tributejs = __toESM(require("tributejs"), 1);
 var import_tribute = require("tributejs/dist/tribute.css");
 var import_trix = require("trix/dist/trix");
 var import_trix2 = require("trix/dist/trix.css");
-var import_runtime48 = require("@homebound/truss/runtime");
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_runtime47 = require("@homebound/truss/runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var RichTextField = withTestMock(RichTextFieldImpl, RichTextFieldMock);
 function RichTextFieldImpl(props) {
   const {
@@ -14651,16 +14573,16 @@ function RichTextFieldImpl(props) {
     readOnly,
     fullWidth = fieldProps?.fullWidth ?? false
   } = props;
-  const [editor, setEditor] = (0, import_react63.useState)();
-  const editorElement = (0, import_react63.useRef)();
-  const currentHtml = (0, import_react63.useRef)(void 0);
-  const onChangeRef = (0, import_react63.useRef)(onChange);
+  const [editor, setEditor] = (0, import_react62.useState)();
+  const editorElement = (0, import_react62.useRef)();
+  const currentHtml = (0, import_react62.useRef)(void 0);
+  const onChangeRef = (0, import_react62.useRef)(onChange);
   onChangeRef.current = onChange;
-  const onBlurRef = (0, import_react63.useRef)(onBlur);
+  const onBlurRef = (0, import_react62.useRef)(onBlur);
   onBlurRef.current = onBlur;
-  const onFocusRef = (0, import_react63.useRef)(onFocus);
+  const onFocusRef = (0, import_react62.useRef)(onFocus);
   onFocusRef.current = onFocus;
-  const id = (0, import_react63.useMemo)(() => {
+  const id = (0, import_react62.useMemo)(() => {
     if (readOnly) return;
     const id2 = `trix-editor-${trixId}`;
     trixId++;
@@ -14704,7 +14626,7 @@ function RichTextFieldImpl(props) {
     window.addEventListener("trix-initialize", onEditorInit);
     return id2;
   }, [readOnly]);
-  (0, import_react63.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     if (!readOnly && editor && value !== currentHtml.current) {
       editor.loadHTML(value || "");
     }
@@ -14714,16 +14636,16 @@ function RichTextFieldImpl(props) {
     autoFocus
   } = props;
   if (!readOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { ...(0, import_runtime48.trussProps)({
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { ...(0, import_runtime47.trussProps)({
       width: "w100",
       ...!fullWidth ? {
         maxWidth: "maxw_550px"
       } : {}
     }), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Label, { labelProps: {}, label }),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "beam-trix-editor", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("input", { type: "hidden", id: `input-${id}`, value }),
-        (0, import_react63.createElement)("trix-editor", {
+      label && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Label, { labelProps: {}, label }),
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "beam-trix-editor", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("input", { type: "hidden", id: `input-${id}`, value }),
+        (0, import_react62.createElement)("trix-editor", {
           id,
           input: `input-${id}`,
           // Autofocus attribute is case sensitive since this is standard HTML
@@ -14737,14 +14659,14 @@ function RichTextFieldImpl(props) {
       ] })
     ] });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { ...(0, import_runtime48.trussProps)({
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { ...(0, import_runtime47.trussProps)({
       width: "w100",
       ...!fullWidth ? {
         maxWidth: "maxw_550px"
       } : {}
     }), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Label, { label }),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "mh_120px bgWhite fw4 fz_14px lh_20px gray900 bss bw1 pt1 pb1 pr1 pl1 br4 bcGray300", dangerouslySetInnerHTML: {
+      label && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Label, { label }),
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "mh_120px bgWhite fw4 fz_14px lh_20px gray900 bss bw1 pt1 pb1 pr1 pl1 br4 bcGray300", dangerouslySetInnerHTML: {
         __html: import_dompurify.default.sanitize(value) || placeholder || ""
       }, "data-readonly": "true" })
     ] });
@@ -14777,9 +14699,222 @@ function extractIdsFromMentions(mergeTags, content) {
 }
 var trixId = 1;
 
-// src/inputs/SelectField.tsx
+// src/inputs/SelectCard.tsx
+var import_react63 = require("react");
+var import_react_aria35 = require("react-aria");
+var import_react_stately13 = require("react-stately");
+var import_runtime48 = require("@homebound/truss/runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
+function SelectCard(props) {
+  const {
+    selected: isSelected = false,
+    disabled: isDisabled = false,
+    icon,
+    cardRef,
+    label,
+    description,
+    tooltip,
+    xss,
+    ...otherProps
+  } = props;
+  const ref = useGetRef(cardRef);
+  const ariaProps = {
+    isSelected,
+    isDisabled,
+    ...otherProps
+  };
+  const checkboxProps = {
+    ...ariaProps,
+    "aria-label": label
+  };
+  const {
+    hoverProps,
+    isHovered
+  } = (0, import_react_aria35.useHover)({
+    isDisabled
+  });
+  const toggleState = (0, import_react_stately13.useToggleState)(ariaProps);
+  const {
+    inputProps
+  } = (0, import_react_aria35.useCheckbox)(checkboxProps, toggleState, ref);
+  const styles = (0, import_react63.useMemo)(() => ({
+    ...baseStyles3,
+    // A label-only card is a fixed compact box; a description card fills the row and stretches.
+    ...description ? fillRowStyles : fixedSizeStyles,
+    // Description cards top-align so multi-line copy lines up; label-only cards center.
+    ...description ? {
+      justifyContent: "jcfs"
+    } : {
+      justifyContent: "jcc"
+    },
+    ...isHovered && !isDisabled && hoverStyles2,
+    ...isSelected && !isDisabled && selectedStyles,
+    ...isDisabled && (isSelected ? disabledSelectedStyles : disabledStyles2),
+    // Spread last so a parent can override sizing (see `SelectCardGroup`).
+    ...xss
+  }), [description, isDisabled, isHovered, isSelected, xss]);
+  const tid = useTestIds(props, defaultTestId(label));
+  return maybeTooltip({
+    title: resolveTooltip(isDisabled, tooltip),
+    placement: "top",
+    children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("button", { ...(0, import_runtime48.trussProps)(styles), ...hoverProps, onClick: toggleState.toggle, disabled: isDisabled, ...tid, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react_aria35.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("input", { ref, ...inputProps, ...tid.value }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Icon, { icon, inc: 4, color: isDisabled ? "rgba(100, 100, 100, 1)" /* Gray700 */ : "rgba(36, 36, 36, 1)" /* Gray900 */ }),
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { ...(0, import_runtime48.trussProps)(copyStyles), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { ...(0, import_runtime48.trussProps)({
+          fontWeight: "fw6",
+          fontSize: "fz_14px",
+          lineHeight: "lh_20px",
+          ...isDisabled ? {
+            color: "gray700"
+          } : {}
+        }), children: label }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "fw4 fz_12px lh_16px gray700", children: description })
+      ] })
+    ] })
+  });
+}
+var baseStyles3 = {
+  display: "df",
+  flexDirection: "fdc",
+  alignItems: "aic",
+  borderStyle: "bss",
+  borderWidth: "bw1",
+  borderRadius: "br12",
+  backgroundColor: "bgWhite",
+  borderColor: "bcGray300",
+  gap: "gap1",
+  paddingLeft: "pl2",
+  paddingRight: "pr2",
+  paddingTop: "pt3",
+  paddingBottom: "pb3",
+  textAlign: "tac"
+};
+var fixedSizeStyles = {
+  width: "w_130px",
+  height: "h_114px"
+};
+var fillRowStyles = {
+  flexBasis: "fb_0",
+  flexGrow: "fg1",
+  flexShrink: "fs0",
+  alignSelf: "asStretch",
+  minWidth: "mw_187px",
+  width: "wa",
+  height: "ha"
+};
+var copyStyles = {
+  display: "df",
+  flexDirection: "fdc",
+  alignItems: "aic",
+  gap: "gap_4px",
+  width: "w100"
+};
+var hoverStyles2 = {
+  borderColor: "bcBlue600"
+};
+var selectedStyles = {
+  borderColor: "bcBlue600",
+  backgroundColor: "bgBlue50"
+};
+var disabledStyles2 = {
+  backgroundColor: "bgGray50",
+  borderColor: "bcGray300"
+};
+var disabledSelectedStyles = {
+  backgroundColor: "bgGray100",
+  borderColor: "bcGray300"
+};
+
+// src/inputs/SelectCardGroup.tsx
 var import_react64 = require("react");
+var import_react_aria36 = require("react-aria");
+var import_runtime49 = require("@homebound/truss/runtime");
 var import_jsx_runtime75 = require("react/jsx-runtime");
+function SelectCardGroup(props) {
+  const {
+    fieldProps
+  } = usePresentationContext();
+  const {
+    options,
+    label,
+    labelStyle = fieldProps?.labelStyle ?? "above",
+    values,
+    errorMsg,
+    helperText,
+    disabled: isDisabled = false,
+    onChange
+  } = props;
+  const [selected, setSelected] = (0, import_react64.useState)(values);
+  const exclusiveOptions = (0, import_react64.useMemo)(() => options.filter((o) => o.exclusive), [options]);
+  const hasDescription = (0, import_react64.useMemo)(() => options.some((o) => o.description), [options]);
+  const toggleValue = (0, import_react64.useCallback)((value) => {
+    if (isDisabled) return;
+    const option = options.find((o) => o.value === value);
+    if (!option) return;
+    let newSelected = [];
+    if (selected.includes(value)) {
+      newSelected = selected.filter((v) => v !== value);
+    } else {
+      if (option.exclusive) {
+        newSelected = [value];
+      } else {
+        newSelected = [...selected, value];
+        newSelected = newSelected.filter((v) => !exclusiveOptions.some((o) => o.value === v));
+      }
+    }
+    setSelected(newSelected);
+    onChange(newSelected);
+  }, [exclusiveOptions, isDisabled, onChange, options, selected]);
+  const tid = useTestIds(props);
+  const {
+    labelProps,
+    fieldProps: fieldPropsAria
+  } = (0, import_react_aria36.useField)(props);
+  const groupProps = (0, import_react_aria36.mergeProps)(tid, {
+    role: "group",
+    "aria-disabled": isDisabled || void 0,
+    ...fieldPropsAria
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { ...groupProps, children: [
+    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { ...(0, import_runtime49.trussProps)({
+      ...labelStyle === "left" ? {
+        width: "w50"
+      } : {}
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Label, { label, ...labelProps, ...tid.label }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "df gap2 flexWrap_wrap", children: options.map((option) => {
+      const {
+        icon,
+        label: label2,
+        description,
+        disabled,
+        tooltip
+      } = option;
+      const isSelected = selected.includes(option.value);
+      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        SelectCard,
+        {
+          icon,
+          label: label2,
+          description,
+          xss: hasDescription ? fillRowStyles : void 0,
+          selected: isSelected,
+          disabled,
+          tooltip,
+          onChange: () => toggleValue(option.value),
+          ...tid[option.label]
+        },
+        option.label
+      );
+    }) }),
+    errorMsg && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ErrorMessage, { errorMsg, ...tid.errorMsg }),
+    helperText && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(HelperText, { helperText, ...tid.helperText })
+  ] });
+}
+
+// src/inputs/SelectField.tsx
+var import_react65 = require("react");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 function SelectField(props) {
   const {
     getOptionValue = defaultOptionValue,
@@ -14789,8 +14924,8 @@ function SelectField(props) {
     value,
     ...otherProps
   } = props;
-  const values = (0, import_react64.useMemo)(() => [value], [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  const values = (0, import_react65.useMemo)(() => [value], [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     ComboBoxBase,
     {
       ...otherProps,
@@ -14809,11 +14944,11 @@ function SelectField(props) {
 }
 
 // src/inputs/Switch.tsx
-var import_react65 = require("react");
-var import_react_aria36 = require("react-aria");
-var import_runtime49 = require("@homebound/truss/runtime");
-var import_jsx_runtime76 = require("react/jsx-runtime");
-var __maybeInc8 = (inc) => {
+var import_react66 = require("react");
+var import_react_aria37 = require("react-aria");
+var import_runtime50 = require("@homebound/truss/runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var __maybeInc8 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Switch(props) {
@@ -14842,26 +14977,26 @@ function Switch(props) {
     ...otherProps
   };
   const state = toToggleState(isSelected, onChange);
-  const ref = (0, import_react65.useRef)(null);
+  const ref = (0, import_react66.useRef)(null);
   const {
     inputProps
-  } = (0, import_react_aria36.useSwitch)({
+  } = (0, import_react_aria37.useSwitch)({
     ...ariaProps,
     "aria-label": label
   }, state, ref);
   const {
     isFocusVisible: isFocusVisibleFromEvents,
     focusProps
-  } = (0, import_react_aria36.useFocusRing)(otherProps);
+  } = (0, import_react_aria37.useFocusRing)(otherProps);
   const {
     hoverProps,
     isHovered: isHoveredFromEvents
-  } = (0, import_react_aria36.useHover)(ariaProps);
+  } = (0, import_react_aria37.useHover)(ariaProps);
   const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
   const tooltip = resolveTooltip(disabled, props.tooltip);
   const tid = useTestIds(otherProps, label);
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("label", { ...hoverProps, ...(0, import_runtime49.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("label", { ...hoverProps, ...(0, import_runtime50.trussProps)({
     ...{
       position: "relative",
       cursor: "cursorPointer",
@@ -14899,18 +15034,18 @@ function Switch(props) {
       color: "gray400"
     }
   }), children: [
-    labelStyle !== "inline" && labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Label, { label, tooltip, xss: {
+    labelStyle !== "inline" && labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Label, { label, tooltip, xss: {
       ...labelStyle === "filter" ? {
         color: "gray900"
       } : {}
     }, inline: labelStyle === "left" || labelStyle === "filter" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { ...(0, import_runtime49.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { ...(0, import_runtime50.trussProps)({
       ...labelStyle === "left" ? {
         width: ["w_var", {
-          "--width": (0, import_runtime49.maybeCssVar)(__maybeInc8(labelLeftFieldWidth))
+          "--width": (0, import_runtime50.maybeCssVar)(__maybeInc8(labelLeftFieldWidth))
         }]
       } : {}
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { "aria-hidden": "true", ...(0, import_runtime49.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { "aria-hidden": "true", ...(0, import_runtime50.trussProps)({
       ...{
         width: ["w_var", {
           "--width": `${toggleWidth(compact)}px`
@@ -14932,14 +15067,14 @@ function Switch(props) {
         backgroundColor: "bgBlue700"
       },
       ...isSelected && isHovered && switchSelectedHoverStyles
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { ...(0, import_runtime49.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { ...(0, import_runtime50.trussProps)({
       ...switchCircleDefaultStyles(compact),
       ...isDisabled && {
         backgroundColor: "bgGray100"
       },
       ...isSelected && switchCircleSelectedStyles(compact)
-    }), children: withIcon && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { icon: isSelected ? "check" : "x", color: isSelected ? "rgba(29, 78, 216, 1)" /* Blue700 */ : "rgba(201, 201, 201, 1)" /* Gray400 */, inc: toggleHeight(compact) / 16 }) }) }) }),
-    labelStyle === "inline" && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Label, { label, tooltip, inline: true, xss: {
+    }), children: withIcon && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Icon, { icon: isSelected ? "check" : "x", color: isSelected ? "rgba(29, 78, 216, 1)" /* Blue700 */ : "rgba(201, 201, 201, 1)" /* Gray400 */, inc: toggleHeight(compact) / 16 }) }) }) }),
+    labelStyle === "inline" && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Label, { label, tooltip, inline: true, xss: {
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -14948,7 +15083,7 @@ function Switch(props) {
         lineHeight: "lineHeight_1"
       } : {}
     } }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_react_aria36.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("input", { ref, ...inputProps, ...focusProps, ...tid }) })
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react_aria37.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("input", { ref, ...inputProps, ...focusProps, ...tid }) })
   ] });
 }
 var toggleHeight = (isCompact) => isCompact ? 16 : 24;
@@ -14988,15 +15123,15 @@ function switchCircleDefaultStyles(isCompact) {
 function switchCircleSelectedStyles(isCompact) {
   return {
     left: ["left_var", {
-      "--left": (0, import_runtime49.maybeCssVar)(__maybeInc8(`calc(100% - ${circleDiameter(isCompact)}px - 2px)`))
+      "--left": (0, import_runtime50.maybeCssVar)(__maybeInc8(`calc(100% - ${circleDiameter(isCompact)}px - 2px)`))
     }]
   };
 }
 
 // src/inputs/TextAreaField.tsx
-var import_react66 = require("react");
-var import_react_aria37 = require("react-aria");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_react67 = require("react");
+var import_react_aria38 = require("react-aria");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 function TextAreaField(props) {
   const {
     value = "",
@@ -15012,10 +15147,10 @@ function TextAreaField(props) {
   const isDisabled = !!disabled;
   const isReadOnly = !!readOnly;
   const textFieldProps = { ...otherProps, value, isDisabled, isReadOnly };
-  const inputRef = (0, import_react66.useRef)(null);
-  const inputWrapRef = (0, import_react66.useRef)(null);
+  const inputRef = (0, import_react67.useRef)(null);
+  const inputWrapRef = (0, import_react67.useRef)(null);
   useGrowingTextField({ inputRef, inputWrapRef, value, maxLines });
-  const { labelProps, inputProps } = (0, import_react_aria37.useTextField)(
+  const { labelProps, inputProps } = (0, import_react_aria38.useTextField)(
     {
       ...textFieldProps,
       inputElementType: "textarea",
@@ -15035,10 +15170,10 @@ function TextAreaField(props) {
     },
     inputRef
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     TextFieldBase,
     {
-      ...(0, import_react_aria37.mergeProps)(otherProps, { onBlur, onFocus }),
+      ...(0, import_react_aria38.mergeProps)(otherProps, { onBlur, onFocus }),
       multiline: true,
       labelProps,
       inputProps,
@@ -15051,9 +15186,9 @@ function TextAreaField(props) {
 }
 
 // src/inputs/TextField.tsx
-var import_react67 = require("react");
-var import_react_aria38 = require("react-aria");
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_react68 = require("react");
+var import_react_aria39 = require("react-aria");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 function TextField(props) {
   const {
     disabled = false,
@@ -15079,8 +15214,8 @@ function TextField(props) {
     validationState: errorMsg ? "invalid" : "valid",
     value
   };
-  const inputRef = (0, import_react67.useRef)(null);
-  const { labelProps, inputProps } = (0, import_react_aria38.useTextField)(
+  const inputRef = (0, import_react68.useRef)(null);
+  const { labelProps, inputProps } = (0, import_react_aria39.useTextField)(
     {
       ...textFieldProps,
       onKeyDown: (e) => {
@@ -15099,10 +15234,10 @@ function TextField(props) {
       focus: () => inputRef.current && inputRef.current.focus()
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     TextFieldBase,
     {
-      ...(0, import_react_aria38.mergeProps)(textFieldProps, { onBlur, onFocus }),
+      ...(0, import_react_aria39.mergeProps)(textFieldProps, { onBlur, onFocus }),
       errorMsg,
       required,
       labelProps,
@@ -15115,11 +15250,11 @@ function TextField(props) {
 }
 
 // src/inputs/ToggleButton.tsx
-var import_react68 = require("react");
-var import_react_aria39 = require("react-aria");
+var import_react69 = require("react");
+var import_react_aria40 = require("react-aria");
 var import_react_stately14 = require("react-stately");
-var import_runtime50 = require("@homebound/truss/runtime");
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_runtime51 = require("@homebound/truss/runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 function ToggleButton(props) {
   const {
     selected: isSelected = false,
@@ -15130,7 +15265,7 @@ function ToggleButton(props) {
     __storyState,
     ...otherProps
   } = props;
-  const [asyncInProgress, setAsyncInProgress] = (0, import_react68.useState)(false);
+  const [asyncInProgress, setAsyncInProgress] = (0, import_react69.useState)(false);
   const isDisabled = !!disabled || asyncInProgress;
   const ariaProps = {
     "aria-label": label,
@@ -15149,30 +15284,30 @@ function ToggleButton(props) {
       return result;
     }
   });
-  const labelRef = (0, import_react68.useRef)(null);
-  const ref = (0, import_react68.useRef)(null);
+  const labelRef = (0, import_react69.useRef)(null);
+  const ref = (0, import_react69.useRef)(null);
   const tid = useTestIds(otherProps, label);
   const {
     isPressed: isPressedFromEvents,
     pressProps
-  } = (0, import_react_aria39.usePress)({
+  } = (0, import_react_aria40.usePress)({
     ref: labelRef,
     isDisabled
   });
   const {
     inputProps
-  } = (0, import_react_aria39.useSwitch)(ariaProps, state, ref);
+  } = (0, import_react_aria40.useSwitch)(ariaProps, state, ref);
   const {
     isFocusVisible: isFocusVisibleFromEvents,
     focusProps
-  } = (0, import_react_aria39.useFocusRing)({
+  } = (0, import_react_aria40.useFocusRing)({
     ...otherProps,
     within: true
   });
   const {
     hoverProps,
     isHovered: isHoveredFromEvents
-  } = (0, import_react_aria39.useHover)({
+  } = (0, import_react_aria40.useHover)({
     isDisabled
   });
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
@@ -15183,7 +15318,7 @@ function ToggleButton(props) {
     ...focusProps,
     ...hoverProps,
     ...pressProps,
-    ...(0, import_runtime50.trussProps)({
+    ...(0, import_runtime51.trussProps)({
       ...{
         borderRadius: "br4",
         display: "dif",
@@ -15218,10 +15353,10 @@ function ToggleButton(props) {
   return maybeTooltip({
     title: tooltip,
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("label", { ...labelAttrs, children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Icon, { icon }),
+    children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("label", { ...labelAttrs, children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Icon, { icon }),
       label,
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react_aria39.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("input", { ref, ...inputProps, ...tid.value }) })
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react_aria40.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("input", { ref, ...inputProps, ...tid.value }) })
     ] })
   });
 }
@@ -15236,11 +15371,11 @@ var togglePressStyles = {
 };
 
 // src/inputs/ToggleChipGroup.tsx
-var import_react69 = require("react");
-var import_react_aria40 = require("react-aria");
+var import_react70 = require("react");
+var import_react_aria41 = require("react-aria");
 var import_react_stately15 = require("react-stately");
-var import_runtime51 = require("@homebound/truss/runtime");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_runtime52 = require("@homebound/truss/runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var __maybeInc9 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -15268,10 +15403,10 @@ function ToggleChipGroup(props) {
   const {
     groupProps,
     labelProps
-  } = (0, import_react_aria40.useCheckboxGroup)(props, state);
+  } = (0, import_react_aria41.useCheckboxGroup)(props, state);
   const tid = useTestIds(props, "toggleChip");
   const labelSuffix = useLabelSuffix(required, false);
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { ...groupProps, ...(0, import_runtime51.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { ...groupProps, ...(0, import_runtime52.trussProps)({
     position: "relative",
     display: "df",
     flexDirection: "fdc",
@@ -15282,17 +15417,17 @@ function ToggleChipGroup(props) {
       justifyContent: "jcsb"
     } : {}
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Label, { label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix }),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...(0, import_runtime51.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Label, { label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { ...(0, import_runtime52.trussProps)({
       display: "df",
       gap: "gap1",
       flexWrap: "flexWrap_wrap",
       ...labelStyle === "left" ? {
         width: ["w_var", {
-          "--width": (0, import_runtime51.maybeCssVar)(__maybeInc9(labelLeftFieldWidth))
+          "--width": (0, import_runtime52.maybeCssVar)(__maybeInc9(labelLeftFieldWidth))
         }]
       } : {}
-    }), children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ToggleChip2, { value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label, disabled: o.disabled, readonly: o.readonly, startAdornment: o.startAdornment, xss, ...tid[o.value] }, o.value)) })
+    }), children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToggleChip2, { value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label, disabled: o.disabled, readonly: o.readonly, startAdornment: o.startAdornment, xss, ...tid[o.value] }, o.value)) })
   ] });
 }
 function ToggleChip2(props) {
@@ -15309,10 +15444,10 @@ function ToggleChip2(props) {
   } = props;
   const isDisabled = !!disabled;
   const isReadOnly = !!readonly;
-  const ref = (0, import_react69.useRef)(null);
+  const ref = (0, import_react70.useRef)(null);
   const {
     inputProps
-  } = (0, import_react_aria40.useCheckboxGroupItem)({
+  } = (0, import_react_aria41.useCheckboxGroupItem)({
     value,
     "aria-label": label,
     isReadOnly,
@@ -15321,19 +15456,19 @@ function ToggleChip2(props) {
   const {
     isFocusVisible,
     focusProps
-  } = (0, import_react_aria40.useFocusRing)();
+  } = (0, import_react_aria41.useFocusRing)();
   const tooltip = resolveTooltip(disabled);
   const chipStateCss = isSelected ? {
     color: ["color_var", {
-      "--color": (0, import_runtime51.maybeCssVar)(xss?.color ?? "rgba(255, 255, 255, 1)" /* White */)
+      "--color": (0, import_runtime52.maybeCssVar)(xss?.color ?? "rgba(255, 255, 255, 1)" /* White */)
     }],
     backgroundColor: ["bgColor_var", {
-      "--backgroundColor": (0, import_runtime51.maybeCssVar)(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */)
+      "--backgroundColor": (0, import_runtime52.maybeCssVar)(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */)
     }],
     ...!isDisabled ? {
       backgroundColor: ["bgColor_var h_bgColor_var", {
-        "--backgroundColor": (0, import_runtime51.maybeCssVar)(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */),
-        "--h_backgroundColor": (0, import_runtime51.maybeCssVar)(xss?.backgroundColor ?? "rgba(30, 64, 175, 1)" /* Blue800 */)
+        "--backgroundColor": (0, import_runtime52.maybeCssVar)(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */),
+        "--h_backgroundColor": (0, import_runtime52.maybeCssVar)(xss?.backgroundColor ?? "rgba(30, 64, 175, 1)" /* Blue800 */)
       }]
     } : {}
   } : isDisabled ? {
@@ -15348,7 +15483,7 @@ function ToggleChip2(props) {
   return maybeTooltip({
     title: tooltip,
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("label", { ...(0, import_runtime51.trussProps)({
+    children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("label", { ...(0, import_runtime52.trussProps)({
       ...{
         position: "relative",
         display: "dif",
@@ -15369,7 +15504,7 @@ function ToggleChip2(props) {
         boxShadow: "bshFocus"
       } : {}
     }), "data-selected": isSelected, "data-disabled": isDisabled, "aria-disabled": isDisabled, ...others, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react_aria40.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("input", { ...inputProps, ...focusProps }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react_aria41.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("input", { ...inputProps, ...focusProps }) }),
       startAdornment,
       label
     ] })
@@ -15377,12 +15512,12 @@ function ToggleChip2(props) {
 }
 
 // src/components/Table/components/SelectToggle.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 function SelectToggle({ id, disabled }) {
-  const { tableState } = (0, import_react70.useContext)(TableStateContext);
+  const { tableState } = (0, import_react71.useContext)(TableStateContext);
   const state = useComputed(() => tableState.getSelected(id), [tableState]);
   const selected = state === "checked" ? true : state === "unchecked" ? false : "indeterminate";
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
     Checkbox,
     {
       checkboxOnly: true,
@@ -15395,7 +15530,7 @@ function SelectToggle({ id, disabled }) {
 }
 
 // src/components/Table/utils/columns.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 function column(columnDef) {
   return {
     canHide: true,
@@ -15448,7 +15583,7 @@ function selectColumn(columnDef) {
     return (data, {
       row
     }) => ({
-      content: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(SelectToggle, { id: row.id, disabled: row.selectable === false })
+      content: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SelectToggle, { id: row.id, disabled: row.selectable === false })
     });
   });
 }
@@ -15472,7 +15607,7 @@ function collapseColumn(columnDef) {
       row,
       level
     }) => ({
-      content: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(CollapseToggle, { row, compact: level > 0 })
+      content: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(CollapseToggle, { row, compact: level > 0 })
     });
   });
 }
@@ -15496,7 +15631,7 @@ function pinColumn(columnDef) {
     return (data, {
       row
     }) => ({
-      content: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(PinToggle, { rowId: row.id })
+      content: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(PinToggle, { rowId: row.id })
     });
   });
 }
@@ -15754,10 +15889,10 @@ function dragHandleColumn(columnDef) {
         onDragOver
       } = dragData;
       return {
-        content: row.draggable ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { draggable: row.draggable, onDragStart: (evt) => {
+        content: row.draggable ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { draggable: row.draggable, onDragStart: (evt) => {
           ref.current && evt.dataTransfer.setDragImage(ref.current, 0, 0);
           return onDragStart?.(row, evt);
-        }, onDragEnd: (evt) => onDragEnd?.(row, evt), onDrop: (evt) => onDrop?.(row, evt), onDragEnter: (evt) => onDragEnter?.(row, evt), onDragOver: (evt) => onDragOver?.(row, evt), className: "mta mba mra mla cursorPointer", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Icon, { icon: "drag" }) }) : void 0
+        }, onDragEnd: (evt) => onDragEnd?.(row, evt), onDrop: (evt) => onDrop?.(row, evt), onDragEnter: (evt) => onDragEnter?.(row, evt), onDragOver: (evt) => onDragOver?.(row, evt), className: "mta mba mra mla cursorPointer", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Icon, { icon: "drag" }) }) : void 0
       };
     };
   });
@@ -15821,7 +15956,7 @@ function shouldSkipScrollTo(index, virtuosoRangeRef) {
 
 // src/components/Table/GridTableApi.ts
 function useGridTableApi() {
-  return (0, import_react71.useMemo)(() => new GridTableApiImpl(), []);
+  return (0, import_react72.useMemo)(() => new GridTableApiImpl(), []);
 }
 var GridTableApiImpl = class {
   // This is public to GridTable but not exported outside of Beam
@@ -15994,10 +16129,10 @@ function maybeApply(maybeFn) {
 }
 
 // src/components/Table/hooks/useColumnResizeHandlers.ts
-var import_react72 = require("react");
+var import_react73 = require("react");
 function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWidth, setResizedWidths) {
-  const hasLockedColumnsRef = (0, import_react72.useRef)(false);
-  const distributeAdjustment = (0, import_react72.useCallback)(
+  const hasLockedColumnsRef = (0, import_react73.useRef)(false);
+  const distributeAdjustment = (0, import_react73.useCallback)(
     (rightColumns, totalRightWidth, adjustment) => {
       const updates = {};
       let remainingAdjustment = adjustment;
@@ -16012,7 +16147,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
     },
     []
   );
-  const calculateResizeUpdates = (0, import_react72.useCallback)(
+  const calculateResizeUpdates = (0, import_react73.useCallback)(
     (columnId, newWidth, columnIndex) => {
       if (!tableWidth || !columnSizes || columnSizes.length === 0) {
         return null;
@@ -16058,7 +16193,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
     },
     [tableWidth, columnSizes, columns, distributeAdjustment]
   );
-  const calculatePreviewWidth = (0, import_react72.useCallback)(
+  const calculatePreviewWidth = (0, import_react73.useCallback)(
     (columnId, newWidth, columnIndex) => {
       const result = calculateResizeUpdates(columnId, newWidth, columnIndex);
       if (!result) {
@@ -16068,7 +16203,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
     },
     [calculateResizeUpdates]
   );
-  const handleColumnResize = (0, import_react72.useCallback)(
+  const handleColumnResize = (0, import_react73.useCallback)(
     (columnId, newWidth, columnIndex) => {
       const result = calculateResizeUpdates(columnId, newWidth, columnIndex);
       if (!result) {
@@ -16105,10 +16240,10 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
 }
 
 // src/components/Table/hooks/useScrollStorage.ts
-var import_react73 = require("react");
+var import_react74 = require("react");
 function useScrollStorage(tableId, enabled = true) {
   const storageKey = `scrollPosition_${window.location.pathname}${window.location.search}_${tableId}`;
-  return (0, import_react73.useMemo)(
+  return (0, import_react74.useMemo)(
     () => ({
       getScrollIndex: () => {
         if (!enabled) return void 0;
@@ -16124,14 +16259,14 @@ function useScrollStorage(tableId, enabled = true) {
 }
 
 // src/components/Table/hooks/useSetupColumnSizes.ts
-var import_utils68 = require("@react-aria/utils");
-var import_react75 = require("react");
+var import_utils69 = require("@react-aria/utils");
+var import_react76 = require("react");
 
 // src/components/Table/hooks/useColumnResizing.ts
-var import_react74 = require("react");
+var import_react75 = require("react");
 var import_use_debounce4 = require("use-debounce");
 function useColumnResizing(storageKey) {
-  const [resizedWidths, setResizedWidths] = (0, import_react74.useState)(() => {
+  const [resizedWidths, setResizedWidths] = (0, import_react75.useState)(() => {
     if (!storageKey) return {};
     try {
       const stored = sessionStorage.getItem(`columnWidths_${storageKey}`);
@@ -16148,16 +16283,16 @@ function useColumnResizing(storageKey) {
     } catch {
     }
   }, 500);
-  (0, import_react74.useEffect)(() => {
+  (0, import_react75.useEffect)(() => {
     persistToStorage(resizedWidths);
   }, [resizedWidths, persistToStorage]);
-  const setResizedWidth = (0, import_react74.useCallback)((columnId, width2) => {
+  const setResizedWidth = (0, import_react75.useCallback)((columnId, width2) => {
     setResizedWidths((prev) => ({
       ...prev,
       [columnId]: width2
     }));
   }, []);
-  const batchSetResizedWidths = (0, import_react74.useCallback)((widths2) => {
+  const batchSetResizedWidths = (0, import_react75.useCallback)((widths2) => {
     if (typeof widths2 === "function") {
       setResizedWidths(widths2);
     } else {
@@ -16167,7 +16302,7 @@ function useColumnResizing(storageKey) {
       }));
     }
   }, []);
-  const resetColumnWidths = (0, import_react74.useCallback)(() => {
+  const resetColumnWidths = (0, import_react75.useCallback)(() => {
     setResizedWidths({});
   }, []);
   return {
@@ -16184,14 +16319,14 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
   const { resizedWidths, setResizedWidth, setResizedWidths, resetColumnWidths } = useColumnResizing(
     disableColumnResizing ? void 0 : visibleColumnsStorageKey
   );
-  const calculateImmediately = (0, import_react75.useRef)(true);
-  const [tableWidth, setTableWidth] = (0, import_react75.useState)();
-  const [contentWidth, setContentWidth] = (0, import_react75.useState)();
-  const [columnSizes, setColumnSizes] = (0, import_react75.useState)(
+  const calculateImmediately = (0, import_react76.useRef)(true);
+  const [tableWidth, setTableWidth] = (0, import_react76.useState)();
+  const [contentWidth, setContentWidth] = (0, import_react76.useState)();
+  const [columnSizes, setColumnSizes] = (0, import_react76.useState)(
     () => calcColumnLayout(columns, void 0, style.minWidthPx, expandedColumnIds, resizedWidths, inDocumentScrollLayout).columnSizes
   );
-  const prevTableWidthRef = (0, import_react75.useRef)(tableWidth);
-  const applyColumnLayout = (0, import_react75.useCallback)(
+  const prevTableWidthRef = (0, import_react76.useRef)(tableWidth);
+  const applyColumnLayout = (0, import_react76.useCallback)(
     (probeWidth) => {
       const layout = calcColumnLayout(
         columns,
@@ -16207,7 +16342,7 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
     },
     [columns, style.minWidthPx, expandedColumnIds, resizedWidths, inDocumentScrollLayout]
   );
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     if (!prevTableWidthRef.current) {
       prevTableWidthRef.current = tableWidth;
       return;
@@ -16230,7 +16365,7 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
       prevTableWidthRef.current = tableWidth;
     }
   }, [tableWidth, setResizedWidths]);
-  (0, import_react75.useEffect)(
+  (0, import_react76.useEffect)(
     () => {
       if (!calculateImmediately.current) {
         const width2 = resizeRef.current?.clientWidth;
@@ -16242,7 +16377,7 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
     [columns, resizedWidths, applyColumnLayout]
   );
   const applyColumnLayoutDebounced = (0, import_use_debounce5.useDebouncedCallback)(applyColumnLayout, 100);
-  const onResize = (0, import_react75.useCallback)(
+  const onResize = (0, import_react76.useCallback)(
     () => {
       const target = resizeRef.current;
       if (target && target.clientWidth !== tableWidth) {
@@ -16258,7 +16393,7 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [tableWidth, applyColumnLayout, applyColumnLayoutDebounced]
   );
-  (0, import_utils68.useResizeObserver)({ ref: resizeRef, onResize });
+  (0, import_utils69.useResizeObserver)({ ref: resizeRef, onResize });
   return {
     columnSizes,
     tableWidth,
@@ -16271,10 +16406,10 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
 }
 
 // src/hooks/useRenderCount.ts
-var import_react76 = require("react");
+var import_react77 = require("react");
 function useRenderCount() {
-  const ref = (0, import_react76.useRef)(/* @__PURE__ */ new Map());
-  const getCount = (0, import_react76.useCallback)((id) => {
+  const ref = (0, import_react77.useRef)(/* @__PURE__ */ new Map());
+  const getCount = (0, import_react77.useCallback)((id) => {
     const count = ref.current.get(id) || 1;
     ref.current.set(id, count + 1);
     return { "data-render": count };
@@ -16283,39 +16418,39 @@ function useRenderCount() {
 }
 
 // src/layouts/DocumentScrollLayoutContext.tsx
-var import_utils69 = require("@react-aria/utils");
-var import_react78 = require("react");
-var import_runtime53 = require("@homebound/truss/runtime");
+var import_utils70 = require("@react-aria/utils");
+var import_react79 = require("react");
+var import_runtime54 = require("@homebound/truss/runtime");
 
 // src/layouts/DocumentScrollToTopButton.tsx
-var import_react77 = require("react");
-var import_runtime52 = require("@homebound/truss/runtime");
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_react78 = require("react");
+var import_runtime53 = require("@homebound/truss/runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 function DocumentScrollToTopButton({
   viewportHeight
 }) {
-  const [visible, setVisible] = (0, import_react77.useState)(false);
+  const [visible, setVisible] = (0, import_react78.useState)(false);
   const tid = useTestIds({}, "documentScrollToTop");
   const scrollToTopOffsetPx = 20;
-  const syncVisibility = (0, import_react77.useCallback)(() => {
+  const syncVisibility = (0, import_react78.useCallback)(() => {
     if (viewportHeight <= 0) return;
     setVisible(window.scrollY > viewportHeight);
   }, [viewportHeight]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     syncVisibility();
     window.addEventListener("scroll", syncVisibility, {
       passive: true
     });
     return () => window.removeEventListener("scroll", syncVisibility);
   }, [syncVisibility]);
-  const scrollToTop = (0, import_react77.useCallback)(() => {
+  const scrollToTop = (0, import_react78.useCallback)(() => {
     window.scrollTo({
       top: 0
     });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { ...tid.wrapper, "aria-hidden": !visible, ...!visible ? {
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { ...tid.wrapper, "aria-hidden": !visible, ...!visible ? {
     inert: ""
-  } : {}, ...(0, import_runtime52.trussProps)({
+  } : {}, ...(0, import_runtime53.trussProps)({
     ...{
       position: "fixed",
       bottom: ["bottom_var", {
@@ -16325,7 +16460,7 @@ function DocumentScrollToTopButton({
         "--right": `${scrollToTopOffsetPx}px`
       }],
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime52.maybeCssVar)(zIndices.scrollToTop)
+        "--zIndex": (0, import_runtime53.maybeCssVar)(zIndices.scrollToTop)
       }],
       display: "df",
       justifyContent: "jcfe",
@@ -16335,35 +16470,35 @@ function DocumentScrollToTopButton({
       transform: "transform_translateY_0"
     } : {
       transform: ["transform_var", {
-        "--transform": (0, import_runtime52.maybeCssVar)(`translateY(calc(100% + ${scrollToTopOffsetPx}px))`)
+        "--transform": (0, import_runtime53.maybeCssVar)(`translateY(calc(100% + ${scrollToTopOffsetPx}px))`)
       }],
       pointerEvents: "pointerEvents_none"
     }
-  }), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(IconButton, { icon: "arrowUp", disabled: !visible, variant: "outline", label: "Scroll to top", onClick: scrollToTop, ...tid }) }) });
+  }), children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(IconButton, { icon: "arrowUp", disabled: !visible, variant: "outline", label: "Scroll to top", onClick: scrollToTop, ...tid }) }) });
 }
 
 // src/layouts/DocumentScrollLayoutContext.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
-var DocumentScrollLayoutContext = (0, import_react78.createContext)(false);
+var import_jsx_runtime85 = require("react/jsx-runtime");
+var DocumentScrollLayoutContext = (0, import_react79.createContext)(false);
 function DocumentScrollLayoutProvider({
   children
 }) {
-  const inDocumentScrollLayout = (0, import_react78.useContext)(DocumentScrollLayoutContext);
-  if (inDocumentScrollLayout) return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_jsx_runtime84.Fragment, { children });
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(DocumentScrollLayoutContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(DocumentScrollLayoutViewportRoot, { children }) });
+  const inDocumentScrollLayout = (0, import_react79.useContext)(DocumentScrollLayoutContext);
+  if (inDocumentScrollLayout) return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_jsx_runtime85.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DocumentScrollLayoutContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DocumentScrollLayoutViewportRoot, { children }) });
 }
 function useDocumentScrollLayout() {
-  return (0, import_react78.useContext)(DocumentScrollLayoutContext);
+  return (0, import_react79.useContext)(DocumentScrollLayoutContext);
 }
 function DocumentScrollLayoutViewportRoot({
   children
 }) {
-  const docElementRef = (0, import_react78.useRef)(typeof document !== "undefined" ? document.documentElement : null);
-  const [viewportSize, setViewportSize] = (0, import_react78.useState)({
+  const docElementRef = (0, import_react79.useRef)(typeof document !== "undefined" ? document.documentElement : null);
+  const [viewportSize, setViewportSize] = (0, import_react79.useState)({
     width: 0,
     height: 0
   });
-  const syncViewportSize = (0, import_react78.useCallback)(() => {
+  const syncViewportSize = (0, import_react79.useCallback)(() => {
     const el = docElementRef.current;
     if (!el) return;
     const width2 = el.clientWidth;
@@ -16373,11 +16508,11 @@ function DocumentScrollLayoutViewportRoot({
       height
     });
   }, []);
-  (0, import_utils69.useResizeObserver)({
+  (0, import_utils70.useResizeObserver)({
     ref: docElementRef,
     onResize: syncViewportSize
   });
-  (0, import_react78.useLayoutEffect)(() => {
+  (0, import_react79.useLayoutEffect)(() => {
     syncViewportSize();
   }, [syncViewportSize]);
   const style = {};
@@ -16389,20 +16524,20 @@ function DocumentScrollLayoutViewportRoot({
   }
   return (
     // `display: contents` keeps vars inheritable without adding a layout box.
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { ...(0, import_runtime53.mergeProps)(void 0, Object.keys(style).length > 0 ? style : void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { ...(0, import_runtime54.mergeProps)(void 0, Object.keys(style).length > 0 ? style : void 0, {
       display: "display_contents"
     }), children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(DocumentScrollToTopButton, { viewportHeight: viewportSize.height })
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DocumentScrollToTopButton, { viewportHeight: viewportSize.height })
     ] })
   );
 }
 
 // src/components/Table/components/TableCard.tsx
-var import_react79 = require("react");
+var import_react80 = require("react");
 var import_react_router_dom4 = require("react-router-dom");
-var import_runtime54 = require("@homebound/truss/runtime");
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_runtime55 = require("@homebound/truss/runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var __maybeInc10 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -16450,16 +16585,16 @@ function TableCard(props) {
     }
   }
   if (!title) return null;
-  const card = /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TableCardView, { ...tid, imgSrc: rs.row.imgSrc ?? "", title, eyebrow, badge, status, data: dataBlocks, progress });
+  const card = /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(TableCardView, { ...tid, imgSrc: rs.row.imgSrc ?? "", title, eyebrow, badge, status, data: dataBlocks, progress });
   const to = rowStyle?.rowLink?.(rs.row);
   if (to) {
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_react_router_dom4.Link, { to, ...(0, import_runtime54.mergeProps)(navLink, void 0, {
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react_router_dom4.Link, { to, ...(0, import_runtime55.mergeProps)(navLink, void 0, {
       textDecoration: "tdn",
       color: "color_unset"
     }), children: card });
   }
   if (rowStyle?.onClick) {
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("button", { onClick: () => rowStyle.onClick(rs.row, api), className: "cursorPointer", children: card });
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("button", { onClick: () => rowStyle.onClick(rs.row, api), className: "cursorPointer", children: card });
   }
   return card;
 }
@@ -16474,8 +16609,8 @@ function TableCardView(props) {
     progress
   } = props;
   const tid = useTestIds(props, "tableCardView");
-  const progressValue = (0, import_react79.useMemo)(() => progress !== void 0 ? clampProgress(progress) : 0, [progress]);
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { ...(0, import_runtime54.trussProps)({
+  const progressValue = (0, import_react80.useMemo)(() => progress !== void 0 ? clampProgress(progress) : 0, [progress]);
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { ...(0, import_runtime55.trussProps)({
     paddingTop: "pt3",
     paddingBottom: "pb3",
     paddingRight: "pr3",
@@ -16490,44 +16625,44 @@ function TableCardView(props) {
     flexDirection: "fdc",
     gap: "gap2"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("img", { className: "h_184px w100 objectFit_cover", src: imgSrc, alt: title, ...tid.image }),
-      status && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "absolute top1 left1", ...tid.status, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Tag, { ...status }) })
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("img", { className: "h_184px w100 objectFit_cover", src: imgSrc, alt: title, ...tid.image }),
+      status && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "absolute top1 left1", ...tid.status, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Tag, { ...status }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "df fdc gap2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { children: [
-        eyebrow && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { className: "fw4 fz_14px lh_20px", ...tid.eyebrow, children: eyebrow }),
-        title && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "dif w100 jcsb aic", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("h4", { className: "fwb fz_20px lh_28px", ...tid.title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "df fdc gap2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { children: [
+        eyebrow && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { className: "fw4 fz_14px lh_20px", ...tid.eyebrow, children: eyebrow }),
+        title && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "dif w100 jcsb aic", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("h4", { className: "fwb fz_20px lh_28px", ...tid.title, children: [
             title,
             " "
           ] }),
-          badge && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "fw4 fz_14px lh_20px wsnw", ...tid.badge, children: badge })
+          badge && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "fw4 fz_14px lh_20px wsnw", ...tid.badge, children: badge })
         ] })
       ] }),
-      data && data?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("dl", { className: "dg gtc_repeat_2_minmax_0_1fr fw4 fz_14px lh_20px", children: data.map((d, idx) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { ...(0, import_runtime54.trussProps)({
+      data && data?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("dl", { className: "dg gtc_repeat_2_minmax_0_1fr fw4 fz_14px lh_20px", children: data.map((d, idx) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { ...(0, import_runtime55.trussProps)({
         display: "df",
         gap: "gap_4px",
         gridColumn: ["gc_var", {
-          "--gridColumn": (0, import_runtime54.maybeCssVar)(idx % 2 + 1)
+          "--gridColumn": (0, import_runtime55.maybeCssVar)(idx % 2 + 1)
         }]
       }), ...tid[defaultTestId(d.label)], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("dt", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("dt", { children: [
           d.label,
           ":"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("dd", { children: d.value })
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("dd", { children: d.value })
       ] }, d.label)) }),
-      progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "df fdc gap1", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "df aic gap1 fs_10px lh_14px", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "w25 h_8px br4 bgGray200", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { ...(0, import_runtime54.trussProps)({
+      progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "df fdc gap1", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "df aic gap1 fs_10px lh_14px", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "w25 h_8px br4 bgGray200", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { ...(0, import_runtime55.trussProps)({
           height: "h100",
           borderRadius: "br4",
           backgroundColor: "bgBlue500",
           width: ["w_var", {
-            "--width": (0, import_runtime54.maybeCssVar)(__maybeInc10(`${progressValue}%`))
+            "--width": (0, import_runtime55.maybeCssVar)(__maybeInc10(`${progressValue}%`))
           }]
         }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("span", { ...tid.progressValue, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { ...tid.progressValue, children: [
           progressValue,
           "%"
         ] })
@@ -16543,9 +16678,9 @@ function clampProgress(value) {
 }
 
 // src/components/Table/GridTable.tsx
-var import_runtime55 = require("@homebound/truss/runtime");
-var import_jsx_runtime86 = require("react/jsx-runtime");
-var import_react81 = require("react");
+var import_runtime56 = require("@homebound/truss/runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_react82 = require("react");
 var __maybeInc11 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -16595,15 +16730,15 @@ function GridTable(props) {
     columnGutter = false
   } = props;
   const inDocumentScrollLayout = useDocumentScrollLayout();
-  const columnsWithIds = (0, import_react80.useMemo)(() => {
+  const columnsWithIds = (0, import_react81.useMemo)(() => {
     const columns2 = columnGutter && inDocumentScrollLayout ? withColumnGutters(_columns) : _columns;
     return assignDefaultColumnIds(columns2);
   }, [_columns, columnGutter, inDocumentScrollLayout]);
-  const virtuosoRef = (0, import_react80.useRef)(null);
-  const virtuosoRangeRef = (0, import_react80.useRef)(null);
-  const resizeRef = (0, import_react80.useRef)(null);
-  const tableContainerRef = (0, import_react80.useRef)(null);
-  const api = (0, import_react80.useMemo)(
+  const virtuosoRef = (0, import_react81.useRef)(null);
+  const virtuosoRangeRef = (0, import_react81.useRef)(null);
+  const resizeRef = (0, import_react81.useRef)(null);
+  const tableContainerRef = (0, import_react81.useRef)(null);
+  const api = (0, import_react81.useMemo)(
     () => {
       const api2 = props.api ?? new GridTableApiImpl();
       api2.init(persistCollapse, virtuosoRef, virtuosoRangeRef);
@@ -16616,8 +16751,8 @@ function GridTable(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [props.api]
   );
-  const [draggedRow, _setDraggedRow] = (0, import_react80.useState)(void 0);
-  const draggedRowRef = (0, import_react80.useRef)(draggedRow);
+  const [draggedRow, _setDraggedRow] = (0, import_react81.useState)(void 0);
+  const draggedRowRef = (0, import_react81.useRef)(draggedRow);
   const setDraggedRow = (row) => {
     draggedRowRef.current = row;
     _setDraggedRow(row);
@@ -16627,7 +16762,7 @@ function GridTable(props) {
     tableState
   } = api;
   tableState.onRowSelect = onRowSelect;
-  (0, import_react80.useEffect)(() => {
+  (0, import_react81.useEffect)(() => {
     (0, import_mobx10.runInAction)(() => {
       tableState.setRows(rows);
       tableState.setColumns(columnsWithIds, visibleColumnsStorageKey);
@@ -16654,7 +16789,7 @@ function GridTable(props) {
     setResizedWidths,
     resetColumnWidths
   } = useSetupColumnSizes(style, columns, resizeTarget ?? resizeRef, expandedColumnIds, visibleColumnsStorageKey, disableColumnResizing, inDocumentScrollLayout);
-  (0, import_react80.useEffect)(() => {
+  (0, import_react81.useEffect)(() => {
     api.resetColumnWidthsFn = !disableColumnResizing ? resetColumnWidths : void 0;
   }, [api, resetColumnWidths, disableColumnResizing]);
   const {
@@ -16735,7 +16870,7 @@ function GridTable(props) {
   };
   const [tableHeadRows, visibleDataRows, keptSelectedRows, pinnedRows, tooManyClientSideRows] = useComputed(() => {
     if (as === "card") {
-      const cardElements = tableState.visibleRows.filter((rs) => ![HEADER, EXPANDABLE_HEADER, TOTALS, KEPT_GROUP].includes(rs.kind)).map((rs) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(TableCard, { rs, columns, rowStyle: rowStyles?.[rs.row.kind], api: tableState.api }, rs.key));
+      const cardElements = tableState.visibleRows.filter((rs) => ![HEADER, EXPANDABLE_HEADER, TOTALS, KEPT_GROUP].includes(rs.kind)).map((rs) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(TableCard, { rs, columns, rowStyle: rowStyles?.[rs.row.kind], api: tableState.api }, rs.key));
       return [[], cardElements, [], [], false];
     }
     const headerRows = [];
@@ -16747,7 +16882,7 @@ function GridTable(props) {
     const pinnedIds = new Set(pinnedRowStates.map((rs) => rs.row.id));
     const visibleRows = tableState.visibleRows.filter((rs) => !pinnedIds.has(rs.row.id));
     const hasExpandableHeader = visibleRows.some((rs) => rs.row.id === EXPANDABLE_HEADER);
-    const makeRow = (rs, isFirstHeadRow, isFirstBodyRow, isLastBodyRow) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Row, { onDragStart, onDragOver, onDragEnd, onDrop, onDragEnter, ...{
+    const makeRow = (rs, isFirstHeadRow, isFirstBodyRow, isLastBodyRow) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Row, { onDragStart, onDragOver, onDragEnd, onDrop, onDragEnter, ...{
       as,
       rs,
       style,
@@ -16809,7 +16944,7 @@ function GridTable(props) {
   const borderless = style?.presentationSettings?.borderless;
   const typeScale = style?.presentationSettings?.typeScale;
   const borderOnHover = style?.presentationSettings?.borderOnHover;
-  const fieldProps = (0, import_react80.useMemo)(() => ({
+  const fieldProps = (0, import_react81.useMemo)(() => ({
     labelStyle: "hidden",
     numberAlignment: "right",
     compact: true,
@@ -16826,11 +16961,11 @@ function GridTable(props) {
     } : {}
   }), [borderOnHover, borderless, typeScale]);
   const _as = as === "virtual" && runningInJest ? "div" : as;
-  const rowStateContext = (0, import_react80.useMemo)(() => ({
+  const rowStateContext = (0, import_react81.useMemo)(() => ({
     tableState,
     tableContainerRef
   }), [tableState, tableContainerRef]);
-  const tableStyle = (0, import_react80.useMemo)(() => {
+  const tableStyle = (0, import_react81.useMemo)(() => {
     if (!inDocumentScrollLayout || contentWidth === void 0 || tableWidth === void 0) return style;
     const minWidthPx = Math.max(style.minWidthPx ?? 0, contentWidth);
     if (minWidthPx === style.minWidthPx) return style;
@@ -16839,9 +16974,9 @@ function GridTable(props) {
       minWidthPx
     };
   }, [contentWidth, inDocumentScrollLayout, style, tableWidth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(TableStateContext.Provider, { value: rowStateContext, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(PresentationProvider, { fieldProps, wrap: style?.presentationSettings?.wrap, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { ref: resizeRef, ...(0, import_runtime55.trussProps)(getTableRefWidthStyles(as === "virtual", inDocumentScrollLayout)) }),
-    as === "card" ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CardView, { cardRows: visibleDataRows, id, virtuosoRangeRef, infiniteScroll, persistScrollPosition }) : renders[_as](tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, tableContainerRef, persistScrollPosition)
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(TableStateContext.Provider, { value: rowStateContext, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(PresentationProvider, { fieldProps, wrap: style?.presentationSettings?.wrap, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ref: resizeRef, ...(0, import_runtime56.trussProps)(getTableRefWidthStyles(as === "virtual", inDocumentScrollLayout)) }),
+    as === "card" ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(CardView, { cardRows: visibleDataRows, id, virtuosoRangeRef, infiniteScroll, persistScrollPosition }) : renders[_as](tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, tableContainerRef, persistScrollPosition)
   ] }) });
 }
 var renders = {
@@ -16850,7 +16985,7 @@ var renders = {
   virtual: renderVirtual
 };
 function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, _virtuosoRangeRef, tableHeadRows, stickyOffset, _infiniteScroll, tableContainerRef, _persistScrollPosition) {
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { ref: tableContainerRef, ...(0, import_runtime55.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { ref: tableContainerRef, ...(0, import_runtime56.trussProps)({
     // Use `fit-content` to ensure the width of the table takes up the full width of its content.
     // Otherwise, the table's width would be that of its container, which may not be as wide as the table itself.
     // In cases where we have sticky columns on a very wide table, then the container which the columns "stick" to (which is the table),
@@ -16866,24 +17001,24 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
     } : {},
     ...xss
   }), "data-testid": id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { ...(0, import_runtime55.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { ...(0, import_runtime56.trussProps)({
       ...stickyHeader || pinnedRows.length > 0 ? {
         position: "sticky",
         transition: "transitionTop",
         top: ["top_var", {
-          "--top": (0, import_runtime55.maybeCssVar)(__maybeInc11(stickyTableHeaderOffset(stickyOffset)))
+          "--top": (0, import_runtime56.maybeCssVar)(__maybeInc11(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime55.maybeCssVar)(zIndices.tableStickyHeader)
+          "--zIndex": (0, import_runtime56.maybeCssVar)(zIndices.tableStickyHeader)
         }]
       } : {}
     }), children: [
       tableHeadRows,
       pinnedRows
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { children: [
       keptSelectedRows,
-      firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { ...(0, import_runtime55.trussProps)({
+      firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ...(0, import_runtime56.trussProps)({
         ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
         ...style.firstRowMessageCss,
         ...visibleDataRows.length === 0 && style.lastRowCss,
@@ -16896,7 +17031,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
   ] });
 }
 function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, _virtuosoRangeRef, tableHeadRows, stickyOffset, _infiniteScroll, tableContainerRef, _persistScrollPosition) {
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("table", { ref: tableContainerRef, ...(0, import_runtime55.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("table", { ref: tableContainerRef, ...(0, import_runtime56.trussProps)({
     ...{
       width: "w100",
       borderCollapse: "borderCollapse_separate",
@@ -16910,28 +17045,28 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
     } : {},
     ...xss
   }), "data-testid": id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("thead", { ...(0, import_runtime55.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("thead", { ...(0, import_runtime56.trussProps)({
       ...stickyHeader || pinnedRows.length > 0 ? {
         position: "sticky",
         transition: "transitionTop",
         top: ["top_var", {
-          "--top": (0, import_runtime55.maybeCssVar)(__maybeInc11(stickyTableHeaderOffset(stickyOffset)))
+          "--top": (0, import_runtime56.maybeCssVar)(__maybeInc11(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime55.maybeCssVar)(zIndices.tableStickyHeader)
+          "--zIndex": (0, import_runtime56.maybeCssVar)(zIndices.tableStickyHeader)
         }]
       } : {}
     }), children: [
       tableHeadRows,
       pinnedRows
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("tbody", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("tbody", { children: [
       keptSelectedRows,
-      firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("tr", { ...(0, import_runtime55.trussProps)({
+      firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("tr", { ...(0, import_runtime56.trussProps)({
         ...tableRowPrintBreakCss,
         ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
         ...visibleDataRows.length === 0 && style.lastRowCss
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("td", { colSpan: columns.length, ...(0, import_runtime55.trussProps)({
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("td", { colSpan: columns.length, ...(0, import_runtime56.trussProps)({
         ...style.betweenRowsCss,
         ...style.firstRowMessageCss,
         ...visibleDataRows.length === 0 && style.lastRowCellCss,
@@ -16945,7 +17080,7 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
 function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, _tableContainerRef, persistScrollPosition = infiniteScroll === void 0) {
   const customScrollParent = useVirtualizedScrollParent();
   const inDocumentScrollLayout = useDocumentScrollLayout();
-  const [fetchMoreInProgress, setFetchMoreInProgress] = (0, import_react80.useState)(false);
+  const [fetchMoreInProgress, setFetchMoreInProgress] = (0, import_react81.useState)(false);
   const {
     getScrollIndex,
     setScrollIndex
@@ -16954,7 +17089,7 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, pi
   const topItemCount = (stickyHeader || pinnedRows.length > 0 ? tableHeadRows.length : 0) + pinnedRows.length;
   const validatedScrollIndex = savedScrollIndex !== void 0 && savedScrollIndex > 0 && savedScrollIndex < visibleDataRows.length ? savedScrollIndex + topItemCount : void 0;
   const virtuosoKey = !!validatedScrollIndex && visibleDataRows.length > 0 ? "with-data" : "virtuoso";
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
     import_react_virtuoso2.Virtuoso,
     {
       useWindowScroll: inDocumentScrollLayout && !customScrollParent,
@@ -16969,7 +17104,7 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, pi
       components: {
         // zIndex keeps the pinned head above sticky columns; `top` matches the offsets used by
         // the div/table render paths so virtualized tables pin below the global nav + page header.
-        TopItemList: import_react80.default.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { ...props, ref, ...(0, import_runtime55.mergeProps)(void 0, {
+        TopItemList: import_react81.default.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ...props, ref, ...(0, import_runtime56.mergeProps)(void 0, {
           ...props.style,
           ...style.minWidthPx !== void 0 ? {
             minWidth: style.minWidthPx
@@ -16981,13 +17116,13 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, pi
         }) })),
         List: VirtualRoot(style, columns, id, xss),
         Footer: () => {
-          return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { ...(0, import_runtime55.trussProps)({
+          return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ...(0, import_runtime56.trussProps)({
             ...style.virtualFooterPaddingBottomPx !== void 0 ? {
               paddingBottom: ["pb_var", {
                 "--paddingBottom": `${style.virtualFooterPaddingBottomPx ?? 0}px`
               }]
             } : {}
-          }), children: fetchMoreInProgress && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "h5 df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Loader, { size: "xs" }) }) });
+          }), children: fetchMoreInProgress && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "h5 df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Loader, { size: "xs" }) }) });
         }
       },
       topItemCount,
@@ -17008,11 +17143,11 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, pi
           if (index === 0) {
             return (
               // Ensure the fallback message is the same width as the table
-              /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { ...(0, import_runtime55.trussProps)({
+              /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ...(0, import_runtime56.trussProps)({
                 ...getTableRefWidthStyles(true, inDocumentScrollLayout),
                 ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
                 ...visibleDataRows.length === 0 && style.lastRowCss
-              }), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { ...(0, import_runtime55.trussProps)({
+              }), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ...(0, import_runtime56.trussProps)({
                 ...style.firstRowMessageCss,
                 ...visibleDataRows.length === 0 && style.lastRowCellCss,
                 ...visibleDataRows.length === 0 && style.lastRowFirstCellCss,
@@ -17061,7 +17196,7 @@ function CardView({
 }) {
   const customScrollParent = useVirtualizedScrollParent();
   const inDocumentScrollLayout = useDocumentScrollLayout();
-  const [fetchMoreInProgress, setFetchMoreInProgress] = (0, import_react80.useState)(false);
+  const [fetchMoreInProgress, setFetchMoreInProgress] = (0, import_react81.useState)(false);
   const {
     getScrollIndex,
     setScrollIndex
@@ -17070,18 +17205,18 @@ function CardView({
   const validatedScrollIndex = savedScrollIndex !== void 0 && savedScrollIndex > 0 && savedScrollIndex < cardRows.length ? savedScrollIndex : void 0;
   const virtuosoKey = !!validatedScrollIndex && cardRows.length > 0 ? "with-data" : "virtuoso";
   if (runningInJest) {
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "pt2 pb2", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "dg gtc_repeat_auto_fill_330px jcc gap3 pt3 pb3 pr3 pl3", children: cardRows }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "pt2 pb2", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "dg gtc_repeat_auto_fill_330px jcc gap3 pt3 pb3 pr3 pl3", children: cardRows }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "pt2 pb2 h100", children: /* @__PURE__ */ (0, import_react81.createElement)(import_react_virtuoso2.VirtuosoGrid, { useWindowScroll: inDocumentScrollLayout && !customScrollParent, ...customScrollParent ? {
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "pt2 pb2 h100", children: /* @__PURE__ */ (0, import_react82.createElement)(import_react_virtuoso2.VirtuosoGrid, { useWindowScroll: inDocumentScrollLayout && !customScrollParent, ...customScrollParent ? {
     customScrollParent
   } : {}, ...validatedScrollIndex !== void 0 ? {
     initialTopMostItemIndex: validatedScrollIndex
   } : {}, key: virtuosoKey, "data-testid": id, totalCount: cardRows.length, itemContent: (index) => cardRows[index], components: {
-    List: import_react80.default.forwardRef(function CardList({
+    List: import_react81.default.forwardRef(function CardList({
       style,
       children
     }, ref) {
-      return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { ref, ...(0, import_runtime55.mergeProps)(void 0, style, {
+      return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ref, ...(0, import_runtime56.mergeProps)(void 0, style, {
         display: "dg",
         gridTemplateColumns: "gtc_repeat_auto_fill_330px",
         justifyContent: "jcc",
@@ -17092,7 +17227,7 @@ function CardView({
         paddingLeft: "pl3"
       }), children });
     }),
-    Footer: () => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { children: fetchMoreInProgress && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "h5 df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Loader, { size: "xs" }) }) })
+    Footer: () => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { children: fetchMoreInProgress && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "h5 df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Loader, { size: "xs" }) }) })
   }, rangeChanged: (newRange) => {
     virtuosoRangeRef.current = newRange;
     if (!infiniteScroll && cardRows.length > 0) {
@@ -17114,11 +17249,11 @@ function CardView({
   } : {} }) });
 }
 var VirtualRoot = (0, import_memoize_one.default)((gs, _columns, id, xss) => {
-  return import_react80.default.forwardRef(function VirtualRoot2({
+  return import_react81.default.forwardRef(function VirtualRoot2({
     style,
     children
   }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { ref, ...(0, import_runtime55.mergeProps)(void 0, style, {
+    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ref, ...(0, import_runtime56.mergeProps)(void 0, style, {
       ...gs.rootCss,
       ...gs.minWidthPx ? {
         minWidth: ["mw_var", {
@@ -17134,8 +17269,8 @@ var VirtualRoot = (0, import_memoize_one.default)((gs, _columns, id, xss) => {
 });
 
 // src/components/ToggleChip.tsx
-var import_runtime56 = require("@homebound/truss/runtime");
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_runtime57 = require("@homebound/truss/runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 function ToggleChip(props) {
   const {
     text,
@@ -17153,7 +17288,7 @@ function ToggleChip(props) {
   } = useHover2({});
   const compact = fieldProps?.compact;
   const tid = useTestIds(props, "chip");
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("button", { type: "button", ...(0, import_runtime56.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("button", { type: "button", ...(0, import_runtime57.trussProps)({
     ...chipBaseStyles(compact),
     ...isHovered && !disabled && chipHoverStyles,
     // Use a lower right-padding to get closer to the `X` circle when clearable, i.e. not disabled
@@ -17168,8 +17303,8 @@ function ToggleChip(props) {
     },
     ...xss
   }), disabled, onClick, ...hoverProps, ...tid, children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "fs0", ...tid.icon, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Icon, { icon, color: "rgba(36, 36, 36, 1)" /* Gray900 */, inc: 2 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { ...(0, import_runtime56.trussProps)({
+    icon && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "fs0", ...tid.icon, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon, { icon, color: "rgba(36, 36, 36, 1)" /* Gray900 */, inc: 2 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { ...(0, import_runtime57.trussProps)({
       textAlign: "tal",
       overflow: "oh",
       display: "d_negwebkit_box",
@@ -17181,14 +17316,14 @@ function ToggleChip(props) {
         paddingRight: "pr0"
       } : {}
     }), title: text, children: text }),
-    !disabled && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { ...(0, import_runtime56.trussProps)({
+    !disabled && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { ...(0, import_runtime57.trussProps)({
       ...{
         flexShrink: "fs0",
         borderRadius: "br16",
         backgroundColor: "bgGray200"
       },
       ...isHovered && chipHoverStyles
-    }), ...tid.x, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Icon, { icon: "x", color: "rgba(141, 141, 141, 1)" /* Gray600 */, inc: 2 }) })
+    }), ...tid.x, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon, { icon: "x", color: "rgba(141, 141, 141, 1)" /* Gray600 */, inc: 2 }) })
   ] });
 }
 var chipHoverStyles = {
@@ -17203,8 +17338,8 @@ var chipDisabledStyles = {
 };
 
 // src/components/ToggleChips.tsx
-var import_runtime57 = require("@homebound/truss/runtime");
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_runtime58 = require("@homebound/truss/runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 function ToggleChips(props) {
   const {
     values,
@@ -17213,22 +17348,22 @@ function ToggleChips(props) {
     xss
   } = props;
   const tid = useTestIds(props, "toggleChips");
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { ...(0, import_runtime57.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { ...(0, import_runtime58.trussProps)({
     ...{
       display: "df",
       flexWrap: "flexWrap_wrap",
       gap: "gap1"
     },
     ...xss
-  }), ...tid, children: values.map((value) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ToggleChip, { text: getLabel(value), onClick: () => onRemove(value), ...tid.chip }, getLabel(value))) });
+  }), ...tid, children: values.map((value) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ToggleChip, { text: getLabel(value), onClick: () => onRemove(value), ...tid.chip }, getLabel(value))) });
 }
 
 // src/components/Accordion.tsx
-var import_utils74 = require("@react-aria/utils");
-var import_react82 = require("react");
-var import_react_aria41 = require("react-aria");
-var import_runtime58 = require("@homebound/truss/runtime");
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_utils75 = require("@react-aria/utils");
+var import_react83 = require("react");
+var import_react_aria42 = require("react-aria");
+var import_runtime59 = require("@homebound/truss/runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var __maybeInc12 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -17250,38 +17385,38 @@ function Accordion(props) {
     xss
   } = props;
   const tid = useTestIds(props, "accordion");
-  const id = (0, import_utils74.useId)();
-  const [expanded, setExpanded] = (0, import_react82.useState)(defaultExpanded && !disabled);
+  const id = (0, import_utils75.useId)();
+  const [expanded, setExpanded] = (0, import_react83.useState)(defaultExpanded && !disabled);
   const {
     isFocusVisible,
     focusProps
-  } = (0, import_react_aria41.useFocusRing)();
-  const [contentEl, setContentEl] = (0, import_react82.useState)(null);
-  const contentRef = (0, import_react82.useMemo)(() => ({
+  } = (0, import_react_aria42.useFocusRing)();
+  const [contentEl, setContentEl] = (0, import_react83.useState)(null);
+  const contentRef = (0, import_react83.useMemo)(() => ({
     current: contentEl
   }), [contentEl]);
-  const [contentHeight, setContentHeight] = (0, import_react82.useState)(expanded ? "auto" : "0");
-  (0, import_react82.useEffect)(() => {
+  const [contentHeight, setContentHeight] = (0, import_react83.useState)(expanded ? "auto" : "0");
+  (0, import_react83.useEffect)(() => {
     setExpanded(defaultExpanded && !disabled);
   }, [defaultExpanded, disabled]);
-  (0, import_react82.useEffect)(() => {
+  (0, import_react83.useEffect)(() => {
     setContentHeight(expanded && contentEl ? `${contentEl.scrollHeight}px` : "0");
   }, [expanded, contentEl]);
-  const onResize = (0, import_react82.useCallback)(() => {
+  const onResize = (0, import_react83.useCallback)(() => {
     if (contentEl && expanded) {
       setContentHeight(`${contentEl.scrollHeight}px`);
     }
   }, [expanded, contentEl, setContentHeight]);
-  (0, import_utils74.useResizeObserver)({
+  (0, import_utils75.useResizeObserver)({
     ref: contentRef,
     onResize
   });
-  const toggle = (0, import_react82.useCallback)(() => {
+  const toggle = (0, import_react83.useCallback)(() => {
     setExpanded((prev) => !prev);
     if (setExpandedIndex) setExpandedIndex(index);
     if (onToggle) onToggle();
   }, [index, setExpandedIndex, onToggle]);
-  const touchableStyle = (0, import_react82.useMemo)(() => ({
+  const touchableStyle = (0, import_react83.useMemo)(() => ({
     ...{
       display: "df",
       justifyContent: "jcsb",
@@ -17322,12 +17457,12 @@ function Accordion(props) {
     },
     ...isFocusVisible && {
       boxShadow: ["boxShadow_var", {
-        "--boxShadow": (0, import_runtime58.maybeCssVar)(`inset 0 0 0 2px ${"rgba(29, 78, 216, 1)" /* Blue700 */}`)
+        "--boxShadow": (0, import_runtime59.maybeCssVar)(`inset 0 0 0 2px ${"rgba(29, 78, 216, 1)" /* Blue700 */}`)
       }]
     },
     ...xss
   }), [compact, disabled, isFocusVisible, titleOnClick, xss]);
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { ...tid.container, ...(0, import_runtime58.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { ...tid.container, ...(0, import_runtime59.trussProps)({
     ...{
       borderColor: "bcGray300",
       ...topBorder ? {
@@ -17345,14 +17480,14 @@ function Accordion(props) {
       }]
     } : {}
   }), children: [
-    titleOnClick ? /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { ...focusProps, "aria-controls": id, "aria-expanded": expanded, className: "df", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("button", { ...tid.title, disabled, ...(0, import_runtime58.trussProps)({
+    titleOnClick ? /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { ...focusProps, "aria-controls": id, "aria-expanded": expanded, className: "df", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { ...tid.title, disabled, ...(0, import_runtime59.trussProps)({
         ...touchableStyle,
         ...{
           flexGrow: "fg1"
         }
       }), onClick: titleOnClick, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("button", { ...tid.toggle, disabled, ...(0, import_runtime58.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { ...tid.toggle, disabled, ...(0, import_runtime59.trussProps)({
         ...touchableStyle,
         ...{
           paddingLeft: "pl2",
@@ -17363,23 +17498,23 @@ function Accordion(props) {
             paddingRight: "pr_10px"
           } : {}
         }
-      }), onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(RotatingChevronIcon, { expanded }) })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("button", { ...tid.title, ...focusProps, "aria-controls": id, "aria-expanded": expanded, disabled, ...(0, import_runtime58.trussProps)({
+      }), onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(RotatingChevronIcon, { expanded }) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("button", { ...tid.title, ...focusProps, "aria-controls": id, "aria-expanded": expanded, disabled, ...(0, import_runtime59.trussProps)({
       ...{
         width: "w100"
       },
       ...touchableStyle
     }), onClick: toggle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "fg1 tal", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(RotatingChevronIcon, { expanded })
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "fg1 tal", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(RotatingChevronIcon, { expanded })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { ...tid.details, id, "aria-hidden": !expanded, ...(0, import_runtime58.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { ...tid.details, id, "aria-hidden": !expanded, ...(0, import_runtime59.trussProps)({
       overflow: "oh",
       height: ["h_var", {
-        "--height": (0, import_runtime58.maybeCssVar)(__maybeInc12(contentHeight))
+        "--height": (0, import_runtime59.maybeCssVar)(__maybeInc12(contentHeight))
       }],
       transition: "transition_height_250ms_ease_in_out"
-    }), children: expanded && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { ...(0, import_runtime58.trussProps)({
+    }), children: expanded && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { ...(0, import_runtime59.trussProps)({
       paddingLeft: "pl2",
       paddingRight: "pr2",
       paddingBottom: "pb2",
@@ -17394,13 +17529,13 @@ function Accordion(props) {
   ] });
 }
 function RotatingChevronIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { ...(0, import_runtime58.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { ...(0, import_runtime59.trussProps)({
     flexShrink: "fs0",
     transition: "transition_transform_250ms_linear",
     transform: ["transform_var", {
-      "--transform": (0, import_runtime58.maybeCssVar)(props.expanded ? "rotate(180deg)" : "rotate(0deg)")
+      "--transform": (0, import_runtime59.maybeCssVar)(props.expanded ? "rotate(180deg)" : "rotate(0deg)")
     }]
-  }), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Icon, { icon: "chevronDown" }) });
+  }), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Icon, { icon: "chevronDown" }) });
 }
 var accordionSizes = {
   xs: 240,
@@ -17410,15 +17545,15 @@ var accordionSizes = {
 };
 
 // src/components/AccordionList.tsx
-var import_react83 = require("react");
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_react84 = require("react");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 function AccordionList(props) {
   const { accordions, size, allowMultipleExpanded = true, compact = false } = props;
-  const [expandedIndex, setExpandedIndex] = (0, import_react83.useState)(
+  const [expandedIndex, setExpandedIndex] = (0, import_react84.useState)(
     accordions.findIndex((a) => a.defaultExpanded)
   );
   const tid = useTestIds(props, "accordionList");
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_jsx_runtime90.Fragment, { children: accordions.map((accordionProps, index, arr) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_jsx_runtime91.Fragment, { children: accordions.map((accordionProps, index, arr) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
     Accordion,
     {
       ...accordionProps,
@@ -17435,7 +17570,7 @@ function AccordionList(props) {
 }
 
 // src/components/AutoSaveIndicator.tsx
-var import_react84 = require("react");
+var import_react85 = require("react");
 
 // src/types.ts
 function assertNever(x) {
@@ -17443,7 +17578,7 @@ function assertNever(x) {
 }
 
 // src/components/AutoSaveIndicator.tsx
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 function AutoSaveIndicator({
   hideOnIdle,
   doNotReset
@@ -17453,7 +17588,7 @@ function AutoSaveIndicator({
     resetStatus,
     errors
   } = useAutoSaveStatus();
-  (0, import_react84.useEffect)(
+  (0, import_react85.useEffect)(
     () => {
       if (doNotReset) return;
       return () => resetStatus();
@@ -17464,11 +17599,11 @@ function AutoSaveIndicator({
   );
   switch (status) {
     case "idle" /* IDLE */:
-      return hideOnIdle ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Indicator, { icon: "cloudSave" });
+      return hideOnIdle ? null : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Indicator, { icon: "cloudSave" });
     case "saving" /* SAVING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Indicator, { icon: "refresh", text: "Saving..." });
+      return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Indicator, { icon: "refresh", text: "Saving..." });
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Indicator, { icon: "cloudSave", text: "Saved" });
+      return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Indicator, { icon: "cloudSave", text: "Saved" });
     case "error" /* ERROR */:
       return (
         /**
@@ -17476,7 +17611,7 @@ function AutoSaveIndicator({
          * rendering it far away from the Icon/Text. Wrap it with a div to constrain
          * it.
          */
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "dif", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: String(errors), placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Indicator, { icon: "error", color: "rgba(239, 68, 68, 1)" /* Red500 */, text: "Error saving" }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "dif", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Tooltip, { title: String(errors), placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Indicator, { icon: "error", color: "rgba(239, 68, 68, 1)" /* Red500 */, text: "Error saving" }) }) })
       );
     default:
       assertNever(status);
@@ -17487,15 +17622,15 @@ function Indicator({
   icon,
   color
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { "data-testid": "autoSave", className: "df gap1 aic gray700 fw6 fz_14px lh_20px", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { icon, color }),
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { "data-testid": "autoSave", className: "df gap1 aic gray700 fw6 fz_14px lh_20px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Icon, { icon, color }),
     text
   ] });
 }
 
 // src/components/Banner.tsx
-var import_runtime59 = require("@homebound/truss/runtime");
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_runtime60 = require("@homebound/truss/runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 function Banner(props) {
   const {
     type,
@@ -17505,7 +17640,7 @@ function Banner(props) {
     ...others
   } = props;
   const tid = useTestIds(others, "banner");
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { ...(0, import_runtime59.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { ...(0, import_runtime60.trussProps)({
     ...variantStyles3[type],
     ...{
       display: "df",
@@ -17523,9 +17658,9 @@ function Banner(props) {
       boxShadow: "bshBasic"
     }
   }), ...tid, role: "alert", children: [
-    showIcon && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "fs0", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Icon, { icon: typeToIcon[type], ...tid.type, color: "rgba(36, 36, 36, 1)" /* Gray900 */ }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "fg1", ...tid.message, children: message }),
-    onClose && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "lh_0", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(IconButton, { icon: "x", onClick: onClose, ...tid.close, color: "rgba(36, 36, 36, 1)" /* Gray900 */ }) })
+    showIcon && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "fs0", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Icon, { icon: typeToIcon[type], ...tid.type, color: "rgba(36, 36, 36, 1)" /* Gray900 */ }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "fg1", ...tid.message, children: message }),
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "lh_0", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(IconButton, { icon: "x", onClick: onClose, ...tid.close, color: "rgba(36, 36, 36, 1)" /* Gray900 */ }) })
   ] });
 }
 var typeToIcon = {
@@ -17563,38 +17698,38 @@ var import_react113 = require("react");
 var import_react_aria47 = require("react-aria");
 
 // src/components/Modal/Modal.tsx
-var import_utils78 = require("@react-aria/utils");
-var import_react87 = require("react");
-var import_react_aria42 = require("react-aria");
+var import_utils79 = require("@react-aria/utils");
+var import_react88 = require("react");
+var import_react_aria43 = require("react-aria");
 var import_react_dom3 = require("react-dom");
 
 // src/components/Modal/useModal.tsx
-var import_react86 = require("react");
+var import_react87 = require("react");
 
 // src/components/Modal/ModalContext.tsx
-var import_react85 = require("react");
-var import_jsx_runtime93 = require("react/jsx-runtime");
-var ModalContext = (0, import_react85.createContext)({ inModal: false });
+var import_react86 = require("react");
+var import_jsx_runtime94 = require("react/jsx-runtime");
+var ModalContext = (0, import_react86.createContext)({ inModal: false });
 function ModalProvider({ children }) {
-  const value = (0, import_react85.useMemo)(() => ({ inModal: true }), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ModalContext.Provider, { value, children });
+  const value = (0, import_react86.useMemo)(() => ({ inModal: true }), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ModalContext.Provider, { value, children });
 }
 function useModalContext() {
-  return (0, import_react85.useContext)(ModalContext);
+  return (0, import_react86.useContext)(ModalContext);
 }
 
 // src/components/Modal/useModal.tsx
 function useModal() {
   const { modalState, modalCanCloseChecks } = useBeamContext();
   const { inModal } = useModalContext();
-  const lastCanClose = (0, import_react86.useRef)();
-  const api = (0, import_react86.useRef)();
-  (0, import_react86.useEffect)(() => {
+  const lastCanClose = (0, import_react87.useRef)();
+  const api = (0, import_react87.useRef)();
+  (0, import_react87.useEffect)(() => {
     return () => {
       modalCanCloseChecks.current = modalCanCloseChecks.current.filter((c) => c !== lastCanClose.current);
     };
   }, [modalCanCloseChecks]);
-  return (0, import_react86.useMemo)(
+  return (0, import_react87.useMemo)(
     () => ({
       openModal(props) {
         modalState.current = { ...props, api };
@@ -17629,8 +17764,8 @@ function useModal() {
 }
 
 // src/components/Modal/Modal.tsx
-var import_runtime60 = require("@homebound/truss/runtime");
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_runtime61 = require("@homebound/truss/runtime");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 function Modal(props) {
   const {
     size = "md",
@@ -17641,7 +17776,7 @@ function Modal(props) {
     allowClosing = true
   } = props;
   const isFixedHeight = typeof size !== "string";
-  const ref = (0, import_react87.useRef)(null);
+  const ref = (0, import_react88.useRef)(null);
   const {
     modalBodyDiv,
     modalFooterDiv,
@@ -17653,7 +17788,7 @@ function Modal(props) {
   const {
     overlayProps,
     underlayProps
-  } = (0, import_react_aria42.useOverlay)({
+  } = (0, import_react_aria43.useOverlay)({
     ...props,
     isOpen: true,
     onClose: closeModal,
@@ -17664,19 +17799,19 @@ function Modal(props) {
   }, ref);
   const {
     modalProps
-  } = (0, import_react_aria42.useModal)();
+  } = (0, import_react_aria43.useModal)();
   const {
     dialogProps,
     titleProps
-  } = (0, import_react_aria42.useDialog)({
+  } = (0, import_react_aria43.useDialog)({
     role: "dialog"
   }, ref);
-  const [[width2, height], setSize] = (0, import_react87.useState)(getSize(size));
-  const modalBodyRef = (0, import_react87.useRef)(null);
-  const modalFooterRef = (0, import_react87.useRef)(null);
-  const modalHeaderRef = (0, import_react87.useRef)(null);
+  const [[width2, height], setSize] = (0, import_react88.useState)(getSize(size));
+  const modalBodyRef = (0, import_react88.useRef)(null);
+  const modalFooterRef = (0, import_react88.useRef)(null);
+  const modalHeaderRef = (0, import_react88.useRef)(null);
   const testId = useTestIds({}, testIdPrefix);
-  (0, import_react_aria42.usePreventScroll)();
+  (0, import_react_aria43.usePreventScroll)();
   const {
     sm
   } = useBreakpoint();
@@ -17685,10 +17820,10 @@ function Modal(props) {
       setSize: (size2 = "md") => setSize(getSize(size2))
     };
   }
-  const [hasScroll, setHasScroll] = (0, import_react87.useState)(forceScrolling ?? false);
-  (0, import_utils78.useResizeObserver)({
+  const [hasScroll, setHasScroll] = (0, import_react88.useState)(forceScrolling ?? false);
+  (0, import_utils79.useResizeObserver)({
     ref: modalBodyRef,
-    onResize: (0, import_react87.useCallback)(
+    onResize: (0, import_react88.useCallback)(
       () => {
         const target = modalBodyRef.current;
         if (forceScrolling === void 0 && !isFixedHeight) {
@@ -17700,7 +17835,7 @@ function Modal(props) {
       []
     )
   });
-  (0, import_react87.useEffect)(
+  (0, import_react88.useEffect)(
     () => {
       modalHeaderRef.current.appendChild(modalHeaderDiv);
       modalBodyRef.current.appendChild(modalBodyDiv);
@@ -17710,7 +17845,7 @@ function Modal(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [modalBodyRef, modalFooterRef, modalHeaderRef]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_aria42.OverlayContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(AutoSaveStatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { ...(0, import_runtime60.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react_aria43.OverlayContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(AutoSaveStatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...(0, import_runtime61.trussProps)({
     position: "fixed",
     top: "tp_0",
     bottom: "bot_0",
@@ -17721,9 +17856,9 @@ function Modal(props) {
     justifyContent: "jcc",
     backgroundColor: "bgc_rgba_36_36_36_0_6",
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime60.maybeCssVar)(zIndices.modalUnderlay)
+      "--zIndex": (0, import_runtime61.maybeCssVar)(zIndices.modalUnderlay)
     }]
-  }), ...underlayProps, ...testId.underlay, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_aria42.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { ...(0, import_runtime60.trussProps)({
+  }), ...underlayProps, ...testId.underlay, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react_aria43.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { ...(0, import_runtime61.trussProps)({
     borderRadius: "br24",
     backgroundColor: "bgWhite",
     boxShadow: "bshModal",
@@ -17749,7 +17884,7 @@ function Modal(props) {
       borderRadius: "br0"
     } : {}
   }), ref, ...overlayProps, ...dialogProps, ...modalProps, ...testId, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("header", { ...(0, import_runtime60.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("header", { ...(0, import_runtime61.trussProps)({
       display: "df",
       flexDirection: "fdrr",
       paddingTop: "pt3",
@@ -17763,10 +17898,10 @@ function Modal(props) {
         borderColor: "bcGray200"
       } : {}
     }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "fs0 pl1", children: allowClosing && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("h1", { className: "fg1 fw6 fz_30px lh_36px gray900", ref: modalHeaderRef, ...titleProps, ...testId.title })
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "fs0 pl1", children: allowClosing && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("h1", { className: "fg1 fw6 fz_30px lh_36px gray900", ref: modalHeaderRef, ...titleProps, ...testId.title })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("main", { ref: modalBodyRef, ...(0, import_runtime60.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("main", { ref: modalBodyRef, ...(0, import_runtime61.trussProps)({
       flexGrow: "fg1",
       overflowY: "oya",
       ...hasScroll ? {
@@ -17778,7 +17913,7 @@ function Modal(props) {
         overflowY: "oys"
       } : {}
     }), children: content }),
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("footer", { className: "fs0", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { ref: modalFooterRef }) })
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("footer", { className: "fs0", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ref: modalFooterRef }) })
   ] }) }) }) }) }) });
 }
 function ModalHeader({
@@ -17787,7 +17922,7 @@ function ModalHeader({
   const {
     modalHeaderDiv
   } = useBeamContext();
-  return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_jsx_runtime94.Fragment, { children }), modalHeaderDiv);
+  return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_jsx_runtime95.Fragment, { children }), modalHeaderDiv);
 }
 function ModalBody({
   children,
@@ -17799,7 +17934,7 @@ function ModalBody({
   const testId = useTestIds({}, testIdPrefix);
   return (0, import_react_dom3.createPortal)(
     // If `virtualized`, then we are expecting the `children` will handle their own scrollbar, so have the overflow hidden and adjust padding
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { ...(0, import_runtime60.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...(0, import_runtime61.trussProps)({
       height: "h100",
       ...virtualized ? {
         overflow: "oh",
@@ -17820,7 +17955,7 @@ function ModalFooter({
     modalFooterDiv
   } = useBeamContext();
   const testId = useTestIds({}, testIdPrefix);
-  return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { ...(0, import_runtime60.trussProps)({
+  return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...(0, import_runtime61.trussProps)({
     ...{
       paddingTop: "pt3",
       paddingBottom: "pb3",
@@ -17852,11 +17987,11 @@ function getSize(size) {
 }
 
 // src/components/Snackbar/SnackbarContext.tsx
-var import_react88 = require("react");
+var import_react89 = require("react");
 
 // src/components/Snackbar/SnackbarNotice.tsx
-var import_runtime61 = require("@homebound/truss/runtime");
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_runtime62 = require("@homebound/truss/runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 function SnackbarNotice(props) {
   const {
     icon,
@@ -17868,12 +18003,12 @@ function SnackbarNotice(props) {
   } = props;
   const tid = useTestIds(props, "snackbar");
   const reallyHideClose = hideCloseButton && !persistent;
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "white bgGray800 br4 fw4 fz_16px lh_24px df aic maxw_420px", "data-theme": contrastDataTheme, ...tid, role: "alert", children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "fs0 pl_12px", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Icon, { ...typeToIcon2[icon], ...tid.icon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "white bgGray800 br4 fw4 fz_16px lh_24px df aic maxw_420px", "data-theme": contrastDataTheme, ...tid, role: "alert", children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "fs0 pl_12px", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Icon, { ...typeToIcon2[icon], ...tid.icon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       "span",
       {
-        ...(0, import_runtime61.trussProps)({
+        ...(0, import_runtime62.trussProps)({
           overflow: "oh",
           display: "d_negwebkit_box",
           WebkitBoxOrient: "wbo_vertical",
@@ -17893,8 +18028,8 @@ function SnackbarNotice(props) {
         children: message
       }
     ),
-    (action || !reallyHideClose) && /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("span", { className: "fs0 df aic", children: [
-      action && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { ...(0, import_runtime61.trussProps)({
+    (action || !reallyHideClose) && /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("span", { className: "fs0 df aic", children: [
+      action && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { ...(0, import_runtime62.trussProps)({
         textTransform: "ttu",
         fontWeight: "fw4",
         fontSize: "fz_14px",
@@ -17902,8 +18037,8 @@ function SnackbarNotice(props) {
         paddingRight: ["pr_var", {
           "--paddingRight": `${!reallyHideClose && action.variant !== "text" ? 4 : 8}px`
         }]
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Button, { ...action, ...tid.action }) }),
-      !reallyHideClose && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "pr1 lineHeight_0", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(IconButton, { icon: "x", onClick: onClose, ...tid.close }) })
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Button, { ...action, ...tid.action }) }),
+      !reallyHideClose && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "pr1 lineHeight_0", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(IconButton, { icon: "x", onClick: onClose, ...tid.close }) })
     ] })
   ] });
 }
@@ -17932,17 +18067,17 @@ var typeToIcon2 = {
 };
 
 // src/components/Snackbar/Snackbar.tsx
-var import_runtime62 = require("@homebound/truss/runtime");
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_runtime63 = require("@homebound/truss/runtime");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 function Snackbar({
   notices,
   offset
 }) {
   const tid = useTestIds({});
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { ...tid.snackbarWrapper, ...(0, import_runtime62.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { ...tid.snackbarWrapper, ...(0, import_runtime63.trussProps)({
     position: "fixed",
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime62.maybeCssVar)(zIndices.snackbar)
+      "--zIndex": (0, import_runtime63.maybeCssVar)(zIndices.snackbar)
     }],
     bottom: ["bottom_var", {
       "--bottom": `${offset.bottom ?? defaultOffset.bottom}px`
@@ -17952,33 +18087,33 @@ function Snackbar({
     flexDirection: "fdc",
     alignItems: "aifs",
     gap: "gap_12px"
-  }), children: notices.map((data) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(SnackbarNotice, { ...data }, data.id)) });
+  }), children: notices.map((data) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(SnackbarNotice, { ...data }, data.id)) });
 }
 var defaultOffset = {
   bottom: 24
 };
 
 // src/components/Snackbar/SnackbarContext.tsx
-var import_jsx_runtime97 = require("react/jsx-runtime");
-var SnackbarContext = (0, import_react88.createContext)({ setNotices: () => {
+var import_jsx_runtime98 = require("react/jsx-runtime");
+var SnackbarContext = (0, import_react89.createContext)({ setNotices: () => {
 }, setOffset: () => {
 } });
 function SnackbarProvider(props) {
-  const [notices, setNotices] = (0, import_react88.useState)([]);
-  const [offset, setOffset] = (0, import_react88.useState)({});
-  const contextValue = (0, import_react88.useMemo)(() => ({ setNotices, setOffset }), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(SnackbarContext.Provider, { value: contextValue, children: [
+  const [notices, setNotices] = (0, import_react89.useState)([]);
+  const [offset, setOffset] = (0, import_react89.useState)({});
+  const contextValue = (0, import_react89.useMemo)(() => ({ setNotices, setOffset }), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(SnackbarContext.Provider, { value: contextValue, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Snackbar, { notices, offset })
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Snackbar, { notices, offset })
   ] });
 }
 function useSnackbarContext() {
-  return (0, import_react88.useContext)(SnackbarContext);
+  return (0, import_react89.useContext)(SnackbarContext);
 }
 
 // src/components/SuperDrawer/SuperDrawer.tsx
 var import_framer_motion = require("framer-motion");
-var import_react89 = require("react");
+var import_react90 = require("react");
 var import_react_dom4 = require("react-dom");
 
 // src/components/SuperDrawer/utils.ts
@@ -17989,9 +18124,9 @@ var SuperDrawerWidth = /* @__PURE__ */ ((SuperDrawerWidth2) => {
 })(SuperDrawerWidth || {});
 
 // src/components/SuperDrawer/SuperDrawer.tsx
-var import_runtime63 = require("@homebound/truss/runtime");
-var import_jsx_runtime98 = require("react/jsx-runtime");
-var import_react90 = require("react");
+var import_runtime64 = require("@homebound/truss/runtime");
+var import_jsx_runtime99 = require("react/jsx-runtime");
+var import_react91 = require("react");
 function SuperDrawer() {
   const {
     drawerContentStack: contentStack,
@@ -18000,7 +18135,7 @@ function SuperDrawer() {
   const {
     closeDrawer
   } = useSuperDrawer();
-  const headerRef = (0, import_react89.useRef)(null);
+  const headerRef = (0, import_react90.useRef)(null);
   const testId = useTestIds({}, "superDrawer");
   const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
   const {
@@ -18010,7 +18145,7 @@ function SuperDrawer() {
   const {
     width: width2 = 1040 /* Normal */
   } = firstContent ?? {};
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     if (content) {
       document.body.style.overflow = "hidden";
       return () => {
@@ -18018,7 +18153,7 @@ function SuperDrawer() {
       };
     }
   }, [content]);
-  (0, import_react89.useEffect)(
+  (0, import_react90.useEffect)(
     () => {
       if (headerRef.current?.childNodes.length === 0 && content) {
         headerRef.current.appendChild(sdHeaderDiv);
@@ -18028,12 +18163,12 @@ function SuperDrawer() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [headerRef, content]
   );
-  return (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_framer_motion.AnimatePresence, { children: content && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_jsx_runtime98.Fragment, { children: /* @__PURE__ */ (0, import_react90.createElement)(
+  return (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_framer_motion.AnimatePresence, { children: content && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_jsx_runtime99.Fragment, { children: /* @__PURE__ */ (0, import_react91.createElement)(
     import_framer_motion.motion.div,
     {
       ...testId,
       key: "superDrawer",
-      ...(0, import_runtime63.trussProps)({
+      ...(0, import_runtime64.trussProps)({
         position: "fixed",
         display: "df",
         justifyContent: "jcfe",
@@ -18043,7 +18178,7 @@ function SuperDrawer() {
         bottom: "bottom0",
         left: "left0",
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime63.maybeCssVar)(zIndices.superDrawerScrim)
+          "--zIndex": (0, import_runtime64.maybeCssVar)(zIndices.superDrawerScrim)
         }]
       }),
       initial: {
@@ -18060,14 +18195,14 @@ function SuperDrawer() {
       },
       onClick: closeDrawer
     },
-    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
       import_framer_motion.motion.aside,
       {
-        ...(0, import_runtime63.trussProps)({
+        ...(0, import_runtime64.trussProps)({
           backgroundColor: "bgWhite",
           height: "h100",
           maxWidth: ["maxw_var", {
-            "--maxWidth": (0, import_runtime63.maybeCssVar)(px(width2))
+            "--maxWidth": (0, import_runtime64.maybeCssVar)(px(width2))
           }],
           width: "w100",
           display: "df",
@@ -18093,10 +18228,10 @@ function SuperDrawer() {
           x: width2
         },
         onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(AutoSaveStatusProvider, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("header", { className: "pt3 pb3 pr3 pl3 bbs_solid bbw_1px bcGray200 df aic jcsb gap3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { ref: headerRef, className: "gray900 fg1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(IconButton, { icon: "x", onClick: closeDrawer, ...testId.close })
+        children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(AutoSaveStatusProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("header", { className: "pt3 pb3 pr3 pl3 bbs_solid bbw_1px bcGray200 df aic jcsb gap3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { ref: headerRef, className: "gray900 fg1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(IconButton, { icon: "x", onClick: closeDrawer, ...testId.close })
           ] }),
           content
         ] })
@@ -18120,7 +18255,7 @@ function defaultLabel(id) {
 }
 
 // src/forms/BoundCheckboxField.tsx
-var import_jsx_runtime99 = require("react/jsx-runtime");
+var import_jsx_runtime100 = require("react/jsx-runtime");
 function BoundCheckboxField(props) {
   const {
     field,
@@ -18132,7 +18267,7 @@ function BoundCheckboxField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_mobx_react2.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_mobx_react2.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     Checkbox,
     {
       label,
@@ -18159,7 +18294,7 @@ function BoundCheckboxField(props) {
 
 // src/forms/BoundCheckboxGroupField.tsx
 var import_mobx_react3 = require("mobx-react");
-var import_jsx_runtime100 = require("react/jsx-runtime");
+var import_jsx_runtime101 = require("react/jsx-runtime");
 function BoundCheckboxGroupField(props) {
   const {
     field,
@@ -18170,7 +18305,7 @@ function BoundCheckboxGroupField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_mobx_react3.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(import_mobx_react3.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
     CheckboxGroup,
     {
       label,
@@ -18197,7 +18332,7 @@ function BoundCheckboxGroupField(props) {
 
 // src/forms/BoundChipSelectField.tsx
 var import_mobx_react4 = require("mobx-react");
-var import_jsx_runtime101 = require("react/jsx-runtime");
+var import_jsx_runtime102 = require("react/jsx-runtime");
 function BoundChipSelectField(props) {
   const {
     field,
@@ -18213,7 +18348,7 @@ function BoundChipSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(import_mobx_react4.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_mobx_react4.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
     ChipSelectField,
     {
       label,
@@ -18244,7 +18379,7 @@ function BoundChipSelectField(props) {
 
 // src/forms/BoundDateField.tsx
 var import_mobx_react5 = require("mobx-react");
-var import_jsx_runtime102 = require("react/jsx-runtime");
+var import_jsx_runtime103 = require("react/jsx-runtime");
 function BoundDateField(props) {
   const {
     field,
@@ -18257,7 +18392,7 @@ function BoundDateField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_mobx_react5.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_mobx_react5.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
     DateField,
     {
       label,
@@ -18289,7 +18424,7 @@ function BoundDateField(props) {
 
 // src/forms/BoundDateRangeField.tsx
 var import_mobx_react6 = require("mobx-react");
-var import_jsx_runtime103 = require("react/jsx-runtime");
+var import_jsx_runtime104 = require("react/jsx-runtime");
 function BoundDateRangeField(props) {
   const {
     field,
@@ -18302,7 +18437,7 @@ function BoundDateRangeField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_mobx_react6.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_mobx_react6.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
     DateRangeField,
     {
       label,
@@ -18335,125 +18470,9 @@ function BoundDateRangeField(props) {
 // src/forms/BoundForm.tsx
 var import_react93 = require("react");
 
-// src/forms/BoundIconCardField.tsx
+// src/forms/BoundListField.tsx
 var import_mobx_react7 = require("mobx-react");
-var import_jsx_runtime104 = require("react/jsx-runtime");
-function BoundIconCardField(props) {
-  const { icon, field, onChange = (value) => field.set(value), label = defaultLabel(field.key), ...others } = props;
-  const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_mobx_react7.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
-    IconCard,
-    {
-      icon,
-      label,
-      selected: field.value ?? false,
-      onChange: (selected) => {
-        onChange(selected);
-        field.maybeAutoSave();
-      },
-      disabled: field.readOnly,
-      ...testId,
-      ...others
-    }
-  ) });
-}
-
-// src/forms/BoundIconCardGroupField.tsx
-var import_mobx_react8 = require("mobx-react");
-
-// src/inputs/IconCardGroup.tsx
-var import_react91 = require("react");
-var import_react_aria43 = require("react-aria");
-var import_runtime64 = require("@homebound/truss/runtime");
 var import_jsx_runtime105 = require("react/jsx-runtime");
-function IconCardGroup(props) {
-  const {
-    fieldProps
-  } = usePresentationContext();
-  const {
-    options,
-    label,
-    labelStyle = fieldProps?.labelStyle ?? "above",
-    values,
-    errorMsg,
-    helperText,
-    disabled: isDisabled = false,
-    onChange
-  } = props;
-  const [selected, setSelected] = (0, import_react91.useState)(values);
-  const exclusiveOptions = (0, import_react91.useMemo)(() => options.filter((o) => o.exclusive), [options]);
-  const toggleValue = (0, import_react91.useCallback)((value) => {
-    if (isDisabled) return;
-    const option = options.find((o) => o.value === value);
-    if (!option) return;
-    let newSelected = [];
-    if (selected.includes(value)) {
-      newSelected = selected.filter((v) => v !== value);
-    } else {
-      if (option.exclusive) {
-        newSelected = [value];
-      } else {
-        newSelected = [...selected, value];
-        newSelected = newSelected.filter((v) => !exclusiveOptions.some((o) => o.value === v));
-      }
-    }
-    setSelected(newSelected);
-    onChange(newSelected);
-  }, [exclusiveOptions, isDisabled, onChange, options, selected]);
-  const tid = useTestIds(props);
-  const {
-    labelProps,
-    fieldProps: fieldPropsAria
-  } = (0, import_react_aria43.useField)(props);
-  const groupProps = (0, import_react_aria43.mergeProps)(tid, {
-    role: "group",
-    "aria-disabled": isDisabled || void 0,
-    ...fieldPropsAria
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { ...groupProps, children: [
-    labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { ...(0, import_runtime64.trussProps)({
-      ...labelStyle === "left" ? {
-        width: "w50"
-      } : {}
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Label, { label, ...labelProps, ...tid.label }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: "df gap2 flexWrap_wrap", children: options.map((option) => {
-      const {
-        icon,
-        label: label2,
-        disabled
-      } = option;
-      const isSelected = selected.includes(option.value);
-      return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(IconCard, { icon, label: label2, selected: isSelected, disabled, onChange: () => toggleValue(option.value), ...tid[option.label] }, option.label);
-    }) }),
-    errorMsg && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ErrorMessage, { errorMsg, ...tid.errorMsg }),
-    helperText && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(HelperText, { helperText, ...tid.helperText })
-  ] });
-}
-
-// src/forms/BoundIconCardGroupField.tsx
-var import_jsx_runtime106 = require("react/jsx-runtime");
-function BoundIconCardGroupField(props) {
-  const { field, onChange = (value) => field.set(value), label = defaultLabel(field.key), ...others } = props;
-  const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_mobx_react8.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
-    IconCardGroup,
-    {
-      label,
-      values: field.value || [],
-      onChange: (values) => {
-        onChange(values);
-        field.maybeAutoSave();
-      },
-      disabled: field.readOnly,
-      ...testId,
-      ...others
-    }
-  ) });
-}
-
-// src/forms/BoundListField.tsx
-var import_mobx_react9 = require("mobx-react");
-var import_jsx_runtime107 = require("react/jsx-runtime");
 function ListField({
   row,
   formState
@@ -18470,9 +18489,9 @@ function ListField({
   const tid = useTestIds({}, "listField");
   const filteredRows = useComputed(() => filterDeleted ? listFieldObjectState.rows.filter((rowState) => filterDeleted(rowState)) : listFieldObjectState.rows, [filterDeleted]);
   const listIsValid = useComputed(() => listFieldObjectState.valid, [filteredRows]);
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_mobx_react9.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "df fdc gap3", ...tid, children: [
-    filteredRows.map((rowState, index) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ListFieldRowInputs, { rowState, rowNumber: index + 1, listFieldConfig, formState, listFieldKey }, `listFieldRowInputs-${listFieldKey}-${index}`)),
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Button, { icon: "plus", label: `Add ${listFieldConfig.name}`, onClick: () => onNew(listFieldObjectState), variant: "secondary", disabled: !listIsValid }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_mobx_react7.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "df fdc gap3", ...tid, children: [
+    filteredRows.map((rowState, index) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ListFieldRowInputs, { rowState, rowNumber: index + 1, listFieldConfig, formState, listFieldKey }, `listFieldRowInputs-${listFieldKey}-${index}`)),
+    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Button, { icon: "plus", label: `Add ${listFieldConfig.name}`, onClick: () => onNew(listFieldObjectState), variant: "secondary", disabled: !listIsValid }) })
   ] }) });
 }
 function ListFieldRowInputs({
@@ -18486,21 +18505,21 @@ function ListFieldRowInputs({
     onDelete
   } = listFieldConfig;
   const tid = useTestIds({}, "listFieldRow");
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(import_jsx_runtime107.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "df jcsb", ...tid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("span", { className: "fw6 fz_16px lh_24px", ...tid.name, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_jsx_runtime105.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "df jcsb", ...tid, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("span", { className: "fw6 fz_16px lh_24px", ...tid.name, children: [
         listFieldConfig.name,
         " ",
         rowNumber
       ] }),
-      onDelete && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ButtonMenu, { trigger: {
+      onDelete && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ButtonMenu, { trigger: {
         icon: "verticalDots"
       }, items: [{
         label: "Delete",
         onClick: () => onDelete(formState[listFieldKey], rowState)
       }], ...tid.menu })
     ] }),
-    listFieldConfig.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(FormRow, { row, formState: rowState }, `listField-${listFieldKey}-row-${rowIndex}`))
+    listFieldConfig.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(FormRow, { row, formState: rowState }, `listField-${listFieldKey}-row-${rowIndex}`))
   ] });
 }
 function isListFieldKey(key) {
@@ -18517,8 +18536,8 @@ function isListFieldRow(row) {
 }
 
 // src/forms/BoundMultiLineSelectField.tsx
-var import_mobx_react10 = require("mobx-react");
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_mobx_react8 = require("mobx-react");
+var import_jsx_runtime106 = require("react/jsx-runtime");
 function BoundMultiLineSelectField(props) {
   const {
     field,
@@ -18535,7 +18554,7 @@ function BoundMultiLineSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_mobx_react10.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_mobx_react8.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     MultiLineSelectField,
     {
       label,
@@ -18565,8 +18584,8 @@ function BoundMultiLineSelectField(props) {
 }
 
 // src/forms/BoundMultiSelectField.tsx
-var import_mobx_react11 = require("mobx-react");
-var import_jsx_runtime109 = require("react/jsx-runtime");
+var import_mobx_react9 = require("mobx-react");
+var import_jsx_runtime107 = require("react/jsx-runtime");
 function BoundMultiSelectField(props) {
   const {
     field,
@@ -18583,7 +18602,7 @@ function BoundMultiSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_mobx_react11.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_mobx_react9.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
     MultiSelectField,
     {
       label,
@@ -18613,8 +18632,8 @@ function BoundMultiSelectField(props) {
 }
 
 // src/forms/BoundNumberField.tsx
-var import_mobx_react12 = require("mobx-react");
-var import_jsx_runtime110 = require("react/jsx-runtime");
+var import_mobx_react10 = require("mobx-react");
+var import_jsx_runtime108 = require("react/jsx-runtime");
 function BoundNumberField(props) {
   const {
     field,
@@ -18628,7 +18647,7 @@ function BoundNumberField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, label || field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_mobx_react12.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_mobx_react10.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
     NumberField,
     {
       label,
@@ -18657,8 +18676,8 @@ function BoundNumberField(props) {
 }
 
 // src/forms/BoundRadioGroupField.tsx
-var import_mobx_react13 = require("mobx-react");
-var import_jsx_runtime111 = require("react/jsx-runtime");
+var import_mobx_react11 = require("mobx-react");
+var import_jsx_runtime109 = require("react/jsx-runtime");
 function BoundRadioGroupField(props) {
   const {
     field,
@@ -18669,7 +18688,7 @@ function BoundRadioGroupField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_mobx_react13.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_mobx_react11.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
     RadioGroupField,
     {
       label,
@@ -18695,8 +18714,8 @@ function BoundRadioGroupField(props) {
 }
 
 // src/forms/BoundRichTextField.tsx
-var import_mobx_react14 = require("mobx-react");
-var import_jsx_runtime112 = require("react/jsx-runtime");
+var import_mobx_react12 = require("mobx-react");
+var import_jsx_runtime110 = require("react/jsx-runtime");
 function BoundRichTextField(props) {
   const {
     field,
@@ -18708,7 +18727,7 @@ function BoundRichTextField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_mobx_react14.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_mobx_react12.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
     RichTextField,
     {
       label,
@@ -18729,6 +18748,51 @@ function BoundRichTextField(props) {
   ) });
 }
 
+// src/forms/BoundSelectCardField.tsx
+var import_mobx_react13 = require("mobx-react");
+var import_jsx_runtime111 = require("react/jsx-runtime");
+function BoundSelectCardField(props) {
+  const { icon, field, onChange = (value) => field.set(value), label = defaultLabel(field.key), ...others } = props;
+  const testId = useTestIds(props, field.key);
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_mobx_react13.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+    SelectCard,
+    {
+      icon,
+      label,
+      selected: field.value ?? false,
+      onChange: (selected) => {
+        onChange(selected);
+        field.maybeAutoSave();
+      },
+      disabled: field.readOnly,
+      ...testId,
+      ...others
+    }
+  ) });
+}
+
+// src/forms/BoundSelectCardGroupField.tsx
+var import_mobx_react14 = require("mobx-react");
+var import_jsx_runtime112 = require("react/jsx-runtime");
+function BoundSelectCardGroupField(props) {
+  const { field, onChange = (value) => field.set(value), label = defaultLabel(field.key), ...others } = props;
+  const testId = useTestIds(props, field.key);
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_mobx_react14.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+    SelectCardGroup,
+    {
+      label,
+      values: field.value || [],
+      onChange: (values) => {
+        onChange(values);
+        field.maybeAutoSave();
+      },
+      disabled: field.readOnly,
+      ...testId,
+      ...others
+    }
+  ) });
+}
+
 // src/forms/BoundSelectField.tsx
 var import_mobx_react15 = require("mobx-react");
 var import_jsx_runtime113 = require("react/jsx-runtime");
@@ -19174,15 +19238,15 @@ function boundCheckboxGroupField(props) {
     minWidth: "200px"
   });
 }
-function boundIconCardField(props) {
+function boundSelectCardField(props) {
   return (field) => ({
-    component: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(BoundIconCardField, { field, ...props }),
+    component: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(BoundSelectCardField, { field, ...props }),
     minWidth: "150px"
   });
 }
-function boundIconCardGroupField(props) {
+function boundSelectCardGroupField(props) {
   return (field) => ({
-    component: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(BoundIconCardGroupField, { field, ...props }),
+    component: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(BoundSelectCardGroupField, { field, ...props }),
     minWidth: "100%"
   });
 }
@@ -19760,7 +19824,7 @@ var activeStyles = {
     "--boxShadow": (0, import_runtime72.maybeCssVar)(`inset 3px 0px 0 0px ${"rgba(37, 99, 235, 1)" /* Blue600 */}`)
   }]
 };
-var hoverStyles2 = {
+var hoverStyles3 = {
   backgroundColor: "bgBlue50",
   fontWeight: "fw6",
   fontSize: "fz_14px",
@@ -19828,7 +19892,7 @@ function SectionNavLink(props) {
     },
     ...isFocusVisible ? defaultFocusRingStyles : {},
     ...active ? activeStyles : {},
-    ...isPressed ? activeStyles : isHovered ? hoverStyles2 : {}
+    ...isPressed ? activeStyles : isHovered ? hoverStyles3 : {}
   }), ...tids.sectionNavLink, children: section.title });
 }
 function useActiveSection(sectionsWithRefs) {
@@ -21702,7 +21766,7 @@ function GroupButton(props) {
       },
       ...isFocusVisible ? defaultFocusRingStyles2 : {},
       ...active ? activeStyles2 : {},
-      ...isPressed ? pressedStyles : isHovered ? hoverStyles3 : {},
+      ...isPressed ? pressedStyles : isHovered ? hoverStyles4 : {},
       ...icon ? iconStyles2[size] : {}
     }), ...tid[defaultTestId(typeof text === "string" && text || icon || "button")], children: [
       icon && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Icon, { xss: {
@@ -21720,7 +21784,7 @@ var pressedStyles = {
 var activeStyles2 = {
   backgroundColor: "bgGray300"
 };
-var hoverStyles3 = {
+var hoverStyles4 = {
   backgroundColor: "bgGray100"
 };
 var defaultFocusRingStyles2 = {
@@ -22810,7 +22874,7 @@ function AppNavGroupTrigger(props) {
   const {
     baseStyles: baseStyles5,
     focusRingStyles: focusRingStyles2,
-    hoverStyles: hoverStyles4,
+    hoverStyles: hoverStyles5,
     pressedStyles: pressedStyles2
   } = (0, import_react127.useMemo)(() => getNavLinkStyles("side"), []);
   return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("button", { type: "button", ...(0, import_react_aria53.mergeProps)(buttonProps, focusProps, hoverProps, tid.trigger, {
@@ -22820,7 +22884,7 @@ function AppNavGroupTrigger(props) {
     ...(0, import_runtime96.mergeProps)(navLink, void 0, {
       ...baseStyles5,
       ...isFocusVisible && focusRingStyles2,
-      ...isHovered && hoverStyles4,
+      ...isHovered && hoverStyles5,
       ...isPressed && pressedStyles2
     })
   }), children: [
@@ -23477,7 +23541,7 @@ function TabImpl(props) {
     baseStyles: baseStyles5,
     activeStyles: activeStyles3,
     focusRingStyles: focusRingStyles2,
-    hoverStyles: hoverStyles4,
+    hoverStyles: hoverStyles5,
     disabledStyles: disabledStyles4,
     activeHoverStyles
   } = (0, import_react132.useMemo)(() => getTabStyles(), []);
@@ -23494,7 +23558,7 @@ function TabImpl(props) {
       ...baseStyles5,
       ...active && activeStyles3,
       ...isDisabled && disabledStyles4,
-      ...isHovered && hoverStyles4,
+      ...isHovered && hoverStyles5,
       ...isHovered && active && activeHoverStyles,
       ...isFocusVisible && active && focusRingStyles2
     })
@@ -24981,14 +25045,14 @@ function PageHeaderLayout(props) {
   BoundDateField,
   BoundDateRangeField,
   BoundForm,
-  BoundIconCardField,
-  BoundIconCardGroupField,
   BoundMultiLineSelectField,
   BoundMultiSelectField,
   BoundNumberField,
   BoundRadioGroupField,
   BoundRichTextField,
   BoundSelectAndTextField,
+  BoundSelectCardField,
+  BoundSelectCardGroupField,
   BoundSelectField,
   BoundSwitchField,
   BoundTextAreaField,
@@ -25048,7 +25112,6 @@ function PageHeaderLayout(props) {
   HomeboundLogo,
   Icon,
   IconButton,
-  IconCard,
   Icons,
   KEPT_GROUP,
   Loader,
@@ -25090,6 +25153,8 @@ function PageHeaderLayout(props) {
   ScrollableContent,
   ScrollableFooter,
   ScrollableParent,
+  SelectCard,
+  SelectCardGroup,
   SelectField,
   SelectToggle,
   SideNav,
@@ -25138,13 +25203,13 @@ function PageHeaderLayout(props) {
   boundCheckboxGroupField,
   boundDateField,
   boundDateRangeField,
-  boundIconCardField,
-  boundIconCardGroupField,
   boundMultiSelectField,
   boundMultilineSelectField,
   boundNumberField,
   boundRadioGroupField,
   boundRichTextField,
+  boundSelectCardField,
+  boundSelectCardGroupField,
   boundSelectField,
   boundSwitchField,
   boundTextAreaField,
@@ -25184,6 +25249,7 @@ function PageHeaderLayout(props) {
   emptyCell,
   ensureClientSideSortValueIsSortable,
   environmentBannerSizePx,
+  fillRowStyles,
   filterTestIdPrefix,
   formatDate,
   formatDateRange,
@@ -25200,7 +25266,6 @@ function PageHeaderLayout(props) {
   getTableStyles,
   headerRenderFn,
   hoverStyles,
-  iconCardStylesHover,
   increment,
   insertAtIndex,
   isContentColumn,
@@ -25242,7 +25307,6 @@ function PageHeaderLayout(props) {
   rowClickRenderFn,
   rowLinkRenderFn,
   selectColumn,
-  selectedStyles,
   setDefaultStyle,
   setEnvironmentFavicon,
   setGridTableDefaults,