@homebound/beam 3.50.0 → 3.51.0

package/dist/index.cjs

@@ -170,6 +170,8 @@ __export(index_exports, {
   SortHeader: () => SortHeader,
   StaticField: () => StaticField,
   Stepper: () => Stepper,
+  StepperTab: () => StepperTab,
+  StepperTabs: () => StepperTabs,
   SubmitButton: () => SubmitButton,
   SuperDrawerContent: () => SuperDrawerContent,
   SuperDrawerHeader: () => SuperDrawerHeader,
@@ -24993,10 +24995,178 @@ function StepIcon({
   }) }) });
 }
 
-// src/components/SuperDrawer/components/SuperDrawerHeader.tsx
-var import_react_dom7 = require("react-dom");
+// src/components/StepperTabs/StepperTab.tsx
+var import_react144 = require("react");
+var import_react_aria64 = require("react-aria");
 var import_runtime115 = require("@homebound/truss/runtime");
 var import_jsx_runtime197 = require("react/jsx-runtime");
+function StepperTab(props) {
+  const {
+    label,
+    value,
+    active,
+    completed,
+    onClick,
+    disabled = false,
+    collapsed = false
+  } = props;
+  const ariaProps = {
+    onPress: () => onClick(value),
+    isDisabled: disabled || collapsed
+  };
+  const ref = (0, import_react144.useRef)(null);
+  const {
+    buttonProps
+  } = (0, import_react_aria64.useButton)(ariaProps, ref);
+  const {
+    isFocusVisible,
+    focusProps
+  } = (0, import_react_aria64.useFocusRing)();
+  const {
+    hoverProps,
+    isHovered
+  } = (0, import_react_aria64.useHover)(ariaProps);
+  const tid = useTestIds(props, "stepperTab");
+  return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("button", { ref, ...(0, import_react_aria64.mergeProps)(buttonProps, focusProps, hoverProps), "aria-label": label, ...(0, import_runtime115.trussProps)({
+    ...stepperTabStyles.baseStyles,
+    ...getStateStyles(active, completed),
+    ...isHovered && !disabled ? stepperTabStyles.hoverStyles : {},
+    ...collapsed ? getCollapsedStyles(active, completed) : {},
+    ...disabled ? stepperTabStyles.disabledStyles : {},
+    ...isFocusVisible ? stepperTabStyles.focusRingStyles : {}
+  }), ...tid[defaultTestId(value)], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("span", { className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1", children: label }),
+    completed && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("span", { className: "fs0 ml1", children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Icon, { icon: "check", inc: 2.5, ...tid.check }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_react_aria64.VisuallyHidden, { children: completed ? "Complete" : "Not Complete" })
+  ] });
+}
+function withBorderBottom(color) {
+  return {
+    ...{
+      borderBottomStyle: "bbs_solid",
+      borderBottomWidth: ["borderBottomWidth_var", {
+        "--borderBottomWidth": (0, import_runtime115.maybeCssVar)(`3px`)
+      }]
+    },
+    ...color
+  };
+}
+function getStateStyles(active, completed) {
+  return {
+    ...{
+      color: "gray400",
+      ...active || completed ? {
+        color: "blue700"
+      } : {},
+      ...active ? {
+        fontWeight: "fw6",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px"
+      } : {}
+    },
+    ...withBorderBottom(active || completed ? {
+      borderColor: "bcBlue600"
+    } : {
+      borderColor: "bcGray300"
+    })
+  };
+}
+function getCollapsedStyles(active, completed) {
+  return {
+    ...{
+      cursor: "cursor_default",
+      height: "h_0px",
+      paddingTop: "pt0",
+      paddingBottom: "pb0"
+    },
+    ...completed && !active ? {
+      borderColor: "bcBlue600"
+    } : {
+      borderColor: "bcGray300"
+    }
+  };
+}
+var stepperTabStyles = {
+  baseStyles: {
+    display: "df",
+    alignItems: "aic",
+    flexGrow: "fg1",
+    paddingTop: "pt1",
+    paddingBottom: "pb1",
+    paddingRight: "pr_12px",
+    paddingLeft: "pl_24px",
+    fontWeight: "fw4",
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px",
+    overflow: "oh",
+    textAlign: "tal"
+  },
+  hoverStyles: {
+    backgroundColor: "bgGray100"
+  },
+  focusRingStyles: {
+    boxShadow: "bshFocus",
+    outline: "outline0"
+  },
+  // Disabled always wins over both the state's and the collapsed border color.
+  disabledStyles: {
+    color: "gray400",
+    cursor: "cursorNotAllowed",
+    borderColor: "bcGray300"
+  }
+};
+
+// src/components/StepperTabs/StepperTabs.tsx
+var import_runtime116 = require("@homebound/truss/runtime");
+var import_jsx_runtime198 = require("react/jsx-runtime");
+var import_react145 = require("react");
+function StepperTabs(props) {
+  const {
+    steps,
+    currentStep,
+    onChange
+  } = props;
+  const tid = useTestIds(props, "stepperTabs");
+  const {
+    sm: collapsed
+  } = useBreakpoint();
+  const capWidth = steps.length <= 3;
+  return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("ol", { ...(0, import_runtime116.trussProps)({
+    padding: "p_0",
+    margin: "m_0",
+    listStyle: "lis_none",
+    display: "df",
+    gap: ["gap_var", {
+      "--gap": `${gapPx}px`
+    }],
+    width: "w100",
+    borderBottomStyle: "bbs_solid",
+    borderBottomWidth: "bbw_1px",
+    borderColor: "bcGray400"
+  }), children: steps.map((step) => {
+    const isCurrent = step.value === currentStep;
+    return /* @__PURE__ */ (0, import_react145.createElement)("li", { ...(0, import_runtime116.trussProps)({
+      display: "df",
+      flexGrow: "fg1",
+      flexBasis: "fb_0",
+      ...collapsed ? {
+        minWidth: "mw0"
+      } : {},
+      ...capWidth ? {
+        maxWidth: ["maxw_var", {
+          "--maxWidth": `${maxStepWidthPx}px`
+        }]
+      } : {}
+    }), key: step.value, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(StepperTab, { label: step.label, value: step.value, active: isCurrent, completed: step.completed, disabled: step.disabled, collapsed, onClick: onChange, ...tid.tab }));
+  }) }) });
+}
+var maxStepWidthPx = 280;
+var gapPx = 6;
+
+// src/components/SuperDrawer/components/SuperDrawerHeader.tsx
+var import_react_dom7 = require("react-dom");
+var import_runtime117 = require("@homebound/truss/runtime");
+var import_jsx_runtime199 = require("react/jsx-runtime");
 function SuperDrawerHeader(props) {
   const {
     hideControls
@@ -25013,20 +25183,20 @@ function SuperDrawerHeader(props) {
   const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
   const isDetail = currentContent !== firstContent;
   const tid = useTestIds({}, "superDrawerHeader");
-  return (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: "df aic jcsb gap3", ...tid, children: [
-    isStructuredProps(props) ? /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: "df jcsb aic gap2 fg1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: "fg1 df aic gap2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
+  return (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("div", { className: "df aic jcsb gap3", ...tid, children: [
+    isStructuredProps(props) ? /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("div", { className: "df jcsb aic gap2 fg1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("div", { className: "fg1 df aic gap2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
         props.left
       ] }),
-      props.right && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { className: "fs0", children: props.right })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { ...(0, import_runtime115.trussProps)({
+      props.right && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { className: "fs0", children: props.right })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { className: "fg1", children: props.children }),
+    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("div", { ...(0, import_runtime117.trussProps)({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
       } : {}
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(ButtonGroup, { buttons: [{
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(ButtonGroup, { buttons: [{
       icon: "chevronLeft",
       onClick: () => onPrevClick && onPrevClick(),
       disabled: !onPrevClick
@@ -25042,18 +25212,18 @@ function isStructuredProps(props) {
 }
 
 // src/components/SuperDrawer/ConfirmCloseModal.tsx
-var import_jsx_runtime198 = require("react/jsx-runtime");
+var import_jsx_runtime200 = require("react/jsx-runtime");
 function ConfirmCloseModal(props) {
   const { onClose, discardText = "Discard Changes", continueText = "Continue Editing" } = props;
   const { modalState } = useBeamContext();
   function closeModal() {
     modalState.current = void 0;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(import_jsx_runtime198.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(ModalHeader, { children: "Are you sure you want to cancel?" }),
-    /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(ModalBody, { children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("p", { children: "Any changes you've made so far will be lost." }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(ModalFooter, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(import_jsx_runtime200.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(ModalHeader, { children: "Are you sure you want to cancel?" }),
+    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(ModalBody, { children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("p", { children: "Any changes you've made so far will be lost." }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(ModalFooter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
         Button,
         {
           variant: "quaternary",
@@ -25064,7 +25234,7 @@ function ConfirmCloseModal(props) {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(Button, { label: continueText, onClick: closeModal })
+      /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Button, { label: continueText, onClick: closeModal })
     ] })
   ] });
 }
@@ -25073,8 +25243,8 @@ function ConfirmCloseModal(props) {
 var import_framer_motion6 = require("framer-motion");
 
 // src/components/SuperDrawer/useSuperDrawer.tsx
-var import_react144 = require("react");
-var import_jsx_runtime199 = require("react/jsx-runtime");
+var import_react146 = require("react");
+var import_jsx_runtime201 = require("react/jsx-runtime");
 function useSuperDrawer() {
   const {
     drawerContentStack: contentStack,
@@ -25086,7 +25256,7 @@ function useSuperDrawer() {
   function canCloseDrawerDetails(i, doChange) {
     for (const canCloseDrawerDetail of canCloseDetailsChecks.current[i] ?? []) {
       if (!canClose(canCloseDrawerDetail)) {
-        openModal({ content: /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
+        openModal({ content: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
         return false;
       }
     }
@@ -25106,14 +25276,14 @@ function useSuperDrawer() {
     for (const canCloseDrawer of canCloseChecks.current) {
       if (!canClose(canCloseDrawer)) {
         openModal({
-          content: /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
+          content: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
         });
         return;
       }
     }
     doChange();
   }
-  const closeActions = (0, import_react144.useMemo)(
+  const closeActions = (0, import_react146.useMemo)(
     () => {
       return {
         /** Attempts to close the drawer. If any checks fail, a confirmation modal will appear */
@@ -25148,7 +25318,7 @@ function useSuperDrawer() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [canCloseChecks, canCloseDetailsChecks, contentStack, modalState, openModal]
   );
-  const actions = (0, import_react144.useMemo)(
+  const actions = (0, import_react146.useMemo)(
     () => {
       return {
         // TODO: Maybe we should rename to openDrawer as a breaking change (to match openDrawerDetail)
@@ -25201,8 +25371,8 @@ function canClose(canCloseCheck) {
 }
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
-var import_runtime116 = require("@homebound/truss/runtime");
-var import_jsx_runtime200 = require("react/jsx-runtime");
+var import_runtime118 = require("@homebound/truss/runtime");
+var import_jsx_runtime202 = require("react/jsx-runtime");
 var SuperDrawerContent = ({
   children,
   actions
@@ -25222,17 +25392,17 @@ var SuperDrawerContent = ({
   } = firstContent ?? {};
   function wrapWithMotionAndMaybeBack(children2) {
     if (kind === "open") {
-      return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(import_framer_motion6.motion.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
+      return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(import_framer_motion6.motion.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
     } else if (kind === "detail") {
-      return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(import_framer_motion6.motion.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
+      return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(import_framer_motion6.motion.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
         overflow: "auto"
       }, transition: {
         overflow: {
           delay: 0.3
         }
       }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
-        /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(import_framer_motion6.motion.div, { initial: {
+        /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
+        /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(import_framer_motion6.motion.div, { initial: {
           x: width2,
           opacity: 0
         }, animate: {
@@ -25250,7 +25420,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime116.mergeProps)(void 0, {
+      return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(import_framer_motion6.motion.div, { ...(0, import_runtime118.mergeProps)(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -25261,9 +25431,9 @@ var SuperDrawerContent = ({
       }) }, "content");
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(import_jsx_runtime200.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(import_jsx_runtime202.Fragment, { children: [
     wrapWithMotionAndMaybeBack(children),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Button, { ...buttonProps }, i)) }) })
+    actions && /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(Button, { ...buttonProps }, i)) }) })
   ] });
 };
 
@@ -25306,7 +25476,7 @@ function visit(rows, fn) {
 }
 
 // src/components/TagGroup.tsx
-var import_jsx_runtime201 = require("react/jsx-runtime");
+var import_jsx_runtime203 = require("react/jsx-runtime");
 function TagGroup(props) {
   const {
     tags,
@@ -25314,30 +25484,30 @@ function TagGroup(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "tagGroup");
-  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { ...tid, className: "df aic fww gap1", children: [
-    tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(Tag, { ...tag, variant: "secondary" }, tag.text)),
-    onEdit && /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)("div", { ...tid, className: "df aic fww gap1", children: [
+    tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(Tag, { ...tag, variant: "secondary" }, tag.text)),
+    onEdit && /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
   ] });
 }
 
 // src/components/Toast/useToast.tsx
-var import_react145 = require("react");
+var import_react147 = require("react");
 function useToast() {
   const { setNotice, clear } = useToastContext();
-  const showToast = (0, import_react145.useCallback)((props) => setNotice(props), [setNotice]);
+  const showToast = (0, import_react147.useCallback)((props) => setNotice(props), [setNotice]);
   return { showToast, clear };
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-var import_runtime117 = require("@homebound/truss/runtime");
-var import_jsx_runtime202 = require("react/jsx-runtime");
+var import_runtime119 = require("@homebound/truss/runtime");
+var import_jsx_runtime204 = require("react/jsx-runtime");
 var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function SideNavLayout(props) {
   const hasProvider = useHasSideNavLayoutProvider();
-  if (hasProvider) return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(SideNavLayoutContent, { ...props });
-  return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(SideNavLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(SideNavLayoutContent, { ...props }) });
+  if (hasProvider) return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(SideNavLayoutContent, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(SideNavLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(SideNavLayoutContent, { ...props }) });
 }
 function SideNavLayoutContent(props) {
   const {
@@ -25359,7 +25529,7 @@ function SideNavLayoutContent(props) {
   const railOffsetPx = !showRail ? 0 : !bp.mdAndUp || collapsed ? railCollapsedWidthPx : railWidthPx;
   const navTop = bannerAndNavbarChromeTop();
   const railViewportHeight = `calc(var(${beamLayoutViewportHeightVar}, 100vh) - var(${beamEnvironmentBannerLayoutHeightVar}, 0px) - var(${beamNavbarLayoutHeightVar}, 0px))`;
-  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { ...(0, import_runtime117.trussProps)({
+  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)("div", { ...(0, import_runtime119.trussProps)({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -25383,14 +25553,14 @@ function SideNavLayoutContent(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime117.maybeCssVar)(zIndices.sideNav)
+        "--zIndex": (0, import_runtime119.maybeCssVar)(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": (0, import_runtime117.maybeCssVar)(__maybeInc21(navTop))
+        "--top": (0, import_runtime119.maybeCssVar)(__maybeInc21(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": (0, import_runtime117.maybeCssVar)(__maybeInc21(railViewportHeight))
+        "--height": (0, import_runtime119.maybeCssVar)(__maybeInc21(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -25400,11 +25570,11 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": (0, import_runtime117.maybeCssVar)(__maybeInc21(navTop))
+          "--top": (0, import_runtime119.maybeCssVar)(__maybeInc21(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime117.maybeCssVar)(zIndices.sideNav)
+          "--zIndex": (0, import_runtime119.maybeCssVar)(zIndices.sideNav)
         }]
       },
       ...collapsed ? {
@@ -25416,18 +25586,18 @@ function SideNavLayoutContent(props) {
       }
     }
   }), ...tid.sideNav, children: [
-    showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(SideNav, { ...sideNav }) })
+    showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(SideNav, { ...sideNav }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { ...(0, import_runtime117.mergeProps)(void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)("div", { ...(0, import_runtime119.mergeProps)(void 0, {
     [beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
   }, {
     display: "df",
     flexDirection: "fdr",
     width: "w100"
   }), ...tid, children: [
-    contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { ...(0, import_runtime117.trussProps)({
+    contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(ContrastScope, { children: rail }) : rail,
+    /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { ...(0, import_runtime119.trussProps)({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -25443,8 +25613,8 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-var import_runtime118 = require("@homebound/truss/runtime");
-var import_jsx_runtime203 = require("react/jsx-runtime");
+var import_runtime120 = require("@homebound/truss/runtime");
+var import_jsx_runtime205 = require("react/jsx-runtime");
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25460,38 +25630,38 @@ function EnvironmentBannerLayout(props) {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
   };
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)("div", { ...(0, import_runtime118.mergeProps)(void 0, style, {
+  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("div", { ...(0, import_runtime120.mergeProps)(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { ...(0, import_runtime118.mergeProps)(void 0, {
+    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ...(0, import_runtime120.mergeProps)(void 0, {
       height: environmentBannerSizePx
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { ...(0, import_runtime118.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ...(0, import_runtime120.trussProps)({
       position: "fixed",
       top: "top0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime118.maybeCssVar)(zIndices.environmentBanner)
+        "--zIndex": (0, import_runtime120.maybeCssVar)(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime118.maybeCssVar)(__maybeInc22(innerWidth))
+        "--width": (0, import_runtime120.maybeCssVar)(__maybeInc22(innerWidth))
       }]
-    }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
+    }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
   ] }) }) });
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-var import_react149 = require("react");
-var import_runtime119 = require("@homebound/truss/runtime");
+var import_react151 = require("react");
+var import_runtime121 = require("@homebound/truss/runtime");
 
 // src/layouts/useAutoHideOnScroll.ts
-var import_react146 = require("react");
+var import_react148 = require("react");
 var THRESHOLD = 80;
 function getInitialAutoHideState() {
   if (typeof window === "undefined" || window.scrollY <= 0) {
@@ -25501,15 +25671,15 @@ function getInitialAutoHideState() {
 }
 function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
   const initial = getInitialAutoHideState();
-  const [state, setState] = (0, import_react146.useState)(initial.state);
-  const stateRef = (0, import_react146.useRef)(initial.state);
-  const [atTop, setAtTop] = (0, import_react146.useState)(initial.atTop);
-  const atTopRef = (0, import_react146.useRef)(initial.atTop);
-  const getTopOffsetRef = (0, import_react146.useRef)(getTopOffset);
+  const [state, setState] = (0, import_react148.useState)(initial.state);
+  const stateRef = (0, import_react148.useRef)(initial.state);
+  const [atTop, setAtTop] = (0, import_react148.useState)(initial.atTop);
+  const atTopRef = (0, import_react148.useRef)(initial.atTop);
+  const getTopOffsetRef = (0, import_react148.useRef)(getTopOffset);
   getTopOffsetRef.current = getTopOffset;
-  const lastScrollY = (0, import_react146.useRef)(Number.POSITIVE_INFINITY);
-  const lastScrollHeight = (0, import_react146.useRef)(0);
-  (0, import_react146.useLayoutEffect)(() => {
+  const lastScrollY = (0, import_react148.useRef)(Number.POSITIVE_INFINITY);
+  const lastScrollHeight = (0, import_react148.useRef)(0);
+  (0, import_react148.useLayoutEffect)(() => {
     if (!enabled) {
       stateRef.current = "static";
       atTopRef.current = true;
@@ -25581,35 +25751,35 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 }
 
 // src/layouts/useMeasuredHeight.ts
-var import_utils169 = require("@react-aria/utils");
-var import_react147 = require("react");
+var import_utils171 = require("@react-aria/utils");
+var import_react149 = require("react");
 function useMeasuredHeight(ref, enabled) {
-  const [height, setHeight] = (0, import_react147.useState)(0);
-  const syncElementHeight = (0, import_react147.useCallback)(() => {
+  const [height, setHeight] = (0, import_react149.useState)(0);
+  const syncElementHeight = (0, import_react149.useCallback)(() => {
     const el = ref.current;
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
-  (0, import_utils169.useResizeObserver)({ ref, onResize: syncElementHeight });
-  (0, import_react147.useLayoutEffect)(() => {
+  (0, import_utils171.useResizeObserver)({ ref, onResize: syncElementHeight });
+  (0, import_react149.useLayoutEffect)(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);
   return height;
 }
 
 // src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
-var import_react148 = require("react");
-var import_jsx_runtime204 = require("react/jsx-runtime");
-var NavbarLayoutHeightContext = (0, import_react148.createContext)(0);
+var import_react150 = require("react");
+var import_jsx_runtime206 = require("react/jsx-runtime");
+var NavbarLayoutHeightContext = (0, import_react150.createContext)(0);
 function NavbarLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
 }
 function useNavbarLayoutHeight() {
-  return (0, import_react148.useContext)(NavbarLayoutHeightContext);
+  return (0, import_react150.useContext)(NavbarLayoutHeightContext);
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-var import_jsx_runtime205 = require("react/jsx-runtime");
+var import_jsx_runtime207 = require("react/jsx-runtime");
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25619,8 +25789,8 @@ function NavbarLayout(props) {
     children
   } = props;
   const tid = useTestIds(props, "navbarLayout");
-  const navMetricsRef = (0, import_react149.useRef)(null);
-  const spacerRef = (0, import_react149.useRef)(null);
+  const navMetricsRef = (0, import_react151.useRef)(null);
+  const spacerRef = (0, import_react151.useRef)(null);
   const navHeight = useMeasuredHeight(navMetricsRef, true);
   const {
     state: autoHideState,
@@ -25638,10 +25808,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime119.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime121.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime119.maybeCssVar)(__maybeInc23(innerWidth))
+        "--width": (0, import_runtime121.maybeCssVar)(__maybeInc23(innerWidth))
       }]
     }
   ) : (
@@ -25650,10 +25820,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime119.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime121.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime119.maybeCssVar)(__maybeInc23(innerWidth))
+        "--width": (0, import_runtime121.maybeCssVar)(__maybeInc23(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -25662,25 +25832,25 @@ function NavbarLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
-  const navbarEl = (0, import_react149.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("div", { ...(0, import_runtime119.mergeProps)(void 0, cssVars, {
+  const navbarEl = (0, import_react151.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Navbar, { ...navbar }), [navbar]);
+  return /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("div", { ...(0, import_runtime121.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ref: spacerRef, ...(0, import_runtime119.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { ref: spacerRef, ...(0, import_runtime121.mergeProps)(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime119.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime121.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) });
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-var import_react150 = require("react");
+var import_react152 = require("react");
 
 // src/layouts/useBannerAndNavbarHeight.ts
 function useBannerAndNavbarHeight() {
@@ -25688,8 +25858,8 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-var import_runtime120 = require("@homebound/truss/runtime");
-var import_jsx_runtime206 = require("react/jsx-runtime");
+var import_runtime122 = require("@homebound/truss/runtime");
+var import_jsx_runtime208 = require("react/jsx-runtime");
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25700,11 +25870,11 @@ function PageHeaderLayout(props) {
   } = props;
   const tid = useTestIds(props, "pageHeaderLayout");
   const bannerAndNavbarHeight = useBannerAndNavbarHeight();
-  const bannerAndNavbarHeightRef = (0, import_react150.useRef)(bannerAndNavbarHeight);
+  const bannerAndNavbarHeightRef = (0, import_react152.useRef)(bannerAndNavbarHeight);
   bannerAndNavbarHeightRef.current = bannerAndNavbarHeight;
-  const getBannerAndNavbarHeight = (0, import_react150.useCallback)(() => bannerAndNavbarHeightRef.current, []);
-  const headerMetricsRef = (0, import_react150.useRef)(null);
-  const spacerRef = (0, import_react150.useRef)(null);
+  const getBannerAndNavbarHeight = (0, import_react152.useCallback)(() => bannerAndNavbarHeightRef.current, []);
+  const headerMetricsRef = (0, import_react152.useRef)(null);
+  const spacerRef = (0, import_react152.useRef)(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const {
     state: autoHideState,
@@ -25720,43 +25890,43 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": (0, import_runtime120.maybeCssVar)(__maybeInc24(headerLeft))
+      "--left": (0, import_runtime122.maybeCssVar)(__maybeInc24(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime120.maybeCssVar)(__maybeInc24(headerWidth))
+      "--width": (0, import_runtime122.maybeCssVar)(__maybeInc24(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime120.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime122.maybeCssVar)(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": (0, import_runtime120.maybeCssVar)(__maybeInc24(headerLeft))
+      "--left": (0, import_runtime122.maybeCssVar)(__maybeInc24(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime120.maybeCssVar)(__maybeInc24(headerWidth))
+      "--width": (0, import_runtime122.maybeCssVar)(__maybeInc24(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime120.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime122.maybeCssVar)(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
-  const pageHeaderEl = (0, import_react150.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("div", { ...(0, import_runtime120.mergeProps)(void 0, cssVars, {
+  const pageHeaderEl = (0, import_react152.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
+  return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)("div", { ...(0, import_runtime122.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { ref: spacerRef, ...(0, import_runtime120.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("div", { ref: spacerRef, ...(0, import_runtime122.mergeProps)(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime120.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime122.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -25901,6 +26071,8 @@ function PageHeaderLayout(props) {
   SortHeader,
   StaticField,
   Stepper,
+  StepperTab,
+  StepperTabs,
   SubmitButton,
   SuperDrawerContent,
   SuperDrawerHeader,