@homebound/beam 4.42.1 → 4.44.0

package/dist/index.js

@@ -16,95 +16,95 @@ import {
 
 // src/Css.ts
 import { __invertTrussMediaQuery, trussProps, useRuntimeStyle as _useRuntimeStyle } from "@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";
@@ -7838,7 +7838,7 @@ function CompanionRowImpl(props) {
     companion,
     position = "trailing",
     levelIndent,
-    rowCss,
+    rowCss: rowCss2,
     cellCss
   } = props;
   const RowTag = as === "table" ? "tr" : "div";
@@ -7871,7 +7871,7 @@ function CompanionRowImpl(props) {
       }]
     },
     ...isLastBodyRow && style.lastRowCss,
-    ...rowCss
+    ...rowCss2
   }), "data-gridrow": true, ...tid[rowId], children: /* @__PURE__ */ jsx19(CellTag, { ...trussProps12({
     ...style.cellCss,
     ...style.betweenRowsCss,
@@ -10519,7 +10519,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,
@@ -10559,7 +10559,7 @@ function RowImpl(props) {
   const ref = useRef12(null);
   const dragOverCallback = useCallback10((row2, evt) => onDragOver?.(row2, evt), [onDragOver]);
   const onDragOverDebounced = useDebouncedCallback3(dragOverCallback, 100);
-  const RowContent = () => /* @__PURE__ */ jsx32(RowTag, { ...mergeProps_12(`${BorderHoverParent}${showRowHoverColor ? ` ${RowHoverClass}` : ""}`, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ jsx32(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
+  const RowContent = () => /* @__PURE__ */ jsx32(RowTag, { ...mergeProps_12(`${BorderHoverParent}${showRowHoverColor ? ` ${RowHoverClass}` : ""}`, void 0, rowCss2), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ jsx32(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) {
@@ -32340,12 +32340,1087 @@ function Autocomplete(props) {
   ] });
 }
 
+// src/inputs/MenuSelectField/internal/AnchoredOverlay.tsx
+import { useRef as useRef80 } from "react";
+import { FocusScope as FocusScope6 } from "react-aria";
+
+// src/inputs/MenuSelectField/internal/useAnchoredPosition.ts
+import { useLayoutEffect as useLayoutEffect21 } from "react";
+import { useOverlayPosition as useOverlayPosition7 } from "react-aria";
+function useAnchoredPosition(triggerRef, popoverRef, isOpen2) {
+  const { overlayProps, updatePosition } = useOverlayPosition7({
+    targetRef: triggerRef,
+    overlayRef: popoverRef,
+    isOpen: isOpen2,
+    shouldFlip: true,
+    placement: "bottom start",
+    offset: overlayOffset,
+    containerPadding: viewportPadding,
+    maxHeight: menuMaxHeight
+  });
+  useLayoutEffect21(() => {
+    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]);
+  useLayoutEffect21(() => {
+    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
+import { jsx as jsx265 } from "react/jsx-runtime";
+function AnchoredOverlay(props) {
+  const { triggerRef, isOpen: isOpen2, onClose, children } = props;
+  const popoverRef = useRef80(null);
+  const tid = useTestIds(props, "anchoredOverlay");
+  const positionProps = useAnchoredPosition(triggerRef, popoverRef, isOpen2);
+  if (!isOpen2) return null;
+  return /* @__PURE__ */ jsx265(
+    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__ */ jsx265(FocusScope6, { children })
+    }
+  );
+}
+
+// src/inputs/MenuSelectField/internal/BottomSheet.tsx
+import { useLayoutEffect as useLayoutEffect22, useRef as useRef81 } from "react";
+import { FocusScope as FocusScope7, mergeProps as mergeProps47, useDialog as useDialog2, useOverlay as useOverlay3, usePreventScroll as usePreventScroll4 } from "react-aria";
+import { createPortal as createPortal11 } from "react-dom";
+import { trussProps as trussProps151, maybeCssVar as maybeCssVar74 } from "@homebound/truss/runtime";
+import { jsx as jsx266, jsxs as jsxs142 } from "react/jsx-runtime";
+function BottomSheet(props) {
+  const {
+    isOpen: isOpen2,
+    onClose,
+    label,
+    children
+  } = props;
+  const frameRef = useRef81(null);
+  const sheetRef = useRef81(null);
+  const contrast = useContrastScope();
+  const tid = useTestIds(props, "bottomSheet");
+  useVisualViewportFrame(frameRef, isOpen2);
+  usePreventScroll4({
+    isDisabled: !isOpen2
+  });
+  const {
+    overlayProps,
+    underlayProps
+  } = useOverlay3({
+    isOpen: isOpen2,
+    onClose,
+    isDismissable: true
+  }, sheetRef);
+  const {
+    dialogProps
+  } = useDialog2({
+    "aria-label": label
+  }, sheetRef);
+  if (!isOpen2) return null;
+  return createPortal11(/* @__PURE__ */ jsxs142("div", { ref: frameRef, ...trussProps151(frameCss), "data-theme": contrast ? contrastDataTheme : void 0, children: [
+    /* @__PURE__ */ jsx266("div", { ...underlayProps, ...trussProps151(scrimCss), ...tid.sheetScrim }),
+    /* @__PURE__ */ jsx266(FocusScope7, { contain: true, restoreFocus: true, children: /* @__PURE__ */ jsxs142("div", { ...mergeProps47(overlayProps, dialogProps), ref: sheetRef, ...trussProps151(sheetCss), ...tid.sheet, children: [
+      /* @__PURE__ */ jsxs142("div", { ...trussProps151({
+        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__ */ jsx266("span", { className: "fw6 fz_14px lh_20px wsnw oh to_ellipsis", children: label }),
+        /* @__PURE__ */ jsx266(Button, { label: "Done", variant: "tertiary", onClick: onClose, ...tid.sheetDone })
+      ] }),
+      children
+    ] }) })
+  ] }), document.body);
+}
+function useVisualViewportFrame(frameRef, isOpen2) {
+  useLayoutEffect22(() => {
+    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": maybeCssVar74(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
+import { trussProps as trussProps152 } from "@homebound/truss/runtime";
+import { jsx as jsx267, jsxs as jsxs143 } from "react/jsx-runtime";
+function MenuPanel(props) {
+  const {
+    header,
+    children,
+    variant = "anchored"
+  } = props;
+  const tid = useTestIds(props, "menuPanel");
+  return /* @__PURE__ */ jsxs143("div", { ...trussProps152({
+    ...panelCss,
+    ...variant === "anchored" ? anchoredCss : {}
+  }), ...tid.menuPanel, children: [
+    header && /* @__PURE__ */ jsx267("div", { ...trussProps152({
+      flexShrink: "fs0",
+      borderBottomStyle: "bbs_solid",
+      borderBottomWidth: "bbw_1px",
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-surface-separator)"
+      }]
+    }), children: header }),
+    /* @__PURE__ */ jsx267("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
+import { trussProps as trussProps153 } from "@homebound/truss/runtime";
+import { jsx as jsx268, jsxs as jsxs144 } from "react/jsx-runtime";
+function MenuSearchInput(props) {
+  const {
+    search,
+    inputRef,
+    label,
+    placeholder = "Search"
+  } = props;
+  const tid = useTestIds(props, "menuSearch");
+  return /* @__PURE__ */ jsxs144("label", { className: "df aic g_1 pl2 pr2 h_48px cur_text", children: [
+    /* @__PURE__ */ jsx268("span", { ...trussProps153({
+      display: "df",
+      alignItems: "aic",
+      flexShrink: "fs0",
+      color: ["color_var", {
+        "--color": "var(--b-on-surface-muted)"
+      }]
+    }), children: /* @__PURE__ */ jsx268(Icon, { icon: "search" }) }),
+    /* @__PURE__ */ jsx268("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, ...trussProps153(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
+import { mergeProps as mergeProps48 } from "react-aria";
+import { trussProps as trussProps154, mergeProps as mergeProps_15, maybeCssVar as maybeCssVar75 } from "@homebound/truss/runtime";
+import { Fragment as Fragment56, jsx as jsx269, jsxs as jsxs145 } from "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__ */ jsxs145(Fragment56, { children: [
+    originalBelow && /* @__PURE__ */ jsx269(OriginalValue, { originalValue: originalBelow, ...tid.originalValue }),
+    showErrorAndHelper && errorMsg && !errorInTooltip && /* @__PURE__ */ jsx269(ErrorMessage, { id: trigger.errorId, errorMsg, ...tid.errorMsg }),
+    showErrorAndHelper && helperText && /* @__PURE__ */ jsx269(HelperText, { helperText, ...tid.helperText })
+  ] });
+  const hasSupporting = !!(originalBelow || showErrorAndHelper && (errorMsg || helperText));
+  const valueNode = /* @__PURE__ */ jsxs145(Fragment56, { children: [
+    labelStyle === "inline" && /* @__PURE__ */ jsxs145("span", { id: trigger.labelId, ...trussProps154({
+      fontWeight: "fw4",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
+      whiteSpace: "wsnw",
+      paddingRight: "pr_4px",
+      color: ["color_var", {
+        "--color": maybeCssVar75(trigger.isDisabled && visuallyDisabled ? "currentColor" : "--b-text-label" /* TextLabel */)
+      }]
+    }), children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx269("span", { id: trigger.valueId, className: "df aic fg1 mw0 oh", children: trigger.isReadOnly && showProposal ? /* @__PURE__ */ jsx269("span", { className: "fg1 wsnw oh to_ellipsis", children: /* @__PURE__ */ jsx269(ProposedValue, { original: originalText, proposed: proposedText, ...tid.proposedValue }) }) : /* @__PURE__ */ jsxs145(Fragment56, { children: [
+      trigger.selectedLabels.length > 0 && /* @__PURE__ */ jsx269(Tooltip, { title: /* @__PURE__ */ jsx269(SelectedLabels, { labels: trigger.selectedLabels }), children: /* @__PURE__ */ jsx269("span", { className: "df aic fs0 mr1", children: /* @__PURE__ */ jsx269(CountBadge, { count: trigger.selectedLabels.length, ...tid.count }) }) }),
+      /* @__PURE__ */ jsx269("span", { ...trussProps154({
+        ...{
+          flexGrow: "fg1",
+          whiteSpace: "wsnw",
+          overflow: "oh",
+          textOverflow: "to_ellipsis",
+          color: ["color_var", {
+            "--color": maybeCssVar75(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__ */ jsx269("span", { className: "df aic fs0 pl1", children: /* @__PURE__ */ jsx269(Icon, { icon: "error", color: "--b-danger" /* Danger */, tooltip: errorMsg }) }),
+    !trigger.isReadOnly && /* @__PURE__ */ jsx269("span", { ...trussProps154({
+      display: "df",
+      alignItems: "aic",
+      flexShrink: "fs0",
+      paddingLeft: "pl1",
+      color: ["color_var", {
+        "--color": maybeCssVar75(trigger.isDisabled ? "--b-field-text-disabled" /* FieldTextDisabled */ : "--b-text-placeholder" /* TextPlaceholder */)
+      }]
+    }), ...tid.toggle, children: /* @__PURE__ */ jsx269(Icon, { icon: trigger.isOpen ? "chevronUp" : "chevronDown" }) })
+  ] });
+  return /* @__PURE__ */ jsxs145(Fragment56, { children: [
+    /* @__PURE__ */ jsxs145("div", { ...trussProps154(fieldChrome.container), children: [
+      label && labelStyle !== "inline" && /* @__PURE__ */ jsx269(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__ */ jsx269("div", { ...trussProps154(fieldChrome.readOnly), "data-readonly": "true", "data-ai-mode": showProposal ? "true" : void 0, ...tid, children: valueNode }) : /* @__PURE__ */ jsx269("button", { ...mergeProps48(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, ...mergeProps_15(BorderHoverChild, void 0, fieldStateCss), ...tid, children: valueNode })
+      }),
+      labelStyle !== "left" && supporting
+    ] }),
+    labelStyle === "left" && hasSupporting && /* @__PURE__ */ jsx269("div", { className: "mt_neg1 ml_50", children: supporting })
+  ] });
+}
+var inputPlaceholderColor = "#9ca3af";
+function SelectedLabels({
+  labels
+}) {
+  return /* @__PURE__ */ jsx269("ul", { className: "mt0 mb0 mr0 ml0 pl2", children: labels.map(({
+    key,
+    label
+  }) => /* @__PURE__ */ jsx269("li", { children: label }, key)) });
+}
+
+// src/inputs/MenuSelectField/internal/OptionList.tsx
+import { getInteractionModality as getInteractionModality2 } from "@react-aria/interactions";
+import { useEffect as useEffect42, useLayoutEffect as useLayoutEffect23, useRef as useRef83, useState as useState70 } from "react";
+import { useListBox as useListBox2 } from "react-aria";
+import { Virtuoso as Virtuoso3 } from "react-virtuoso";
+
+// src/inputs/MenuSelectField/internal/OptionRow.tsx
+import { useRef as useRef82 } from "react";
+import { mergeProps as mergeProps49, useHover as useHover26, useOption as useOption3 } from "react-aria";
+import { trussProps as trussProps155 } from "@homebound/truss/runtime";
+import { jsx as jsx270, jsxs as jsxs146 } from "react/jsx-runtime";
+function SingleOptionRow(props) {
+  return /* @__PURE__ */ jsx270(BaseOptionRow, { ...props, variant: "check" });
+}
+function MultiOptionRow(props) {
+  return /* @__PURE__ */ jsx270(BaseOptionRow, { ...props, variant: "checkbox" });
+}
+function BaseOptionRow(props) {
+  const {
+    item,
+    state,
+    id,
+    disabledReason,
+    variant
+  } = props;
+  const ref = useRef82(null);
+  const tid = useTestIds(props, "option");
+  const {
+    hoverProps,
+    isHovered
+  } = useHover26({});
+  const {
+    optionProps,
+    isDisabled,
+    isFocused,
+    isSelected
+  } = useOption3({
+    key: item.key,
+    shouldSelectOnPressUp: true,
+    shouldFocusOnHover: false
+  }, state, ref);
+  const highlighted = !isDisabled && (isHovered || isFocused);
+  return maybeTooltip({
+    title: disabledReason,
+    placement: "top",
+    children: /* @__PURE__ */ jsxs146(
+      "div",
+      {
+        ...mergeProps49(optionProps, hoverProps),
+        id,
+        "data-key": item.key,
+        "data-label": item.textValue,
+        ref,
+        ...trussProps155({
+          ...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: [
+          variant === "checkbox" && /* @__PURE__ */ jsx270(StyledCheckbox, { isSelected, isDisabled }),
+          /* @__PURE__ */ jsx270("span", { className: "wsnw oh to_ellipsis fg1 mw0", children: item.rendered }),
+          variant === "check" && isSelected && /* @__PURE__ */ jsx270("span", { className: "df aic fs0", children: /* @__PURE__ */ jsx270(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
+import { trussProps as trussProps156 } from "@homebound/truss/runtime";
+import { Fragment as Fragment57, jsx as jsx271, jsxs as jsxs147 } from "react/jsx-runtime";
+function OptionList(props) {
+  const {
+    menu,
+    listRef,
+    label,
+    onKeyDown,
+    activeDescendant
+  } = props;
+  const {
+    state,
+    listId: id,
+    disabledReasons,
+    initialIndex,
+    loading,
+    rowVariant
+  } = menu;
+  const tid = useTestIds(props, "optionList");
+  const virtuosoRef = useRef83(null);
+  const {
+    listBoxProps
+  } = useListBox2({
+    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;
+  useEffect42(() => {
+    if (focusedKey == null || getInteractionModality2() !== "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
+  }] = useState70(() => ({
+    initialTop: Math.max(0, Math.min(initialIndex, items.length - 1)),
+    initialCount: items.length
+  }));
+  const syncScroll = initialTop + initialRenderCount <= maxSyncRenderCount;
+  useLayoutEffect23(() => {
+    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 Row2 = rowVariant === "checkbox" ? MultiOptionRow : SingleOptionRow;
+  const isTest = process.env.NODE_ENV === "test";
+  return /* @__PURE__ */ jsx271("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__ */ jsx271("div", { role: "presentation", ...trussProps156(emptyCss), ...tid.empty, children: "No results" }) : /* @__PURE__ */ jsxs147(Fragment57, { children: [
+    items.length > 0 && /* @__PURE__ */ jsx271(Virtuoso3, { 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__ */ jsx271(Row2, { item, state, id: optionDomId(id, index), disabledReason: disabledReasons[String(item.key)], ...tid });
+    } }, isTest ? items.length : "virtuoso"),
+    loading && /* @__PURE__ */ jsx271(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
+import { useId as useId6, useLayoutEffect as useLayoutEffect24, useMemo as useMemo61, useRef as useRef84, useState as useState71 } from "react";
+import { ListKeyboardDelegate, useFilter as useFilter5, useFocusRing as useFocusRing23, useHover as useHover27 } from "react-aria";
+import { Item as Item6, useListState } from "react-stately";
+import { jsx as jsx272 } from "react/jsx-runtime";
+function useMenuSelectField(props) {
+  const {
+    options: optionsProp,
+    getOptionValue = defaultOptionValue,
+    getOptionLabel = defaultOptionLabel,
+    getOptionMenuLabel,
+    getOptionSearchText,
+    disabledOptions,
+    nothingSelectedText = "",
+    placeholder,
+    disabled,
+    readOnly,
+    onFocus,
+    onBlur,
+    selectionMode,
+    values: propValues,
+    proposedValues,
+    onCommit
+  } = props;
+  const multiple = selectionMode === "multiple";
+  const isDisabled = !!disabled;
+  const isReadOnly = !!readOnly;
+  const fieldId = useId6();
+  const listId = `${fieldId}-listbox`;
+  const triggerId = `${fieldId}-trigger`;
+  const labelId = `${fieldId}-label`;
+  const valueId = `${fieldId}-value`;
+  const errorId = `${fieldId}-error`;
+  const triggerRef = useRef84(null);
+  const searchRef = useRef84(null);
+  const listRef = useRef84(null);
+  const hasFocusRef = useRef84(false);
+  const [isOpen2, setIsOpen] = useState71(false);
+  const [search, setSearch] = useState71("");
+  const [optionsLoading, setOptionsLoading] = useState71(false);
+  const didRequestOptionsRef = useRef84(false);
+  const options = useMemo61(
+    () => 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 } = useHover27({});
+  const { focusProps, isFocusVisible } = useFocusRing23();
+  const { contains } = useFilter5({ sensitivity: "base" });
+  const optionsByKey = useMemo61(
+    () => 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, proposalProps } = useAiProposal(
+    propValues,
+    proposedValues,
+    (vs) => labelsFor(vs, options, getOptionValue, getOptionLabel).join(", ")
+  );
+  const values = useMemo61(() => effectiveValue ?? [], [effectiveValue]);
+  const selectedKeys = useMemo61(() => new Set(values.map(valueToKey)), [values]);
+  const selectedOptions = useMemo61(
+    () => values.map((v) => optionsByKey.get(valueToKey(v))).filter((o) => o !== void 0),
+    [values, optionsByKey]
+  );
+  const filteredOptions = useMemo61(
+    () => 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] = useMemo61(() => {
+    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;
+    if (!multiple) {
+      const [key] = [...keys];
+      if (key === void 0) {
+        close({ restoreFocus: true });
+        return;
+      }
+      const opt = optionsByKey.get(String(key));
+      proposalProps.onUserEdit?.();
+      onCommit(opt === void 0 ? [] : [getOptionValue(opt)], opt === void 0 ? [] : [opt]);
+      close({ restoreFocus: true });
+      return;
+    }
+    const next = values.filter((v) => keys.has(valueToKey(v)));
+    for (const k of keys) {
+      const opt = optionsByKey.get(String(k));
+      if (opt !== void 0 && !selectedKeys.has(String(k))) next.push(getOptionValue(opt));
+    }
+    proposalProps.onUserEdit?.();
+    onCommit(
+      next,
+      next.map((v) => optionsByKey.get(valueToKey(v))).filter((o) => o !== void 0)
+    );
+  }
+  const state = useListState({
+    items: filteredOptions,
+    children: (o) => /* @__PURE__ */ jsx272(Item6, { textValue: getOptionLabel(o), children: getOptionMenuLabel ? getOptionMenuLabel(o) : getOptionLabel(o) }, valueToKey(getOptionValue(o))),
+    selectionMode: multiple ? "multiple" : "single",
+    selectedKeys,
+    disabledKeys,
+    onSelectionChange
+  });
+  const { selectionManager } = state;
+  const keyboardDelegate = useMemo61(
+    () => 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;
+  useLayoutEffect24(() => {
+    if (!isOpen2) return;
+    const keyTarget = showSearch ? searchRef.current : listRef.current;
+    keyTarget?.focus({ preventScroll: true });
+    selectionManager.setFocusedKey(null);
+    selectionManager.setFocused(false);
+  }, [isOpen2, showSearch]);
+  function onSearchChange(value) {
+    setSearch(value);
+    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 selectedText = !multiple && selectedOptions[0] !== void 0 ? getOptionLabel(selectedOptions[0]) : "";
+  const displayText = selectedText || (values.length > 0 ? "" : nothingSelectedText || placeholder || "");
+  const isPlaceholder = !selectedText && values.length === 0 && !nothingSelectedText && !!placeholder;
+  const selectedLabels = multiple ? selectedOptions.map((o) => ({ key: valueToKey(getOptionValue(o)), label: getOptionLabel(o) })) : [];
+  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,
+    selectedLabels,
+    proposalProps
+  };
+  const searchProps = {
+    show: showSearch,
+    value: search,
+    onChange: onSearchChange,
+    listId,
+    activeDescendant,
+    onKeyDown: onMenuKeyDown
+  };
+  const menuProps = {
+    isOpen: isOpen2,
+    close,
+    listId,
+    state,
+    loading: optionsLoading,
+    disabledReasons,
+    initialIndex,
+    rowVariant: multiple ? "checkbox" : "check",
+    onKeyDown: onMenuKeyDown,
+    activeDescendant
+  };
+  return { triggerRef, trigger: triggerProps, searchRef, search: searchProps, listRef, menu: menuProps };
+}
+function labelsFor(values, options, getOptionValue, getOptionLabel) {
+  const keys = new Set(values.map(valueToKey));
+  return options.filter((option) => keys.has(valueToKey(getOptionValue(option)))).map(getOptionLabel);
+}
+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 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
+import { Fragment as Fragment58, jsx as jsx273, jsxs as jsxs148 } from "react/jsx-runtime";
+function BaseMenuSelectField(props) {
+  const {
+    label,
+    searchPlaceholder,
+    selectionMode: _selectionMode,
+    values: _values,
+    proposedValues: _proposedValues,
+    onCommit: _onCommit,
+    ...fieldProps
+  } = props;
+  const { triggerRef, trigger, searchRef, search, listRef, menu } = useMenuSelectField(props);
+  const tid = useTestIds(props, defaultTestId(label));
+  const { sm: isMobile } = useBreakpoint();
+  const panel = /* @__PURE__ */ jsx273(
+    MenuPanel,
+    {
+      variant: isMobile ? "sheet" : "anchored",
+      header: search.show ? /* @__PURE__ */ jsx273(
+        MenuSearchInput,
+        {
+          search,
+          inputRef: searchRef,
+          label: `Search ${label}`,
+          placeholder: searchPlaceholder,
+          ...tid
+        }
+      ) : void 0,
+      ...tid,
+      children: /* @__PURE__ */ jsx273(
+        OptionList,
+        {
+          menu,
+          listRef,
+          label,
+          onKeyDown: search.show ? void 0 : menu.onKeyDown,
+          activeDescendant: search.show ? void 0 : menu.activeDescendant,
+          ...tid
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs148(Fragment58, { children: [
+    /* @__PURE__ */ jsx273(MenuSelectTrigger, { ...fieldProps, label, trigger, triggerRef }),
+    isMobile ? /* @__PURE__ */ jsx273(BottomSheet, { isOpen: menu.isOpen, onClose: () => menu.close({ restoreFocus: true }), label, ...tid, children: panel }) : /* @__PURE__ */ jsx273(
+      AnchoredOverlay,
+      {
+        triggerRef,
+        isOpen: menu.isOpen,
+        onClose: () => menu.close({ restoreFocus: false }),
+        ...tid,
+        children: panel
+      }
+    )
+  ] });
+}
+
+// src/inputs/MenuSelectField/MenuMultiSelectField.tsx
+import { jsx as jsx274 } from "react/jsx-runtime";
+function MenuMultiSelectField(props) {
+  const { onSelect, ...rest } = props;
+  return /* @__PURE__ */ jsx274(BaseMenuSelectField, { ...rest, selectionMode: "multiple", onCommit: onSelect });
+}
+
+// src/inputs/MenuSelectField/MenuSelectField.tsx
+import { useMemo as useMemo62 } from "react";
+import { jsx as jsx275 } from "react/jsx-runtime";
+function MenuSelectField(props) {
+  const { value, proposedValue, onSelect, ...rest } = props;
+  const values = useMemo62(() => value === void 0 ? [] : [value], [value]);
+  const proposedValues = useMemo62(() => proposedValue === void 0 ? void 0 : [proposedValue], [proposedValue]);
+  return /* @__PURE__ */ jsx275(
+    BaseMenuSelectField,
+    {
+      ...rest,
+      selectionMode: "single",
+      values,
+      proposedValues,
+      onCommit: (next, opts) => onSelect(next[0], opts[0])
+    }
+  );
+}
+
 // src/inputs/ToggleButton.tsx
-import { useRef as useRef80, useState as useState70 } from "react";
-import { useFocusRing as useFocusRing23, useHover as useHover26, usePress as usePress3, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden12 } from "react-aria";
+import { useRef as useRef85, useState as useState72 } from "react";
+import { useFocusRing as useFocusRing24, useHover as useHover28, usePress as usePress3, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden12 } from "react-aria";
 import { useToggleState as useToggleState2 } from "react-stately";
-import { trussProps as trussProps151 } from "@homebound/truss/runtime";
-import { jsx as jsx265, jsxs as jsxs142 } from "react/jsx-runtime";
+import { trussProps as trussProps157 } from "@homebound/truss/runtime";
+import { jsx as jsx276, jsxs as jsxs149 } from "react/jsx-runtime";
 function ToggleButton(props) {
   const {
     selected: isSelected = false,
@@ -32356,7 +33431,7 @@ function ToggleButton(props) {
     __storyState,
     ...otherProps
   } = props;
-  const [asyncInProgress, setAsyncInProgress] = useState70(false);
+  const [asyncInProgress, setAsyncInProgress] = useState72(false);
   const isDisabled = !!disabled || asyncInProgress;
   const ariaProps = {
     "aria-label": label,
@@ -32375,8 +33450,8 @@ function ToggleButton(props) {
       return result;
     }
   });
-  const labelRef = useRef80(null);
-  const ref = useRef80(null);
+  const labelRef = useRef85(null);
+  const ref = useRef85(null);
   const tid = useTestIds(otherProps, label);
   const {
     isPressed: isPressedFromEvents,
@@ -32391,14 +33466,14 @@ function ToggleButton(props) {
   const {
     isFocusVisible: isFocusVisibleFromEvents,
     focusProps
-  } = useFocusRing23({
+  } = useFocusRing24({
     ...otherProps,
     within: true
   });
   const {
     hoverProps,
     isHovered: isHoveredFromEvents
-  } = useHover26({
+  } = useHover28({
     isDisabled
   });
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
@@ -32409,7 +33484,7 @@ function ToggleButton(props) {
     ...focusProps,
     ...hoverProps,
     ...pressProps,
-    ...trussProps151({
+    ...trussProps157({
       // Gray500 off-state has no semantic match — keep palette (OnSurfaceMuted is Gray700).
       ...{
         borderRadius: "br4",
@@ -32449,10 +33524,10 @@ function ToggleButton(props) {
   return maybeTooltip({
     title: tooltip,
     placement: "top",
-    children: /* @__PURE__ */ jsxs142("label", { ...labelAttrs, children: [
-      icon && /* @__PURE__ */ jsx265(Icon, { icon }),
+    children: /* @__PURE__ */ jsxs149("label", { ...labelAttrs, children: [
+      icon && /* @__PURE__ */ jsx276(Icon, { icon }),
       label,
-      /* @__PURE__ */ jsx265(VisuallyHidden12, { children: /* @__PURE__ */ jsx265("input", { ref, ...inputProps, ...tid.value }) })
+      /* @__PURE__ */ jsx276(VisuallyHidden12, { children: /* @__PURE__ */ jsx276("input", { ref, ...inputProps, ...tid.value }) })
     ] })
   });
 }
@@ -32592,6 +33667,8 @@ export {
   Loader,
   LoadingSkeleton,
   MaxLines,
+  MenuMultiSelectField,
+  MenuSelectField,
   ModalBanner,
   ModalBody,
   ModalFilterItem,