@homebound/beam 4.27.0 → 4.29.0

package/dist/index.js

@@ -20374,6 +20374,7 @@ function ContentHeader(props) {
     level = 2,
     aiMode = false,
     startAdornment,
+    rightSlotLead,
     tooltip,
     xss
   } = props;
@@ -20388,7 +20389,7 @@ function ContentHeader(props) {
     bottomSlotActions,
     rightSlotActions
   } = splitHeaderActionsOnSm(actions, sm);
-  const showActionsSlot = !!withAutoSave || rightSlotActions.length > 0;
+  const showActionsSlot = !!withAutoSave || !!rightSlotLead || rightSlotActions.length > 0;
   const {
     tag: Heading,
     css: headingCss
@@ -20436,7 +20437,8 @@ function ContentHeader(props) {
         /* @__PURE__ */ jsx121(Heading, { ...trussProps79(titleCss), ...tid.title, children: title }),
         tooltip && /* @__PURE__ */ jsx121(Icon, { icon: "infoCircle", tooltip, inc: 2 })
       ] }) : descriptionEl,
-      showActionsSlot && /* @__PURE__ */ jsxs75("div", { className: "df g_2 fs0", ...tid.actions, children: [
+      showActionsSlot && /* @__PURE__ */ jsxs75("div", { className: "df aic g_2 fs0", ...tid.actions, children: [
+        rightSlotLead,
         withAutoSave && /* @__PURE__ */ jsx121(AutoSaveIndicator, {}),
         rightSlotActions.length > 0 && /* @__PURE__ */ jsx121(HeaderActions, { actions: rightSlotActions })
       ] })
@@ -22541,7 +22543,7 @@ import { Observer as Observer10 } from "mobx-react";
 
 // src/inputs/RadioGroupField.tsx
 import { Fragment as Fragment32, useMemo as useMemo36, useRef as useRef45 } from "react";
-import { useFocusRing as useFocusRing12, useHover as useHover16, useRadio, useRadioGroup } from "react-aria";
+import { mergeProps as mergeProps23, useFocusRing as useFocusRing12, useHover as useHover16, usePress as usePress2, useRadio, useRadioGroup, VisuallyHidden as VisuallyHidden7 } from "react-aria";
 import { useRadioGroupState } from "react-stately";
 import { trussProps as trussProps94 } from "@homebound/truss/runtime";
 import { jsx as jsx153, jsxs as jsxs85 } from "react/jsx-runtime";
@@ -22579,6 +22581,7 @@ function RadioGroupField(props) {
     isDisabled: disabled,
     isRequired: required
   }, state);
+  const isThumbnail = layout === "thumbnail";
   return (
     // default styling to position `<Label />` above.
     /* @__PURE__ */ jsxs85("div", { ...trussProps94({
@@ -22596,20 +22599,24 @@ function RadioGroupField(props) {
       /* @__PURE__ */ jsxs85("div", { ...radioGroupProps, children: [
         /* @__PURE__ */ jsx153("div", { ...trussProps94({
           display: "df",
-          ...layout === "horizontal" ? {
+          flexDirection: "fdc",
+          gap: "g_1",
+          ...layout !== "vertical" ? {
             flexDirection: "fdr",
-            flexWrap: "fww",
+            flexWrap: "fww"
+          } : {},
+          ...layout === "horizontal" ? {
             gap: "g_3"
-          } : {
-            flexDirection: "fdc",
-            gap: "g_1"
-          }
+          } : {}
         }), children: options.map((option) => {
-          return /* @__PURE__ */ jsx153(Fragment32, { children: maybeTooltip({
-            title: resolveTooltip(option.disabled),
-            placement: "bottom",
-            children: /* @__PURE__ */ jsx153(Radio, { parentId: name, option, state, isOptionDisabled: !!option.disabled, ...otherProps, ...tid[option.value] })
-          }) }, option.value);
+          const radioProps = {
+            option,
+            state,
+            isOptionDisabled: !!option.disabled,
+            ...otherProps,
+            ...tid[option.value]
+          };
+          return /* @__PURE__ */ jsx153(Fragment32, { children: isThumbnail ? /* @__PURE__ */ jsx153(ThumbnailRadio, { ...radioProps }) : /* @__PURE__ */ jsx153(Radio, { parentId: name, ...radioProps }) }, option.value);
         }) }),
         errorMsg && /* @__PURE__ */ jsx153(ErrorMessage, { errorMsg, ...tid.errorMsg }),
         helperText && /* @__PURE__ */ jsx153(HelperText, { helperText })
@@ -22623,7 +22630,8 @@ function Radio(props) {
     option: {
       description,
       label,
-      value
+      value,
+      disabled: disabledReason
     },
     state,
     isOptionDisabled,
@@ -22652,71 +22660,198 @@ function Radio(props) {
   } = useHover16({
     isDisabled: disabled
   });
-  return /* @__PURE__ */ jsxs85("label", { ...trussProps94({
-    display: "df",
-    cursor: "cur_pointer",
-    ...disabled ? {
-      cursor: "cur_initial"
-    } : {}
-  }), ...hoverProps, children: [
-    /* @__PURE__ */ jsx153(
-      "input",
-      {
-        type: "radio",
-        ref,
-        ...trussProps94({
-          ...radioReset,
-          ...radioDefault,
-          ...getRadioStateStyles({
-            isDisabled: disabled,
-            isSelected
+  return maybeTooltip({
+    title: resolveTooltip(disabledReason),
+    placement: "bottom",
+    children: /* @__PURE__ */ jsxs85("label", { ...trussProps94({
+      display: "df",
+      cursor: "cur_pointer",
+      ...disabled ? {
+        cursor: "cur_initial"
+      } : {}
+    }), ...hoverProps, children: [
+      /* @__PURE__ */ jsx153(
+        "input",
+        {
+          type: "radio",
+          ref,
+          ...trussProps94({
+            ...radioReset,
+            ...radioDefault,
+            ...getRadioStateStyles({
+              isDisabled: disabled,
+              isSelected
+            }),
+            ...isHovered && !disabled ? radioHover : {},
+            ...isFocusVisible ? radioFocus : {},
+            // Nudge down so the center of the circle lines up with the label text
+            ...{
+              marginTop: "mt_2px",
+              marginRight: "mr1"
+            }
           }),
-          ...isHovered && !disabled ? radioHover : {},
-          ...isFocusVisible ? radioFocus : {},
-          // Nudge down so the center of the circle lines up with the label text
-          ...{
-            marginTop: "mt_2px",
-            marginRight: "mr1"
-          }
-        }),
-        disabled,
-        "aria-labelledby": labelId,
-        ...inputProps,
-        ...focusProps,
-        ...others
-      }
-    ),
-    /* @__PURE__ */ jsxs85("div", { children: [
-      /* @__PURE__ */ jsx153("div", { id: labelId, ...trussProps94({
-        fontWeight: "fw4",
-        fontSize: "fz_14px",
-        lineHeight: "lh_20px",
-        color: ["color_var", {
-          "--color": "var(--b-on-surface)"
-        }],
-        ...disabled ? {
+          disabled,
+          "aria-labelledby": labelId,
+          ...inputProps,
+          ...focusProps,
+          ...others
+        }
+      ),
+      /* @__PURE__ */ jsxs85("div", { children: [
+        /* @__PURE__ */ jsx153("div", { id: labelId, ...trussProps94({
+          fontWeight: "fw4",
+          fontSize: "fz_14px",
+          lineHeight: "lh_20px",
           color: ["color_var", {
-            "--color": "var(--b-text-disabled)"
-          }]
-        } : {}
-      }), ...description ? {
-        "aria-describedby": descriptionId
-      } : {}, children: label }),
-      description && /* @__PURE__ */ jsx153("div", { id: descriptionId, ...trussProps94({
-        fontWeight: "fw4",
-        fontSize: "fz_14px",
-        lineHeight: "lh_20px",
-        color: ["color_var", {
-          "--color": "var(--b-on-surface-muted)"
-        }],
-        ...disabled ? {
+            "--color": "var(--b-on-surface)"
+          }],
+          ...disabled ? {
+            color: ["color_var", {
+              "--color": "var(--b-text-disabled)"
+            }]
+          } : {}
+        }), ...description ? {
+          "aria-describedby": descriptionId
+        } : {}, children: label }),
+        description && /* @__PURE__ */ jsx153("div", { id: descriptionId, ...trussProps94({
+          fontWeight: "fw4",
+          fontSize: "fz_14px",
+          lineHeight: "lh_20px",
           color: ["color_var", {
-            "--color": "var(--b-text-disabled)"
-          }]
-        } : {}
-      }), children: typeof description === "function" ? description() : description })
+            "--color": "var(--b-on-surface-muted)"
+          }],
+          ...disabled ? {
+            color: ["color_var", {
+              "--color": "var(--b-text-disabled)"
+            }]
+          } : {}
+        }), children: typeof description === "function" ? description() : description })
+      ] })
     ] })
-  ] });
+  });
+}
+function ThumbnailRadio(props) {
+  const {
+    option: {
+      label,
+      value,
+      imgSrc,
+      disabled: disabledReason
+    },
+    state,
+    isOptionDisabled,
+    ...others
+  } = props;
+  const ref = useRef45(null);
+  const {
+    inputProps,
+    isDisabled
+  } = useRadio({
+    value,
+    "aria-label": label,
+    isDisabled: isOptionDisabled
+  }, state, ref);
+  const isSelected = !isDisabled && state.selectedValue === value;
+  const {
+    focusProps,
+    isFocusVisible
+  } = useFocusRing12();
+  const {
+    hoverProps,
+    isHovered
+  } = useHover16({
+    isDisabled
+  });
+  const {
+    pressProps,
+    isPressed
+  } = usePress2({
+    isDisabled,
+    preventFocusOnPress: true
+  });
+  return maybeTooltip({
+    // Thumbnails have no visible text, so their label doubles as the tooltip, unless there's a disabled reason.
+    title: resolveTooltip(disabledReason) ?? label,
+    placement: "top",
+    children: /* @__PURE__ */ jsxs85("label", { ...trussProps94({
+      // The padding over the white background is the inner ring between the border and the image.
+      ...{
+        display: "db",
+        flexShrink: "fs0",
+        height: "h_32px",
+        width: "w_32px",
+        paddingTop: "pt_2px",
+        paddingBottom: "pb_2px",
+        paddingRight: "pr_2px",
+        paddingLeft: "pl_2px",
+        borderRadius: "br8",
+        borderStyle: "bss",
+        borderWidth: "bw1",
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-field-border-default)"
+        }],
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-surface-raised)"
+        }],
+        outline: "ol_0",
+        cursor: "cur_pointer"
+      },
+      // Lets a wrapping `Carousel` snap to each thumbnail.
+      ...{
+        scrollSnapAlign: "ssa_start"
+      },
+      ...isHovered && !isFocusVisible ? {
+        boxShadow: "bshHover"
+      } : {},
+      ...isSelected || isPressed ? {
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-primary)"
+        }]
+      } : {},
+      ...isFocusVisible ? {
+        boxShadow: "bshFocus"
+      } : {},
+      ...isDisabled ? {
+        cursor: "cur_not_allowed"
+      } : {}
+    }), "data-selected": isSelected, "data-disabled": isDisabled, ...mergeProps23(hoverProps, pressProps), children: [
+      /* @__PURE__ */ jsx153(VisuallyHidden7, { elementType: "span", children: /* @__PURE__ */ jsx153("input", { ...mergeProps23(inputProps, focusProps, others), ref }) }),
+      /* @__PURE__ */ jsxs85("span", { className: "relative db w100 h100 oh br4", children: [
+        /* @__PURE__ */ jsx153("img", { src: imgSrc, alt: label, loading: "lazy", ...trussProps94({
+          width: "w100",
+          height: "h100",
+          objectFit: "obf_cover",
+          display: "db",
+          ...isDisabled ? {
+            opacity: "o50"
+          } : {}
+        }) }),
+        (isSelected || isPressed) && /* @__PURE__ */ jsx153("span", { ...trussProps94({
+          ...{
+            position: "absolute",
+            top: "top0",
+            left: "l_0",
+            width: "w100",
+            height: "h100",
+            pointerEvents: "pen"
+          },
+          ...isSelected ? {
+            backgroundColor: ["bgColor_var", {
+              "--backgroundColor": "var(--b-selection-fill)"
+            }],
+            mixBlendMode: "mbm_multiply"
+          } : {},
+          ...isPressed ? {
+            backgroundColor: ["bgColor_var", {
+              "--backgroundColor": "var(--b-primary)"
+            }],
+            opacity: "o_0_28",
+            mixBlendMode: "mbm_normal"
+          } : {}
+        }) })
+      ] })
+    ] })
+  });
 }
 
 // src/forms/BoundRadioGroupField.tsx
@@ -23171,7 +23306,7 @@ import { Observer as Observer14 } from "mobx-react";
 
 // src/inputs/Switch.tsx
 import { useRef as useRef48 } from "react";
-import { useFocusRing as useFocusRing13, useHover as useHover17, useSwitch, VisuallyHidden as VisuallyHidden7 } from "react-aria";
+import { useFocusRing as useFocusRing13, useHover as useHover17, useSwitch, VisuallyHidden as VisuallyHidden8 } from "react-aria";
 import { trussProps as trussProps97, maybeCssVar as maybeCssVar40 } from "@homebound/truss/runtime";
 import { jsx as jsx162, jsxs as jsxs87 } from "react/jsx-runtime";
 var __maybeInc15 = (inc) => {
@@ -23330,7 +23465,7 @@ function Switch(props) {
         lineHeight: "lh_1"
       } : {}
     } }),
-    /* @__PURE__ */ jsx162(VisuallyHidden7, { children: /* @__PURE__ */ jsx162("input", { ref, ...inputProps, ...focusProps, ...tid }) })
+    /* @__PURE__ */ jsx162(VisuallyHidden8, { children: /* @__PURE__ */ jsx162("input", { ref, ...inputProps, ...focusProps, ...tid }) })
   ] });
 }
 var toggleHeight = (isCompact) => isCompact ? 16 : 24;
@@ -23413,7 +23548,7 @@ import { Observer as Observer15 } from "mobx-react";
 
 // src/inputs/TextAreaField.tsx
 import { useRef as useRef49 } from "react";
-import { mergeProps as mergeProps23, useTextField as useTextField3 } from "react-aria";
+import { mergeProps as mergeProps24, useTextField as useTextField3 } from "react-aria";
 import { jsx as jsx164 } from "react/jsx-runtime";
 function TextAreaField(props) {
   const {
@@ -23459,7 +23594,7 @@ function TextAreaField(props) {
   return /* @__PURE__ */ jsx164(
     TextFieldBase,
     {
-      ...mergeProps23(otherProps, { onBlur, onFocus }),
+      ...mergeProps24(otherProps, { onBlur, onFocus }),
       multiline: true,
       labelProps,
       inputProps,
@@ -23518,7 +23653,7 @@ import { Observer as Observer16 } from "mobx-react";
 
 // src/inputs/TextField.tsx
 import { useRef as useRef50 } from "react";
-import { mergeProps as mergeProps24, useTextField as useTextField4 } from "react-aria";
+import { mergeProps as mergeProps25, useTextField as useTextField4 } from "react-aria";
 import { jsx as jsx166 } from "react/jsx-runtime";
 function TextField(props) {
   const {
@@ -23571,7 +23706,7 @@ function TextField(props) {
   return /* @__PURE__ */ jsx166(
     TextFieldBase,
     {
-      ...mergeProps24(textFieldProps, { onBlur, onFocus }),
+      ...mergeProps25(textFieldProps, { onBlur, onFocus }),
       errorMsg,
       required,
       labelProps,
@@ -23630,7 +23765,7 @@ import { Observer as Observer17 } from "mobx-react";
 
 // src/inputs/ToggleChipGroup.tsx
 import { useRef as useRef51 } from "react";
-import { useCheckboxGroup as useCheckboxGroup3, useCheckboxGroupItem as useCheckboxGroupItem3, useFocusRing as useFocusRing14, VisuallyHidden as VisuallyHidden8 } from "react-aria";
+import { useCheckboxGroup as useCheckboxGroup3, useCheckboxGroupItem as useCheckboxGroupItem3, useFocusRing as useFocusRing14, VisuallyHidden as VisuallyHidden9 } from "react-aria";
 import { useCheckboxGroupState as useCheckboxGroupState3 } from "react-stately";
 import { trussProps as trussProps98, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
 import { jsx as jsx168, jsxs as jsxs88 } from "react/jsx-runtime";
@@ -23763,7 +23898,7 @@ function ToggleChip2(props) {
         boxShadow: "bshFocus"
       } : {}
     }), "data-selected": isSelected, "data-disabled": isDisabled, "aria-disabled": isDisabled, ...others, children: [
-      /* @__PURE__ */ jsx168(VisuallyHidden8, { children: /* @__PURE__ */ jsx168("input", { ...inputProps, ...focusProps }) }),
+      /* @__PURE__ */ jsx168(VisuallyHidden9, { children: /* @__PURE__ */ jsx168("input", { ...inputProps, ...focusProps }) }),
       startAdornment,
       label
     ] })
@@ -24248,7 +24383,7 @@ function Toast() {
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
 import { Fragment as Fragment35, useMemo as useMemo40, useState as useState42 } from "react";
 import { Link as Link6 } from "react-router-dom";
-import { trussProps as trussProps102, mergeProps as mergeProps25 } from "@homebound/truss/runtime";
+import { trussProps as trussProps102, mergeProps as mergeProps26 } from "@homebound/truss/runtime";
 import { Fragment as Fragment36, jsx as jsx176, jsxs as jsxs90 } from "react/jsx-runtime";
 function PageHeaderBreadcrumbs({
   breadcrumb
@@ -24272,7 +24407,7 @@ function PageHeaderBreadcrumbs({
           marginTop: "mt_2px",
           marginBottom: "mb_2px"
         }), children: "/" }),
-        /* @__PURE__ */ jsx176(Link6, { to: bc.href, ...mergeProps25("navLink", void 0, {
+        /* @__PURE__ */ jsx176(Link6, { to: bc.href, ...mergeProps26("navLink", void 0, {
           fontWeight: "fw6",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -24609,7 +24744,7 @@ function useActiveSection(sectionsWithRefs) {
 }
 
 // src/components/Layout/FullBleed.tsx
-import { mergeProps as mergeProps26, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps27, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
 import { cloneElement as cloneElement3 } from "react";
 var __maybeInc19 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -24635,7 +24770,7 @@ function FullBleed({
     // ...for some reason this keeps the Layout top padding better than using
     // react-aria's more generic mergeProps.
     {
-      ...mergeProps26(
+      ...mergeProps27(
         className,
         style,
         // ScrollableParent applies horizontal padding to its content column, so FullBleed
@@ -25088,7 +25223,7 @@ import { useCallback as useCallback31, useLayoutEffect as useLayoutEffect9, useR
 
 // src/components/Layout/RightPaneLayout/DocumentScrollOverlayRightPaneLayout.tsx
 import { useContext as useContext23, useEffect as useEffect26, useLayoutEffect as useLayoutEffect8, useRef as useRef57, useState as useState47 } from "react";
-import { mergeProps as mergeProps29 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps30 } from "@homebound/truss/runtime";
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
 import { AnimatePresence as AnimatePresence3, motion as motion3 } from "framer-motion";
@@ -25250,7 +25385,7 @@ function waitForRightPaneExit(onComplete) {
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
-import { mergeProps as mergeProps27, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps28, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
 import { jsx as jsx185 } from "react/jsx-runtime";
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -25312,7 +25447,7 @@ function DocumentScrollRightPane({
         [rightPaneContentDataAttribute]: true
       },
       ...tid,
-      ...mergeProps27(void 0, paneStyle, mobile ? {
+      ...mergeProps28(void 0, paneStyle, mobile ? {
         position: "fixed",
         right: "r_0",
         bottom: "bot_0",
@@ -25371,7 +25506,7 @@ function DocumentScrollRightPane({
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPaneLayoutRoot.tsx
 import { createContext as createContext13 } from "react";
-import { mergeProps as mergeProps28 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps29 } from "@homebound/truss/runtime";
 import { jsx as jsx186 } from "react/jsx-runtime";
 var NestedRightPaneLayoutContext = createContext13(false);
 function DocumentScrollRightPaneLayoutRoot(props) {
@@ -25387,7 +25522,7 @@ function DocumentScrollRightPaneLayoutRoot(props) {
     "div",
     {
       ref: anchorRef.setRef,
-      ...mergeProps28(void 0, {
+      ...mergeProps29(void 0, {
         [beamRightPaneWidthVar]: "0px",
         [beamRightPaneContentMinVar]: "0px"
       }, sm ? {
@@ -25458,7 +25593,7 @@ function DocumentScrollOverlayRightPaneLayout({
   ] }) : /* @__PURE__ */ jsxs96(Fragment38, { children: [
     /* @__PURE__ */ jsxs96("div", { className: "df aifs wfc mw100", children: [
       /* @__PURE__ */ jsx187("div", { className: "w100 mwfc", ...tid.main, children }),
-      /* @__PURE__ */ jsx187("div", { ref: spacerRef, "aria-hidden": true, ...mergeProps29(void 0, {
+      /* @__PURE__ */ jsx187("div", { ref: spacerRef, "aria-hidden": true, ...mergeProps30(void 0, {
         width: 0
       }, {
         flexShrink: "fs0",
@@ -25511,7 +25646,7 @@ function DocumentScrollOverlayRightPaneHost(props) {
 }
 
 // src/components/Modal/ModalFullBleed.tsx
-import { mergeProps as mergeProps30 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps31 } from "@homebound/truss/runtime";
 import { cloneElement as cloneElement4 } from "react";
 function ModalFullBleed({
   children,
@@ -25525,7 +25660,7 @@ function ModalFullBleed({
     className,
     style
   } = children.props;
-  return cloneElement4(children, mergeProps30(className, style, {
+  return cloneElement4(children, mergeProps31(className, style, {
     ...{
       containerType: "ctis"
     },
@@ -26820,7 +26955,7 @@ import { useCallback as useCallback39, useEffect as useEffect32, useMemo as useM
 
 // src/components/AppNav/AppNavGroupTrigger.tsx
 import { useMemo as useMemo49, useRef as useRef63 } from "react";
-import { mergeProps as mergeProps31, useButton as useButton11, useFocusRing as useFocusRing16, useHover as useHover20 } from "react-aria";
+import { mergeProps as mergeProps32, useButton as useButton11, useFocusRing as useFocusRing16, useHover as useHover20 } from "react-aria";
 import { trussProps as trussProps118, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
 import { jsx as jsx203, jsxs as jsxs108 } from "react/jsx-runtime";
 function AppNavGroupTrigger(props) {
@@ -26854,7 +26989,7 @@ function AppNavGroupTrigger(props) {
     hoverStyles: hoverStyles4,
     pressedStyles: pressedStyles2
   } = useMemo49(() => getNavLinkStyles("side"), []);
-  return /* @__PURE__ */ jsxs108("button", { type: "button", ...mergeProps31(buttonProps, focusProps, hoverProps, tid.trigger, {
+  return /* @__PURE__ */ jsxs108("button", { type: "button", ...mergeProps32(buttonProps, focusProps, hoverProps, tid.trigger, {
     ref,
     "aria-expanded": expanded,
     "aria-controls": navGroupId,
@@ -27523,7 +27658,7 @@ function StepIcon({
 
 // src/components/StepperTabs/StepperTab.tsx
 import { useRef as useRef66 } from "react";
-import { mergeProps as mergeProps32, useButton as useButton13, useFocusRing as useFocusRing18, useHover as useHover22, VisuallyHidden as VisuallyHidden9 } from "react-aria";
+import { mergeProps as mergeProps33, useButton as useButton13, useFocusRing as useFocusRing18, useHover as useHover22, VisuallyHidden as VisuallyHidden10 } from "react-aria";
 import { trussProps as trussProps123 } from "@homebound/truss/runtime";
 import { Fragment as Fragment45, jsx as jsx211, jsxs as jsxs113 } from "react/jsx-runtime";
 function StepperTab(props) {
@@ -27556,7 +27691,7 @@ function StepperTab(props) {
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
   const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const tid = useTestIds(props, "stepperTab");
-  return /* @__PURE__ */ jsxs113("button", { ref, ...mergeProps32(buttonProps, focusProps, hoverProps), "aria-label": label, ...trussProps123({
+  return /* @__PURE__ */ jsxs113("button", { ref, ...mergeProps33(buttonProps, focusProps, hoverProps), "aria-label": label, ...trussProps123({
     ...stepperTabStyles.baseStyles,
     ...getStateStyles(active, completed),
     ...isHovered && !disabled ? stepperTabStyles.hoverStyles : {},
@@ -27595,7 +27730,7 @@ function StepperTab(props) {
       }), children: /* @__PURE__ */ jsx211(Icon, { icon: "check", inc: 2.5, ...tid.check }) })
     ] }),
     /* @__PURE__ */ jsx211("span", { "aria-hidden": true, ...trussProps123(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
-    /* @__PURE__ */ jsx211(VisuallyHidden9, { children: completed ? "Complete" : "Not Complete" })
+    /* @__PURE__ */ jsx211(VisuallyHidden10, { children: completed ? "Complete" : "Not Complete" })
   ] });
 }
 function getStateStyles(active, completed) {
@@ -27776,7 +27911,7 @@ function isStructuredProps(props) {
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
 import { motion as motion6 } from "framer-motion";
-import { trussProps as trussProps126, mergeProps as mergeProps33 } from "@homebound/truss/runtime";
+import { trussProps as trussProps126, mergeProps as mergeProps34 } from "@homebound/truss/runtime";
 import { Fragment as Fragment46, jsx as jsx214, jsxs as jsxs115 } from "react/jsx-runtime";
 var SuperDrawerContent = ({
   children,
@@ -27829,7 +27964,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ jsx214(motion6.div, { ...mergeProps33(void 0, {
+      return /* @__PURE__ */ jsx214(motion6.div, { ...mergeProps34(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -27943,7 +28078,7 @@ function segmentWidth(count, total) {
 
 // src/components/TableSummary/TableSummary.tsx
 import { useRef as useRef67 } from "react";
-import { mergeProps as mergeProps34, useButton as useButton14, useFocusRing as useFocusRing19, useHover as useHover23 } from "react-aria";
+import { mergeProps as mergeProps35, useButton as useButton14, useFocusRing as useFocusRing19, useHover as useHover23 } from "react-aria";
 import { trussProps as trussProps128, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
 import { jsx as jsx217, jsxs as jsxs118 } from "react/jsx-runtime";
 function TableSummary(props) {
@@ -28067,7 +28202,7 @@ function MetricButton(props) {
       }],
       zIndex: "z1"
     } : {}
-  }), ...mergeProps34(buttonProps, hoverProps, focusProps), ...tid, children: [
+  }), ...mergeProps35(buttonProps, hoverProps, focusProps), ...tid, children: [
     /* @__PURE__ */ jsx217("span", { className: "fs0", children: /* @__PURE__ */ jsx217(Icon, { icon: metric.icon, color: metric.color, inc: 4 }) }),
     /* @__PURE__ */ jsxs118("span", { className: "fw6 fz_18px lh_28px", children: [
       metric.count,
@@ -28340,7 +28475,7 @@ function applyActiveStyles(el, activeStyles3) {
 }
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
-import { mergeProps as mergeProps35, useFocusRing as useFocusRing20, useHover as useHover24 } from "react-aria";
+import { mergeProps as mergeProps36, useFocusRing as useFocusRing20, useHover as useHover24 } from "react-aria";
 import { trussProps as trussProps130 } from "@homebound/truss/runtime";
 import { jsx as jsx219 } from "react/jsx-runtime";
 function DnDGridItemHandle(props) {
@@ -28390,7 +28525,7 @@ function DnDGridItemHandle(props) {
     ...isHovered && {
       backgroundColor: "bgGray200"
     }
-  }), ...mergeProps35(dragHandleProps, focusProps, hoverProps), ...tid, children: /* @__PURE__ */ jsx219(Icon, { icon, inc: compact ? 2 : void 0, color }) });
+  }), ...mergeProps36(dragHandleProps, focusProps, hoverProps), ...tid, children: /* @__PURE__ */ jsx219(Icon, { icon, inc: compact ? 2 : void 0, color }) });
 }
 
 // src/components/DnDGrid/useDnDGridItem.tsx
@@ -29003,7 +29138,7 @@ function ResponsiveGrid(props) {
 }
 
 // src/components/Grid/ResponsiveGridItem.tsx
-import { mergeProps as mergeProps36 } from "react-aria";
+import { mergeProps as mergeProps37 } from "react-aria";
 import { trussProps as trussProps132 } from "@homebound/truss/runtime";
 
 // src/components/Grid/useResponsiveGridItem.ts
@@ -29071,7 +29206,7 @@ function ResponsiveGridItem(props) {
   } = useResponsiveGridItem({
     colSpan
   });
-  return /* @__PURE__ */ jsx230("div", { ...mergeProps36(gridItemProps, trussProps132(gridItemStyles)), children });
+  return /* @__PURE__ */ jsx230("div", { ...mergeProps37(gridItemProps, trussProps132(gridItemStyles)), children });
 }
 
 // src/components/HbLoadingSpinner.tsx
@@ -29189,7 +29324,7 @@ function useRegisterMobileSubNav(content2) {
 }
 
 // src/components/Navbar/NavbarMobileMenu.tsx
-import { trussProps as trussProps133, mergeProps as mergeProps37, maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
+import { trussProps as trussProps133, mergeProps as mergeProps38, maybeCssVar as maybeCssVar62 } from "@homebound/truss/runtime";
 import { Fragment as Fragment50, jsx as jsx234, jsxs as jsxs123 } from "react/jsx-runtime";
 function NavbarMobileMenu(props) {
   const {
@@ -29240,7 +29375,7 @@ function NavbarMobileDrawer({
   };
   const showSubLevel = mobileSubNav != null && level === "sub";
   return /* @__PURE__ */ jsxs123(Fragment50, { children: [
-    /* @__PURE__ */ jsx234(motion7.div, { ...mergeProps37(void 0, overlayTopStyle, {
+    /* @__PURE__ */ jsx234(motion7.div, { ...mergeProps38(void 0, overlayTopStyle, {
       position: "fixed",
       right: "r_0",
       bottom: "bot_0",
@@ -29261,7 +29396,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: onClose, ...tid.mobileMenuScrim }, "navbarMobileMenuScrim"),
-    /* @__PURE__ */ jsx234(FocusScope5, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ jsxs123(motion7.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...mergeProps37(void 0, overlayTopStyle, {
+    /* @__PURE__ */ jsx234(FocusScope5, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ jsxs123(motion7.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...mergeProps38(void 0, overlayTopStyle, {
       position: "fixed",
       bottom: "bot_0",
       left: "l_0",
@@ -29556,7 +29691,7 @@ function simpleDataRows(data = []) {
 // src/components/Tabs.tsx
 import { camelCase as camelCase8 } from "change-case";
 import { useEffect as useEffect39, useMemo as useMemo58, useRef as useRef70, useState as useState61 } from "react";
-import { mergeProps as mergeProps38, useFocusRing as useFocusRing21, useHover as useHover25 } from "react-aria";
+import { mergeProps as mergeProps39, useFocusRing as useFocusRing21, useHover as useHover25 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
 import { trussProps as trussProps135, maybeCssVar as maybeCssVar63 } from "@homebound/truss/runtime";
@@ -29735,7 +29870,7 @@ function TabImpl(props) {
       ...isFocusVisible && active && focusRingStyles2
     })
   };
-  const interactiveProps = mergeProps38(focusProps, hoverProps, {
+  const interactiveProps = mergeProps39(focusProps, hoverProps, {
     onKeyUp,
     onBlur,
     ...isRouteTab(tab) ? {} : {
@@ -29751,7 +29886,7 @@ function TabImpl(props) {
     title: resolveTooltip(disabled),
     placement: "top",
     children: /* @__PURE__ */ jsx236("div", { ...tabProps, children: tabLabel })
-  }) : isRouteTab(tab) ? /* @__PURE__ */ jsx236(Link7, { ...mergeProps38(tabProps, interactiveProps, {
+  }) : isRouteTab(tab) ? /* @__PURE__ */ jsx236(Link7, { ...mergeProps39(tabProps, interactiveProps, {
     className: "navLink"
   }), to: tab.href, children: tabLabel }) : /* @__PURE__ */ jsx236("button", { ...{
     ...tabProps,
@@ -29908,7 +30043,7 @@ function DocumentUploadIllustration(props) {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps137, mergeProps as mergeProps39, maybeCssVar as maybeCssVar64 } from "@homebound/truss/runtime";
+import { trussProps as trussProps137, mergeProps as mergeProps40, maybeCssVar as maybeCssVar64 } from "@homebound/truss/runtime";
 import { jsx as jsx238, jsxs as jsxs127 } from "react/jsx-runtime";
 var __maybeInc29 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -29999,7 +30134,7 @@ function SideNavLayoutContent(props) {
     showCollapseToggle && /* @__PURE__ */ jsx238("div", { className: "absolute r_2 top2 z2", children: /* @__PURE__ */ jsx238(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
     /* @__PURE__ */ jsx238("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ jsx238(SideNav, { ...sideNav }) })
   ] });
-  return /* @__PURE__ */ jsx238(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs127("div", { ...mergeProps39(void 0, {
+  return /* @__PURE__ */ jsx238(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs127("div", { ...mergeProps40(void 0, {
     [beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
   }, {
     display: "df",
@@ -30023,7 +30158,7 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/CenteredLayout/CenteredLayout.tsx
-import { mergeProps as mergeProps40 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps41 } from "@homebound/truss/runtime";
 import { jsx as jsx239 } from "react/jsx-runtime";
 function CenteredLayout(props) {
   const {
@@ -30036,7 +30171,7 @@ function CenteredLayout(props) {
     mdAndUp
   } = useBreakpoint();
   const rightPane = resolveWithRightPaneOptions(withRightPane);
-  const shell = /* @__PURE__ */ jsx239(ContentInsetProvider, { children: /* @__PURE__ */ jsx239("div", { ...mergeProps40(void 0, {
+  const shell = /* @__PURE__ */ jsx239(ContentInsetProvider, { children: /* @__PURE__ */ jsx239("div", { ...mergeProps41(void 0, {
     // layoutContainer descendants (e.g. ContentHeader) read this to inset sticky horizontal chrome within the shell padding.
     [beamLayoutContentPaddingXVar]: mdAndUp ? pageContentPaddingXValue : smPageContentPaddingXValue,
     // Floor while an ancestor overlay pane is open (`0px` when closed). `md+` only — phones must not get a dummy scrollbar.
@@ -30068,7 +30203,7 @@ var centeredShellMaxPx = {
 };
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-import { trussProps as trussProps138, mergeProps as mergeProps41, maybeCssVar as maybeCssVar65 } from "@homebound/truss/runtime";
+import { trussProps as trussProps138, mergeProps as mergeProps42, maybeCssVar as maybeCssVar65 } from "@homebound/truss/runtime";
 import { jsx as jsx240, jsxs as jsxs128 } from "react/jsx-runtime";
 var __maybeInc30 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -30085,13 +30220,13 @@ function EnvironmentBannerLayout(props) {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
   };
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
-  return /* @__PURE__ */ jsx240(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx240(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ jsxs128("div", { ...mergeProps41(void 0, style, {
+  return /* @__PURE__ */ jsx240(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx240(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ jsxs128("div", { ...mergeProps42(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    showBanner && environmentBanner && /* @__PURE__ */ jsx240("div", { ...mergeProps41(void 0, {
+    showBanner && environmentBanner && /* @__PURE__ */ jsx240("div", { ...mergeProps42(void 0, {
       height: environmentBannerSizePx
     }, {
       flexShrink: "fs0",
@@ -30127,7 +30262,8 @@ function FormSectionChild(props) {
     description,
     actions,
     fields,
-    orderField
+    orderField,
+    tag
   } = props;
   const tid = useTestIds(props, "formSectionChild");
   const itemRef = useRef71(null);
@@ -30158,7 +30294,7 @@ function FormSectionChild(props) {
     borderStyle: "lot_bsn",
     borderWidth: "lot_bw_0"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx241(ContentHeader, { ...tid.header, title, description, actions, level: 4, startAdornment: isDraggable ? /* @__PURE__ */ jsx241(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }) : void 0 }),
+    /* @__PURE__ */ jsx241(ContentHeader, { ...tid.header, title, description, actions, level: 4, rightSlotLead: tag && /* @__PURE__ */ jsx241(Tag, { ...tag, ...tid.tag }), startAdornment: isDraggable ? /* @__PURE__ */ jsx241(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }) : void 0 }),
     fields
   ] });
 }
@@ -30409,7 +30545,7 @@ function PageBanner(props) {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 import { useMemo as useMemo59, useRef as useRef73 } from "react";
-import { mergeProps as mergeProps42, maybeCssVar as maybeCssVar69 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps43, maybeCssVar as maybeCssVar69 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
 import { useLayoutEffect as useLayoutEffect15, useRef as useRef72, useState as useState63 } from "react";
@@ -30572,18 +30708,18 @@ function NavbarLayout(props) {
     top: autoHideState === "hidden" ? `calc(${bannerTop} - ${navHeight}px)` : bannerTop
   };
   const navbarEl = useMemo59(() => /* @__PURE__ */ jsx246(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ jsx246(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx246(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsx246(MobileSubNavProvider, { children: /* @__PURE__ */ jsxs132("div", { ...mergeProps42(void 0, cssVars, {
+  return /* @__PURE__ */ jsx246(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx246(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsx246(MobileSubNavProvider, { children: /* @__PURE__ */ jsxs132("div", { ...mergeProps43(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx246("div", { ref: spacerRef, ...mergeProps42(void 0, {
+    /* @__PURE__ */ jsx246("div", { ref: spacerRef, ...mergeProps43(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx246("div", { ref: navMetricsRef, ...mergeProps42(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    }), children: /* @__PURE__ */ jsx246("div", { ref: navMetricsRef, ...mergeProps43(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
     /* @__PURE__ */ jsx246("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) }) });
 }
@@ -30764,7 +30900,7 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { mergeProps as mergeProps43, maybeCssVar as maybeCssVar71 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps44, maybeCssVar as maybeCssVar71 } from "@homebound/truss/runtime";
 import { jsx as jsx251, jsxs as jsxs135 } from "react/jsx-runtime";
 var __maybeInc35 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -30819,17 +30955,17 @@ function PageHeaderLayout(props) {
     top: autoHideState === "hidden" ? `calc(${outerTop} - ${headerHeight}px)` : outerTop
   };
   const pageHeaderEl = useMemo60(() => /* @__PURE__ */ jsx251(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ jsx251(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs135("div", { ...mergeProps43(void 0, style, {
+  return /* @__PURE__ */ jsx251(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs135("div", { ...mergeProps44(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx251("div", { ref: spacerRef, ...mergeProps43(void 0, {
+    /* @__PURE__ */ jsx251("div", { ref: spacerRef, ...mergeProps44(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx251("div", { ref: headerMetricsRef, ...mergeProps43(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    }), children: /* @__PURE__ */ jsx251("div", { ref: headerMetricsRef, ...mergeProps44(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
     bannerSlot,
     /* @__PURE__ */ jsx251("div", { className: "df fdc fg1 mh0 w100 n_has_data_self_top_spaced_first_child_pt3", ...tid.body, children })
   ] }) });
@@ -31006,7 +31142,7 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-import { trussProps as trussProps147, mergeProps as mergeProps44, maybeCssVar as maybeCssVar73 } from "@homebound/truss/runtime";
+import { trussProps as trussProps147, mergeProps as mergeProps45, maybeCssVar as maybeCssVar73 } from "@homebound/truss/runtime";
 import { jsx as jsx256, jsxs as jsxs137 } from "react/jsx-runtime";
 var __maybeInc37 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -31072,12 +31208,12 @@ function WorkflowPageLayout(props) {
     };
   }, [showFooter]);
   return /* @__PURE__ */ jsxs137(DocumentScrollLayoutProvider, { children: [
-    /* @__PURE__ */ jsxs137("div", { ...mergeProps44(void 0, style, {
+    /* @__PURE__ */ jsxs137("div", { ...mergeProps45(void 0, style, {
       display: "df",
       flexDirection: "fdc",
       width: "w100"
     }), ...tid, children: [
-      /* @__PURE__ */ jsx256("div", { ...mergeProps44(void 0, {
+      /* @__PURE__ */ jsx256("div", { ...mergeProps45(void 0, {
         height: headerHeight
       }, {
         flexShrink: "fs0",
@@ -31541,7 +31677,7 @@ function Autocomplete(props) {
 
 // src/inputs/ToggleButton.tsx
 import { useRef as useRef79, useState as useState68 } from "react";
-import { useFocusRing as useFocusRing22, useHover as useHover26, usePress as usePress2, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden10 } from "react-aria";
+import { useFocusRing as useFocusRing22, useHover as useHover26, usePress as usePress3, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden11 } from "react-aria";
 import { useToggleState as useToggleState2 } from "react-stately";
 import { trussProps as trussProps150 } from "@homebound/truss/runtime";
 import { jsx as jsx264, jsxs as jsxs141 } from "react/jsx-runtime";
@@ -31580,7 +31716,7 @@ function ToggleButton(props) {
   const {
     isPressed: isPressedFromEvents,
     pressProps
-  } = usePress2({
+  } = usePress3({
     ref: labelRef,
     isDisabled
   });
@@ -31651,7 +31787,7 @@ function ToggleButton(props) {
     children: /* @__PURE__ */ jsxs141("label", { ...labelAttrs, children: [
       icon && /* @__PURE__ */ jsx264(Icon, { icon }),
       label,
-      /* @__PURE__ */ jsx264(VisuallyHidden10, { children: /* @__PURE__ */ jsx264("input", { ref, ...inputProps, ...tid.value }) })
+      /* @__PURE__ */ jsx264(VisuallyHidden11, { children: /* @__PURE__ */ jsx264("input", { ref, ...inputProps, ...tid.value }) })
     ] })
   });
 }