@homebound/beam 3.34.1 → 3.35.0

package/dist/index.js

@@ -4882,7 +4882,21 @@ var Icons = {
     /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsx3("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__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsx3("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__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx3("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__ */ jsx3("path", { d: "M7 11H17V13H7V11Z" })
+  ] }),
+  package: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsx3("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
@@ -5042,7 +5056,7 @@ function Chips(props) {
 // src/components/Table/GridTable.tsx
 import memoizeOne from "memoize-one";
 import { runInAction } from "mobx";
-import React13, { useEffect as useEffect20, useMemo as useMemo26, useRef as useRef41, useState as useState32 } from "react";
+import React13, { useEffect as useEffect20, useMemo as useMemo27, useRef as useRef41, useState as useState33 } from "react";
 import { Virtuoso as Virtuoso2, VirtuosoGrid } from "react-virtuoso";
 
 // src/components/Layout/ScrollableContent.tsx
@@ -5233,7 +5247,7 @@ var sizeToPixels = {
 // src/components/Table/GridTableApi.ts
 import { comparer } from "mobx";
 import { computedFn } from "mobx-utils";
-import { useMemo as useMemo23 } from "react";
+import { useMemo as useMemo24 } from "react";
 
 // src/components/Table/types.ts
 var nonKindGridColumnKeys = [
@@ -9932,7 +9946,7 @@ function Button(props) {
   } = useHover5(ariaProps);
   const {
     baseStyles: baseStyles5,
-    hoverStyles: hoverStyles4,
+    hoverStyles: hoverStyles5,
     disabledStyles: disabledStyles4,
     pressedStyles: pressedStyles2,
     focusStyles: focusStyles2
@@ -9961,7 +9975,7 @@ function Button(props) {
         textTransform: "tt_inherit"
       },
       ...baseStyles5,
-      ...isHovered && !isPressed && !active ? hoverStyles4 : {},
+      ...isHovered && !isPressed && !active ? hoverStyles5 : {},
       ...isPressed || active ? pressedStyles2 : {},
       ...isDisabled || asyncInProgress ? {
         ...disabledStyles4,
@@ -10364,7 +10378,7 @@ function NavLink(props) {
     baseStyles: baseStyles5,
     activeStyles: activeStyles3,
     focusRingStyles: focusRingStyles2,
-    hoverStyles: hoverStyles4,
+    hoverStyles: hoverStyles5,
     disabledStyles: disabledStyles4,
     pressedStyles: pressedStyles2
   } = useMemo13(() => getNavLinkStyles(variant), [variant]);
@@ -10384,7 +10398,7 @@ function NavLink(props) {
       ...active && activeStyles3,
       ...isDisabled && disabledStyles4,
       ...isFocusVisible && focusRingStyles2,
-      ...isHovered && hoverStyles4,
+      ...isHovered && hoverStyles5,
       ...isPressed && pressedStyles2
     })
   };
@@ -13525,102 +13539,10 @@ function DateRangeField(props) {
   return /* @__PURE__ */ jsx67(DateFieldBase, { ...props, mode: "range" });
 }
 
-// src/inputs/IconCard.tsx
-import { useMemo as useMemo18 } from "react";
-import { useCheckbox as useCheckbox2, useHover as useHover11, VisuallyHidden as VisuallyHidden4 } from "react-aria";
-import { useToggleState as useToggleState2 } from "react-stately";
-import { trussProps as trussProps42 } from "@homebound/truss/runtime";
-import { jsx as jsx68, jsxs as jsxs41 } from "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
-  } = useHover11({
-    isDisabled
-  });
-  const toggleState = useToggleState2(ariaProps);
-  const {
-    inputProps
-  } = useCheckbox2(checkboxProps, toggleState, ref);
-  const styles = useMemo18(() => ({
-    ...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__ */ jsxs41("button", { ...trussProps42(styles), ...hoverProps, onClick: toggleState.toggle, disabled: isDisabled, ...tid, children: [
-      /* @__PURE__ */ jsx68(VisuallyHidden4, { children: /* @__PURE__ */ jsx68("input", { ref, ...inputProps, ...tid.value }) }),
-      /* @__PURE__ */ jsx68(Icon, { icon, inc: 4, color: isDisabled ? "rgba(221, 220, 220, 1)" /* Gray300 */ : "rgba(36, 36, 36, 1)" /* Gray900 */ }),
-      /* @__PURE__ */ jsx68("span", { ...trussProps42({
-        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
 import { useState as useState23 } from "react";
-import { trussProps as trussProps43 } from "@homebound/truss/runtime";
-import { jsx as jsx69, jsxs as jsxs42 } from "react/jsx-runtime";
+import { trussProps as trussProps42 } from "@homebound/truss/runtime";
+import { jsx as jsx68, jsxs as jsxs41 } from "react/jsx-runtime";
 function MultiLineSelectField(props) {
   const {
     options,
@@ -13634,27 +13556,27 @@ function MultiLineSelectField(props) {
   const tid = useTestIds(props, "");
   const [isDisplayed, setIsDisplayed] = useState23(true);
   const currentOptions = options.filter((o) => !values.includes(getOptionValue(o)));
-  return /* @__PURE__ */ jsxs42("div", { ...trussProps43({
+  return /* @__PURE__ */ jsxs41("div", { ...trussProps42({
     marginTop: "mt1",
     ...labelStyle === "left" ? {
       display: "df"
     } : {}
   }), children: [
-    labelStyle !== "hidden" && /* @__PURE__ */ jsx69("div", { ...trussProps43({
+    labelStyle !== "hidden" && /* @__PURE__ */ jsx68("div", { ...trussProps42({
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
-    }), children: /* @__PURE__ */ jsx69(Label, { ...tid.label, label: props.label }) }),
-    /* @__PURE__ */ jsxs42("div", { ...trussProps43({
+    }), children: /* @__PURE__ */ jsx68(Label, { ...tid.label, label: props.label }) }),
+    /* @__PURE__ */ jsxs41("div", { ...trussProps42({
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
     }), children: [
       values.map((value, index) => {
-        return /* @__PURE__ */ jsxs42("div", { className: "mb1 pl1 df", children: [
-          /* @__PURE__ */ jsx69("div", { className: "wsnw oh to_ellipsis w100", children: /* @__PURE__ */ jsx69(SelectField, { ...otherProps, ...tid.selectField, labelStyle: "hidden", value, onSelect: () => {
+        return /* @__PURE__ */ jsxs41("div", { className: "mb1 pl1 df", children: [
+          /* @__PURE__ */ jsx68("div", { className: "wsnw oh to_ellipsis w100", children: /* @__PURE__ */ jsx68(SelectField, { ...otherProps, ...tid.selectField, labelStyle: "hidden", value, onSelect: () => {
           }, options, getOptionValue, getOptionLabel, compact: true, readOnly: true }) }),
-          /* @__PURE__ */ jsx69(Button, { ...tid.deleteSelected, variant: "tertiary", label: "", "aria-label": `Delete selected ${otherProps.label}`, icon: "x", onClick: () => {
+          /* @__PURE__ */ jsx68(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);
@@ -13662,17 +13584,17 @@ function MultiLineSelectField(props) {
           } })
         ] }, index);
       }),
-      isDisplayed && /* @__PURE__ */ jsx69("div", { className: "mb1", children: /* @__PURE__ */ jsx69(SelectField, { ...tid.selectField, label: otherProps.label, labelStyle: "hidden", getOptionValue, getOptionLabel, value: "", onSelect: (value) => {
+      isDisplayed && /* @__PURE__ */ jsx68("div", { className: "mb1", children: /* @__PURE__ */ jsx68(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__ */ jsx69(Button, { ...tid.addAnother, label: "Add Another", variant: "tertiary", onClick: () => setIsDisplayed(true), disabled: isDisplayed || currentOptions.length === 0 })
+      /* @__PURE__ */ jsx68(Button, { ...tid.addAnother, label: "Add Another", variant: "tertiary", onClick: () => setIsDisplayed(true), disabled: isDisplayed || currentOptions.length === 0 })
     ] })
   ] });
 }
 
 // src/inputs/MultiSelectField.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 function MultiSelectField(props) {
   const {
     getOptionValue = (opt) => opt.id,
@@ -13681,15 +13603,15 @@ function MultiSelectField(props) {
     // if unset, assume O implements HasName
     ...otherProps
   } = props;
-  return /* @__PURE__ */ jsx70(ComboBoxBase, { multiselect: true, getOptionLabel, getOptionValue, ...otherProps });
+  return /* @__PURE__ */ jsx69(ComboBoxBase, { multiselect: true, getOptionLabel, getOptionValue, ...otherProps });
 }
 
 // src/inputs/NumberField.tsx
 import { NumberParser } from "@internationalized/number";
-import { useMemo as useMemo19, useRef as useRef29, useState as useState24 } from "react";
+import { useMemo as useMemo18, useRef as useRef29, useState as useState24 } from "react";
 import { mergeProps as mergeProps15, useLocale, useNumberField } from "react-aria";
 import { useNumberFieldState } from "react-stately";
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 function NumberField(props) {
   const {
     fieldProps
@@ -13729,7 +13651,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 = useMemo19(() => ({
+  const defaultFormatOptions = useMemo18(() => ({
     [truncate ? "maximumFractionDigits" : "minimumFractionDigits"]: numFractionDigits,
     ...numIntegerDigits !== void 0 && {
       minimumIntegerDigits: numIntegerDigits
@@ -13740,7 +13662,7 @@ function NumberField(props) {
   const {
     locale
   } = useLocale();
-  const formatOptions = useMemo19(() => {
+  const formatOptions = useMemo18(() => {
     if (numberFormatOptions !== void 0) {
       return numberFormatOptions;
     }
@@ -13772,7 +13694,7 @@ function NumberField(props) {
       ...typeFormat
     };
   }, [type, numberFormatOptions, defaultFormatOptions, numFractionDigits]);
-  const numberParser = useMemo19(() => new NumberParser(locale, formatOptions), [locale, formatOptions]);
+  const numberParser = useMemo18(() => new NumberParser(locale, formatOptions), [locale, formatOptions]);
   const valueRef = useRef29({
     wip: false
   });
@@ -13834,7 +13756,7 @@ function NumberField(props) {
   if (readOnly && !inputRef.current) {
     inputRef.current = document.createElement("input");
   }
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx70(
     TextFieldBase,
     {
       xss: {
@@ -13877,11 +13799,11 @@ function formatValue(value, factor, numFractionDigits, numIntegerDigits, positiv
 }
 
 // src/inputs/RadioGroupField.tsx
-import { Fragment as Fragment19, useMemo as useMemo20, useRef as useRef30 } from "react";
-import { useFocusRing as useFocusRing6, useHover as useHover12, useRadio, useRadioGroup } from "react-aria";
+import { Fragment as Fragment19, useMemo as useMemo19, useRef as useRef30 } from "react";
+import { useFocusRing as useFocusRing6, useHover as useHover11, useRadio, useRadioGroup } from "react-aria";
 import { useRadioGroupState } from "react-stately";
-import { trussProps as trussProps44, maybeCssVar as maybeCssVar26 } from "@homebound/truss/runtime";
-import { jsx as jsx72, jsxs as jsxs43 } from "react/jsx-runtime";
+import { trussProps as trussProps43, maybeCssVar as maybeCssVar26 } from "@homebound/truss/runtime";
+import { jsx as jsx71, jsxs as jsxs42 } from "react/jsx-runtime";
 var nextNameId = 0;
 function RadioGroupField(props) {
   const {
@@ -13897,7 +13819,7 @@ function RadioGroupField(props) {
     layout = "vertical",
     ...otherProps
   } = props;
-  const name = useMemo20(() => `radio-group-${++nextNameId}`, []);
+  const name = useMemo19(() => `radio-group-${++nextNameId}`, []);
   const state = useRadioGroupState({
     name,
     value,
@@ -13917,7 +13839,7 @@ function RadioGroupField(props) {
   }, state);
   return (
     // default styling to position `<Label />` above.
-    /* @__PURE__ */ jsxs43("div", { ...trussProps44({
+    /* @__PURE__ */ jsxs42("div", { ...trussProps43({
       display: "df",
       flexDirection: "fdc",
       gap: "gap1",
@@ -13928,9 +13850,9 @@ function RadioGroupField(props) {
         justifyContent: "jcsb"
       } : {}
     }), children: [
-      /* @__PURE__ */ jsx72(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: labelStyle === "hidden" }),
-      /* @__PURE__ */ jsxs43("div", { ...radioGroupProps, children: [
-        /* @__PURE__ */ jsx72("div", { ...trussProps44({
+      /* @__PURE__ */ jsx71(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: labelStyle === "hidden" }),
+      /* @__PURE__ */ jsxs42("div", { ...radioGroupProps, children: [
+        /* @__PURE__ */ jsx71("div", { ...trussProps43({
           display: "df",
           ...layout === "horizontal" ? {
             flexDirection: "fdr",
@@ -13941,14 +13863,14 @@ function RadioGroupField(props) {
             gap: "gap1"
           }
         }), children: options.map((option) => {
-          return /* @__PURE__ */ jsx72(Fragment19, { children: maybeTooltip({
+          return /* @__PURE__ */ jsx71(Fragment19, { children: maybeTooltip({
             title: resolveTooltip(option.disabled),
             placement: "bottom",
-            children: /* @__PURE__ */ jsx72(Radio, { parentId: name, option, state, isOptionDisabled: !!option.disabled, ...otherProps, ...tid[option.value] })
+            children: /* @__PURE__ */ jsx71(Radio, { parentId: name, option, state, isOptionDisabled: !!option.disabled, ...otherProps, ...tid[option.value] })
           }) }, option.value);
         }) }),
-        errorMsg && /* @__PURE__ */ jsx72(ErrorMessage, { errorMsg, ...tid.errorMsg }),
-        helperText && /* @__PURE__ */ jsx72(HelperText, { helperText })
+        errorMsg && /* @__PURE__ */ jsx71(ErrorMessage, { errorMsg, ...tid.errorMsg }),
+        helperText && /* @__PURE__ */ jsx71(HelperText, { helperText })
       ] })
     ] })
   );
@@ -13984,22 +13906,22 @@ function Radio(props) {
   const {
     hoverProps,
     isHovered
-  } = useHover12({
+  } = useHover11({
     isDisabled: disabled
   });
-  return /* @__PURE__ */ jsxs43("label", { ...trussProps44({
+  return /* @__PURE__ */ jsxs42("label", { ...trussProps43({
     display: "df",
     cursor: "cursorPointer",
     ...disabled ? {
       cursor: "cursor_initial"
     } : {}
   }), ...hoverProps, children: [
-    /* @__PURE__ */ jsx72(
+    /* @__PURE__ */ jsx71(
       "input",
       {
         type: "radio",
         ref,
-        ...trussProps44({
+        ...trussProps43({
           ...radioReset,
           ...radioDefault,
           ...!disabled && state.selectedValue === value ? radioChecked : radioUnchecked,
@@ -14019,8 +13941,8 @@ function Radio(props) {
         ...others
       }
     ),
-    /* @__PURE__ */ jsxs43("div", { children: [
-      /* @__PURE__ */ jsx72("div", { id: labelId, ...trussProps44({
+    /* @__PURE__ */ jsxs42("div", { children: [
+      /* @__PURE__ */ jsx71("div", { id: labelId, ...trussProps43({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -14031,7 +13953,7 @@ function Radio(props) {
       }), ...description ? {
         "aria-describedby": descriptionId
       } : {}, children: label }),
-      description && /* @__PURE__ */ jsx72("div", { id: descriptionId, ...trussProps44({
+      description && /* @__PURE__ */ jsx71("div", { id: descriptionId, ...trussProps43({
         fontWeight: "fw4",
         fontSize: "fz_14px",
         lineHeight: "lh_20px",
@@ -14136,19 +14058,19 @@ var radioDisabled = {
 
 // src/inputs/RichTextField.tsx
 import DOMPurify from "dompurify";
-import { createElement, useEffect as useEffect16, useMemo as useMemo21, useRef as useRef31, useState as useState26 } from "react";
+import { createElement, useEffect as useEffect16, useMemo as useMemo20, useRef as useRef31, useState as useState26 } from "react";
 
 // src/inputs/RichTextField.mock.tsx
 import { camelCase as camelCase4 } from "change-case";
 import { useState as useState25 } from "react";
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 function RichTextFieldMock(props) {
   const { onBlur = () => {
   }, onFocus = () => {
   }, readOnly } = props;
   const [value, setValue] = useState25(props.value || "");
   const tid = useTestIds(props, defaultTestId2(props.label || "richTextField"));
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx72(
     "input",
     {
       type: "text",
@@ -14174,8 +14096,8 @@ import Tribute from "tributejs";
 import "tributejs/dist/tribute.css";
 import "trix/dist/trix";
 import "trix/dist/trix.css";
-import { trussProps as trussProps45 } from "@homebound/truss/runtime";
-import { jsx as jsx74, jsxs as jsxs44 } from "react/jsx-runtime";
+import { trussProps as trussProps44 } from "@homebound/truss/runtime";
+import { jsx as jsx73, jsxs as jsxs43 } from "react/jsx-runtime";
 var RichTextField = withTestMock(RichTextFieldImpl, RichTextFieldMock);
 function RichTextFieldImpl(props) {
   const {
@@ -14200,7 +14122,7 @@ function RichTextFieldImpl(props) {
   onBlurRef.current = onBlur;
   const onFocusRef = useRef31(onFocus);
   onFocusRef.current = onFocus;
-  const id = useMemo21(() => {
+  const id = useMemo20(() => {
     if (readOnly) return;
     const id2 = `trix-editor-${trixId}`;
     trixId++;
@@ -14254,15 +14176,15 @@ function RichTextFieldImpl(props) {
     autoFocus
   } = props;
   if (!readOnly) {
-    return /* @__PURE__ */ jsxs44("div", { ...trussProps45({
+    return /* @__PURE__ */ jsxs43("div", { ...trussProps44({
       width: "w100",
       ...!fullWidth ? {
         maxWidth: "maxw_550px"
       } : {}
     }), children: [
-      label && /* @__PURE__ */ jsx74(Label, { labelProps: {}, label }),
-      /* @__PURE__ */ jsxs44("div", { className: "beam-trix-editor", children: [
-        /* @__PURE__ */ jsx74("input", { type: "hidden", id: `input-${id}`, value }),
+      label && /* @__PURE__ */ jsx73(Label, { labelProps: {}, label }),
+      /* @__PURE__ */ jsxs43("div", { className: "beam-trix-editor", children: [
+        /* @__PURE__ */ jsx73("input", { type: "hidden", id: `input-${id}`, value }),
         createElement("trix-editor", {
           id,
           input: `input-${id}`,
@@ -14277,14 +14199,14 @@ function RichTextFieldImpl(props) {
       ] })
     ] });
   } else {
-    return /* @__PURE__ */ jsxs44("div", { ...trussProps45({
+    return /* @__PURE__ */ jsxs43("div", { ...trussProps44({
       width: "w100",
       ...!fullWidth ? {
         maxWidth: "maxw_550px"
       } : {}
     }), children: [
-      label && /* @__PURE__ */ jsx74(Label, { label }),
-      /* @__PURE__ */ jsx74("div", { className: "mh_120px bgWhite fw4 fz_14px lh_20px gray900 bss bw1 pt1 pb1 pr1 pl1 br4 bcGray300", dangerouslySetInnerHTML: {
+      label && /* @__PURE__ */ jsx73(Label, { label }),
+      /* @__PURE__ */ jsx73("div", { className: "mh_120px bgWhite fw4 fz_14px lh_20px gray900 bss bw1 pt1 pb1 pr1 pl1 br4 bcGray300", dangerouslySetInnerHTML: {
         __html: DOMPurify.sanitize(value) || placeholder || ""
       }, "data-readonly": "true" })
     ] });
@@ -14317,9 +14239,222 @@ function extractIdsFromMentions(mergeTags, content) {
 }
 var trixId = 1;
 
+// src/inputs/SelectCard.tsx
+import { useMemo as useMemo21 } from "react";
+import { useCheckbox as useCheckbox2, useHover as useHover12, VisuallyHidden as VisuallyHidden4 } from "react-aria";
+import { useToggleState as useToggleState2 } from "react-stately";
+import { trussProps as trussProps45 } from "@homebound/truss/runtime";
+import { jsx as jsx74, jsxs as jsxs44 } from "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
+  } = useHover12({
+    isDisabled
+  });
+  const toggleState = useToggleState2(ariaProps);
+  const {
+    inputProps
+  } = useCheckbox2(checkboxProps, toggleState, ref);
+  const styles = useMemo21(() => ({
+    ...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__ */ jsxs44("button", { ...trussProps45(styles), ...hoverProps, onClick: toggleState.toggle, disabled: isDisabled, ...tid, children: [
+      /* @__PURE__ */ jsx74(VisuallyHidden4, { children: /* @__PURE__ */ jsx74("input", { ref, ...inputProps, ...tid.value }) }),
+      /* @__PURE__ */ jsx74(Icon, { icon, inc: 4, color: isDisabled ? "rgba(100, 100, 100, 1)" /* Gray700 */ : "rgba(36, 36, 36, 1)" /* Gray900 */ }),
+      /* @__PURE__ */ jsxs44("span", { ...trussProps45(copyStyles), children: [
+        /* @__PURE__ */ jsx74("span", { ...trussProps45({
+          fontWeight: "fw6",
+          fontSize: "fz_14px",
+          lineHeight: "lh_20px",
+          ...isDisabled ? {
+            color: "gray700"
+          } : {}
+        }), children: label }),
+        description && /* @__PURE__ */ jsx74("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
+import { useCallback as useCallback13, useMemo as useMemo22, useState as useState27 } from "react";
+import { mergeProps as mergeProps16, useField } from "react-aria";
+import { trussProps as trussProps46 } from "@homebound/truss/runtime";
+import { jsx as jsx75, jsxs as jsxs45 } from "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] = useState27(values);
+  const exclusiveOptions = useMemo22(() => options.filter((o) => o.exclusive), [options]);
+  const hasDescription = useMemo22(() => options.some((o) => o.description), [options]);
+  const toggleValue = useCallback13((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
+  } = useField(props);
+  const groupProps = mergeProps16(tid, {
+    role: "group",
+    "aria-disabled": isDisabled || void 0,
+    ...fieldPropsAria
+  });
+  return /* @__PURE__ */ jsxs45("div", { ...groupProps, children: [
+    labelStyle !== "hidden" && /* @__PURE__ */ jsx75("div", { ...trussProps46({
+      ...labelStyle === "left" ? {
+        width: "w50"
+      } : {}
+    }), children: /* @__PURE__ */ jsx75(Label, { label, ...labelProps, ...tid.label }) }),
+    /* @__PURE__ */ jsx75("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__ */ jsx75(
+        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__ */ jsx75(ErrorMessage, { errorMsg, ...tid.errorMsg }),
+    helperText && /* @__PURE__ */ jsx75(HelperText, { helperText, ...tid.helperText })
+  ] });
+}
+
 // src/inputs/SelectField.tsx
-import { useMemo as useMemo22 } from "react";
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { useMemo as useMemo23 } from "react";
+import { jsx as jsx76 } from "react/jsx-runtime";
 function SelectField(props) {
   const {
     getOptionValue = defaultOptionValue,
@@ -14329,8 +14464,8 @@ function SelectField(props) {
     value,
     ...otherProps
   } = props;
-  const values = useMemo22(() => [value], [value]);
-  return /* @__PURE__ */ jsx75(
+  const values = useMemo23(() => [value], [value]);
+  return /* @__PURE__ */ jsx76(
     ComboBoxBase,
     {
       ...otherProps,
@@ -14351,8 +14486,8 @@ function SelectField(props) {
 // src/inputs/Switch.tsx
 import { useRef as useRef32 } from "react";
 import { useFocusRing as useFocusRing7, useHover as useHover13, useSwitch, VisuallyHidden as VisuallyHidden5 } from "react-aria";
-import { trussProps as trussProps46, maybeCssVar as maybeCssVar27 } from "@homebound/truss/runtime";
-import { jsx as jsx76, jsxs as jsxs45 } from "react/jsx-runtime";
+import { trussProps as trussProps47, maybeCssVar as maybeCssVar27 } from "@homebound/truss/runtime";
+import { jsx as jsx77, jsxs as jsxs46 } from "react/jsx-runtime";
 var __maybeInc8 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -14401,7 +14536,7 @@ function Switch(props) {
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
   const tooltip = resolveTooltip(disabled, props.tooltip);
   const tid = useTestIds(otherProps, label);
-  return /* @__PURE__ */ jsxs45("label", { ...hoverProps, ...trussProps46({
+  return /* @__PURE__ */ jsxs46("label", { ...hoverProps, ...trussProps47({
     ...{
       position: "relative",
       cursor: "cursorPointer",
@@ -14439,18 +14574,18 @@ function Switch(props) {
       color: "gray400"
     }
   }), children: [
-    labelStyle !== "inline" && labelStyle !== "hidden" && /* @__PURE__ */ jsx76("div", { children: /* @__PURE__ */ jsx76(Label, { label, tooltip, xss: {
+    labelStyle !== "inline" && labelStyle !== "hidden" && /* @__PURE__ */ jsx77("div", { children: /* @__PURE__ */ jsx77(Label, { label, tooltip, xss: {
       ...labelStyle === "filter" ? {
         color: "gray900"
       } : {}
     }, inline: labelStyle === "left" || labelStyle === "filter" }) }),
-    /* @__PURE__ */ jsx76("div", { ...trussProps46({
+    /* @__PURE__ */ jsx77("div", { ...trussProps47({
       ...labelStyle === "left" ? {
         width: ["w_var", {
           "--width": maybeCssVar27(__maybeInc8(labelLeftFieldWidth))
         }]
       } : {}
-    }), children: /* @__PURE__ */ jsx76("div", { "aria-hidden": "true", ...trussProps46({
+    }), children: /* @__PURE__ */ jsx77("div", { "aria-hidden": "true", ...trussProps47({
       ...{
         width: ["w_var", {
           "--width": `${toggleWidth(compact)}px`
@@ -14472,14 +14607,14 @@ function Switch(props) {
         backgroundColor: "bgBlue700"
       },
       ...isSelected && isHovered && switchSelectedHoverStyles
-    }), children: /* @__PURE__ */ jsx76("div", { ...trussProps46({
+    }), children: /* @__PURE__ */ jsx77("div", { ...trussProps47({
       ...switchCircleDefaultStyles(compact),
       ...isDisabled && {
         backgroundColor: "bgGray100"
       },
       ...isSelected && switchCircleSelectedStyles(compact)
-    }), children: withIcon && /* @__PURE__ */ jsx76(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__ */ jsx76(Label, { label, tooltip, inline: true, xss: {
+    }), children: withIcon && /* @__PURE__ */ jsx77(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__ */ jsx77(Label, { label, tooltip, inline: true, xss: {
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -14488,7 +14623,7 @@ function Switch(props) {
         lineHeight: "lineHeight_1"
       } : {}
     } }),
-    /* @__PURE__ */ jsx76(VisuallyHidden5, { children: /* @__PURE__ */ jsx76("input", { ref, ...inputProps, ...focusProps, ...tid }) })
+    /* @__PURE__ */ jsx77(VisuallyHidden5, { children: /* @__PURE__ */ jsx77("input", { ref, ...inputProps, ...focusProps, ...tid }) })
   ] });
 }
 var toggleHeight = (isCompact) => isCompact ? 16 : 24;
@@ -14535,8 +14670,8 @@ function switchCircleSelectedStyles(isCompact) {
 
 // src/inputs/TextAreaField.tsx
 import { useRef as useRef33 } from "react";
-import { mergeProps as mergeProps16, useTextField as useTextField3 } from "react-aria";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { mergeProps as mergeProps17, useTextField as useTextField3 } from "react-aria";
+import { jsx as jsx78 } from "react/jsx-runtime";
 function TextAreaField(props) {
   const {
     value = "",
@@ -14575,10 +14710,10 @@ function TextAreaField(props) {
     },
     inputRef
   );
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     TextFieldBase,
     {
-      ...mergeProps16(otherProps, { onBlur, onFocus }),
+      ...mergeProps17(otherProps, { onBlur, onFocus }),
       multiline: true,
       labelProps,
       inputProps,
@@ -14592,8 +14727,8 @@ function TextAreaField(props) {
 
 // src/inputs/TextField.tsx
 import { useRef as useRef34 } from "react";
-import { mergeProps as mergeProps17, useTextField as useTextField4 } from "react-aria";
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { mergeProps as mergeProps18, useTextField as useTextField4 } from "react-aria";
+import { jsx as jsx79 } from "react/jsx-runtime";
 function TextField(props) {
   const {
     disabled = false,
@@ -14639,10 +14774,10 @@ function TextField(props) {
       focus: () => inputRef.current && inputRef.current.focus()
     };
   }
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx79(
     TextFieldBase,
     {
-      ...mergeProps17(textFieldProps, { onBlur, onFocus }),
+      ...mergeProps18(textFieldProps, { onBlur, onFocus }),
       errorMsg,
       required,
       labelProps,
@@ -14655,11 +14790,11 @@ function TextField(props) {
 }
 
 // src/inputs/ToggleButton.tsx
-import { useRef as useRef35, useState as useState27 } from "react";
+import { useRef as useRef35, useState as useState28 } from "react";
 import { useFocusRing as useFocusRing8, useHover as useHover14, usePress, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden6 } from "react-aria";
 import { useToggleState as useToggleState3 } from "react-stately";
-import { trussProps as trussProps47 } from "@homebound/truss/runtime";
-import { jsx as jsx79, jsxs as jsxs46 } from "react/jsx-runtime";
+import { trussProps as trussProps48 } from "@homebound/truss/runtime";
+import { jsx as jsx80, jsxs as jsxs47 } from "react/jsx-runtime";
 function ToggleButton(props) {
   const {
     selected: isSelected = false,
@@ -14670,7 +14805,7 @@ function ToggleButton(props) {
     __storyState,
     ...otherProps
   } = props;
-  const [asyncInProgress, setAsyncInProgress] = useState27(false);
+  const [asyncInProgress, setAsyncInProgress] = useState28(false);
   const isDisabled = !!disabled || asyncInProgress;
   const ariaProps = {
     "aria-label": label,
@@ -14723,7 +14858,7 @@ function ToggleButton(props) {
     ...focusProps,
     ...hoverProps,
     ...pressProps,
-    ...trussProps47({
+    ...trussProps48({
       ...{
         borderRadius: "br4",
         display: "dif",
@@ -14758,10 +14893,10 @@ function ToggleButton(props) {
   return maybeTooltip({
     title: tooltip,
     placement: "top",
-    children: /* @__PURE__ */ jsxs46("label", { ...labelAttrs, children: [
-      icon && /* @__PURE__ */ jsx79(Icon, { icon }),
+    children: /* @__PURE__ */ jsxs47("label", { ...labelAttrs, children: [
+      icon && /* @__PURE__ */ jsx80(Icon, { icon }),
       label,
-      /* @__PURE__ */ jsx79(VisuallyHidden6, { children: /* @__PURE__ */ jsx79("input", { ref, ...inputProps, ...tid.value }) })
+      /* @__PURE__ */ jsx80(VisuallyHidden6, { children: /* @__PURE__ */ jsx80("input", { ref, ...inputProps, ...tid.value }) })
     ] })
   });
 }
@@ -14779,8 +14914,8 @@ var togglePressStyles = {
 import { useRef as useRef36 } from "react";
 import { useCheckboxGroup as useCheckboxGroup2, useCheckboxGroupItem as useCheckboxGroupItem2, useFocusRing as useFocusRing9, VisuallyHidden as VisuallyHidden7 } from "react-aria";
 import { useCheckboxGroupState as useCheckboxGroupState2 } from "react-stately";
-import { trussProps as trussProps48, maybeCssVar as maybeCssVar28 } from "@homebound/truss/runtime";
-import { jsx as jsx80, jsxs as jsxs47 } from "react/jsx-runtime";
+import { trussProps as trussProps49, maybeCssVar as maybeCssVar28 } from "@homebound/truss/runtime";
+import { jsx as jsx81, jsxs as jsxs48 } from "react/jsx-runtime";
 var __maybeInc9 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -14811,7 +14946,7 @@ function ToggleChipGroup(props) {
   } = useCheckboxGroup2(props, state);
   const tid = useTestIds(props, "toggleChip");
   const labelSuffix = useLabelSuffix(required, false);
-  return /* @__PURE__ */ jsxs47("div", { ...groupProps, ...trussProps48({
+  return /* @__PURE__ */ jsxs48("div", { ...groupProps, ...trussProps49({
     position: "relative",
     display: "df",
     flexDirection: "fdc",
@@ -14822,8 +14957,8 @@ function ToggleChipGroup(props) {
       justifyContent: "jcsb"
     } : {}
   }), children: [
-    /* @__PURE__ */ jsx80(Label, { label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix }),
-    /* @__PURE__ */ jsx80("div", { ...trussProps48({
+    /* @__PURE__ */ jsx81(Label, { label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix }),
+    /* @__PURE__ */ jsx81("div", { ...trussProps49({
       display: "df",
       gap: "gap1",
       flexWrap: "flexWrap_wrap",
@@ -14832,7 +14967,7 @@ function ToggleChipGroup(props) {
           "--width": maybeCssVar28(__maybeInc9(labelLeftFieldWidth))
         }]
       } : {}
-    }), children: options.map((o) => /* @__PURE__ */ jsx80(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__ */ jsx81(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) {
@@ -14888,7 +15023,7 @@ function ToggleChip2(props) {
   return maybeTooltip({
     title: tooltip,
     placement: "top",
-    children: /* @__PURE__ */ jsxs47("label", { ...trussProps48({
+    children: /* @__PURE__ */ jsxs48("label", { ...trussProps49({
       ...{
         position: "relative",
         display: "dif",
@@ -14909,7 +15044,7 @@ function ToggleChip2(props) {
         boxShadow: "bshFocus"
       } : {}
     }), "data-selected": isSelected, "data-disabled": isDisabled, "aria-disabled": isDisabled, ...others, children: [
-      /* @__PURE__ */ jsx80(VisuallyHidden7, { children: /* @__PURE__ */ jsx80("input", { ...inputProps, ...focusProps }) }),
+      /* @__PURE__ */ jsx81(VisuallyHidden7, { children: /* @__PURE__ */ jsx81("input", { ...inputProps, ...focusProps }) }),
       startAdornment,
       label
     ] })
@@ -14917,12 +15052,12 @@ function ToggleChip2(props) {
 }
 
 // src/components/Table/components/SelectToggle.tsx
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 function SelectToggle({ id, disabled }) {
   const { tableState } = useContext15(TableStateContext);
   const state = useComputed(() => tableState.getSelected(id), [tableState]);
   const selected = state === "checked" ? true : state === "unchecked" ? false : "indeterminate";
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx82(
     Checkbox,
     {
       checkboxOnly: true,
@@ -14935,7 +15070,7 @@ function SelectToggle({ id, disabled }) {
 }
 
 // src/components/Table/utils/columns.tsx
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
 function column(columnDef) {
   return {
     canHide: true,
@@ -14988,7 +15123,7 @@ function selectColumn(columnDef) {
     return (data, {
       row
     }) => ({
-      content: /* @__PURE__ */ jsx82(SelectToggle, { id: row.id, disabled: row.selectable === false })
+      content: /* @__PURE__ */ jsx83(SelectToggle, { id: row.id, disabled: row.selectable === false })
     });
   });
 }
@@ -15012,7 +15147,7 @@ function collapseColumn(columnDef) {
       row,
       level
     }) => ({
-      content: /* @__PURE__ */ jsx82(CollapseToggle, { row, compact: level > 0 })
+      content: /* @__PURE__ */ jsx83(CollapseToggle, { row, compact: level > 0 })
     });
   });
 }
@@ -15036,7 +15171,7 @@ function pinColumn(columnDef) {
     return (data, {
       row
     }) => ({
-      content: /* @__PURE__ */ jsx82(PinToggle, { rowId: row.id })
+      content: /* @__PURE__ */ jsx83(PinToggle, { rowId: row.id })
     });
   });
 }
@@ -15294,10 +15429,10 @@ function dragHandleColumn(columnDef) {
         onDragOver
       } = dragData;
       return {
-        content: row.draggable ? /* @__PURE__ */ jsx82("div", { draggable: row.draggable, onDragStart: (evt) => {
+        content: row.draggable ? /* @__PURE__ */ jsx83("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__ */ jsx82(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__ */ jsx83(Icon, { icon: "drag" }) }) : void 0
       };
     };
   });
@@ -15361,7 +15496,7 @@ function shouldSkipScrollTo(index, virtuosoRangeRef) {
 
 // src/components/Table/GridTableApi.ts
 function useGridTableApi() {
-  return useMemo23(() => new GridTableApiImpl(), []);
+  return useMemo24(() => new GridTableApiImpl(), []);
 }
 var GridTableApiImpl = class {
   // This is public to GridTable but not exported outside of Beam
@@ -15534,10 +15669,10 @@ function maybeApply(maybeFn) {
 }
 
 // src/components/Table/hooks/useColumnResizeHandlers.ts
-import { useCallback as useCallback13, useRef as useRef37 } from "react";
+import { useCallback as useCallback14, useRef as useRef37 } from "react";
 function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWidth, setResizedWidths) {
   const hasLockedColumnsRef = useRef37(false);
-  const distributeAdjustment = useCallback13(
+  const distributeAdjustment = useCallback14(
     (rightColumns, totalRightWidth, adjustment) => {
       const updates = {};
       let remainingAdjustment = adjustment;
@@ -15552,7 +15687,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
     },
     []
   );
-  const calculateResizeUpdates = useCallback13(
+  const calculateResizeUpdates = useCallback14(
     (columnId, newWidth, columnIndex) => {
       if (!tableWidth || !columnSizes || columnSizes.length === 0) {
         return null;
@@ -15598,7 +15733,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
     },
     [tableWidth, columnSizes, columns, distributeAdjustment]
   );
-  const calculatePreviewWidth = useCallback13(
+  const calculatePreviewWidth = useCallback14(
     (columnId, newWidth, columnIndex) => {
       const result = calculateResizeUpdates(columnId, newWidth, columnIndex);
       if (!result) {
@@ -15608,7 +15743,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
     },
     [calculateResizeUpdates]
   );
-  const handleColumnResize = useCallback13(
+  const handleColumnResize = useCallback14(
     (columnId, newWidth, columnIndex) => {
       const result = calculateResizeUpdates(columnId, newWidth, columnIndex);
       if (!result) {
@@ -15645,10 +15780,10 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
 }
 
 // src/components/Table/hooks/useScrollStorage.ts
-import { useMemo as useMemo24 } from "react";
+import { useMemo as useMemo25 } from "react";
 function useScrollStorage(tableId, enabled = true) {
   const storageKey = `scrollPosition_${window.location.pathname}${window.location.search}_${tableId}`;
-  return useMemo24(
+  return useMemo25(
     () => ({
       getScrollIndex: () => {
         if (!enabled) return void 0;
@@ -15665,13 +15800,13 @@ function useScrollStorage(tableId, enabled = true) {
 
 // src/components/Table/hooks/useSetupColumnSizes.ts
 import { useResizeObserver } from "@react-aria/utils";
-import { useCallback as useCallback15, useEffect as useEffect18, useRef as useRef38, useState as useState29 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect18, useRef as useRef38, useState as useState30 } from "react";
 
 // src/components/Table/hooks/useColumnResizing.ts
-import { useCallback as useCallback14, useEffect as useEffect17, useState as useState28 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect17, useState as useState29 } from "react";
 import { useDebouncedCallback as useDebouncedCallback3 } from "use-debounce";
 function useColumnResizing(storageKey) {
-  const [resizedWidths, setResizedWidths] = useState28(() => {
+  const [resizedWidths, setResizedWidths] = useState29(() => {
     if (!storageKey) return {};
     try {
       const stored = sessionStorage.getItem(`columnWidths_${storageKey}`);
@@ -15691,13 +15826,13 @@ function useColumnResizing(storageKey) {
   useEffect17(() => {
     persistToStorage(resizedWidths);
   }, [resizedWidths, persistToStorage]);
-  const setResizedWidth = useCallback14((columnId, width2) => {
+  const setResizedWidth = useCallback15((columnId, width2) => {
     setResizedWidths((prev) => ({
       ...prev,
       [columnId]: width2
     }));
   }, []);
-  const batchSetResizedWidths = useCallback14((widths2) => {
+  const batchSetResizedWidths = useCallback15((widths2) => {
     if (typeof widths2 === "function") {
       setResizedWidths(widths2);
     } else {
@@ -15707,7 +15842,7 @@ function useColumnResizing(storageKey) {
       }));
     }
   }, []);
-  const resetColumnWidths = useCallback14(() => {
+  const resetColumnWidths = useCallback15(() => {
     setResizedWidths({});
   }, []);
   return {
@@ -15725,13 +15860,13 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
     disableColumnResizing ? void 0 : visibleColumnsStorageKey
   );
   const calculateImmediately = useRef38(true);
-  const [tableWidth, setTableWidth] = useState29();
-  const [contentWidth, setContentWidth] = useState29();
-  const [columnSizes, setColumnSizes] = useState29(
+  const [tableWidth, setTableWidth] = useState30();
+  const [contentWidth, setContentWidth] = useState30();
+  const [columnSizes, setColumnSizes] = useState30(
     () => calcColumnLayout(columns, void 0, style.minWidthPx, expandedColumnIds, resizedWidths, inDocumentScrollLayout).columnSizes
   );
   const prevTableWidthRef = useRef38(tableWidth);
-  const applyColumnLayout = useCallback15(
+  const applyColumnLayout = useCallback16(
     (probeWidth) => {
       const layout = calcColumnLayout(
         columns,
@@ -15782,7 +15917,7 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
     [columns, resizedWidths, applyColumnLayout]
   );
   const applyColumnLayoutDebounced = useDebouncedCallback4(applyColumnLayout, 100);
-  const onResize = useCallback15(
+  const onResize = useCallback16(
     () => {
       const target = resizeRef.current;
       if (target && target.clientWidth !== tableWidth) {
@@ -15811,10 +15946,10 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
 }
 
 // src/hooks/useRenderCount.ts
-import { useCallback as useCallback16, useRef as useRef39 } from "react";
+import { useCallback as useCallback17, useRef as useRef39 } from "react";
 function useRenderCount() {
   const ref = useRef39(/* @__PURE__ */ new Map());
-  const getCount = useCallback16((id) => {
+  const getCount = useCallback17((id) => {
     const count = ref.current.get(id) || 1;
     ref.current.set(id, count + 1);
     return { "data-render": count };
@@ -15824,20 +15959,20 @@ function useRenderCount() {
 
 // src/layouts/DocumentScrollLayoutContext.tsx
 import { useResizeObserver as useResizeObserver2 } from "@react-aria/utils";
-import { createContext as createContext6, useCallback as useCallback18, useContext as useContext16, useLayoutEffect as useLayoutEffect4, useRef as useRef40, useState as useState31 } from "react";
-import { mergeProps as mergeProps18 } from "@homebound/truss/runtime";
+import { createContext as createContext6, useCallback as useCallback19, useContext as useContext16, useLayoutEffect as useLayoutEffect4, useRef as useRef40, useState as useState32 } from "react";
+import { mergeProps as mergeProps19 } from "@homebound/truss/runtime";
 
 // src/layouts/DocumentScrollToTopButton.tsx
-import { useCallback as useCallback17, useEffect as useEffect19, useState as useState30 } from "react";
-import { trussProps as trussProps49, maybeCssVar as maybeCssVar29 } from "@homebound/truss/runtime";
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { useCallback as useCallback18, useEffect as useEffect19, useState as useState31 } from "react";
+import { trussProps as trussProps50, maybeCssVar as maybeCssVar29 } from "@homebound/truss/runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
 function DocumentScrollToTopButton({
   viewportHeight
 }) {
-  const [visible, setVisible] = useState30(false);
+  const [visible, setVisible] = useState31(false);
   const tid = useTestIds({}, "documentScrollToTop");
   const scrollToTopOffsetPx = 20;
-  const syncVisibility = useCallback17(() => {
+  const syncVisibility = useCallback18(() => {
     if (viewportHeight <= 0) return;
     setVisible(window.scrollY > viewportHeight);
   }, [viewportHeight]);
@@ -15848,14 +15983,14 @@ function DocumentScrollToTopButton({
     });
     return () => window.removeEventListener("scroll", syncVisibility);
   }, [syncVisibility]);
-  const scrollToTop = useCallback17(() => {
+  const scrollToTop = useCallback18(() => {
     window.scrollTo({
       top: 0
     });
   }, []);
-  return /* @__PURE__ */ jsx83("div", { ...tid.wrapper, "aria-hidden": !visible, ...!visible ? {
+  return /* @__PURE__ */ jsx84("div", { ...tid.wrapper, "aria-hidden": !visible, ...!visible ? {
     inert: ""
-  } : {}, ...trussProps49({
+  } : {}, ...trussProps50({
     ...{
       position: "fixed",
       bottom: ["bottom_var", {
@@ -15879,18 +16014,18 @@ function DocumentScrollToTopButton({
       }],
       pointerEvents: "pointerEvents_none"
     }
-  }), children: /* @__PURE__ */ jsx83(ContrastScope, { children: /* @__PURE__ */ jsx83(IconButton, { icon: "arrowUp", disabled: !visible, variant: "outline", label: "Scroll to top", onClick: scrollToTop, ...tid }) }) });
+  }), children: /* @__PURE__ */ jsx84(ContrastScope, { children: /* @__PURE__ */ jsx84(IconButton, { icon: "arrowUp", disabled: !visible, variant: "outline", label: "Scroll to top", onClick: scrollToTop, ...tid }) }) });
 }
 
 // src/layouts/DocumentScrollLayoutContext.tsx
-import { Fragment as Fragment20, jsx as jsx84, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx85, jsxs as jsxs49 } from "react/jsx-runtime";
 var DocumentScrollLayoutContext = createContext6(false);
 function DocumentScrollLayoutProvider({
   children
 }) {
   const inDocumentScrollLayout = useContext16(DocumentScrollLayoutContext);
-  if (inDocumentScrollLayout) return /* @__PURE__ */ jsx84(Fragment20, { children });
-  return /* @__PURE__ */ jsx84(DocumentScrollLayoutContext.Provider, { value: true, children: /* @__PURE__ */ jsx84(DocumentScrollLayoutViewportRoot, { children }) });
+  if (inDocumentScrollLayout) return /* @__PURE__ */ jsx85(Fragment20, { children });
+  return /* @__PURE__ */ jsx85(DocumentScrollLayoutContext.Provider, { value: true, children: /* @__PURE__ */ jsx85(DocumentScrollLayoutViewportRoot, { children }) });
 }
 function useDocumentScrollLayout() {
   return useContext16(DocumentScrollLayoutContext);
@@ -15899,11 +16034,11 @@ function DocumentScrollLayoutViewportRoot({
   children
 }) {
   const docElementRef = useRef40(typeof document !== "undefined" ? document.documentElement : null);
-  const [viewportSize, setViewportSize] = useState31({
+  const [viewportSize, setViewportSize] = useState32({
     width: 0,
     height: 0
   });
-  const syncViewportSize = useCallback18(() => {
+  const syncViewportSize = useCallback19(() => {
     const el = docElementRef.current;
     if (!el) return;
     const width2 = el.clientWidth;
@@ -15929,20 +16064,20 @@ function DocumentScrollLayoutViewportRoot({
   }
   return (
     // `display: contents` keeps vars inheritable without adding a layout box.
-    /* @__PURE__ */ jsxs48("div", { ...mergeProps18(void 0, Object.keys(style).length > 0 ? style : void 0, {
+    /* @__PURE__ */ jsxs49("div", { ...mergeProps19(void 0, Object.keys(style).length > 0 ? style : void 0, {
       display: "display_contents"
     }), children: [
       children,
-      /* @__PURE__ */ jsx84(DocumentScrollToTopButton, { viewportHeight: viewportSize.height })
+      /* @__PURE__ */ jsx85(DocumentScrollToTopButton, { viewportHeight: viewportSize.height })
     ] })
   );
 }
 
 // src/components/Table/components/TableCard.tsx
-import { useMemo as useMemo25 } from "react";
+import { useMemo as useMemo26 } from "react";
 import { Link as Link4 } from "react-router-dom";
-import { trussProps as trussProps50, mergeProps as mergeProps19, maybeCssVar as maybeCssVar30 } from "@homebound/truss/runtime";
-import { jsx as jsx85, jsxs as jsxs49 } from "react/jsx-runtime";
+import { trussProps as trussProps51, mergeProps as mergeProps20, maybeCssVar as maybeCssVar30 } from "@homebound/truss/runtime";
+import { jsx as jsx86, jsxs as jsxs50 } from "react/jsx-runtime";
 var __maybeInc10 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -15990,16 +16125,16 @@ function TableCard(props) {
     }
   }
   if (!title) return null;
-  const card = /* @__PURE__ */ jsx85(TableCardView, { ...tid, imgSrc: rs.row.imgSrc ?? "", title, eyebrow, badge, status, data: dataBlocks, progress });
+  const card = /* @__PURE__ */ jsx86(TableCardView, { ...tid, imgSrc: rs.row.imgSrc ?? "", title, eyebrow, badge, status, data: dataBlocks, progress });
   const to = rowStyle?.rowLink?.(rs.row);
   if (to) {
-    return /* @__PURE__ */ jsx85(Link4, { to, ...mergeProps19(navLink, void 0, {
+    return /* @__PURE__ */ jsx86(Link4, { to, ...mergeProps20(navLink, void 0, {
       textDecoration: "tdn",
       color: "color_unset"
     }), children: card });
   }
   if (rowStyle?.onClick) {
-    return /* @__PURE__ */ jsx85("button", { onClick: () => rowStyle.onClick(rs.row, api), className: "cursorPointer", children: card });
+    return /* @__PURE__ */ jsx86("button", { onClick: () => rowStyle.onClick(rs.row, api), className: "cursorPointer", children: card });
   }
   return card;
 }
@@ -16014,8 +16149,8 @@ function TableCardView(props) {
     progress
   } = props;
   const tid = useTestIds(props, "tableCardView");
-  const progressValue = useMemo25(() => progress !== void 0 ? clampProgress(progress) : 0, [progress]);
-  return /* @__PURE__ */ jsxs49("div", { ...trussProps50({
+  const progressValue = useMemo26(() => progress !== void 0 ? clampProgress(progress) : 0, [progress]);
+  return /* @__PURE__ */ jsxs50("div", { ...trussProps51({
     paddingTop: "pt3",
     paddingBottom: "pb3",
     paddingRight: "pr3",
@@ -16030,36 +16165,36 @@ function TableCardView(props) {
     flexDirection: "fdc",
     gap: "gap2"
   }), ...tid, children: [
-    /* @__PURE__ */ jsxs49("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx85("img", { className: "h_184px w100 objectFit_cover", src: imgSrc, alt: title, ...tid.image }),
-      status && /* @__PURE__ */ jsx85("div", { className: "absolute top1 left1", ...tid.status, children: /* @__PURE__ */ jsx85(Tag, { ...status }) })
+    /* @__PURE__ */ jsxs50("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx86("img", { className: "h_184px w100 objectFit_cover", src: imgSrc, alt: title, ...tid.image }),
+      status && /* @__PURE__ */ jsx86("div", { className: "absolute top1 left1", ...tid.status, children: /* @__PURE__ */ jsx86(Tag, { ...status }) })
     ] }),
-    /* @__PURE__ */ jsxs49("div", { className: "df fdc gap2", children: [
-      /* @__PURE__ */ jsxs49("div", { children: [
-        eyebrow && /* @__PURE__ */ jsx85("p", { className: "fw4 fz_14px lh_20px", ...tid.eyebrow, children: eyebrow }),
-        title && /* @__PURE__ */ jsxs49("div", { className: "dif w100 jcsb aic", children: [
-          /* @__PURE__ */ jsxs49("h4", { className: "fwb fz_20px lh_28px", ...tid.title, children: [
+    /* @__PURE__ */ jsxs50("div", { className: "df fdc gap2", children: [
+      /* @__PURE__ */ jsxs50("div", { children: [
+        eyebrow && /* @__PURE__ */ jsx86("p", { className: "fw4 fz_14px lh_20px", ...tid.eyebrow, children: eyebrow }),
+        title && /* @__PURE__ */ jsxs50("div", { className: "dif w100 jcsb aic", children: [
+          /* @__PURE__ */ jsxs50("h4", { className: "fwb fz_20px lh_28px", ...tid.title, children: [
             title,
             " "
           ] }),
-          badge && /* @__PURE__ */ jsx85("span", { className: "fw4 fz_14px lh_20px wsnw", ...tid.badge, children: badge })
+          badge && /* @__PURE__ */ jsx86("span", { className: "fw4 fz_14px lh_20px wsnw", ...tid.badge, children: badge })
         ] })
       ] }),
-      data && data?.length > 0 && /* @__PURE__ */ jsx85("dl", { className: "dg gtc_repeat_2_minmax_0_1fr fw4 fz_14px lh_20px", children: data.map((d, idx) => /* @__PURE__ */ jsxs49("div", { ...trussProps50({
+      data && data?.length > 0 && /* @__PURE__ */ jsx86("dl", { className: "dg gtc_repeat_2_minmax_0_1fr fw4 fz_14px lh_20px", children: data.map((d, idx) => /* @__PURE__ */ jsxs50("div", { ...trussProps51({
         display: "df",
         gap: "gap_4px",
         gridColumn: ["gc_var", {
           "--gridColumn": maybeCssVar30(idx % 2 + 1)
         }]
       }), ...tid[defaultTestId(d.label)], children: [
-        /* @__PURE__ */ jsxs49("dt", { children: [
+        /* @__PURE__ */ jsxs50("dt", { children: [
           d.label,
           ":"
         ] }),
-        /* @__PURE__ */ jsx85("dd", { children: d.value })
+        /* @__PURE__ */ jsx86("dd", { children: d.value })
       ] }, d.label)) }),
-      progress !== void 0 && /* @__PURE__ */ jsx85("div", { className: "df fdc gap1", children: /* @__PURE__ */ jsxs49("div", { className: "df aic gap1 fs_10px lh_14px", children: [
-        /* @__PURE__ */ jsx85("div", { className: "w25 h_8px br4 bgGray200", children: /* @__PURE__ */ jsx85("div", { ...trussProps50({
+      progress !== void 0 && /* @__PURE__ */ jsx86("div", { className: "df fdc gap1", children: /* @__PURE__ */ jsxs50("div", { className: "df aic gap1 fs_10px lh_14px", children: [
+        /* @__PURE__ */ jsx86("div", { className: "w25 h_8px br4 bgGray200", children: /* @__PURE__ */ jsx86("div", { ...trussProps51({
           height: "h100",
           borderRadius: "br4",
           backgroundColor: "bgBlue500",
@@ -16067,7 +16202,7 @@ function TableCardView(props) {
             "--width": maybeCssVar30(__maybeInc10(`${progressValue}%`))
           }]
         }) }) }),
-        /* @__PURE__ */ jsxs49("span", { ...tid.progressValue, children: [
+        /* @__PURE__ */ jsxs50("span", { ...tid.progressValue, children: [
           progressValue,
           "%"
         ] })
@@ -16083,8 +16218,8 @@ function clampProgress(value) {
 }
 
 // src/components/Table/GridTable.tsx
-import { trussProps as trussProps51, mergeProps as mergeProps20, maybeCssVar as maybeCssVar31 } from "@homebound/truss/runtime";
-import { jsx as jsx86, jsxs as jsxs50 } from "react/jsx-runtime";
+import { trussProps as trussProps52, mergeProps as mergeProps21, maybeCssVar as maybeCssVar31 } from "@homebound/truss/runtime";
+import { jsx as jsx87, jsxs as jsxs51 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 var __maybeInc11 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -16135,7 +16270,7 @@ function GridTable(props) {
     columnGutter = false
   } = props;
   const inDocumentScrollLayout = useDocumentScrollLayout();
-  const columnsWithIds = useMemo26(() => {
+  const columnsWithIds = useMemo27(() => {
     const columns2 = columnGutter && inDocumentScrollLayout ? withColumnGutters(_columns) : _columns;
     return assignDefaultColumnIds(columns2);
   }, [_columns, columnGutter, inDocumentScrollLayout]);
@@ -16143,7 +16278,7 @@ function GridTable(props) {
   const virtuosoRangeRef = useRef41(null);
   const resizeRef = useRef41(null);
   const tableContainerRef = useRef41(null);
-  const api = useMemo26(
+  const api = useMemo27(
     () => {
       const api2 = props.api ?? new GridTableApiImpl();
       api2.init(persistCollapse, virtuosoRef, virtuosoRangeRef);
@@ -16156,7 +16291,7 @@ function GridTable(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [props.api]
   );
-  const [draggedRow, _setDraggedRow] = useState32(void 0);
+  const [draggedRow, _setDraggedRow] = useState33(void 0);
   const draggedRowRef = useRef41(draggedRow);
   const setDraggedRow = (row) => {
     draggedRowRef.current = row;
@@ -16275,7 +16410,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__ */ jsx86(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__ */ jsx87(TableCard, { rs, columns, rowStyle: rowStyles?.[rs.row.kind], api: tableState.api }, rs.key));
       return [[], cardElements, [], [], false];
     }
     const headerRows = [];
@@ -16287,7 +16422,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__ */ jsx86(Row, { onDragStart, onDragOver, onDragEnd, onDrop, onDragEnter, ...{
+    const makeRow = (rs, isFirstHeadRow, isFirstBodyRow, isLastBodyRow) => /* @__PURE__ */ jsx87(Row, { onDragStart, onDragOver, onDragEnd, onDrop, onDragEnter, ...{
       as,
       rs,
       style,
@@ -16349,7 +16484,7 @@ function GridTable(props) {
   const borderless = style?.presentationSettings?.borderless;
   const typeScale = style?.presentationSettings?.typeScale;
   const borderOnHover = style?.presentationSettings?.borderOnHover;
-  const fieldProps = useMemo26(() => ({
+  const fieldProps = useMemo27(() => ({
     labelStyle: "hidden",
     numberAlignment: "right",
     compact: true,
@@ -16366,11 +16501,11 @@ function GridTable(props) {
     } : {}
   }), [borderOnHover, borderless, typeScale]);
   const _as = as === "virtual" && runningInJest ? "div" : as;
-  const rowStateContext = useMemo26(() => ({
+  const rowStateContext = useMemo27(() => ({
     tableState,
     tableContainerRef
   }), [tableState, tableContainerRef]);
-  const tableStyle = useMemo26(() => {
+  const tableStyle = useMemo27(() => {
     if (!inDocumentScrollLayout || contentWidth === void 0 || tableWidth === void 0) return style;
     const minWidthPx = Math.max(style.minWidthPx ?? 0, contentWidth);
     if (minWidthPx === style.minWidthPx) return style;
@@ -16379,9 +16514,9 @@ function GridTable(props) {
       minWidthPx
     };
   }, [contentWidth, inDocumentScrollLayout, style, tableWidth]);
-  return /* @__PURE__ */ jsx86(TableStateContext.Provider, { value: rowStateContext, children: /* @__PURE__ */ jsxs50(PresentationProvider, { fieldProps, wrap: style?.presentationSettings?.wrap, children: [
-    /* @__PURE__ */ jsx86("div", { ref: resizeRef, ...trussProps51(getTableRefWidthStyles(as === "virtual", inDocumentScrollLayout)) }),
-    as === "card" ? /* @__PURE__ */ jsx86(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__ */ jsx87(TableStateContext.Provider, { value: rowStateContext, children: /* @__PURE__ */ jsxs51(PresentationProvider, { fieldProps, wrap: style?.presentationSettings?.wrap, children: [
+    /* @__PURE__ */ jsx87("div", { ref: resizeRef, ...trussProps52(getTableRefWidthStyles(as === "virtual", inDocumentScrollLayout)) }),
+    as === "card" ? /* @__PURE__ */ jsx87(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 = {
@@ -16390,7 +16525,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__ */ jsxs50("div", { ref: tableContainerRef, ...trussProps51({
+  return /* @__PURE__ */ jsxs51("div", { ref: tableContainerRef, ...trussProps52({
     // 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),
@@ -16406,7 +16541,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
     } : {},
     ...xss
   }), "data-testid": id, children: [
-    /* @__PURE__ */ jsxs50("div", { ...trussProps51({
+    /* @__PURE__ */ jsxs51("div", { ...trussProps52({
       ...stickyHeader || pinnedRows.length > 0 ? {
         position: "sticky",
         transition: "transitionTop",
@@ -16421,9 +16556,9 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
       tableHeadRows,
       pinnedRows
     ] }),
-    /* @__PURE__ */ jsxs50("div", { children: [
+    /* @__PURE__ */ jsxs51("div", { children: [
       keptSelectedRows,
-      firstRowMessage && /* @__PURE__ */ jsx86("div", { ...trussProps51({
+      firstRowMessage && /* @__PURE__ */ jsx87("div", { ...trussProps52({
         ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
         ...style.firstRowMessageCss,
         ...visibleDataRows.length === 0 && style.lastRowCss,
@@ -16436,7 +16571,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__ */ jsxs50("table", { ref: tableContainerRef, ...trussProps51({
+  return /* @__PURE__ */ jsxs51("table", { ref: tableContainerRef, ...trussProps52({
     ...{
       width: "w100",
       borderCollapse: "borderCollapse_separate",
@@ -16450,7 +16585,7 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
     } : {},
     ...xss
   }), "data-testid": id, children: [
-    /* @__PURE__ */ jsxs50("thead", { ...trussProps51({
+    /* @__PURE__ */ jsxs51("thead", { ...trussProps52({
       ...stickyHeader || pinnedRows.length > 0 ? {
         position: "sticky",
         transition: "transitionTop",
@@ -16465,13 +16600,13 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
       tableHeadRows,
       pinnedRows
     ] }),
-    /* @__PURE__ */ jsxs50("tbody", { children: [
+    /* @__PURE__ */ jsxs51("tbody", { children: [
       keptSelectedRows,
-      firstRowMessage && /* @__PURE__ */ jsx86("tr", { ...trussProps51({
+      firstRowMessage && /* @__PURE__ */ jsx87("tr", { ...trussProps52({
         ...tableRowPrintBreakCss,
         ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
         ...visibleDataRows.length === 0 && style.lastRowCss
-      }), children: /* @__PURE__ */ jsx86("td", { colSpan: columns.length, ...trussProps51({
+      }), children: /* @__PURE__ */ jsx87("td", { colSpan: columns.length, ...trussProps52({
         ...style.betweenRowsCss,
         ...style.firstRowMessageCss,
         ...visibleDataRows.length === 0 && style.lastRowCellCss,
@@ -16485,7 +16620,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] = useState32(false);
+  const [fetchMoreInProgress, setFetchMoreInProgress] = useState33(false);
   const {
     getScrollIndex,
     setScrollIndex
@@ -16494,7 +16629,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__ */ jsx86(
+  return /* @__PURE__ */ jsx87(
     Virtuoso2,
     {
       useWindowScroll: inDocumentScrollLayout && !customScrollParent,
@@ -16509,7 +16644,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: React13.forwardRef((props, ref) => /* @__PURE__ */ jsx86("div", { ...props, ref, ...mergeProps20(void 0, {
+        TopItemList: React13.forwardRef((props, ref) => /* @__PURE__ */ jsx87("div", { ...props, ref, ...mergeProps21(void 0, {
           ...props.style,
           ...style.minWidthPx !== void 0 ? {
             minWidth: style.minWidthPx
@@ -16521,13 +16656,13 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, pi
         }) })),
         List: VirtualRoot(style, columns, id, xss),
         Footer: () => {
-          return /* @__PURE__ */ jsx86("div", { ...trussProps51({
+          return /* @__PURE__ */ jsx87("div", { ...trussProps52({
             ...style.virtualFooterPaddingBottomPx !== void 0 ? {
               paddingBottom: ["pb_var", {
                 "--paddingBottom": `${style.virtualFooterPaddingBottomPx ?? 0}px`
               }]
             } : {}
-          }), children: fetchMoreInProgress && /* @__PURE__ */ jsx86("div", { className: "h5 df aic jcc", children: /* @__PURE__ */ jsx86(Loader, { size: "xs" }) }) });
+          }), children: fetchMoreInProgress && /* @__PURE__ */ jsx87("div", { className: "h5 df aic jcc", children: /* @__PURE__ */ jsx87(Loader, { size: "xs" }) }) });
         }
       },
       topItemCount,
@@ -16548,11 +16683,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__ */ jsx86("div", { ...trussProps51({
+              /* @__PURE__ */ jsx87("div", { ...trussProps52({
                 ...getTableRefWidthStyles(true, inDocumentScrollLayout),
                 ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
                 ...visibleDataRows.length === 0 && style.lastRowCss
-              }), children: /* @__PURE__ */ jsx86("div", { ...trussProps51({
+              }), children: /* @__PURE__ */ jsx87("div", { ...trussProps52({
                 ...style.firstRowMessageCss,
                 ...visibleDataRows.length === 0 && style.lastRowCellCss,
                 ...visibleDataRows.length === 0 && style.lastRowFirstCellCss,
@@ -16601,7 +16736,7 @@ function CardView({
 }) {
   const customScrollParent = useVirtualizedScrollParent();
   const inDocumentScrollLayout = useDocumentScrollLayout();
-  const [fetchMoreInProgress, setFetchMoreInProgress] = useState32(false);
+  const [fetchMoreInProgress, setFetchMoreInProgress] = useState33(false);
   const {
     getScrollIndex,
     setScrollIndex
@@ -16610,9 +16745,9 @@ 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__ */ jsx86("div", { className: "pt2 pb2", children: /* @__PURE__ */ jsx86("div", { className: "dg gtc_repeat_auto_fill_330px jcc gap3 pt3 pb3 pr3 pl3", children: cardRows }) });
+    return /* @__PURE__ */ jsx87("div", { className: "pt2 pb2", children: /* @__PURE__ */ jsx87("div", { className: "dg gtc_repeat_auto_fill_330px jcc gap3 pt3 pb3 pr3 pl3", children: cardRows }) });
   }
-  return /* @__PURE__ */ jsx86("div", { className: "pt2 pb2 h100", children: /* @__PURE__ */ createElement2(VirtuosoGrid, { useWindowScroll: inDocumentScrollLayout && !customScrollParent, ...customScrollParent ? {
+  return /* @__PURE__ */ jsx87("div", { className: "pt2 pb2 h100", children: /* @__PURE__ */ createElement2(VirtuosoGrid, { useWindowScroll: inDocumentScrollLayout && !customScrollParent, ...customScrollParent ? {
     customScrollParent
   } : {}, ...validatedScrollIndex !== void 0 ? {
     initialTopMostItemIndex: validatedScrollIndex
@@ -16621,7 +16756,7 @@ function CardView({
       style,
       children
     }, ref) {
-      return /* @__PURE__ */ jsx86("div", { ref, ...mergeProps20(void 0, style, {
+      return /* @__PURE__ */ jsx87("div", { ref, ...mergeProps21(void 0, style, {
         display: "dg",
         gridTemplateColumns: "gtc_repeat_auto_fill_330px",
         justifyContent: "jcc",
@@ -16632,7 +16767,7 @@ function CardView({
         paddingLeft: "pl3"
       }), children });
     }),
-    Footer: () => /* @__PURE__ */ jsx86("div", { children: fetchMoreInProgress && /* @__PURE__ */ jsx86("div", { className: "h5 df aic jcc", children: /* @__PURE__ */ jsx86(Loader, { size: "xs" }) }) })
+    Footer: () => /* @__PURE__ */ jsx87("div", { children: fetchMoreInProgress && /* @__PURE__ */ jsx87("div", { className: "h5 df aic jcc", children: /* @__PURE__ */ jsx87(Loader, { size: "xs" }) }) })
   }, rangeChanged: (newRange) => {
     virtuosoRangeRef.current = newRange;
     if (!infiniteScroll && cardRows.length > 0) {
@@ -16658,7 +16793,7 @@ var VirtualRoot = memoizeOne((gs, _columns, id, xss) => {
     style,
     children
   }, ref) {
-    return /* @__PURE__ */ jsx86("div", { ref, ...mergeProps20(void 0, style, {
+    return /* @__PURE__ */ jsx87("div", { ref, ...mergeProps21(void 0, style, {
       ...gs.rootCss,
       ...gs.minWidthPx ? {
         minWidth: ["mw_var", {
@@ -16674,8 +16809,8 @@ var VirtualRoot = memoizeOne((gs, _columns, id, xss) => {
 });
 
 // src/components/ToggleChip.tsx
-import { trussProps as trussProps52 } from "@homebound/truss/runtime";
-import { jsx as jsx87, jsxs as jsxs51 } from "react/jsx-runtime";
+import { trussProps as trussProps53 } from "@homebound/truss/runtime";
+import { jsx as jsx88, jsxs as jsxs52 } from "react/jsx-runtime";
 function ToggleChip(props) {
   const {
     text,
@@ -16693,7 +16828,7 @@ function ToggleChip(props) {
   } = useHover2({});
   const compact = fieldProps?.compact;
   const tid = useTestIds(props, "chip");
-  return /* @__PURE__ */ jsxs51("button", { type: "button", ...trussProps52({
+  return /* @__PURE__ */ jsxs52("button", { type: "button", ...trussProps53({
     ...chipBaseStyles(compact),
     ...isHovered && !disabled && chipHoverStyles,
     // Use a lower right-padding to get closer to the `X` circle when clearable, i.e. not disabled
@@ -16708,8 +16843,8 @@ function ToggleChip(props) {
     },
     ...xss
   }), disabled, onClick, ...hoverProps, ...tid, children: [
-    icon && /* @__PURE__ */ jsx87("span", { className: "fs0", ...tid.icon, children: /* @__PURE__ */ jsx87(Icon, { icon, color: "rgba(36, 36, 36, 1)" /* Gray900 */, inc: 2 }) }),
-    /* @__PURE__ */ jsx87("span", { ...trussProps52({
+    icon && /* @__PURE__ */ jsx88("span", { className: "fs0", ...tid.icon, children: /* @__PURE__ */ jsx88(Icon, { icon, color: "rgba(36, 36, 36, 1)" /* Gray900 */, inc: 2 }) }),
+    /* @__PURE__ */ jsx88("span", { ...trussProps53({
       textAlign: "tal",
       overflow: "oh",
       display: "d_negwebkit_box",
@@ -16721,14 +16856,14 @@ function ToggleChip(props) {
         paddingRight: "pr0"
       } : {}
     }), title: text, children: text }),
-    !disabled && /* @__PURE__ */ jsx87("span", { ...trussProps52({
+    !disabled && /* @__PURE__ */ jsx88("span", { ...trussProps53({
       ...{
         flexShrink: "fs0",
         borderRadius: "br16",
         backgroundColor: "bgGray200"
       },
       ...isHovered && chipHoverStyles
-    }), ...tid.x, children: /* @__PURE__ */ jsx87(Icon, { icon: "x", color: "rgba(141, 141, 141, 1)" /* Gray600 */, inc: 2 }) })
+    }), ...tid.x, children: /* @__PURE__ */ jsx88(Icon, { icon: "x", color: "rgba(141, 141, 141, 1)" /* Gray600 */, inc: 2 }) })
   ] });
 }
 var chipHoverStyles = {
@@ -16743,8 +16878,8 @@ var chipDisabledStyles = {
 };
 
 // src/components/ToggleChips.tsx
-import { trussProps as trussProps53 } from "@homebound/truss/runtime";
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { trussProps as trussProps54 } from "@homebound/truss/runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 function ToggleChips(props) {
   const {
     values,
@@ -16753,22 +16888,22 @@ function ToggleChips(props) {
     xss
   } = props;
   const tid = useTestIds(props, "toggleChips");
-  return /* @__PURE__ */ jsx88("div", { ...trussProps53({
+  return /* @__PURE__ */ jsx89("div", { ...trussProps54({
     ...{
       display: "df",
       flexWrap: "flexWrap_wrap",
       gap: "gap1"
     },
     ...xss
-  }), ...tid, children: values.map((value) => /* @__PURE__ */ jsx88(ToggleChip, { text: getLabel(value), onClick: () => onRemove(value), ...tid.chip }, getLabel(value))) });
+  }), ...tid, children: values.map((value) => /* @__PURE__ */ jsx89(ToggleChip, { text: getLabel(value), onClick: () => onRemove(value), ...tid.chip }, getLabel(value))) });
 }
 
 // src/components/Accordion.tsx
 import { useId, useResizeObserver as useResizeObserver3 } from "@react-aria/utils";
-import { useCallback as useCallback19, useEffect as useEffect21, useMemo as useMemo27, useState as useState33 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect21, useMemo as useMemo28, useState as useState34 } from "react";
 import { useFocusRing as useFocusRing10 } from "react-aria";
-import { trussProps as trussProps54, maybeCssVar as maybeCssVar32 } from "@homebound/truss/runtime";
-import { jsx as jsx89, jsxs as jsxs52 } from "react/jsx-runtime";
+import { trussProps as trussProps55, maybeCssVar as maybeCssVar32 } from "@homebound/truss/runtime";
+import { jsx as jsx90, jsxs as jsxs53 } from "react/jsx-runtime";
 var __maybeInc12 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -16791,23 +16926,23 @@ function Accordion(props) {
   } = props;
   const tid = useTestIds(props, "accordion");
   const id = useId();
-  const [expanded, setExpanded] = useState33(defaultExpanded && !disabled);
+  const [expanded, setExpanded] = useState34(defaultExpanded && !disabled);
   const {
     isFocusVisible,
     focusProps
   } = useFocusRing10();
-  const [contentEl, setContentEl] = useState33(null);
-  const contentRef = useMemo27(() => ({
+  const [contentEl, setContentEl] = useState34(null);
+  const contentRef = useMemo28(() => ({
     current: contentEl
   }), [contentEl]);
-  const [contentHeight, setContentHeight] = useState33(expanded ? "auto" : "0");
+  const [contentHeight, setContentHeight] = useState34(expanded ? "auto" : "0");
   useEffect21(() => {
     setExpanded(defaultExpanded && !disabled);
   }, [defaultExpanded, disabled]);
   useEffect21(() => {
     setContentHeight(expanded && contentEl ? `${contentEl.scrollHeight}px` : "0");
   }, [expanded, contentEl]);
-  const onResize = useCallback19(() => {
+  const onResize = useCallback20(() => {
     if (contentEl && expanded) {
       setContentHeight(`${contentEl.scrollHeight}px`);
     }
@@ -16816,12 +16951,12 @@ function Accordion(props) {
     ref: contentRef,
     onResize
   });
-  const toggle = useCallback19(() => {
+  const toggle = useCallback20(() => {
     setExpanded((prev) => !prev);
     if (setExpandedIndex) setExpandedIndex(index);
     if (onToggle) onToggle();
   }, [index, setExpandedIndex, onToggle]);
-  const touchableStyle = useMemo27(() => ({
+  const touchableStyle = useMemo28(() => ({
     ...{
       display: "df",
       justifyContent: "jcsb",
@@ -16867,7 +17002,7 @@ function Accordion(props) {
     },
     ...xss
   }), [compact, disabled, isFocusVisible, titleOnClick, xss]);
-  return /* @__PURE__ */ jsxs52("div", { ...tid.container, ...trussProps54({
+  return /* @__PURE__ */ jsxs53("div", { ...tid.container, ...trussProps55({
     ...{
       borderColor: "bcGray300",
       ...topBorder ? {
@@ -16885,14 +17020,14 @@ function Accordion(props) {
       }]
     } : {}
   }), children: [
-    titleOnClick ? /* @__PURE__ */ jsxs52("div", { ...focusProps, "aria-controls": id, "aria-expanded": expanded, className: "df", children: [
-      /* @__PURE__ */ jsx89("button", { ...tid.title, disabled, ...trussProps54({
+    titleOnClick ? /* @__PURE__ */ jsxs53("div", { ...focusProps, "aria-controls": id, "aria-expanded": expanded, className: "df", children: [
+      /* @__PURE__ */ jsx90("button", { ...tid.title, disabled, ...trussProps55({
         ...touchableStyle,
         ...{
           flexGrow: "fg1"
         }
       }), onClick: titleOnClick, children: title }),
-      /* @__PURE__ */ jsx89("button", { ...tid.toggle, disabled, ...trussProps54({
+      /* @__PURE__ */ jsx90("button", { ...tid.toggle, disabled, ...trussProps55({
         ...touchableStyle,
         ...{
           paddingLeft: "pl2",
@@ -16903,23 +17038,23 @@ function Accordion(props) {
             paddingRight: "pr_10px"
           } : {}
         }
-      }), onClick: toggle, children: /* @__PURE__ */ jsx89(RotatingChevronIcon, { expanded }) })
-    ] }) : /* @__PURE__ */ jsxs52("button", { ...tid.title, ...focusProps, "aria-controls": id, "aria-expanded": expanded, disabled, ...trussProps54({
+      }), onClick: toggle, children: /* @__PURE__ */ jsx90(RotatingChevronIcon, { expanded }) })
+    ] }) : /* @__PURE__ */ jsxs53("button", { ...tid.title, ...focusProps, "aria-controls": id, "aria-expanded": expanded, disabled, ...trussProps55({
       ...{
         width: "w100"
       },
       ...touchableStyle
     }), onClick: toggle, children: [
-      /* @__PURE__ */ jsx89("span", { className: "fg1 tal", children: title }),
-      /* @__PURE__ */ jsx89(RotatingChevronIcon, { expanded })
+      /* @__PURE__ */ jsx90("span", { className: "fg1 tal", children: title }),
+      /* @__PURE__ */ jsx90(RotatingChevronIcon, { expanded })
     ] }),
-    /* @__PURE__ */ jsx89("div", { ...tid.details, id, "aria-hidden": !expanded, ...trussProps54({
+    /* @__PURE__ */ jsx90("div", { ...tid.details, id, "aria-hidden": !expanded, ...trussProps55({
       overflow: "oh",
       height: ["h_var", {
         "--height": maybeCssVar32(__maybeInc12(contentHeight))
       }],
       transition: "transition_height_250ms_ease_in_out"
-    }), children: expanded && /* @__PURE__ */ jsx89("div", { ...trussProps54({
+    }), children: expanded && /* @__PURE__ */ jsx90("div", { ...trussProps55({
       paddingLeft: "pl2",
       paddingRight: "pr2",
       paddingBottom: "pb2",
@@ -16934,13 +17069,13 @@ function Accordion(props) {
   ] });
 }
 function RotatingChevronIcon(props) {
-  return /* @__PURE__ */ jsx89("span", { ...trussProps54({
+  return /* @__PURE__ */ jsx90("span", { ...trussProps55({
     flexShrink: "fs0",
     transition: "transition_transform_250ms_linear",
     transform: ["transform_var", {
       "--transform": maybeCssVar32(props.expanded ? "rotate(180deg)" : "rotate(0deg)")
     }]
-  }), children: /* @__PURE__ */ jsx89(Icon, { icon: "chevronDown" }) });
+  }), children: /* @__PURE__ */ jsx90(Icon, { icon: "chevronDown" }) });
 }
 var accordionSizes = {
   xs: 240,
@@ -16950,15 +17085,15 @@ var accordionSizes = {
 };
 
 // src/components/AccordionList.tsx
-import { useState as useState34 } from "react";
-import { Fragment as Fragment21, jsx as jsx90 } from "react/jsx-runtime";
+import { useState as useState35 } from "react";
+import { Fragment as Fragment21, jsx as jsx91 } from "react/jsx-runtime";
 function AccordionList(props) {
   const { accordions, size, allowMultipleExpanded = true, compact = false } = props;
-  const [expandedIndex, setExpandedIndex] = useState34(
+  const [expandedIndex, setExpandedIndex] = useState35(
     accordions.findIndex((a) => a.defaultExpanded)
   );
   const tid = useTestIds(props, "accordionList");
-  return /* @__PURE__ */ jsx90(Fragment21, { children: accordions.map((accordionProps, index, arr) => /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx91(Fragment21, { children: accordions.map((accordionProps, index, arr) => /* @__PURE__ */ jsx91(
     Accordion,
     {
       ...accordionProps,
@@ -16983,7 +17118,7 @@ function assertNever(x) {
 }
 
 // src/components/AutoSaveIndicator.tsx
-import { jsx as jsx91, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs54 } from "react/jsx-runtime";
 function AutoSaveIndicator({
   hideOnIdle,
   doNotReset
@@ -17004,11 +17139,11 @@ function AutoSaveIndicator({
   );
   switch (status) {
     case "idle" /* IDLE */:
-      return hideOnIdle ? null : /* @__PURE__ */ jsx91(Indicator, { icon: "cloudSave" });
+      return hideOnIdle ? null : /* @__PURE__ */ jsx92(Indicator, { icon: "cloudSave" });
     case "saving" /* SAVING */:
-      return /* @__PURE__ */ jsx91(Indicator, { icon: "refresh", text: "Saving..." });
+      return /* @__PURE__ */ jsx92(Indicator, { icon: "refresh", text: "Saving..." });
     case "done" /* DONE */:
-      return /* @__PURE__ */ jsx91(Indicator, { icon: "cloudSave", text: "Saved" });
+      return /* @__PURE__ */ jsx92(Indicator, { icon: "cloudSave", text: "Saved" });
     case "error" /* ERROR */:
       return (
         /**
@@ -17016,7 +17151,7 @@ function AutoSaveIndicator({
          * rendering it far away from the Icon/Text. Wrap it with a div to constrain
          * it.
          */
-        /* @__PURE__ */ jsx91("div", { className: "dif", children: /* @__PURE__ */ jsx91(Tooltip, { title: String(errors), placement: "bottom", children: /* @__PURE__ */ jsx91(Indicator, { icon: "error", color: "rgba(239, 68, 68, 1)" /* Red500 */, text: "Error saving" }) }) })
+        /* @__PURE__ */ jsx92("div", { className: "dif", children: /* @__PURE__ */ jsx92(Tooltip, { title: String(errors), placement: "bottom", children: /* @__PURE__ */ jsx92(Indicator, { icon: "error", color: "rgba(239, 68, 68, 1)" /* Red500 */, text: "Error saving" }) }) })
       );
     default:
       assertNever(status);
@@ -17027,15 +17162,15 @@ function Indicator({
   icon,
   color
 }) {
-  return /* @__PURE__ */ jsxs53("div", { "data-testid": "autoSave", className: "df gap1 aic gray700 fw6 fz_14px lh_20px", children: [
-    /* @__PURE__ */ jsx91(Icon, { icon, color }),
+  return /* @__PURE__ */ jsxs54("div", { "data-testid": "autoSave", className: "df gap1 aic gray700 fw6 fz_14px lh_20px", children: [
+    /* @__PURE__ */ jsx92(Icon, { icon, color }),
     text
   ] });
 }
 
 // src/components/Banner.tsx
-import { trussProps as trussProps55 } from "@homebound/truss/runtime";
-import { jsx as jsx92, jsxs as jsxs54 } from "react/jsx-runtime";
+import { trussProps as trussProps56 } from "@homebound/truss/runtime";
+import { jsx as jsx93, jsxs as jsxs55 } from "react/jsx-runtime";
 function Banner(props) {
   const {
     type,
@@ -17045,7 +17180,7 @@ function Banner(props) {
     ...others
   } = props;
   const tid = useTestIds(others, "banner");
-  return /* @__PURE__ */ jsxs54("div", { ...trussProps55({
+  return /* @__PURE__ */ jsxs55("div", { ...trussProps56({
     ...variantStyles3[type],
     ...{
       display: "df",
@@ -17063,9 +17198,9 @@ function Banner(props) {
       boxShadow: "bshBasic"
     }
   }), ...tid, role: "alert", children: [
-    showIcon && /* @__PURE__ */ jsx92("span", { className: "fs0", children: /* @__PURE__ */ jsx92(Icon, { icon: typeToIcon[type], ...tid.type, color: "rgba(36, 36, 36, 1)" /* Gray900 */ }) }),
-    /* @__PURE__ */ jsx92("span", { className: "fg1", ...tid.message, children: message }),
-    onClose && /* @__PURE__ */ jsx92("span", { className: "lh_0", children: /* @__PURE__ */ jsx92(IconButton, { icon: "x", onClick: onClose, ...tid.close, color: "rgba(36, 36, 36, 1)" /* Gray900 */ }) })
+    showIcon && /* @__PURE__ */ jsx93("span", { className: "fs0", children: /* @__PURE__ */ jsx93(Icon, { icon: typeToIcon[type], ...tid.type, color: "rgba(36, 36, 36, 1)" /* Gray900 */ }) }),
+    /* @__PURE__ */ jsx93("span", { className: "fg1", ...tid.message, children: message }),
+    onClose && /* @__PURE__ */ jsx93("span", { className: "lh_0", children: /* @__PURE__ */ jsx93(IconButton, { icon: "x", onClick: onClose, ...tid.close, color: "rgba(36, 36, 36, 1)" /* Gray900 */ }) })
   ] });
 }
 var typeToIcon = {
@@ -17104,20 +17239,20 @@ import { OverlayProvider } from "react-aria";
 
 // src/components/Modal/Modal.tsx
 import { useResizeObserver as useResizeObserver4 } from "@react-aria/utils";
-import { useCallback as useCallback20, useEffect as useEffect24, useRef as useRef43, useState as useState35 } from "react";
+import { useCallback as useCallback21, useEffect as useEffect24, useRef as useRef43, useState as useState36 } from "react";
 import { FocusScope as FocusScope4, OverlayContainer as OverlayContainer2, useDialog, useModal as useModal2, useOverlay as useOverlay2, usePreventScroll } from "react-aria";
 import { createPortal as createPortal3 } from "react-dom";
 
 // src/components/Modal/useModal.tsx
-import { useEffect as useEffect23, useMemo as useMemo29, useRef as useRef42 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo30, useRef as useRef42 } from "react";
 
 // src/components/Modal/ModalContext.tsx
-import { createContext as createContext7, useContext as useContext17, useMemo as useMemo28 } from "react";
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { createContext as createContext7, useContext as useContext17, useMemo as useMemo29 } from "react";
+import { jsx as jsx94 } from "react/jsx-runtime";
 var ModalContext = createContext7({ inModal: false });
 function ModalProvider({ children }) {
-  const value = useMemo28(() => ({ inModal: true }), []);
-  return /* @__PURE__ */ jsx93(ModalContext.Provider, { value, children });
+  const value = useMemo29(() => ({ inModal: true }), []);
+  return /* @__PURE__ */ jsx94(ModalContext.Provider, { value, children });
 }
 function useModalContext() {
   return useContext17(ModalContext);
@@ -17134,7 +17269,7 @@ function useModal() {
       modalCanCloseChecks.current = modalCanCloseChecks.current.filter((c) => c !== lastCanClose.current);
     };
   }, [modalCanCloseChecks]);
-  return useMemo29(
+  return useMemo30(
     () => ({
       openModal(props) {
         modalState.current = { ...props, api };
@@ -17169,8 +17304,8 @@ function useModal() {
 }
 
 // src/components/Modal/Modal.tsx
-import { trussProps as trussProps56, maybeCssVar as maybeCssVar33 } from "@homebound/truss/runtime";
-import { Fragment as Fragment22, jsx as jsx94, jsxs as jsxs55 } from "react/jsx-runtime";
+import { trussProps as trussProps57, maybeCssVar as maybeCssVar33 } from "@homebound/truss/runtime";
+import { Fragment as Fragment22, jsx as jsx95, jsxs as jsxs56 } from "react/jsx-runtime";
 function Modal(props) {
   const {
     size = "md",
@@ -17211,7 +17346,7 @@ function Modal(props) {
   } = useDialog({
     role: "dialog"
   }, ref);
-  const [[width2, height], setSize] = useState35(getSize(size));
+  const [[width2, height], setSize] = useState36(getSize(size));
   const modalBodyRef = useRef43(null);
   const modalFooterRef = useRef43(null);
   const modalHeaderRef = useRef43(null);
@@ -17225,10 +17360,10 @@ function Modal(props) {
       setSize: (size2 = "md") => setSize(getSize(size2))
     };
   }
-  const [hasScroll, setHasScroll] = useState35(forceScrolling ?? false);
+  const [hasScroll, setHasScroll] = useState36(forceScrolling ?? false);
   useResizeObserver4({
     ref: modalBodyRef,
-    onResize: useCallback20(
+    onResize: useCallback21(
       () => {
         const target = modalBodyRef.current;
         if (forceScrolling === void 0 && !isFixedHeight) {
@@ -17250,7 +17385,7 @@ function Modal(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [modalBodyRef, modalFooterRef, modalHeaderRef]
   );
-  return /* @__PURE__ */ jsx94(ModalProvider, { children: /* @__PURE__ */ jsx94(OverlayContainer2, { children: /* @__PURE__ */ jsx94(AutoSaveStatusProvider, { children: /* @__PURE__ */ jsx94("div", { ...trussProps56({
+  return /* @__PURE__ */ jsx95(ModalProvider, { children: /* @__PURE__ */ jsx95(OverlayContainer2, { children: /* @__PURE__ */ jsx95(AutoSaveStatusProvider, { children: /* @__PURE__ */ jsx95("div", { ...trussProps57({
     position: "fixed",
     top: "tp_0",
     bottom: "bot_0",
@@ -17263,7 +17398,7 @@ function Modal(props) {
     zIndex: ["z_var", {
       "--zIndex": maybeCssVar33(zIndices.modalUnderlay)
     }]
-  }), ...underlayProps, ...testId.underlay, children: /* @__PURE__ */ jsx94(FocusScope4, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxs55("div", { ...trussProps56({
+  }), ...underlayProps, ...testId.underlay, children: /* @__PURE__ */ jsx95(FocusScope4, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxs56("div", { ...trussProps57({
     borderRadius: "br24",
     backgroundColor: "bgWhite",
     boxShadow: "bshModal",
@@ -17289,7 +17424,7 @@ function Modal(props) {
       borderRadius: "br0"
     } : {}
   }), ref, ...overlayProps, ...dialogProps, ...modalProps, ...testId, children: [
-    /* @__PURE__ */ jsxs55("header", { ...trussProps56({
+    /* @__PURE__ */ jsxs56("header", { ...trussProps57({
       display: "df",
       flexDirection: "fdrr",
       paddingTop: "pt3",
@@ -17303,10 +17438,10 @@ function Modal(props) {
         borderColor: "bcGray200"
       } : {}
     }), children: [
-      /* @__PURE__ */ jsx94("span", { className: "fs0 pl1", children: allowClosing && /* @__PURE__ */ jsx94(IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) }),
-      /* @__PURE__ */ jsx94("h1", { className: "fg1 fw6 fz_30px lh_36px gray900", ref: modalHeaderRef, ...titleProps, ...testId.title })
+      /* @__PURE__ */ jsx95("span", { className: "fs0 pl1", children: allowClosing && /* @__PURE__ */ jsx95(IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) }),
+      /* @__PURE__ */ jsx95("h1", { className: "fg1 fw6 fz_30px lh_36px gray900", ref: modalHeaderRef, ...titleProps, ...testId.title })
     ] }),
-    /* @__PURE__ */ jsx94("main", { ref: modalBodyRef, ...trussProps56({
+    /* @__PURE__ */ jsx95("main", { ref: modalBodyRef, ...trussProps57({
       flexGrow: "fg1",
       overflowY: "oya",
       ...hasScroll ? {
@@ -17318,7 +17453,7 @@ function Modal(props) {
         overflowY: "oys"
       } : {}
     }), children: content }),
-    /* @__PURE__ */ jsx94("footer", { className: "fs0", children: /* @__PURE__ */ jsx94("div", { ref: modalFooterRef }) })
+    /* @__PURE__ */ jsx95("footer", { className: "fs0", children: /* @__PURE__ */ jsx95("div", { ref: modalFooterRef }) })
   ] }) }) }) }) }) });
 }
 function ModalHeader({
@@ -17327,7 +17462,7 @@ function ModalHeader({
   const {
     modalHeaderDiv
   } = useBeamContext();
-  return createPortal3(/* @__PURE__ */ jsx94(Fragment22, { children }), modalHeaderDiv);
+  return createPortal3(/* @__PURE__ */ jsx95(Fragment22, { children }), modalHeaderDiv);
 }
 function ModalBody({
   children,
@@ -17339,7 +17474,7 @@ function ModalBody({
   const testId = useTestIds({}, testIdPrefix);
   return createPortal3(
     // If `virtualized`, then we are expecting the `children` will handle their own scrollbar, so have the overflow hidden and adjust padding
-    /* @__PURE__ */ jsx94("div", { ...trussProps56({
+    /* @__PURE__ */ jsx95("div", { ...trussProps57({
       height: "h100",
       ...virtualized ? {
         overflow: "oh",
@@ -17360,7 +17495,7 @@ function ModalFooter({
     modalFooterDiv
   } = useBeamContext();
   const testId = useTestIds({}, testIdPrefix);
-  return createPortal3(/* @__PURE__ */ jsx94("div", { ...trussProps56({
+  return createPortal3(/* @__PURE__ */ jsx95("div", { ...trussProps57({
     ...{
       paddingTop: "pt3",
       paddingBottom: "pb3",
@@ -17392,11 +17527,11 @@ function getSize(size) {
 }
 
 // src/components/Snackbar/SnackbarContext.tsx
-import { createContext as createContext8, useContext as useContext18, useMemo as useMemo30, useState as useState36 } from "react";
+import { createContext as createContext8, useContext as useContext18, useMemo as useMemo31, useState as useState37 } from "react";
 
 // src/components/Snackbar/SnackbarNotice.tsx
-import { trussProps as trussProps57 } from "@homebound/truss/runtime";
-import { jsx as jsx95, jsxs as jsxs56 } from "react/jsx-runtime";
+import { trussProps as trussProps58 } from "@homebound/truss/runtime";
+import { jsx as jsx96, jsxs as jsxs57 } from "react/jsx-runtime";
 function SnackbarNotice(props) {
   const {
     icon,
@@ -17408,12 +17543,12 @@ function SnackbarNotice(props) {
   } = props;
   const tid = useTestIds(props, "snackbar");
   const reallyHideClose = hideCloseButton && !persistent;
-  return /* @__PURE__ */ jsxs56("div", { className: "white bgGray800 br4 fw4 fz_16px lh_24px df aic maxw_420px", "data-theme": contrastDataTheme, ...tid, role: "alert", children: [
-    icon && /* @__PURE__ */ jsx95("span", { className: "fs0 pl_12px", children: /* @__PURE__ */ jsx95(Icon, { ...typeToIcon2[icon], ...tid.icon }) }),
-    /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsxs57("div", { className: "white bgGray800 br4 fw4 fz_16px lh_24px df aic maxw_420px", "data-theme": contrastDataTheme, ...tid, role: "alert", children: [
+    icon && /* @__PURE__ */ jsx96("span", { className: "fs0 pl_12px", children: /* @__PURE__ */ jsx96(Icon, { ...typeToIcon2[icon], ...tid.icon }) }),
+    /* @__PURE__ */ jsx96(
       "span",
       {
-        ...trussProps57({
+        ...trussProps58({
           overflow: "oh",
           display: "d_negwebkit_box",
           WebkitBoxOrient: "wbo_vertical",
@@ -17433,8 +17568,8 @@ function SnackbarNotice(props) {
         children: message
       }
     ),
-    (action || !reallyHideClose) && /* @__PURE__ */ jsxs56("span", { className: "fs0 df aic", children: [
-      action && /* @__PURE__ */ jsx95("span", { ...trussProps57({
+    (action || !reallyHideClose) && /* @__PURE__ */ jsxs57("span", { className: "fs0 df aic", children: [
+      action && /* @__PURE__ */ jsx96("span", { ...trussProps58({
         textTransform: "ttu",
         fontWeight: "fw4",
         fontSize: "fz_14px",
@@ -17442,8 +17577,8 @@ function SnackbarNotice(props) {
         paddingRight: ["pr_var", {
           "--paddingRight": `${!reallyHideClose && action.variant !== "text" ? 4 : 8}px`
         }]
-      }), children: /* @__PURE__ */ jsx95(Button, { ...action, ...tid.action }) }),
-      !reallyHideClose && /* @__PURE__ */ jsx95("span", { className: "pr1 lineHeight_0", children: /* @__PURE__ */ jsx95(IconButton, { icon: "x", onClick: onClose, ...tid.close }) })
+      }), children: /* @__PURE__ */ jsx96(Button, { ...action, ...tid.action }) }),
+      !reallyHideClose && /* @__PURE__ */ jsx96("span", { className: "pr1 lineHeight_0", children: /* @__PURE__ */ jsx96(IconButton, { icon: "x", onClick: onClose, ...tid.close }) })
     ] })
   ] });
 }
@@ -17472,14 +17607,14 @@ var typeToIcon2 = {
 };
 
 // src/components/Snackbar/Snackbar.tsx
-import { trussProps as trussProps58, maybeCssVar as maybeCssVar34 } from "@homebound/truss/runtime";
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { trussProps as trussProps59, maybeCssVar as maybeCssVar34 } from "@homebound/truss/runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
 function Snackbar({
   notices,
   offset
 }) {
   const tid = useTestIds({});
-  return /* @__PURE__ */ jsx96("div", { ...tid.snackbarWrapper, ...trussProps58({
+  return /* @__PURE__ */ jsx97("div", { ...tid.snackbarWrapper, ...trussProps59({
     position: "fixed",
     zIndex: ["z_var", {
       "--zIndex": maybeCssVar34(zIndices.snackbar)
@@ -17492,24 +17627,24 @@ function Snackbar({
     flexDirection: "fdc",
     alignItems: "aifs",
     gap: "gap_12px"
-  }), children: notices.map((data) => /* @__PURE__ */ jsx96(SnackbarNotice, { ...data }, data.id)) });
+  }), children: notices.map((data) => /* @__PURE__ */ jsx97(SnackbarNotice, { ...data }, data.id)) });
 }
 var defaultOffset = {
   bottom: 24
 };
 
 // src/components/Snackbar/SnackbarContext.tsx
-import { jsx as jsx97, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs58 } from "react/jsx-runtime";
 var SnackbarContext = createContext8({ setNotices: () => {
 }, setOffset: () => {
 } });
 function SnackbarProvider(props) {
-  const [notices, setNotices] = useState36([]);
-  const [offset, setOffset] = useState36({});
-  const contextValue = useMemo30(() => ({ setNotices, setOffset }), []);
-  return /* @__PURE__ */ jsxs57(SnackbarContext.Provider, { value: contextValue, children: [
+  const [notices, setNotices] = useState37([]);
+  const [offset, setOffset] = useState37({});
+  const contextValue = useMemo31(() => ({ setNotices, setOffset }), []);
+  return /* @__PURE__ */ jsxs58(SnackbarContext.Provider, { value: contextValue, children: [
     props.children,
-    /* @__PURE__ */ jsx97(Snackbar, { notices, offset })
+    /* @__PURE__ */ jsx98(Snackbar, { notices, offset })
   ] });
 }
 function useSnackbarContext() {
@@ -17529,8 +17664,8 @@ var SuperDrawerWidth = /* @__PURE__ */ ((SuperDrawerWidth2) => {
 })(SuperDrawerWidth || {});
 
 // src/components/SuperDrawer/SuperDrawer.tsx
-import { trussProps as trussProps59, maybeCssVar as maybeCssVar35 } from "@homebound/truss/runtime";
-import { Fragment as Fragment23, jsx as jsx98, jsxs as jsxs58 } from "react/jsx-runtime";
+import { trussProps as trussProps60, maybeCssVar as maybeCssVar35 } from "@homebound/truss/runtime";
+import { Fragment as Fragment23, jsx as jsx99, jsxs as jsxs59 } from "react/jsx-runtime";
 import { createElement as createElement3 } from "react";
 function SuperDrawer() {
   const {
@@ -17568,12 +17703,12 @@ function SuperDrawer() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [headerRef, content]
   );
-  return createPortal4(/* @__PURE__ */ jsx98(AnimatePresence, { children: content && /* @__PURE__ */ jsx98(Fragment23, { children: /* @__PURE__ */ createElement3(
+  return createPortal4(/* @__PURE__ */ jsx99(AnimatePresence, { children: content && /* @__PURE__ */ jsx99(Fragment23, { children: /* @__PURE__ */ createElement3(
     motion.div,
     {
       ...testId,
       key: "superDrawer",
-      ...trussProps59({
+      ...trussProps60({
         position: "fixed",
         display: "df",
         justifyContent: "jcfe",
@@ -17600,10 +17735,10 @@ function SuperDrawer() {
       },
       onClick: closeDrawer
     },
-    /* @__PURE__ */ jsx98(
+    /* @__PURE__ */ jsx99(
       motion.aside,
       {
-        ...trussProps59({
+        ...trussProps60({
           backgroundColor: "bgWhite",
           height: "h100",
           maxWidth: ["maxw_var", {
@@ -17633,10 +17768,10 @@ function SuperDrawer() {
           x: width2
         },
         onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ jsxs58(AutoSaveStatusProvider, { children: [
-          /* @__PURE__ */ jsxs58("header", { className: "pt3 pb3 pr3 pl3 bbs_solid bbw_1px bcGray200 df aic jcsb gap3", children: [
-            /* @__PURE__ */ jsx98("div", { ref: headerRef, className: "gray900 fg1" }),
-            /* @__PURE__ */ jsx98(IconButton, { icon: "x", onClick: closeDrawer, ...testId.close })
+        children: /* @__PURE__ */ jsxs59(AutoSaveStatusProvider, { children: [
+          /* @__PURE__ */ jsxs59("header", { className: "pt3 pb3 pr3 pl3 bbs_solid bbw_1px bcGray200 df aic jcsb gap3", children: [
+            /* @__PURE__ */ jsx99("div", { ref: headerRef, className: "gray900 fg1" }),
+            /* @__PURE__ */ jsx99(IconButton, { icon: "x", onClick: closeDrawer, ...testId.close })
           ] }),
           content
         ] })
@@ -17660,7 +17795,7 @@ function defaultLabel(id) {
 }
 
 // src/forms/BoundCheckboxField.tsx
-import { jsx as jsx99 } from "react/jsx-runtime";
+import { jsx as jsx100 } from "react/jsx-runtime";
 function BoundCheckboxField(props) {
   const {
     field,
@@ -17672,7 +17807,7 @@ function BoundCheckboxField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx99(Observer, { children: () => /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsx100(Observer, { children: () => /* @__PURE__ */ jsx100(
     Checkbox,
     {
       label,
@@ -17699,7 +17834,7 @@ function BoundCheckboxField(props) {
 
 // src/forms/BoundCheckboxGroupField.tsx
 import { Observer as Observer2 } from "mobx-react";
-import { jsx as jsx100 } from "react/jsx-runtime";
+import { jsx as jsx101 } from "react/jsx-runtime";
 function BoundCheckboxGroupField(props) {
   const {
     field,
@@ -17710,7 +17845,7 @@ function BoundCheckboxGroupField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx100(Observer2, { children: () => /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsx101(Observer2, { children: () => /* @__PURE__ */ jsx101(
     CheckboxGroup,
     {
       label,
@@ -17737,7 +17872,7 @@ function BoundCheckboxGroupField(props) {
 
 // src/forms/BoundChipSelectField.tsx
 import { Observer as Observer3 } from "mobx-react";
-import { jsx as jsx101 } from "react/jsx-runtime";
+import { jsx as jsx102 } from "react/jsx-runtime";
 function BoundChipSelectField(props) {
   const {
     field,
@@ -17753,7 +17888,7 @@ function BoundChipSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx101(Observer3, { children: () => /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsx102(Observer3, { children: () => /* @__PURE__ */ jsx102(
     ChipSelectField,
     {
       label,
@@ -17784,7 +17919,7 @@ function BoundChipSelectField(props) {
 
 // src/forms/BoundDateField.tsx
 import { Observer as Observer4 } from "mobx-react";
-import { jsx as jsx102 } from "react/jsx-runtime";
+import { jsx as jsx103 } from "react/jsx-runtime";
 function BoundDateField(props) {
   const {
     field,
@@ -17797,7 +17932,7 @@ function BoundDateField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx102(Observer4, { children: () => /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx103(Observer4, { children: () => /* @__PURE__ */ jsx103(
     DateField,
     {
       label,
@@ -17829,7 +17964,7 @@ function BoundDateField(props) {
 
 // src/forms/BoundDateRangeField.tsx
 import { Observer as Observer5 } from "mobx-react";
-import { jsx as jsx103 } from "react/jsx-runtime";
+import { jsx as jsx104 } from "react/jsx-runtime";
 function BoundDateRangeField(props) {
   const {
     field,
@@ -17842,7 +17977,7 @@ function BoundDateRangeField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx103(Observer5, { children: () => /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsx104(Observer5, { children: () => /* @__PURE__ */ jsx104(
     DateRangeField,
     {
       label,
@@ -17875,125 +18010,9 @@ function BoundDateRangeField(props) {
 // src/forms/BoundForm.tsx
 import { useCallback as useCallback22, useMemo as useMemo32 } from "react";
 
-// src/forms/BoundIconCardField.tsx
-import { Observer as Observer6 } from "mobx-react";
-import { jsx as jsx104 } from "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__ */ jsx104(Observer6, { children: () => /* @__PURE__ */ jsx104(
-    IconCard,
-    {
-      icon,
-      label,
-      selected: field.value ?? false,
-      onChange: (selected) => {
-        onChange(selected);
-        field.maybeAutoSave();
-      },
-      disabled: field.readOnly,
-      ...testId,
-      ...others
-    }
-  ) });
-}
-
-// src/forms/BoundIconCardGroupField.tsx
-import { Observer as Observer7 } from "mobx-react";
-
-// src/inputs/IconCardGroup.tsx
-import { useCallback as useCallback21, useMemo as useMemo31, useState as useState37 } from "react";
-import { mergeProps as mergeProps21, useField } from "react-aria";
-import { trussProps as trussProps60 } from "@homebound/truss/runtime";
-import { jsx as jsx105, jsxs as jsxs59 } from "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] = useState37(values);
-  const exclusiveOptions = useMemo31(() => options.filter((o) => o.exclusive), [options]);
-  const toggleValue = useCallback21((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
-  } = useField(props);
-  const groupProps = mergeProps21(tid, {
-    role: "group",
-    "aria-disabled": isDisabled || void 0,
-    ...fieldPropsAria
-  });
-  return /* @__PURE__ */ jsxs59("div", { ...groupProps, children: [
-    labelStyle !== "hidden" && /* @__PURE__ */ jsx105("div", { ...trussProps60({
-      ...labelStyle === "left" ? {
-        width: "w50"
-      } : {}
-    }), children: /* @__PURE__ */ jsx105(Label, { label, ...labelProps, ...tid.label }) }),
-    /* @__PURE__ */ jsx105("div", { className: "df gap2 flexWrap_wrap", children: options.map((option) => {
-      const {
-        icon,
-        label: label2,
-        disabled
-      } = option;
-      const isSelected = selected.includes(option.value);
-      return /* @__PURE__ */ jsx105(IconCard, { icon, label: label2, selected: isSelected, disabled, onChange: () => toggleValue(option.value), ...tid[option.label] }, option.label);
-    }) }),
-    errorMsg && /* @__PURE__ */ jsx105(ErrorMessage, { errorMsg, ...tid.errorMsg }),
-    helperText && /* @__PURE__ */ jsx105(HelperText, { helperText, ...tid.helperText })
-  ] });
-}
-
-// src/forms/BoundIconCardGroupField.tsx
-import { jsx as jsx106 } from "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__ */ jsx106(Observer7, { children: () => /* @__PURE__ */ jsx106(
-    IconCardGroup,
-    {
-      label,
-      values: field.value || [],
-      onChange: (values) => {
-        onChange(values);
-        field.maybeAutoSave();
-      },
-      disabled: field.readOnly,
-      ...testId,
-      ...others
-    }
-  ) });
-}
-
 // src/forms/BoundListField.tsx
-import { Observer as Observer8 } from "mobx-react";
-import { Fragment as Fragment24, jsx as jsx107, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Observer as Observer6 } from "mobx-react";
+import { Fragment as Fragment24, jsx as jsx105, jsxs as jsxs60 } from "react/jsx-runtime";
 function ListField({
   row,
   formState
@@ -18010,9 +18029,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__ */ jsx107(Observer8, { children: () => /* @__PURE__ */ jsxs60("div", { className: "df fdc gap3", ...tid, children: [
-    filteredRows.map((rowState, index) => /* @__PURE__ */ jsx107(ListFieldRowInputs, { rowState, rowNumber: index + 1, listFieldConfig, formState, listFieldKey }, `listFieldRowInputs-${listFieldKey}-${index}`)),
-    /* @__PURE__ */ jsx107("div", { children: /* @__PURE__ */ jsx107(Button, { icon: "plus", label: `Add ${listFieldConfig.name}`, onClick: () => onNew(listFieldObjectState), variant: "secondary", disabled: !listIsValid }) })
+  return /* @__PURE__ */ jsx105(Observer6, { children: () => /* @__PURE__ */ jsxs60("div", { className: "df fdc gap3", ...tid, children: [
+    filteredRows.map((rowState, index) => /* @__PURE__ */ jsx105(ListFieldRowInputs, { rowState, rowNumber: index + 1, listFieldConfig, formState, listFieldKey }, `listFieldRowInputs-${listFieldKey}-${index}`)),
+    /* @__PURE__ */ jsx105("div", { children: /* @__PURE__ */ jsx105(Button, { icon: "plus", label: `Add ${listFieldConfig.name}`, onClick: () => onNew(listFieldObjectState), variant: "secondary", disabled: !listIsValid }) })
   ] }) });
 }
 function ListFieldRowInputs({
@@ -18033,14 +18052,14 @@ function ListFieldRowInputs({
         " ",
         rowNumber
       ] }),
-      onDelete && /* @__PURE__ */ jsx107(ButtonMenu, { trigger: {
+      onDelete && /* @__PURE__ */ jsx105(ButtonMenu, { trigger: {
         icon: "verticalDots"
       }, items: [{
         label: "Delete",
         onClick: () => onDelete(formState[listFieldKey], rowState)
       }], ...tid.menu })
     ] }),
-    listFieldConfig.rows.map((row, rowIndex) => /* @__PURE__ */ jsx107(FormRow, { row, formState: rowState }, `listField-${listFieldKey}-row-${rowIndex}`))
+    listFieldConfig.rows.map((row, rowIndex) => /* @__PURE__ */ jsx105(FormRow, { row, formState: rowState }, `listField-${listFieldKey}-row-${rowIndex}`))
   ] });
 }
 function isListFieldKey(key) {
@@ -18057,8 +18076,8 @@ function isListFieldRow(row) {
 }
 
 // src/forms/BoundMultiLineSelectField.tsx
-import { Observer as Observer9 } from "mobx-react";
-import { jsx as jsx108 } from "react/jsx-runtime";
+import { Observer as Observer7 } from "mobx-react";
+import { jsx as jsx106 } from "react/jsx-runtime";
 function BoundMultiLineSelectField(props) {
   const {
     field,
@@ -18075,7 +18094,7 @@ function BoundMultiLineSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx108(Observer9, { children: () => /* @__PURE__ */ jsx108(
+  return /* @__PURE__ */ jsx106(Observer7, { children: () => /* @__PURE__ */ jsx106(
     MultiLineSelectField,
     {
       label,
@@ -18105,8 +18124,8 @@ function BoundMultiLineSelectField(props) {
 }
 
 // src/forms/BoundMultiSelectField.tsx
-import { Observer as Observer10 } from "mobx-react";
-import { jsx as jsx109 } from "react/jsx-runtime";
+import { Observer as Observer8 } from "mobx-react";
+import { jsx as jsx107 } from "react/jsx-runtime";
 function BoundMultiSelectField(props) {
   const {
     field,
@@ -18123,7 +18142,7 @@ function BoundMultiSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx109(Observer10, { children: () => /* @__PURE__ */ jsx109(
+  return /* @__PURE__ */ jsx107(Observer8, { children: () => /* @__PURE__ */ jsx107(
     MultiSelectField,
     {
       label,
@@ -18153,8 +18172,8 @@ function BoundMultiSelectField(props) {
 }
 
 // src/forms/BoundNumberField.tsx
-import { Observer as Observer11 } from "mobx-react";
-import { jsx as jsx110 } from "react/jsx-runtime";
+import { Observer as Observer9 } from "mobx-react";
+import { jsx as jsx108 } from "react/jsx-runtime";
 function BoundNumberField(props) {
   const {
     field,
@@ -18168,7 +18187,7 @@ function BoundNumberField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, label || field.key);
-  return /* @__PURE__ */ jsx110(Observer11, { children: () => /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsx108(Observer9, { children: () => /* @__PURE__ */ jsx108(
     NumberField,
     {
       label,
@@ -18197,8 +18216,8 @@ function BoundNumberField(props) {
 }
 
 // src/forms/BoundRadioGroupField.tsx
-import { Observer as Observer12 } from "mobx-react";
-import { jsx as jsx111 } from "react/jsx-runtime";
+import { Observer as Observer10 } from "mobx-react";
+import { jsx as jsx109 } from "react/jsx-runtime";
 function BoundRadioGroupField(props) {
   const {
     field,
@@ -18209,7 +18228,7 @@ function BoundRadioGroupField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx111(Observer12, { children: () => /* @__PURE__ */ jsx111(
+  return /* @__PURE__ */ jsx109(Observer10, { children: () => /* @__PURE__ */ jsx109(
     RadioGroupField,
     {
       label,
@@ -18235,8 +18254,8 @@ function BoundRadioGroupField(props) {
 }
 
 // src/forms/BoundRichTextField.tsx
-import { Observer as Observer13 } from "mobx-react";
-import { jsx as jsx112 } from "react/jsx-runtime";
+import { Observer as Observer11 } from "mobx-react";
+import { jsx as jsx110 } from "react/jsx-runtime";
 function BoundRichTextField(props) {
   const {
     field,
@@ -18248,7 +18267,7 @@ function BoundRichTextField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx112(Observer13, { children: () => /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx110(Observer11, { children: () => /* @__PURE__ */ jsx110(
     RichTextField,
     {
       label,
@@ -18269,6 +18288,51 @@ function BoundRichTextField(props) {
   ) });
 }
 
+// src/forms/BoundSelectCardField.tsx
+import { Observer as Observer12 } from "mobx-react";
+import { jsx as jsx111 } from "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__ */ jsx111(Observer12, { children: () => /* @__PURE__ */ jsx111(
+    SelectCard,
+    {
+      icon,
+      label,
+      selected: field.value ?? false,
+      onChange: (selected) => {
+        onChange(selected);
+        field.maybeAutoSave();
+      },
+      disabled: field.readOnly,
+      ...testId,
+      ...others
+    }
+  ) });
+}
+
+// src/forms/BoundSelectCardGroupField.tsx
+import { Observer as Observer13 } from "mobx-react";
+import { jsx as jsx112 } from "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__ */ jsx112(Observer13, { children: () => /* @__PURE__ */ jsx112(
+    SelectCardGroup,
+    {
+      label,
+      values: field.value || [],
+      onChange: (values) => {
+        onChange(values);
+        field.maybeAutoSave();
+      },
+      disabled: field.readOnly,
+      ...testId,
+      ...others
+    }
+  ) });
+}
+
 // src/forms/BoundSelectField.tsx
 import { Observer as Observer14 } from "mobx-react";
 import { jsx as jsx113 } from "react/jsx-runtime";
@@ -18714,15 +18778,15 @@ function boundCheckboxGroupField(props) {
     minWidth: "200px"
   });
 }
-function boundIconCardField(props) {
+function boundSelectCardField(props) {
   return (field) => ({
-    component: /* @__PURE__ */ jsx120(BoundIconCardField, { field, ...props }),
+    component: /* @__PURE__ */ jsx120(BoundSelectCardField, { field, ...props }),
     minWidth: "150px"
   });
 }
-function boundIconCardGroupField(props) {
+function boundSelectCardGroupField(props) {
   return (field) => ({
-    component: /* @__PURE__ */ jsx120(BoundIconCardGroupField, { field, ...props }),
+    component: /* @__PURE__ */ jsx120(BoundSelectCardGroupField, { field, ...props }),
     minWidth: "100%"
   });
 }
@@ -19300,7 +19364,7 @@ var activeStyles = {
     "--boxShadow": maybeCssVar39(`inset 3px 0px 0 0px ${"rgba(37, 99, 235, 1)" /* Blue600 */}`)
   }]
 };
-var hoverStyles2 = {
+var hoverStyles3 = {
   backgroundColor: "bgBlue50",
   fontWeight: "fw6",
   fontSize: "fz_14px",
@@ -19368,7 +19432,7 @@ function SectionNavLink(props) {
     },
     ...isFocusVisible ? defaultFocusRingStyles : {},
     ...active ? activeStyles : {},
-    ...isPressed ? activeStyles : isHovered ? hoverStyles2 : {}
+    ...isPressed ? activeStyles : isHovered ? hoverStyles3 : {}
   }), ...tids.sectionNavLink, children: section.title });
 }
 function useActiveSection(sectionsWithRefs) {
@@ -21242,7 +21306,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__ */ jsx160(Icon, { xss: {
@@ -21260,7 +21324,7 @@ var pressedStyles = {
 var activeStyles2 = {
   backgroundColor: "bgGray300"
 };
-var hoverStyles3 = {
+var hoverStyles4 = {
   backgroundColor: "bgGray100"
 };
 var defaultFocusRingStyles2 = {
@@ -22350,7 +22414,7 @@ function AppNavGroupTrigger(props) {
   const {
     baseStyles: baseStyles5,
     focusRingStyles: focusRingStyles2,
-    hoverStyles: hoverStyles4,
+    hoverStyles: hoverStyles5,
     pressedStyles: pressedStyles2
   } = useMemo49(() => getNavLinkStyles("side"), []);
   return /* @__PURE__ */ jsxs87("button", { type: "button", ...mergeProps27(buttonProps, focusProps, hoverProps, tid.trigger, {
@@ -22360,7 +22424,7 @@ function AppNavGroupTrigger(props) {
     ...mergeProps_14(navLink, void 0, {
       ...baseStyles5,
       ...isFocusVisible && focusRingStyles2,
-      ...isHovered && hoverStyles4,
+      ...isHovered && hoverStyles5,
       ...isPressed && pressedStyles2
     })
   }), children: [
@@ -23017,7 +23081,7 @@ function TabImpl(props) {
     baseStyles: baseStyles5,
     activeStyles: activeStyles3,
     focusRingStyles: focusRingStyles2,
-    hoverStyles: hoverStyles4,
+    hoverStyles: hoverStyles5,
     disabledStyles: disabledStyles4,
     activeHoverStyles
   } = useMemo51(() => getTabStyles(), []);
@@ -23034,7 +23098,7 @@ function TabImpl(props) {
       ...baseStyles5,
       ...active && activeStyles3,
       ...isDisabled && disabledStyles4,
-      ...isHovered && hoverStyles4,
+      ...isHovered && hoverStyles5,
       ...isHovered && active && activeHoverStyles,
       ...isFocusVisible && active && focusRingStyles2
     })
@@ -24528,14 +24592,14 @@ export {
   BoundDateField,
   BoundDateRangeField,
   BoundForm,
-  BoundIconCardField,
-  BoundIconCardGroupField,
   BoundMultiLineSelectField,
   BoundMultiSelectField,
   BoundNumberField,
   BoundRadioGroupField,
   BoundRichTextField,
   BoundSelectAndTextField,
+  BoundSelectCardField,
+  BoundSelectCardGroupField,
   BoundSelectField,
   BoundSwitchField,
   BoundTextAreaField,
@@ -24595,7 +24659,6 @@ export {
   HomeboundLogo,
   Icon,
   IconButton,
-  IconCard,
   Icons,
   KEPT_GROUP,
   Loader,
@@ -24637,6 +24700,8 @@ export {
   ScrollableContent,
   ScrollableFooter,
   ScrollableParent,
+  SelectCard,
+  SelectCardGroup,
   SelectField,
   SelectToggle,
   SideNav,
@@ -24685,13 +24750,13 @@ export {
   boundCheckboxGroupField,
   boundDateField,
   boundDateRangeField,
-  boundIconCardField,
-  boundIconCardGroupField,
   boundMultiSelectField,
   boundMultilineSelectField,
   boundNumberField,
   boundRadioGroupField,
   boundRichTextField,
+  boundSelectCardField,
+  boundSelectCardGroupField,
   boundSelectField,
   boundSwitchField,
   boundTextAreaField,
@@ -24731,6 +24796,7 @@ export {
   emptyCell,
   ensureClientSideSortValueIsSortable,
   environmentBannerSizePx,
+  fillRowStyles,
   filterTestIdPrefix,
   formatDate,
   formatDateRange,
@@ -24747,7 +24813,6 @@ export {
   getTableStyles,
   headerRenderFn,
   hoverStyles,
-  iconCardStylesHover,
   increment,
   insertAtIndex,
   isContentColumn,
@@ -24789,7 +24854,6 @@ export {
   rowClickRenderFn,
   rowLinkRenderFn,
   selectColumn,
-  selectedStyles,
   setDefaultStyle,
   setEnvironmentFavicon,
   setGridTableDefaults,