@homebound/beam 4.42.0 → 4.43.0

package/dist/index.cjs

@@ -152,6 +152,7 @@ __export(index_exports, {
   Loader: () => Loader,
   LoadingSkeleton: () => LoadingSkeleton,
   MaxLines: () => MaxLines,
+  MenuSelectField: () => MenuSelectField,
   ModalBanner: () => ModalBanner,
   ModalBody: () => ModalBody,
   ModalFilterItem: () => ModalFilterItem,
@@ -464,95 +465,95 @@ module.exports = __toCommonJS(index_exports);
 
 // src/Css.ts
 var import_runtime = require("@homebound/truss/runtime");
-var Tokens = /* @__PURE__ */ ((Tokens65) => {
-  Tokens65["AiFieldBg"] = "--b-ai-field-bg";
-  Tokens65["AiFieldFg"] = "--b-ai-field-fg";
-  Tokens65["ButtonCautionDisabledBg"] = "--b-button-caution-disabled-bg";
-  Tokens65["ButtonCautionDisabledFg"] = "--b-button-caution-disabled-fg";
-  Tokens65["ButtonDangerDisabledBg"] = "--b-button-danger-disabled-bg";
-  Tokens65["ButtonDangerDisabledFg"] = "--b-button-danger-disabled-fg";
-  Tokens65["ButtonGhostDisabledFg"] = "--b-button-ghost-disabled-fg";
-  Tokens65["ButtonGhostFg"] = "--b-button-ghost-fg";
-  Tokens65["ButtonPrimaryDisabledBg"] = "--b-button-primary-disabled-bg";
-  Tokens65["ButtonPrimaryDisabledFg"] = "--b-button-primary-disabled-fg";
-  Tokens65["ButtonSecondaryFg"] = "--b-button-secondary-fg";
-  Tokens65["ButtonTertiaryFg"] = "--b-button-tertiary-fg";
-  Tokens65["ButtonTertiaryFgPressed"] = "--b-button-tertiary-fg-pressed";
-  Tokens65["ChoiceDisabled"] = "--b-choice-disabled";
-  Tokens65["ChoiceSelected"] = "--b-choice-selected";
-  Tokens65["Danger"] = "--b-danger";
-  Tokens65["DangerPressed"] = "--b-danger-pressed";
-  Tokens65["EnvBrandDev"] = "--b-env-brand-dev";
-  Tokens65["EnvBrandLocalProd"] = "--b-env-brand-local-prod";
-  Tokens65["EnvBrandProd"] = "--b-env-brand-prod";
-  Tokens65["EnvBrandQa"] = "--b-env-brand-qa";
-  Tokens65["FieldBgDefault"] = "--b-field-bg-default";
-  Tokens65["FieldBgDisabled"] = "--b-field-bg-disabled";
-  Tokens65["FieldBgHover"] = "--b-field-bg-hover";
-  Tokens65["FieldBorderDefault"] = "--b-field-border-default";
-  Tokens65["FieldBorderError"] = "--b-field-border-error";
-  Tokens65["FieldBorderFocus"] = "--b-field-border-focus";
-  Tokens65["FieldBorderHover"] = "--b-field-border-hover";
-  Tokens65["FieldTextDisabled"] = "--b-field-text-disabled";
-  Tokens65["FocusRingInset"] = "--b-focus-ring-inset";
-  Tokens65["FocusRingMuted"] = "--b-focus-ring-muted";
-  Tokens65["LoaderFill"] = "--b-loader-fill";
-  Tokens65["LoaderSpinner"] = "--b-loader-spinner";
-  Tokens65["LoaderTrack"] = "--b-loader-track";
-  Tokens65["NavGlobalItemBgActive"] = "--b-nav-global-item-bg-active";
-  Tokens65["NavGlobalItemBgHover"] = "--b-nav-global-item-bg-hover";
-  Tokens65["NavGlobalItemBgPressed"] = "--b-nav-global-item-bg-pressed";
-  Tokens65["NavGlobalText"] = "--b-nav-global-text";
-  Tokens65["NavGlobalTextActive"] = "--b-nav-global-text-active";
-  Tokens65["NavGlobalTextDisabled"] = "--b-nav-global-text-disabled";
-  Tokens65["NavItemBgActive"] = "--b-nav-item-bg-active";
-  Tokens65["NavItemBgHover"] = "--b-nav-item-bg-hover";
-  Tokens65["NavItemBgPressed"] = "--b-nav-item-bg-pressed";
-  Tokens65["NavText"] = "--b-nav-text";
-  Tokens65["NavTextActive"] = "--b-nav-text-active";
-  Tokens65["NavTextDisabled"] = "--b-nav-text-disabled";
-  Tokens65["NavTextFocusVisible"] = "--b-nav-text-focus-visible";
-  Tokens65["NavTextPressed"] = "--b-nav-text-pressed";
-  Tokens65["NeutralFillHover"] = "--b-neutral-fill-hover";
-  Tokens65["NeutralFillHoverStrong"] = "--b-neutral-fill-hover-strong";
-  Tokens65["NeutralFillHoverSubtle"] = "--b-neutral-fill-hover-subtle";
-  Tokens65["NeutralFillPressed"] = "--b-neutral-fill-pressed";
-  Tokens65["NeutralSurfacePressed"] = "--b-neutral-surface-pressed";
-  Tokens65["OnPrimary"] = "--b-on-primary";
-  Tokens65["OnSurface"] = "--b-on-surface";
-  Tokens65["OnSurfaceActive"] = "--b-on-surface-active";
-  Tokens65["OnSurfaceActiveDisabled"] = "--b-on-surface-active-disabled";
-  Tokens65["OnSurfaceDisabled"] = "--b-on-surface-disabled";
-  Tokens65["OnSurfaceMuted"] = "--b-on-surface-muted";
-  Tokens65["OnSurfaceRaisedHover"] = "--b-on-surface-raised-hover";
-  Tokens65["OnSurfaceRaisedPressed"] = "--b-on-surface-raised-pressed";
-  Tokens65["Primary"] = "--b-primary";
-  Tokens65["PrimaryHover"] = "--b-primary-hover";
-  Tokens65["PrimaryPressed"] = "--b-primary-pressed";
-  Tokens65["Scrim"] = "--b-scrim";
-  Tokens65["SelectionFill"] = "--b-selection-fill";
-  Tokens65["SelectionIndicator"] = "--b-selection-indicator";
-  Tokens65["Surface"] = "--b-surface";
-  Tokens65["SurfaceActive"] = "--b-surface-active";
-  Tokens65["SurfaceActiveBorder"] = "--b-surface-active-border";
-  Tokens65["SurfaceActiveHover"] = "--b-surface-active-hover";
-  Tokens65["SurfaceDisabled"] = "--b-surface-disabled";
-  Tokens65["SurfaceHover"] = "--b-surface-hover";
-  Tokens65["SurfaceRaised"] = "--b-surface-raised";
-  Tokens65["SurfaceRaisedHover"] = "--b-surface-raised-hover";
-  Tokens65["SurfaceRaisedPressed"] = "--b-surface-raised-pressed";
-  Tokens65["SurfaceSeparator"] = "--b-surface-separator";
-  Tokens65["SurfaceSubtle"] = "--b-surface-subtle";
-  Tokens65["TextDisabled"] = "--b-text-disabled";
-  Tokens65["TextHelper"] = "--b-text-helper";
-  Tokens65["TextLabel"] = "--b-text-label";
-  Tokens65["TextLinkDefault"] = "--b-text-link-default";
-  Tokens65["TextLinkDisabled"] = "--b-text-link-disabled";
-  Tokens65["TextLinkHover"] = "--b-text-link-hover";
-  Tokens65["TextLinkPressed"] = "--b-text-link-pressed";
-  Tokens65["TextPlaceholder"] = "--b-text-placeholder";
-  Tokens65["TextSelection"] = "--b-text-selection";
-  return Tokens65;
+var Tokens = /* @__PURE__ */ ((Tokens69) => {
+  Tokens69["AiFieldBg"] = "--b-ai-field-bg";
+  Tokens69["AiFieldFg"] = "--b-ai-field-fg";
+  Tokens69["ButtonCautionDisabledBg"] = "--b-button-caution-disabled-bg";
+  Tokens69["ButtonCautionDisabledFg"] = "--b-button-caution-disabled-fg";
+  Tokens69["ButtonDangerDisabledBg"] = "--b-button-danger-disabled-bg";
+  Tokens69["ButtonDangerDisabledFg"] = "--b-button-danger-disabled-fg";
+  Tokens69["ButtonGhostDisabledFg"] = "--b-button-ghost-disabled-fg";
+  Tokens69["ButtonGhostFg"] = "--b-button-ghost-fg";
+  Tokens69["ButtonPrimaryDisabledBg"] = "--b-button-primary-disabled-bg";
+  Tokens69["ButtonPrimaryDisabledFg"] = "--b-button-primary-disabled-fg";
+  Tokens69["ButtonSecondaryFg"] = "--b-button-secondary-fg";
+  Tokens69["ButtonTertiaryFg"] = "--b-button-tertiary-fg";
+  Tokens69["ButtonTertiaryFgPressed"] = "--b-button-tertiary-fg-pressed";
+  Tokens69["ChoiceDisabled"] = "--b-choice-disabled";
+  Tokens69["ChoiceSelected"] = "--b-choice-selected";
+  Tokens69["Danger"] = "--b-danger";
+  Tokens69["DangerPressed"] = "--b-danger-pressed";
+  Tokens69["EnvBrandDev"] = "--b-env-brand-dev";
+  Tokens69["EnvBrandLocalProd"] = "--b-env-brand-local-prod";
+  Tokens69["EnvBrandProd"] = "--b-env-brand-prod";
+  Tokens69["EnvBrandQa"] = "--b-env-brand-qa";
+  Tokens69["FieldBgDefault"] = "--b-field-bg-default";
+  Tokens69["FieldBgDisabled"] = "--b-field-bg-disabled";
+  Tokens69["FieldBgHover"] = "--b-field-bg-hover";
+  Tokens69["FieldBorderDefault"] = "--b-field-border-default";
+  Tokens69["FieldBorderError"] = "--b-field-border-error";
+  Tokens69["FieldBorderFocus"] = "--b-field-border-focus";
+  Tokens69["FieldBorderHover"] = "--b-field-border-hover";
+  Tokens69["FieldTextDisabled"] = "--b-field-text-disabled";
+  Tokens69["FocusRingInset"] = "--b-focus-ring-inset";
+  Tokens69["FocusRingMuted"] = "--b-focus-ring-muted";
+  Tokens69["LoaderFill"] = "--b-loader-fill";
+  Tokens69["LoaderSpinner"] = "--b-loader-spinner";
+  Tokens69["LoaderTrack"] = "--b-loader-track";
+  Tokens69["NavGlobalItemBgActive"] = "--b-nav-global-item-bg-active";
+  Tokens69["NavGlobalItemBgHover"] = "--b-nav-global-item-bg-hover";
+  Tokens69["NavGlobalItemBgPressed"] = "--b-nav-global-item-bg-pressed";
+  Tokens69["NavGlobalText"] = "--b-nav-global-text";
+  Tokens69["NavGlobalTextActive"] = "--b-nav-global-text-active";
+  Tokens69["NavGlobalTextDisabled"] = "--b-nav-global-text-disabled";
+  Tokens69["NavItemBgActive"] = "--b-nav-item-bg-active";
+  Tokens69["NavItemBgHover"] = "--b-nav-item-bg-hover";
+  Tokens69["NavItemBgPressed"] = "--b-nav-item-bg-pressed";
+  Tokens69["NavText"] = "--b-nav-text";
+  Tokens69["NavTextActive"] = "--b-nav-text-active";
+  Tokens69["NavTextDisabled"] = "--b-nav-text-disabled";
+  Tokens69["NavTextFocusVisible"] = "--b-nav-text-focus-visible";
+  Tokens69["NavTextPressed"] = "--b-nav-text-pressed";
+  Tokens69["NeutralFillHover"] = "--b-neutral-fill-hover";
+  Tokens69["NeutralFillHoverStrong"] = "--b-neutral-fill-hover-strong";
+  Tokens69["NeutralFillHoverSubtle"] = "--b-neutral-fill-hover-subtle";
+  Tokens69["NeutralFillPressed"] = "--b-neutral-fill-pressed";
+  Tokens69["NeutralSurfacePressed"] = "--b-neutral-surface-pressed";
+  Tokens69["OnPrimary"] = "--b-on-primary";
+  Tokens69["OnSurface"] = "--b-on-surface";
+  Tokens69["OnSurfaceActive"] = "--b-on-surface-active";
+  Tokens69["OnSurfaceActiveDisabled"] = "--b-on-surface-active-disabled";
+  Tokens69["OnSurfaceDisabled"] = "--b-on-surface-disabled";
+  Tokens69["OnSurfaceMuted"] = "--b-on-surface-muted";
+  Tokens69["OnSurfaceRaisedHover"] = "--b-on-surface-raised-hover";
+  Tokens69["OnSurfaceRaisedPressed"] = "--b-on-surface-raised-pressed";
+  Tokens69["Primary"] = "--b-primary";
+  Tokens69["PrimaryHover"] = "--b-primary-hover";
+  Tokens69["PrimaryPressed"] = "--b-primary-pressed";
+  Tokens69["Scrim"] = "--b-scrim";
+  Tokens69["SelectionFill"] = "--b-selection-fill";
+  Tokens69["SelectionIndicator"] = "--b-selection-indicator";
+  Tokens69["Surface"] = "--b-surface";
+  Tokens69["SurfaceActive"] = "--b-surface-active";
+  Tokens69["SurfaceActiveBorder"] = "--b-surface-active-border";
+  Tokens69["SurfaceActiveHover"] = "--b-surface-active-hover";
+  Tokens69["SurfaceDisabled"] = "--b-surface-disabled";
+  Tokens69["SurfaceHover"] = "--b-surface-hover";
+  Tokens69["SurfaceRaised"] = "--b-surface-raised";
+  Tokens69["SurfaceRaisedHover"] = "--b-surface-raised-hover";
+  Tokens69["SurfaceRaisedPressed"] = "--b-surface-raised-pressed";
+  Tokens69["SurfaceSeparator"] = "--b-surface-separator";
+  Tokens69["SurfaceSubtle"] = "--b-surface-subtle";
+  Tokens69["TextDisabled"] = "--b-text-disabled";
+  Tokens69["TextHelper"] = "--b-text-helper";
+  Tokens69["TextLabel"] = "--b-text-label";
+  Tokens69["TextLinkDefault"] = "--b-text-link-default";
+  Tokens69["TextLinkDisabled"] = "--b-text-link-disabled";
+  Tokens69["TextLinkHover"] = "--b-text-link-hover";
+  Tokens69["TextLinkPressed"] = "--b-text-link-pressed";
+  Tokens69["TextPlaceholder"] = "--b-text-placeholder";
+  Tokens69["TextSelection"] = "--b-text-selection";
+  return Tokens69;
 })(Tokens || {});
 var Keyframes = /* @__PURE__ */ ((Keyframes2) => {
   Keyframes2["LoadingDots"] = "loadingDots";
@@ -8335,7 +8336,7 @@ function CompanionRowImpl(props) {
     companion,
     position = "trailing",
     levelIndent,
-    rowCss,
+    rowCss: rowCss2,
     cellCss
   } = props;
   const RowTag = as === "table" ? "tr" : "div";
@@ -8368,7 +8369,7 @@ function CompanionRowImpl(props) {
       }]
     },
     ...isLastBodyRow && style.lastRowCss,
-    ...rowCss
+    ...rowCss2
   }), "data-gridrow": true, ...tid[rowId], children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CellTag, { ...(0, import_runtime17.trussProps)({
     ...style.cellCss,
     ...style.betweenRowsCss,
@@ -11016,7 +11017,7 @@ function RowImpl(props) {
     }
   };
   const rowHoverBg = maybeCssVar(aiMode && !reservedRowKinds.includes(row.kind) ? "rgba(237, 233, 254, 1)" /* Purple100 */ : style.rowHoverColor !== void 0 && style.rowHoverColor !== "none" ? style.rowHoverColor : "--b-surface-hover" /* SurfaceHover */);
-  const rowCss = {
+  const rowCss2 = {
     ...!reservedRowKinds.includes(row.kind) && style.nonHeaderRowCss,
     ...isFirstBodyRow && style.firstBodyRowCss,
     ...isFirstHeadRow && style.firstRowCss,
@@ -11056,7 +11057,7 @@ function RowImpl(props) {
   const ref = (0, import_react33.useRef)(null);
   const dragOverCallback = (0, import_react33.useCallback)((row2, evt) => onDragOver?.(row2, evt), [onDragOver]);
   const onDragOverDebounced = (0, import_use_debounce3.useDebouncedCallback)(dragOverCallback, 100);
-  const RowContent = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RowTag, { ...(0, import_runtime24.mergeProps)(`${BorderHoverParent}${showRowHoverColor ? ` ${RowHoverClass}` : ""}`, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
+  const RowContent = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RowTag, { ...(0, import_runtime24.mergeProps)(`${BorderHoverParent}${showRowHoverColor ? ` ${RowHoverClass}` : ""}`, void 0, rowCss2), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
     const maybeExpandedColumn = expandColumnHidden ? columns[columnIndex - 1] : column2;
     const isExpanded = tableState.isExpandedColumn(maybeExpandedColumn.id);
     if (column2.hideOnExpand && isExpanded) {
@@ -32823,12 +32824,1011 @@ function Autocomplete(props) {
   ] });
 }
 
-// src/inputs/ToggleButton.tsx
+// src/inputs/MenuSelectField/internal/AnchoredOverlay.tsx
+var import_react183 = require("react");
+var import_react_aria73 = require("react-aria");
+
+// src/inputs/MenuSelectField/internal/useAnchoredPosition.ts
 var import_react182 = require("react");
 var import_react_aria72 = require("react-aria");
-var import_react_stately20 = require("react-stately");
-var import_runtime173 = require("@homebound/truss/runtime");
+function useAnchoredPosition(triggerRef, popoverRef, isOpen2) {
+  const { overlayProps, updatePosition } = (0, import_react_aria72.useOverlayPosition)({
+    targetRef: triggerRef,
+    overlayRef: popoverRef,
+    isOpen: isOpen2,
+    shouldFlip: true,
+    placement: "bottom start",
+    offset: overlayOffset,
+    containerPadding: viewportPadding,
+    maxHeight: menuMaxHeight
+  });
+  (0, import_react182.useLayoutEffect)(() => {
+    if (!isOpen2) return;
+    const onScroll = (event) => {
+      const target = event.target;
+      if (!(target instanceof Node) || !triggerRef.current || !target.contains(triggerRef.current)) return;
+      updatePosition();
+    };
+    window.addEventListener("scroll", onScroll, true);
+    return () => window.removeEventListener("scroll", onScroll, true);
+  }, [isOpen2, updatePosition, triggerRef]);
+  (0, import_react182.useLayoutEffect)(() => {
+    if (!isOpen2) return;
+    applyMenuFrame(popoverRef.current, triggerRef.current);
+  });
+  return {
+    ...overlayProps,
+    style: {
+      ...overlayProps.style,
+      zIndex: zIndices.popover
+    }
+  };
+}
+var overlayOffset = 4;
+var viewportPadding = 8;
+var menuMaxHeight = 512;
+function applyMenuFrame(overlay, trigger) {
+  if (!overlay) return;
+  const height = overlay.style.maxHeight;
+  if (height && overlay.style.getPropertyValue("--menu-max-height") !== height) {
+    overlay.style.setProperty("--menu-max-height", height);
+  }
+  if (!trigger) return;
+  const width2 = `${trigger.offsetWidth}px`;
+  if (overlay.style.minWidth !== width2) overlay.style.minWidth = width2;
+}
+
+// src/inputs/MenuSelectField/internal/AnchoredOverlay.tsx
 var import_jsx_runtime265 = require("react/jsx-runtime");
+function AnchoredOverlay(props) {
+  const { triggerRef, isOpen: isOpen2, onClose, children } = props;
+  const popoverRef = (0, import_react183.useRef)(null);
+  const tid = useTestIds(props, "anchoredOverlay");
+  const positionProps = useAnchoredPosition(triggerRef, popoverRef, isOpen2);
+  if (!isOpen2) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
+    Popover,
+    {
+      triggerRef,
+      popoverRef,
+      positionProps: { ...positionProps, ...tid.overlay },
+      onClose,
+      isOpen: isOpen2,
+      shouldCloseOnInteractOutside: (el) => {
+        if (!triggerRef.current?.contains(el) && shouldDismissOverlay(el, triggerRef.current)) onClose();
+        return false;
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(import_react_aria73.FocusScope, { children })
+    }
+  );
+}
+
+// src/inputs/MenuSelectField/internal/BottomSheet.tsx
+var import_react184 = require("react");
+var import_react_aria74 = require("react-aria");
+var import_react_dom11 = require("react-dom");
+var import_runtime173 = require("@homebound/truss/runtime");
+var import_jsx_runtime266 = require("react/jsx-runtime");
+function BottomSheet(props) {
+  const {
+    isOpen: isOpen2,
+    onClose,
+    label,
+    children
+  } = props;
+  const frameRef = (0, import_react184.useRef)(null);
+  const sheetRef = (0, import_react184.useRef)(null);
+  const contrast = useContrastScope();
+  const tid = useTestIds(props, "bottomSheet");
+  useVisualViewportFrame(frameRef, isOpen2);
+  (0, import_react_aria74.usePreventScroll)({
+    isDisabled: !isOpen2
+  });
+  const {
+    overlayProps,
+    underlayProps
+  } = (0, import_react_aria74.useOverlay)({
+    isOpen: isOpen2,
+    onClose,
+    isDismissable: true
+  }, sheetRef);
+  const {
+    dialogProps
+  } = (0, import_react_aria74.useDialog)({
+    "aria-label": label
+  }, sheetRef);
+  if (!isOpen2) return null;
+  return (0, import_react_dom11.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime266.jsxs)("div", { ref: frameRef, ...(0, import_runtime173.trussProps)(frameCss), "data-theme": contrast ? contrastDataTheme : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime266.jsx)("div", { ...underlayProps, ...(0, import_runtime173.trussProps)(scrimCss), ...tid.sheetScrim }),
+    /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(import_react_aria74.FocusScope, { contain: true, restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)("div", { ...(0, import_react_aria74.mergeProps)(overlayProps, dialogProps), ref: sheetRef, ...(0, import_runtime173.trussProps)(sheetCss), ...tid.sheet, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)("div", { ...(0, import_runtime173.trussProps)({
+        display: "df",
+        alignItems: "aic",
+        justifyContent: "jcsb",
+        gap: "g_1",
+        paddingLeft: "pl2",
+        paddingRight: "pr2",
+        height: ["h_var", {
+          "--height": `${sheetHeaderHeight}px`
+        }],
+        borderBottomStyle: "bbs_solid",
+        borderBottomWidth: "bbw_1px",
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-surface-separator)"
+        }]
+      }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime266.jsx)("span", { className: "fw6 fz_14px lh_20px wsnw oh to_ellipsis", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(Button, { label: "Done", variant: "tertiary", onClick: onClose, ...tid.sheetDone })
+      ] }),
+      children
+    ] }) })
+  ] }), document.body);
+}
+function useVisualViewportFrame(frameRef, isOpen2) {
+  (0, import_react184.useLayoutEffect)(() => {
+    const frame = frameRef.current;
+    if (!isOpen2 || !frame) return;
+    let raf = 0;
+    const apply = () => {
+      raf = 0;
+      const vv = window.visualViewport;
+      const top = vv?.offsetTop ?? 0;
+      const height = vv?.height ?? window.innerHeight;
+      frame.style.top = `${top}px`;
+      frame.style.height = `${height}px`;
+      frame.style.setProperty("--menu-max-height", `${Math.max(0, Math.round(height * sheetMaxRatio) - sheetHeaderHeight)}px`);
+    };
+    const schedule = () => {
+      if (!raf) raf = requestAnimationFrame(apply);
+    };
+    apply();
+    window.visualViewport?.addEventListener("resize", schedule);
+    window.visualViewport?.addEventListener("scroll", schedule);
+    window.addEventListener("resize", schedule);
+    return () => {
+      if (raf) cancelAnimationFrame(raf);
+      window.visualViewport?.removeEventListener("resize", schedule);
+      window.visualViewport?.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+    };
+  }, [frameRef, isOpen2]);
+}
+var sheetHeaderHeight = 48;
+var sheetMaxRatio = 0.85;
+var frameCss = {
+  position: "fixed",
+  left: "l_0",
+  width: "w100",
+  top: "top0",
+  display: "df",
+  flexDirection: "fdc",
+  justifyContent: "jcfe",
+  zIndex: ["z_var", {
+    "--zIndex": (0, import_runtime173.maybeCssVar)(zIndices.popover)
+  }]
+};
+var scrimCss = {
+  position: "absolute",
+  inset: "ins_0",
+  backgroundColor: ["bgColor_var", {
+    "--backgroundColor": "var(--b-scrim)"
+  }]
+};
+var sheetCss = {
+  ...{
+    position: "relative",
+    display: "df",
+    flexDirection: "fdc",
+    width: "w100",
+    backgroundColor: ["bgColor_var", {
+      "--backgroundColor": "var(--b-surface-raised)"
+    }],
+    color: ["color_var", {
+      "--color": "var(--b-on-surface)"
+    }],
+    boxShadow: "bshModal",
+    outline: "ol_0",
+    bottom: "bot_0px"
+  },
+  ...{
+    borderTopLeftRadius: "btlr_12px",
+    borderTopRightRadius: "btrr_12px",
+    paddingBottom: "pb_env_safe_area_inset_bottom"
+  }
+};
+
+// src/inputs/MenuSelectField/internal/MenuPanel.tsx
+var import_runtime174 = require("@homebound/truss/runtime");
+var import_jsx_runtime267 = require("react/jsx-runtime");
+function MenuPanel(props) {
+  const {
+    header,
+    children,
+    variant = "anchored"
+  } = props;
+  const tid = useTestIds(props, "menuPanel");
+  return /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)("div", { ...(0, import_runtime174.trussProps)({
+    ...panelCss,
+    ...variant === "anchored" ? anchoredCss : {}
+  }), ...tid.menuPanel, children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime267.jsx)("div", { ...(0, import_runtime174.trussProps)({
+      flexShrink: "fs0",
+      borderBottomStyle: "bbs_solid",
+      borderBottomWidth: "bbw_1px",
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-surface-separator)"
+      }]
+    }), children: header }),
+    /* @__PURE__ */ (0, import_jsx_runtime267.jsx)("div", { className: "df fdc fg1 mh0", children })
+  ] });
+}
+var panelCss = {
+  display: "df",
+  flexDirection: "fdc",
+  width: "w100",
+  overflow: "oh",
+  color: ["color_var", {
+    "--color": "var(--b-on-surface)"
+  }],
+  maxHeight: "maxh_var_menu_max_height_512px"
+};
+var anchoredCss = {
+  backgroundColor: ["bgColor_var", {
+    "--backgroundColor": "var(--b-surface-raised)"
+  }],
+  borderRadius: "br4",
+  boxShadow: "bshBasic"
+};
+
+// src/inputs/MenuSelectField/internal/MenuSearchInput.tsx
+var import_runtime175 = require("@homebound/truss/runtime");
+var import_jsx_runtime268 = require("react/jsx-runtime");
+function MenuSearchInput(props) {
+  const {
+    search,
+    inputRef,
+    label,
+    placeholder = "Search"
+  } = props;
+  const tid = useTestIds(props, "menuSearch");
+  return /* @__PURE__ */ (0, import_jsx_runtime268.jsxs)("label", { className: "df aic g_1 pl2 pr2 h_48px cur_text", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("span", { ...(0, import_runtime175.trussProps)({
+      display: "df",
+      alignItems: "aic",
+      flexShrink: "fs0",
+      color: ["color_var", {
+        "--color": "var(--b-on-surface-muted)"
+      }]
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(Icon, { icon: "search" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("input", { ref: inputRef, type: "text", role: "combobox", "aria-label": label, "aria-autocomplete": "list", "aria-expanded": true, "aria-controls": search.listId, "aria-activedescendant": search.activeDescendant, autoComplete: "off", autoCorrect: "off", spellCheck: false, enterKeyHint: "done", placeholder, value: search.value, onChange: (e) => search.onChange(e.target.value), onKeyDown: search.onKeyDown, ...(0, import_runtime175.trussProps)(inputCss), ...tid.search })
+  ] });
+}
+var inputCss = {
+  ...{
+    flexGrow: "fg1",
+    minWidth: "mw0",
+    outline: "ol_0",
+    backgroundColor: "bgTransparent",
+    fontWeight: "fw4",
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px",
+    color: ["color_var", {
+      "--color": "var(--b-on-surface)"
+    }]
+  },
+  // iOS zooms the page when a focused input is under 16px.
+  ...{
+    fontSize: "sm_fs_16px"
+  }
+};
+
+// src/inputs/MenuSelectField/internal/MenuSelectTrigger.tsx
+var import_react_aria75 = require("react-aria");
+var import_runtime176 = require("@homebound/truss/runtime");
+var import_jsx_runtime269 = require("react/jsx-runtime");
+function MenuSelectTrigger(props) {
+  const {
+    label,
+    required,
+    errorMsg,
+    helperText,
+    disabled,
+    readOnly,
+    labelStyle: labelStyleProp,
+    inputStylePalette,
+    trigger,
+    triggerRef
+  } = props;
+  const internalProps = props.internalProps ?? {};
+  const {
+    compound = false,
+    forceFocus = false,
+    forceHover = false
+  } = internalProps;
+  const tid = useTestIds(props, defaultTestId(label));
+  const {
+    fieldProps
+  } = usePresentationContext();
+  const labelStyle = labelStyleProp ?? fieldProps?.labelStyle ?? "above";
+  const compact = props.compact ?? fieldProps?.compact ?? false;
+  const borderless = props.borderless ?? fieldProps?.borderless ?? false;
+  const borderOnHover = props.borderOnHover ?? fieldProps?.borderOnHover ?? false;
+  const fullWidth = props.fullWidth ?? fieldProps?.fullWidth ?? false;
+  const visuallyDisabled = props.visuallyDisabled ?? fieldProps?.visuallyDisabled ?? true;
+  const errorInTooltip = props.errorInTooltip ?? fieldProps?.errorInTooltip ?? false;
+  const typeScale = fieldProps?.typeScale ?? "sm";
+  const labelSuffix = useLabelSuffix(required, trigger.isReadOnly);
+  const showFocus = (trigger.isFocusVisible || trigger.isOpen) && !trigger.isDisabled && !trigger.isReadOnly || forceFocus;
+  const showHover = trigger.isHovered && !trigger.isDisabled && !trigger.isReadOnly && !showFocus || forceHover;
+  const showErrorAndHelper = !compound && !trigger.isDisabled && !trigger.isReadOnly;
+  const {
+    proposedValue: proposedText,
+    originalValue: originalText
+  } = trigger.proposalProps;
+  const showProposal = proposedText !== void 0;
+  const originalBelow = originalText && !trigger.isReadOnly ? originalText : void 0;
+  const fieldChrome = getFieldChrome({
+    typeScale,
+    labelStyle,
+    labelLeftFieldWidth: fieldProps?.labelLeftFieldWidth,
+    compact,
+    borderless,
+    borderOnHover,
+    fullWidth,
+    compound,
+    visuallyDisabled,
+    isHovered: trigger.isHovered || forceHover,
+    showProposal,
+    inputStylePalette
+  });
+  const fieldStateCss = {
+    ...fieldChrome.control,
+    ...trigger.isDisabled ? fieldChrome.disabled : {},
+    ...showFocus ? fieldChrome.focus : {},
+    ...showHover ? fieldChrome.hover : {},
+    ...errorMsg && !trigger.isDisabled ? fieldChrome.error : {},
+    ...{
+      textAlign: "tal",
+      outline: "ol_0",
+      appearance: "app_none",
+      font: "fnt_inherit",
+      ...!trigger.isDisabled ? {
+        cursor: "cur_pointer"
+      } : {}
+    }
+  };
+  const supporting = /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(import_jsx_runtime269.Fragment, { children: [
+    originalBelow && /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(OriginalValue, { originalValue: originalBelow, ...tid.originalValue }),
+    showErrorAndHelper && errorMsg && !errorInTooltip && /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(ErrorMessage, { id: trigger.errorId, errorMsg, ...tid.errorMsg }),
+    showErrorAndHelper && helperText && /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(HelperText, { helperText, ...tid.helperText })
+  ] });
+  const hasSupporting = !!(originalBelow || showErrorAndHelper && (errorMsg || helperText));
+  const valueNode = /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(import_jsx_runtime269.Fragment, { children: [
+    labelStyle === "inline" && /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)("span", { id: trigger.labelId, ...(0, import_runtime176.trussProps)({
+      fontWeight: "fw4",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
+      whiteSpace: "wsnw",
+      paddingRight: "pr_4px",
+      color: ["color_var", {
+        "--color": (0, import_runtime176.maybeCssVar)(trigger.isDisabled && visuallyDisabled ? "currentColor" : "--b-text-label" /* TextLabel */)
+      }]
+    }), children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { id: trigger.valueId, className: "df aic fg1 mw0 oh", children: trigger.isReadOnly && showProposal ? /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { className: "fg1 wsnw oh to_ellipsis", children: /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(ProposedValue, { original: originalText, proposed: proposedText, ...tid.proposedValue }) }) : /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { ...(0, import_runtime176.trussProps)({
+      ...{
+        flexGrow: "fg1",
+        whiteSpace: "wsnw",
+        overflow: "oh",
+        textOverflow: "to_ellipsis",
+        color: ["color_var", {
+          "--color": (0, import_runtime176.maybeCssVar)(trigger.isPlaceholder ? inputPlaceholderColor : void 0)
+        }]
+      },
+      // A placeholder reads as hint text, so it stays at the field's regular weight.
+      ...!trigger.isPlaceholder ? selectedValueCss(labelStyle, trigger.isReadOnly) : {},
+      ...showProposal ? {
+        fontWeight: "fw6",
+        color: ["color_var", {
+          "--color": "var(--b-ai-field-fg)"
+        }]
+      } : {}
+    }), children: trigger.displayText }) }),
+    errorInTooltip && errorMsg && showErrorAndHelper && /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { className: "df aic fs0 pl1", children: /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(Icon, { icon: "error", color: "--b-danger" /* Danger */, tooltip: errorMsg }) }),
+    !trigger.isReadOnly && /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { ...(0, import_runtime176.trussProps)({
+      display: "df",
+      alignItems: "aic",
+      flexShrink: "fs0",
+      paddingLeft: "pl1",
+      color: ["color_var", {
+        "--color": (0, import_runtime176.maybeCssVar)(trigger.isDisabled ? "--b-field-text-disabled" /* FieldTextDisabled */ : "--b-text-placeholder" /* TextPlaceholder */)
+      }]
+    }), ...tid.toggle, children: /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(Icon, { icon: trigger.isOpen ? "chevronUp" : "chevronDown" }) })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(import_jsx_runtime269.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)("div", { ...(0, import_runtime176.trussProps)(fieldChrome.container), children: [
+      label && labelStyle !== "inline" && /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(Label, { labelProps: {
+        id: trigger.labelId,
+        htmlFor: trigger.isReadOnly ? void 0 : trigger.triggerId,
+        onClick: (event) => {
+          event.preventDefault();
+          if (trigger.isDisabled || trigger.isReadOnly || trigger.isOpen) return;
+          triggerRef.current?.focus();
+          trigger.open();
+        }
+      }, hidden: labelStyle === "hidden", label, inline: labelStyle === "left", suffix: labelSuffix, ...tid.label }),
+      maybeTooltip({
+        title: resolveTooltip(disabled, void 0, readOnly),
+        placement: "top",
+        children: trigger.isReadOnly ? /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("div", { ...(0, import_runtime176.trussProps)(fieldChrome.readOnly), "data-readonly": "true", "data-ai-mode": showProposal ? "true" : void 0, ...tid, children: valueNode }) : /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("button", { ...(0, import_react_aria75.mergeProps)(trigger.hoverProps, trigger.focusProps, {
+          id: trigger.triggerId,
+          type: "button",
+          disabled: trigger.isDisabled,
+          "aria-haspopup": "listbox",
+          "aria-expanded": trigger.isOpen,
+          "aria-controls": trigger.listId,
+          "aria-labelledby": `${trigger.labelId} ${trigger.valueId}`,
+          "aria-invalid": errorMsg ? true : void 0,
+          "aria-errormessage": errorMsg ? trigger.errorId : void 0,
+          "data-ai-mode": showProposal ? "true" : void 0,
+          onKeyDown: trigger.onKeyDown,
+          onClick: () => trigger.isOpen ? trigger.close({
+            restoreFocus: true
+          }) : trigger.open(),
+          onFocus: trigger.onFocus,
+          onBlur: trigger.onBlur
+        }), ref: triggerRef, ...(0, import_runtime176.mergeProps)(BorderHoverChild, void 0, fieldStateCss), ...tid, children: valueNode })
+      }),
+      labelStyle !== "left" && supporting
+    ] }),
+    labelStyle === "left" && hasSupporting && /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("div", { className: "mt_neg1 ml_50", children: supporting })
+  ] });
+}
+var inputPlaceholderColor = "#9ca3af";
+
+// src/inputs/MenuSelectField/internal/OptionList.tsx
+var import_interactions2 = require("@react-aria/interactions");
+var import_react186 = require("react");
+var import_react_aria77 = require("react-aria");
+var import_react_virtuoso3 = require("react-virtuoso");
+
+// src/inputs/MenuSelectField/internal/OptionRow.tsx
+var import_react185 = require("react");
+var import_react_aria76 = require("react-aria");
+var import_runtime177 = require("@homebound/truss/runtime");
+var import_jsx_runtime270 = require("react/jsx-runtime");
+function OptionRow(props) {
+  const {
+    item,
+    state,
+    id,
+    disabledReason
+  } = props;
+  const ref = (0, import_react185.useRef)(null);
+  const tid = useTestIds(props, "option");
+  const {
+    hoverProps,
+    isHovered
+  } = (0, import_react_aria76.useHover)({});
+  const {
+    optionProps,
+    isDisabled,
+    isFocused,
+    isSelected
+  } = (0, import_react_aria76.useOption)({
+    key: item.key,
+    shouldSelectOnPressUp: true,
+    shouldFocusOnHover: false
+  }, state, ref);
+  const highlighted = !isDisabled && (isHovered || isFocused);
+  return maybeTooltip({
+    title: disabledReason,
+    placement: "top",
+    children: /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
+      "div",
+      {
+        ...(0, import_react_aria76.mergeProps)(optionProps, hoverProps),
+        id,
+        "data-key": item.key,
+        "data-label": item.textValue,
+        ref,
+        ...(0, import_runtime177.trussProps)({
+          ...rowCss,
+          ...highlighted ? {
+            backgroundColor: ["bgColor_var", {
+              "--backgroundColor": "var(--b-surface-raised-hover)"
+            }]
+          } : {},
+          ...isDisabled ? {
+            cursor: "cur_not_allowed",
+            color: ["color_var", {
+              "--color": "var(--b-text-disabled)"
+            }]
+          } : {}
+        }),
+        ...tid.option,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime270.jsx)("span", { className: "wsnw oh to_ellipsis fg1 mw0", children: item.rendered }),
+          isSelected && /* @__PURE__ */ (0, import_jsx_runtime270.jsx)("span", { className: "df aic fs0", children: /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Icon, { icon: "check", color: isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-selection-indicator" /* SelectionIndicator */ }) })
+        ]
+      }
+    )
+  });
+}
+var menuRowHeight = 40;
+var rowCss = {
+  display: "df",
+  alignItems: "aic",
+  gap: "g_1",
+  paddingLeft: "pl2",
+  paddingRight: "pr2",
+  height: ["h_var", {
+    "--height": `${menuRowHeight}px`
+  }],
+  outline: "ol_0",
+  cursor: "cur_pointer",
+  fontWeight: "fw4",
+  fontSize: "fz_14px",
+  lineHeight: "lh_20px",
+  color: ["color_var", {
+    "--color": "var(--b-on-surface)"
+  }]
+};
+
+// src/inputs/MenuSelectField/internal/OptionList.tsx
+var import_runtime178 = require("@homebound/truss/runtime");
+var import_jsx_runtime271 = require("react/jsx-runtime");
+function OptionList(props) {
+  const {
+    menu,
+    listRef,
+    label,
+    onKeyDown,
+    activeDescendant
+  } = props;
+  const {
+    state,
+    listId: id,
+    disabledReasons,
+    initialIndex,
+    loading
+  } = menu;
+  const tid = useTestIds(props, "optionList");
+  const virtuosoRef = (0, import_react186.useRef)(null);
+  const {
+    listBoxProps
+  } = (0, import_react_aria77.useListBox)({
+    id,
+    "aria-label": label,
+    autoFocus: false,
+    shouldUseVirtualFocus: true,
+    shouldFocusOnHover: false,
+    shouldSelectOnPressUp: true,
+    isVirtualized: true
+  }, state, listRef);
+  const items = [...state.collection];
+  const focusedKey = state.selectionManager.focusedKey;
+  (0, import_react186.useEffect)(() => {
+    if (focusedKey == null || (0, import_interactions2.getInteractionModality)() !== "keyboard") return;
+    const index = state.collection.getItem(focusedKey)?.index;
+    if (index !== void 0) virtuosoRef.current?.scrollIntoView({
+      index,
+      behavior: "auto"
+    });
+  }, [focusedKey, state.collection]);
+  const [{
+    initialTop,
+    initialCount
+  }] = (0, import_react186.useState)(() => ({
+    initialTop: Math.max(0, Math.min(initialIndex, items.length - 1)),
+    initialCount: items.length
+  }));
+  const syncScroll = initialTop + initialRenderCount <= maxSyncRenderCount;
+  (0, import_react186.useLayoutEffect)(() => {
+    const scroller = listRef.current?.firstElementChild;
+    if (!syncScroll || !scroller) return;
+    const maxTop = Math.max(0, initialCount * menuRowHeight - scroller.clientHeight);
+    setScrollTop(scroller, Math.min(initialTop * menuRowHeight, maxTop));
+  }, [listRef, syncScroll, initialTop, initialCount]);
+  const isTest = process.env.NODE_ENV === "test";
+  return /* @__PURE__ */ (0, import_jsx_runtime271.jsx)("div", { ...listBoxProps, ...onKeyDown ? {
+    onKeyDown,
+    tabIndex: -1,
+    "aria-activedescendant": activeDescendant
+  } : {}, ref: listRef, className: "df fdc fg1 mh0 ol_0", ...tid.listbox, children: items.length === 0 && !loading ? /* @__PURE__ */ (0, import_jsx_runtime271.jsx)("div", { role: "presentation", ...(0, import_runtime178.trussProps)(emptyCss), ...tid.empty, children: "No results" }) : /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(import_jsx_runtime271.Fragment, { children: [
+    items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(import_react_virtuoso3.Virtuoso, { ref: virtuosoRef, style: {
+      height: items.length * menuRowHeight,
+      flexShrink: 1,
+      minHeight: 0,
+      overscrollBehavior: "contain"
+    }, totalCount: items.length, fixedItemHeight: menuRowHeight, computeItemKey: (index) => String(items[index]?.key ?? index), ...isTest ? {
+      initialItemCount: items.length
+    } : syncScroll ? {
+      initialItemCount: Math.min(items.length, initialTop + initialRenderCount)
+    } : {
+      initialTopMostItemIndex: initialTop
+    }, itemContent: (index) => {
+      const item = items[index];
+      if (!item) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(OptionRow, { item, state, id: optionDomId(id, index), disabledReason: disabledReasons[String(item.key)], ...tid });
+    } }, isTest ? items.length : "virtuoso"),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(LoadingDots, {})
+  ] }) });
+}
+function optionDomId(listId, index) {
+  return `${listId}-option-${index}`;
+}
+function setScrollTop(el, top) {
+  el.scrollTop = top;
+}
+var initialRenderCount = 13;
+var maxSyncRenderCount = 60;
+var emptyCss = {
+  display: "df",
+  alignItems: "aic",
+  paddingLeft: "pl2",
+  paddingRight: "pr2",
+  height: ["h_var", {
+    "--height": `${menuRowHeight}px`
+  }],
+  fontWeight: "fw4",
+  fontSize: "fz_14px",
+  lineHeight: "lh_20px",
+  color: ["color_var", {
+    "--color": "var(--b-on-surface-muted)"
+  }]
+};
+
+// src/inputs/MenuSelectField/internal/useMenuSelectField.tsx
+var import_react187 = require("react");
+var import_react_aria78 = require("react-aria");
+var import_react_stately20 = require("react-stately");
+var import_jsx_runtime272 = require("react/jsx-runtime");
+function useMenuSelectField(props) {
+  const {
+    options: optionsProp,
+    getOptionValue = defaultOptionValue,
+    getOptionLabel = defaultOptionLabel,
+    getOptionMenuLabel,
+    getOptionSearchText,
+    disabledOptions,
+    nothingSelectedText = "",
+    placeholder,
+    disabled,
+    readOnly,
+    onFocus,
+    onBlur,
+    value: propValue,
+    proposedValue,
+    onSelect
+  } = props;
+  const isDisabled = !!disabled;
+  const isReadOnly = !!readOnly;
+  const fieldId = (0, import_react187.useId)();
+  const listId = `${fieldId}-listbox`;
+  const triggerId = `${fieldId}-trigger`;
+  const labelId = `${fieldId}-label`;
+  const valueId = `${fieldId}-value`;
+  const errorId = `${fieldId}-error`;
+  const triggerRef = (0, import_react187.useRef)(null);
+  const searchRef = (0, import_react187.useRef)(null);
+  const listRef = (0, import_react187.useRef)(null);
+  const hasFocusRef = (0, import_react187.useRef)(false);
+  const [isOpen2, setIsOpen] = (0, import_react187.useState)(false);
+  const [search, setSearch] = (0, import_react187.useState)("");
+  const [optionsLoading, setOptionsLoading] = (0, import_react187.useState)(false);
+  const didRequestOptionsRef = (0, import_react187.useRef)(false);
+  const options = (0, import_react187.useMemo)(
+    () => initializeOptions(optionsProp, getOptionValue, getOptionLabel, void 0, false),
+    // getOptionValue and getOptionLabel are typically inline lambdas
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [optionsProp]
+  );
+  const { hoverProps, isHovered } = (0, import_react_aria78.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_react_aria78.useFocusRing)();
+  const { contains } = (0, import_react_aria78.useFilter)({ sensitivity: "base" });
+  const optionsByKey = (0, import_react187.useMemo)(
+    () => new Map(options.map((o) => [valueToKey(getOptionValue(o)), o])),
+    // getOptionValue is typically an inline lambda
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [options]
+  );
+  const { effectiveValue: value, proposalProps } = useAiProposal(propValue, proposedValue, (v) => {
+    const option = optionsByKey.get(valueToKey(v));
+    return option === void 0 ? void 0 : getOptionLabel(option);
+  });
+  const selectedKeys = (0, import_react187.useMemo)(() => new Set(value === void 0 ? [] : [valueToKey(value)]), [value]);
+  const filteredOptions = (0, import_react187.useMemo)(
+    () => search ? options.filter((o) => matchesSearch(o, search, getOptionLabel, getOptionSearchText, contains)) : options,
+    // getOptionLabel and getOptionSearchText are typically inline lambdas
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [options, search, contains]
+  );
+  const [disabledKeys, disabledReasons] = (0, import_react187.useMemo)(() => {
+    const tuples = (disabledOptions ?? []).map(disabledOptionToKeyedTuple);
+    return [tuples.map(([k]) => String(k)), Object.fromEntries(tuples.map(([k, r]) => [String(k), r]))];
+  }, [disabledOptions]);
+  function onSelectionChange(keys) {
+    if (keys === "all") return;
+    const [key] = [...keys];
+    if (key === void 0) {
+      close({ restoreFocus: true });
+      return;
+    }
+    const opt = optionsByKey.get(String(key));
+    proposalProps.onUserEdit?.();
+    onSelect(opt === void 0 ? void 0 : getOptionValue(opt), opt);
+    close({ restoreFocus: true });
+  }
+  const state = (0, import_react_stately20.useListState)({
+    items: filteredOptions,
+    children: (o) => /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(import_react_stately20.Item, { textValue: getOptionLabel(o), children: getOptionMenuLabel ? getOptionMenuLabel(o) : getOptionLabel(o) }, valueToKey(getOptionValue(o))),
+    selectionMode: "single",
+    selectedKeys,
+    disabledKeys,
+    onSelectionChange
+  });
+  const { selectionManager } = state;
+  const keyboardDelegate = (0, import_react187.useMemo)(
+    () => new MenuSelectKeyboardDelegate({
+      collection: state.collection,
+      disabledKeys: state.disabledKeys,
+      ref: listRef
+    }),
+    [state.collection, state.disabledKeys]
+  );
+  function open() {
+    if (isDisabled || isReadOnly) return;
+    setSearch("");
+    setIsOpen(true);
+    if (didRequestOptionsRef.current || Array.isArray(optionsProp)) return;
+    didRequestOptionsRef.current = true;
+    setOptionsLoading(true);
+    void optionsProp.load().finally(() => setOptionsLoading(false));
+  }
+  function close(opts) {
+    setIsOpen(false);
+    setSearch("");
+    if (opts.restoreFocus) {
+      triggerRef.current?.focus({ preventScroll: true });
+    } else if (hasFocusRef.current) {
+      settleBlur();
+    }
+  }
+  function settleBlur() {
+    hasFocusRef.current = false;
+    maybeCall(proposalProps.onUserBlur);
+    maybeCall(onBlur);
+  }
+  const showSearch = options.length > searchOptionLimit;
+  (0, import_react187.useLayoutEffect)(() => {
+    if (!isOpen2) return;
+    const keyTarget = showSearch ? searchRef.current : listRef.current;
+    keyTarget?.focus({ preventScroll: true });
+    selectionManager.setFocusedKey(null);
+    selectionManager.setFocused(false);
+  }, [isOpen2, showSearch]);
+  function onSearchChange(value2) {
+    setSearch(value2);
+    selectionManager.setFocusedKey(null);
+    selectionManager.setFocused(false);
+  }
+  function focusKey(key) {
+    if (key == null) return;
+    selectionManager.setFocused(true);
+    selectionManager.setFocusedKey(key);
+  }
+  function onMenuKeyDown(e) {
+    const current2 = selectionManager.focusedKey;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        focusKey(
+          current2 == null ? keyboardDelegate.getFirstKey() : keyboardDelegate.getKeyBelow(current2) ?? keyboardDelegate.getFirstKey()
+        );
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        focusKey(
+          current2 == null ? keyboardDelegate.getLastKey() : keyboardDelegate.getKeyAbove(current2) ?? keyboardDelegate.getLastKey()
+        );
+        break;
+      case "PageDown":
+        e.preventDefault();
+        focusKey(current2 == null ? keyboardDelegate.getFirstKey() : keyboardDelegate.getKeyPageBelow(current2));
+        break;
+      case "PageUp":
+        e.preventDefault();
+        focusKey(current2 == null ? keyboardDelegate.getLastKey() : keyboardDelegate.getKeyPageAbove(current2));
+        break;
+      case "Home":
+        e.preventDefault();
+        focusKey(keyboardDelegate.getFirstKey());
+        break;
+      case "End":
+        e.preventDefault();
+        focusKey(keyboardDelegate.getLastKey());
+        break;
+      case "Enter": {
+        e.preventDefault();
+        const key = selectionManager.focusedKey;
+        if (key != null && !state.disabledKeys.has(key)) selectionManager.select(key);
+        break;
+      }
+      case "Escape":
+        e.preventDefault();
+        e.stopPropagation();
+        close({ restoreFocus: true });
+        break;
+      case "Tab":
+        e.preventDefault();
+        close({ restoreFocus: true });
+        break;
+      default:
+        break;
+    }
+  }
+  function onTriggerKeyDown(e) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      open();
+    }
+  }
+  function onTriggerFocus() {
+    if (hasFocusRef.current) return;
+    hasFocusRef.current = true;
+    maybeCall(onFocus);
+  }
+  function onTriggerBlur() {
+    if (isOpen2) return;
+    settleBlur();
+  }
+  const focusedKey = selectionManager.focusedKey;
+  const focusedIndex = focusedKey != null ? state.collection.getItem(focusedKey)?.index : void 0;
+  const activeDescendant = isOpen2 && focusedIndex !== void 0 ? optionDomId(listId, focusedIndex) : void 0;
+  const initialIndex = Math.max(
+    0,
+    filteredOptions.findIndex((o) => selectedKeys.has(valueToKey(getOptionValue(o))))
+  );
+  const selectedOption = value === void 0 ? void 0 : optionsByKey.get(valueToKey(value));
+  const selectedText = selectedOption === void 0 ? "" : getOptionLabel(selectedOption);
+  const displayText = selectedText || nothingSelectedText || placeholder || "";
+  const isPlaceholder = !selectedText && !nothingSelectedText && !!placeholder;
+  const triggerProps = {
+    isDisabled,
+    isReadOnly,
+    isOpen: isOpen2,
+    listId,
+    triggerId,
+    labelId,
+    valueId,
+    errorId,
+    hoverProps,
+    focusProps,
+    isFocusVisible,
+    isHovered,
+    open,
+    close,
+    onKeyDown: onTriggerKeyDown,
+    onFocus: onTriggerFocus,
+    onBlur: onTriggerBlur,
+    displayText,
+    isPlaceholder,
+    proposalProps
+  };
+  const searchProps = {
+    show: showSearch,
+    value: search,
+    onChange: onSearchChange,
+    listId,
+    activeDescendant,
+    onKeyDown: onMenuKeyDown
+  };
+  const menuProps = {
+    isOpen: isOpen2,
+    close,
+    listId,
+    state,
+    loading: optionsLoading,
+    disabledReasons,
+    initialIndex,
+    onKeyDown: onMenuKeyDown,
+    activeDescendant
+  };
+  return { triggerRef, trigger: triggerProps, searchRef, search: searchProps, listRef, menu: menuProps };
+}
+function matchesSearch(option, query, getOptionLabel, getOptionSearchText, contains) {
+  if (contains(getOptionLabel(option), query)) return true;
+  const extra = getOptionSearchText?.(option);
+  const terms = typeof extra === "string" ? [extra] : extra;
+  return terms?.some((term) => contains(term, query)) ?? false;
+}
+var searchOptionLimit = 8;
+var MenuSelectKeyboardDelegate = class _MenuSelectKeyboardDelegate extends import_react_aria78.ListKeyboardDelegate {
+  /** Rows skipped by Page Up / Page Down. */
+  static pageSize = 10;
+  getKeyPageBelow(key) {
+    return this.stepKeys(key, "below");
+  }
+  getKeyPageAbove(key) {
+    return this.stepKeys(key, "above");
+  }
+  stepKeys(key, direction) {
+    let next = key;
+    for (let index = 0; index < _MenuSelectKeyboardDelegate.pageSize; index += 1) {
+      if (next == null) return next;
+      const candidate = direction === "below" ? this.getKeyBelow(next) : this.getKeyAbove(next);
+      if (candidate == null) return next;
+      next = candidate;
+    }
+    return next;
+  }
+};
+
+// src/inputs/MenuSelectField/internal/BaseMenuSelectField.tsx
+var import_jsx_runtime273 = require("react/jsx-runtime");
+function BaseMenuSelectField(props) {
+  const { label, searchPlaceholder } = props;
+  const { triggerRef, trigger, searchRef, search, listRef, menu } = useMenuSelectField(props);
+  const tid = useTestIds(props, defaultTestId(label));
+  const { sm: isMobile } = useBreakpoint();
+  const panel = /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
+    MenuPanel,
+    {
+      variant: isMobile ? "sheet" : "anchored",
+      header: search.show ? /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
+        MenuSearchInput,
+        {
+          search,
+          inputRef: searchRef,
+          label: `Search ${label}`,
+          placeholder: searchPlaceholder,
+          ...tid
+        }
+      ) : void 0,
+      ...tid,
+      children: /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
+        OptionList,
+        {
+          menu,
+          listRef,
+          label,
+          onKeyDown: search.show ? void 0 : menu.onKeyDown,
+          activeDescendant: search.show ? void 0 : menu.activeDescendant,
+          ...tid
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime273.jsxs)(import_jsx_runtime273.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(MenuSelectTrigger, { ...props, trigger, triggerRef }),
+    isMobile ? /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(BottomSheet, { isOpen: menu.isOpen, onClose: () => menu.close({ restoreFocus: true }), label, ...tid, children: panel }) : /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
+      AnchoredOverlay,
+      {
+        triggerRef,
+        isOpen: menu.isOpen,
+        onClose: () => menu.close({ restoreFocus: false }),
+        ...tid,
+        children: panel
+      }
+    )
+  ] });
+}
+
+// src/inputs/MenuSelectField/MenuSelectField.tsx
+var import_jsx_runtime274 = require("react/jsx-runtime");
+function MenuSelectField(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(BaseMenuSelectField, { ...props });
+}
+
+// src/inputs/ToggleButton.tsx
+var import_react188 = require("react");
+var import_react_aria79 = require("react-aria");
+var import_react_stately21 = require("react-stately");
+var import_runtime179 = require("@homebound/truss/runtime");
+var import_jsx_runtime275 = require("react/jsx-runtime");
 function ToggleButton(props) {
   const {
     selected: isSelected = false,
@@ -32839,7 +33839,7 @@ function ToggleButton(props) {
     __storyState,
     ...otherProps
   } = props;
-  const [asyncInProgress, setAsyncInProgress] = (0, import_react182.useState)(false);
+  const [asyncInProgress, setAsyncInProgress] = (0, import_react188.useState)(false);
   const isDisabled = !!disabled || asyncInProgress;
   const ariaProps = {
     "aria-label": label,
@@ -32847,7 +33847,7 @@ function ToggleButton(props) {
     isDisabled,
     ...otherProps
   };
-  const state = (0, import_react_stately20.useToggleState)({
+  const state = (0, import_react_stately21.useToggleState)({
     ...ariaProps,
     onChange: (e) => {
       const result = onChange(e);
@@ -32858,30 +33858,30 @@ function ToggleButton(props) {
       return result;
     }
   });
-  const labelRef = (0, import_react182.useRef)(null);
-  const ref = (0, import_react182.useRef)(null);
+  const labelRef = (0, import_react188.useRef)(null);
+  const ref = (0, import_react188.useRef)(null);
   const tid = useTestIds(otherProps, label);
   const {
     isPressed: isPressedFromEvents,
     pressProps
-  } = (0, import_react_aria72.usePress)({
+  } = (0, import_react_aria79.usePress)({
     ref: labelRef,
     isDisabled
   });
   const {
     inputProps
-  } = (0, import_react_aria72.useSwitch)(ariaProps, state, ref);
+  } = (0, import_react_aria79.useSwitch)(ariaProps, state, ref);
   const {
     isFocusVisible: isFocusVisibleFromEvents,
     focusProps
-  } = (0, import_react_aria72.useFocusRing)({
+  } = (0, import_react_aria79.useFocusRing)({
     ...otherProps,
     within: true
   });
   const {
     hoverProps,
     isHovered: isHoveredFromEvents
-  } = (0, import_react_aria72.useHover)({
+  } = (0, import_react_aria79.useHover)({
     isDisabled
   });
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
@@ -32892,7 +33892,7 @@ function ToggleButton(props) {
     ...focusProps,
     ...hoverProps,
     ...pressProps,
-    ...(0, import_runtime173.trussProps)({
+    ...(0, import_runtime179.trussProps)({
       // Gray500 off-state has no semantic match — keep palette (OnSurfaceMuted is Gray700).
       ...{
         borderRadius: "br4",
@@ -32932,10 +33932,10 @@ function ToggleButton(props) {
   return maybeTooltip({
     title: tooltip,
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime265.jsxs)("label", { ...labelAttrs, children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(Icon, { icon }),
+    children: /* @__PURE__ */ (0, import_jsx_runtime275.jsxs)("label", { ...labelAttrs, children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(Icon, { icon }),
       label,
-      /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(import_react_aria72.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime265.jsx)("input", { ref, ...inputProps, ...tid.value }) })
+      /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(import_react_aria79.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("input", { ref, ...inputProps, ...tid.value }) })
     ] })
   });
 }
@@ -33076,6 +34076,7 @@ var togglePressStyles = {
   Loader,
   LoadingSkeleton,
   MaxLines,
+  MenuSelectField,
   ModalBanner,
   ModalBody,
   ModalFilterItem,