@homebound/beam 3.49.0 → 3.51.0

package/dist/index.js

@@ -24537,10 +24537,178 @@ function StepIcon({
   }) }) });
 }
 
+// src/components/StepperTabs/StepperTab.tsx
+import { useRef as useRef63 } from "react";
+import { mergeProps as mergeProps31, useButton as useButton13, useFocusRing as useFocusRing19, useHover as useHover23, VisuallyHidden as VisuallyHidden10 } from "react-aria";
+import { trussProps as trussProps105, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
+import { jsx as jsx197, jsxs as jsxs100 } from "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 = useRef63(null);
+  const {
+    buttonProps
+  } = useButton13(ariaProps, ref);
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing19();
+  const {
+    hoverProps,
+    isHovered
+  } = useHover23(ariaProps);
+  const tid = useTestIds(props, "stepperTab");
+  return /* @__PURE__ */ jsxs100("button", { ref, ...mergeProps31(buttonProps, focusProps, hoverProps), "aria-label": label, ...trussProps105({
+    ...stepperTabStyles.baseStyles,
+    ...getStateStyles(active, completed),
+    ...isHovered && !disabled ? stepperTabStyles.hoverStyles : {},
+    ...collapsed ? getCollapsedStyles(active, completed) : {},
+    ...disabled ? stepperTabStyles.disabledStyles : {},
+    ...isFocusVisible ? stepperTabStyles.focusRingStyles : {}
+  }), ...tid[defaultTestId(value)], children: [
+    /* @__PURE__ */ jsx197("span", { className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1", children: label }),
+    completed && /* @__PURE__ */ jsx197("span", { className: "fs0 ml1", children: /* @__PURE__ */ jsx197(Icon, { icon: "check", inc: 2.5, ...tid.check }) }),
+    /* @__PURE__ */ jsx197(VisuallyHidden10, { children: completed ? "Complete" : "Not Complete" })
+  ] });
+}
+function withBorderBottom(color) {
+  return {
+    ...{
+      borderBottomStyle: "bbs_solid",
+      borderBottomWidth: ["borderBottomWidth_var", {
+        "--borderBottomWidth": maybeCssVar56(`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
+import { trussProps as trussProps106 } from "@homebound/truss/runtime";
+import { jsx as jsx198 } from "react/jsx-runtime";
+import { createElement as createElement6 } from "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__ */ jsx198("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ jsx198("ol", { ...trussProps106({
+    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__ */ createElement6("li", { ...trussProps106({
+      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__ */ jsx198(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
 import { createPortal as createPortal7 } from "react-dom";
-import { trussProps as trussProps105 } from "@homebound/truss/runtime";
-import { jsx as jsx197, jsxs as jsxs100 } from "react/jsx-runtime";
+import { trussProps as trussProps107 } from "@homebound/truss/runtime";
+import { jsx as jsx199, jsxs as jsxs101 } from "react/jsx-runtime";
 function SuperDrawerHeader(props) {
   const {
     hideControls
@@ -24557,20 +24725,20 @@ function SuperDrawerHeader(props) {
   const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
   const isDetail = currentContent !== firstContent;
   const tid = useTestIds({}, "superDrawerHeader");
-  return createPortal7(/* @__PURE__ */ jsxs100("div", { className: "df aic jcsb gap3", ...tid, children: [
-    isStructuredProps(props) ? /* @__PURE__ */ jsxs100("div", { className: "df jcsb aic gap2 fg1", children: [
-      /* @__PURE__ */ jsxs100("div", { className: "fg1 df aic gap2", children: [
-        /* @__PURE__ */ jsx197("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
+  return createPortal7(/* @__PURE__ */ jsxs101("div", { className: "df aic jcsb gap3", ...tid, children: [
+    isStructuredProps(props) ? /* @__PURE__ */ jsxs101("div", { className: "df jcsb aic gap2 fg1", children: [
+      /* @__PURE__ */ jsxs101("div", { className: "fg1 df aic gap2", children: [
+        /* @__PURE__ */ jsx199("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
         props.left
       ] }),
-      props.right && /* @__PURE__ */ jsx197("div", { className: "fs0", children: props.right })
-    ] }) : /* @__PURE__ */ jsx197("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ jsx197("div", { ...trussProps105({
+      props.right && /* @__PURE__ */ jsx199("div", { className: "fs0", children: props.right })
+    ] }) : /* @__PURE__ */ jsx199("div", { className: "fg1", children: props.children }),
+    !hideControls && /* @__PURE__ */ jsx199("div", { ...trussProps107({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
       } : {}
-    }), children: /* @__PURE__ */ jsx197(ButtonGroup, { buttons: [{
+    }), children: /* @__PURE__ */ jsx199(ButtonGroup, { buttons: [{
       icon: "chevronLeft",
       onClick: () => onPrevClick && onPrevClick(),
       disabled: !onPrevClick
@@ -24586,18 +24754,18 @@ function isStructuredProps(props) {
 }
 
 // src/components/SuperDrawer/ConfirmCloseModal.tsx
-import { Fragment as Fragment45, jsx as jsx198, jsxs as jsxs101 } from "react/jsx-runtime";
+import { Fragment as Fragment45, jsx as jsx200, jsxs as jsxs102 } from "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__ */ jsxs101(Fragment45, { children: [
-    /* @__PURE__ */ jsx198(ModalHeader, { children: "Are you sure you want to cancel?" }),
-    /* @__PURE__ */ jsx198(ModalBody, { children: /* @__PURE__ */ jsx198("p", { children: "Any changes you've made so far will be lost." }) }),
-    /* @__PURE__ */ jsxs101(ModalFooter, { children: [
-      /* @__PURE__ */ jsx198(
+  return /* @__PURE__ */ jsxs102(Fragment45, { children: [
+    /* @__PURE__ */ jsx200(ModalHeader, { children: "Are you sure you want to cancel?" }),
+    /* @__PURE__ */ jsx200(ModalBody, { children: /* @__PURE__ */ jsx200("p", { children: "Any changes you've made so far will be lost." }) }),
+    /* @__PURE__ */ jsxs102(ModalFooter, { children: [
+      /* @__PURE__ */ jsx200(
         Button,
         {
           variant: "quaternary",
@@ -24608,7 +24776,7 @@ function ConfirmCloseModal(props) {
           }
         }
       ),
-      /* @__PURE__ */ jsx198(Button, { label: continueText, onClick: closeModal })
+      /* @__PURE__ */ jsx200(Button, { label: continueText, onClick: closeModal })
     ] })
   ] });
 }
@@ -24618,7 +24786,7 @@ import { motion as motion6 } from "framer-motion";
 
 // src/components/SuperDrawer/useSuperDrawer.tsx
 import { useMemo as useMemo55 } from "react";
-import { jsx as jsx199 } from "react/jsx-runtime";
+import { jsx as jsx201 } from "react/jsx-runtime";
 function useSuperDrawer() {
   const {
     drawerContentStack: contentStack,
@@ -24630,7 +24798,7 @@ function useSuperDrawer() {
   function canCloseDrawerDetails(i, doChange) {
     for (const canCloseDrawerDetail of canCloseDetailsChecks.current[i] ?? []) {
       if (!canClose(canCloseDrawerDetail)) {
-        openModal({ content: /* @__PURE__ */ jsx199(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
+        openModal({ content: /* @__PURE__ */ jsx201(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawerDetail }) });
         return false;
       }
     }
@@ -24650,7 +24818,7 @@ function useSuperDrawer() {
     for (const canCloseDrawer of canCloseChecks.current) {
       if (!canClose(canCloseDrawer)) {
         openModal({
-          content: /* @__PURE__ */ jsx199(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
+          content: /* @__PURE__ */ jsx201(ConfirmCloseModal, { onClose: doChange, ...canCloseDrawer })
         });
         return;
       }
@@ -24745,8 +24913,8 @@ function canClose(canCloseCheck) {
 }
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
-import { mergeProps as mergeProps31 } from "@homebound/truss/runtime";
-import { Fragment as Fragment46, jsx as jsx200, jsxs as jsxs102 } from "react/jsx-runtime";
+import { mergeProps as mergeProps32 } from "@homebound/truss/runtime";
+import { Fragment as Fragment46, jsx as jsx202, jsxs as jsxs103 } from "react/jsx-runtime";
 var SuperDrawerContent = ({
   children,
   actions
@@ -24766,17 +24934,17 @@ var SuperDrawerContent = ({
   } = firstContent ?? {};
   function wrapWithMotionAndMaybeBack(children2) {
     if (kind === "open") {
-      return /* @__PURE__ */ jsx200(motion6.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
+      return /* @__PURE__ */ jsx202(motion6.div, { className: "pt3 pb3 pr3 pl3 fg1 oa", children: children2 }, "content");
     } else if (kind === "detail") {
-      return /* @__PURE__ */ jsxs102(motion6.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
+      return /* @__PURE__ */ jsxs103(motion6.div, { className: "pl3 pr3 pt2 pb3 fg1", animate: {
         overflow: "auto"
       }, transition: {
         overflow: {
           delay: 0.3
         }
       }, children: [
-        /* @__PURE__ */ jsx200(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
-        /* @__PURE__ */ jsx200(motion6.div, { initial: {
+        /* @__PURE__ */ jsx202(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }),
+        /* @__PURE__ */ jsx202(motion6.div, { initial: {
           x: width2,
           opacity: 0
         }, animate: {
@@ -24794,7 +24962,7 @@ var SuperDrawerContent = ({
         }, className: "pt2", children: children2 })
       ] }, "content");
     } else {
-      return /* @__PURE__ */ jsx200(motion6.div, { ...mergeProps31(void 0, {
+      return /* @__PURE__ */ jsx202(motion6.div, { ...mergeProps32(void 0, {
         overflow: "auto"
       }, {
         paddingTop: "pt3",
@@ -24805,9 +24973,9 @@ var SuperDrawerContent = ({
       }) }, "content");
     }
   }
-  return /* @__PURE__ */ jsxs102(Fragment46, { children: [
+  return /* @__PURE__ */ jsxs103(Fragment46, { children: [
     wrapWithMotionAndMaybeBack(children),
-    actions && /* @__PURE__ */ jsx200("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ jsx200("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ jsx200(Button, { ...buttonProps }, i)) }) })
+    actions && /* @__PURE__ */ jsx202("footer", { className: "bts_solid btw_1px bcGray200 pt3 pb3 pr3 pl3 df aic jcfe", children: /* @__PURE__ */ jsx202("div", { className: "df gap1", children: actions.map((buttonProps, i) => /* @__PURE__ */ jsx202(Button, { ...buttonProps }, i)) }) })
   ] });
 };
 
@@ -24850,7 +25018,7 @@ function visit(rows, fn) {
 }
 
 // src/components/TagGroup.tsx
-import { jsx as jsx201, jsxs as jsxs103 } from "react/jsx-runtime";
+import { jsx as jsx203, jsxs as jsxs104 } from "react/jsx-runtime";
 function TagGroup(props) {
   const {
     tags,
@@ -24858,9 +25026,9 @@ function TagGroup(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "tagGroup");
-  return /* @__PURE__ */ jsxs103("div", { ...tid, className: "df aic fww gap1", children: [
-    tags.map((tag) => /* @__PURE__ */ jsx201(Tag, { ...tag, variant: "secondary" }, tag.text)),
-    onEdit && /* @__PURE__ */ jsx201("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ jsx201(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
+  return /* @__PURE__ */ jsxs104("div", { ...tid, className: "df aic fww gap1", children: [
+    tags.map((tag) => /* @__PURE__ */ jsx203(Tag, { ...tag, variant: "secondary" }, tag.text)),
+    onEdit && /* @__PURE__ */ jsx203("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ jsx203(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
   ] });
 }
 
@@ -24873,15 +25041,15 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps106, mergeProps as mergeProps32, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
-import { jsx as jsx202, jsxs as jsxs104 } from "react/jsx-runtime";
+import { trussProps as trussProps108, mergeProps as mergeProps33, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
+import { jsx as jsx204, jsxs as jsxs105 } from "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__ */ jsx202(SideNavLayoutContent, { ...props });
-  return /* @__PURE__ */ jsx202(SideNavLayoutProvider, { children: /* @__PURE__ */ jsx202(SideNavLayoutContent, { ...props }) });
+  if (hasProvider) return /* @__PURE__ */ jsx204(SideNavLayoutContent, { ...props });
+  return /* @__PURE__ */ jsx204(SideNavLayoutProvider, { children: /* @__PURE__ */ jsx204(SideNavLayoutContent, { ...props }) });
 }
 function SideNavLayoutContent(props) {
   const {
@@ -24903,7 +25071,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__ */ jsxs104("div", { ...trussProps106({
+  const rail = showRail && /* @__PURE__ */ jsxs105("div", { ...trussProps108({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -24927,14 +25095,14 @@ function SideNavLayoutContent(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar56(zIndices.sideNav)
+        "--zIndex": maybeCssVar57(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": maybeCssVar56(__maybeInc21(navTop))
+        "--top": maybeCssVar57(__maybeInc21(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": maybeCssVar56(__maybeInc21(railViewportHeight))
+        "--height": maybeCssVar57(__maybeInc21(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -24944,11 +25112,11 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": maybeCssVar56(__maybeInc21(navTop))
+          "--top": maybeCssVar57(__maybeInc21(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar56(zIndices.sideNav)
+          "--zIndex": maybeCssVar57(zIndices.sideNav)
         }]
       },
       ...collapsed ? {
@@ -24960,18 +25128,18 @@ function SideNavLayoutContent(props) {
       }
     }
   }), ...tid.sideNav, children: [
-    showCollapseToggle && /* @__PURE__ */ jsx202("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ jsx202(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
-    /* @__PURE__ */ jsx202("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ jsx202(SideNav, { ...sideNav }) })
+    showCollapseToggle && /* @__PURE__ */ jsx204("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ jsx204(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
+    /* @__PURE__ */ jsx204("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ jsx204(SideNav, { ...sideNav }) })
   ] });
-  return /* @__PURE__ */ jsx202(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs104("div", { ...mergeProps32(void 0, {
+  return /* @__PURE__ */ jsx204(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs105("div", { ...mergeProps33(void 0, {
     [beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
   }, {
     display: "df",
     flexDirection: "fdr",
     width: "w100"
   }), ...tid, children: [
-    contrastRail ? /* @__PURE__ */ jsx202(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ jsx202("div", { ...trussProps106({
+    contrastRail ? /* @__PURE__ */ jsx204(ContrastScope, { children: rail }) : rail,
+    /* @__PURE__ */ jsx204("div", { ...trussProps108({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -24987,8 +25155,8 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-import { trussProps as trussProps107, mergeProps as mergeProps33, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
-import { jsx as jsx203, jsxs as jsxs105 } from "react/jsx-runtime";
+import { trussProps as trussProps109, mergeProps as mergeProps34, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
+import { jsx as jsx205, jsxs as jsxs106 } from "react/jsx-runtime";
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25004,38 +25172,38 @@ function EnvironmentBannerLayout(props) {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
   };
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
-  return /* @__PURE__ */ jsx203(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx203(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ jsxs105("div", { ...mergeProps33(void 0, style, {
+  return /* @__PURE__ */ jsx205(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx205(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ jsxs106("div", { ...mergeProps34(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    showBanner && environmentBanner && /* @__PURE__ */ jsx203("div", { ...mergeProps33(void 0, {
+    showBanner && environmentBanner && /* @__PURE__ */ jsx205("div", { ...mergeProps34(void 0, {
       height: environmentBannerSizePx
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx203("div", { ...trussProps107({
+    }), children: /* @__PURE__ */ jsx205("div", { ...trussProps109({
       position: "fixed",
       top: "top0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar57(zIndices.environmentBanner)
+        "--zIndex": maybeCssVar58(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar57(__maybeInc22(innerWidth))
+        "--width": maybeCssVar58(__maybeInc22(innerWidth))
       }]
-    }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx203(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
+    }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx205(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
   ] }) }) });
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-import { useMemo as useMemo56, useRef as useRef64 } from "react";
-import { mergeProps as mergeProps34, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
+import { useMemo as useMemo56, useRef as useRef65 } from "react";
+import { mergeProps as mergeProps35, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
-import { useLayoutEffect as useLayoutEffect8, useRef as useRef63, useState as useState57 } from "react";
+import { useLayoutEffect as useLayoutEffect8, useRef as useRef64, useState as useState57 } from "react";
 var THRESHOLD = 80;
 function getInitialAutoHideState() {
   if (typeof window === "undefined" || window.scrollY <= 0) {
@@ -25046,13 +25214,13 @@ function getInitialAutoHideState() {
 function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
   const initial = getInitialAutoHideState();
   const [state, setState] = useState57(initial.state);
-  const stateRef = useRef63(initial.state);
+  const stateRef = useRef64(initial.state);
   const [atTop, setAtTop] = useState57(initial.atTop);
-  const atTopRef = useRef63(initial.atTop);
-  const getTopOffsetRef = useRef63(getTopOffset);
+  const atTopRef = useRef64(initial.atTop);
+  const getTopOffsetRef = useRef64(getTopOffset);
   getTopOffsetRef.current = getTopOffset;
-  const lastScrollY = useRef63(Number.POSITIVE_INFINITY);
-  const lastScrollHeight = useRef63(0);
+  const lastScrollY = useRef64(Number.POSITIVE_INFINITY);
+  const lastScrollHeight = useRef64(0);
   useLayoutEffect8(() => {
     if (!enabled) {
       stateRef.current = "static";
@@ -25143,17 +25311,17 @@ function useMeasuredHeight(ref, enabled) {
 
 // src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
 import { createContext as createContext15, useContext as useContext27 } from "react";
-import { jsx as jsx204 } from "react/jsx-runtime";
+import { jsx as jsx206 } from "react/jsx-runtime";
 var NavbarLayoutHeightContext = createContext15(0);
 function NavbarLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ jsx204(NavbarLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx206(NavbarLayoutHeightContext.Provider, { value, children });
 }
 function useNavbarLayoutHeight() {
   return useContext27(NavbarLayoutHeightContext);
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-import { jsx as jsx205, jsxs as jsxs106 } from "react/jsx-runtime";
+import { jsx as jsx207, jsxs as jsxs107 } from "react/jsx-runtime";
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25163,8 +25331,8 @@ function NavbarLayout(props) {
     children
   } = props;
   const tid = useTestIds(props, "navbarLayout");
-  const navMetricsRef = useRef64(null);
-  const spacerRef = useRef64(null);
+  const navMetricsRef = useRef65(null);
+  const spacerRef = useRef65(null);
   const navHeight = useMeasuredHeight(navMetricsRef, true);
   const {
     state: autoHideState,
@@ -25182,10 +25350,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar58(zIndices.navbar)
+        "--zIndex": maybeCssVar59(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar58(__maybeInc23(innerWidth))
+        "--width": maybeCssVar59(__maybeInc23(innerWidth))
       }]
     }
   ) : (
@@ -25194,10 +25362,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar58(zIndices.navbar)
+        "--zIndex": maybeCssVar59(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar58(__maybeInc23(innerWidth))
+        "--width": maybeCssVar59(__maybeInc23(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -25206,25 +25374,25 @@ function NavbarLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
-  const navbarEl = useMemo56(() => /* @__PURE__ */ jsx205(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ jsx205(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx205(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsxs106("div", { ...mergeProps34(void 0, cssVars, {
+  const navbarEl = useMemo56(() => /* @__PURE__ */ jsx207(Navbar, { ...navbar }), [navbar]);
+  return /* @__PURE__ */ jsx207(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx207(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsxs107("div", { ...mergeProps35(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx205("div", { ref: spacerRef, ...mergeProps34(void 0, {
+    /* @__PURE__ */ jsx207("div", { ref: spacerRef, ...mergeProps35(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx205("div", { ref: navMetricsRef, ...mergeProps34(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
-    /* @__PURE__ */ jsx205("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ jsx207("div", { ref: navMetricsRef, ...mergeProps35(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    /* @__PURE__ */ jsx207("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) });
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { useCallback as useCallback39, useMemo as useMemo57, useRef as useRef65 } from "react";
+import { useCallback as useCallback39, useMemo as useMemo57, useRef as useRef66 } from "react";
 
 // src/layouts/useBannerAndNavbarHeight.ts
 function useBannerAndNavbarHeight() {
@@ -25232,8 +25400,8 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { mergeProps as mergeProps35, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
-import { jsx as jsx206, jsxs as jsxs107 } from "react/jsx-runtime";
+import { mergeProps as mergeProps36, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
+import { jsx as jsx208, jsxs as jsxs108 } from "react/jsx-runtime";
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25244,11 +25412,11 @@ function PageHeaderLayout(props) {
   } = props;
   const tid = useTestIds(props, "pageHeaderLayout");
   const bannerAndNavbarHeight = useBannerAndNavbarHeight();
-  const bannerAndNavbarHeightRef = useRef65(bannerAndNavbarHeight);
+  const bannerAndNavbarHeightRef = useRef66(bannerAndNavbarHeight);
   bannerAndNavbarHeightRef.current = bannerAndNavbarHeight;
   const getBannerAndNavbarHeight = useCallback39(() => bannerAndNavbarHeightRef.current, []);
-  const headerMetricsRef = useRef65(null);
-  const spacerRef = useRef65(null);
+  const headerMetricsRef = useRef66(null);
+  const spacerRef = useRef66(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const {
     state: autoHideState,
@@ -25264,43 +25432,43 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": maybeCssVar59(__maybeInc24(headerLeft))
+      "--left": maybeCssVar60(__maybeInc24(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar59(__maybeInc24(headerWidth))
+      "--width": maybeCssVar60(__maybeInc24(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar59(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar60(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": maybeCssVar59(__maybeInc24(headerLeft))
+      "--left": maybeCssVar60(__maybeInc24(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar59(__maybeInc24(headerWidth))
+      "--width": maybeCssVar60(__maybeInc24(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar59(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar60(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
-  const pageHeaderEl = useMemo57(() => /* @__PURE__ */ jsx206(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ jsx206(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs107("div", { ...mergeProps35(void 0, cssVars, {
+  const pageHeaderEl = useMemo57(() => /* @__PURE__ */ jsx208(PageHeader2, { ...pageHeader }), [pageHeader]);
+  return /* @__PURE__ */ jsx208(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs108("div", { ...mergeProps36(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx206("div", { ref: spacerRef, ...mergeProps35(void 0, {
+    /* @__PURE__ */ jsx208("div", { ref: spacerRef, ...mergeProps36(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx206("div", { ref: headerMetricsRef, ...mergeProps35(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ jsx206("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ jsx208("div", { ref: headerMetricsRef, ...mergeProps36(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    /* @__PURE__ */ jsx208("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
 export {
@@ -25444,6 +25612,8 @@ export {
   SortHeader,
   StaticField,
   Stepper,
+  StepperTab,
+  StepperTabs,
   SubmitButton,
   SuperDrawerContent,
   SuperDrawerHeader,