@homebound/beam 3.13.0 → 3.13.1

package/dist/index.d.cts

@@ -8813,7 +8813,8 @@ declare const zIndices: {
     readonly pageStickyHeader: 70;
     readonly dragHandle: 80;
     readonly sideNav: 100;
-    readonly snackbar: 120;
+    readonly pageOverlay: 1000;
+    readonly snackbar: 1100;
 };
 type ZIndex = (typeof zIndices)[keyof typeof zIndices];
 

package/dist/index.d.ts

@@ -8813,7 +8813,8 @@ declare const zIndices: {
     readonly pageStickyHeader: 70;
     readonly dragHandle: 80;
     readonly sideNav: 100;
-    readonly snackbar: 120;
+    readonly pageOverlay: 1000;
+    readonly snackbar: 1100;
 };
 type ZIndex = (typeof zIndices)[keyof typeof zIndices];
 

package/dist/index.js

@@ -5744,8 +5744,11 @@ var zIndices = {
   // Side-nav layer. Mobile rail overlays page content when expanded; sits below
   // snackbar so toasts still land on top.
   sideNav: 100,
-  // Top of the stack.
-  snackbar: 120
+  // Full-page overlays — high enough to clear consuming-app nav bars (~999).
+  // Both layouts own their Toast internally so it renders inside the overlay header.
+  pageOverlay: 1e3,
+  // Top of stack
+  snackbar: 1100
 };
 
 // src/components/Table/components/ExpandableHeader.tsx
@@ -18273,7 +18276,21 @@ function FormPageLayoutComponent(props) {
     // since this layout will be replacing most superdrawers/sidebars, we keep the listing mounted below to preserve the users's
     // scroll position & filters
     // Adding "align-items: start" allows "position: sticky" to work within a grid for the sidebars
-    /* @__PURE__ */ jsx125("div", { className: "fixed top0 bottom0 left0 right0 z_1000 oya bgWhite df jcc aifs", ...tids, children: /* @__PURE__ */ jsxs64("div", { ...trussProps65({
+    /* @__PURE__ */ jsx125("div", { ...trussProps65({
+      position: "fixed",
+      top: "top0",
+      bottom: "bottom0",
+      left: "left0",
+      right: "right0",
+      zIndex: ["z_var", {
+        "--zIndex": maybeCssVar37(zIndices.pageOverlay)
+      }],
+      overflowY: "oya",
+      backgroundColor: "bgWhite",
+      display: "df",
+      justifyContent: "jcc",
+      alignItems: "aifs"
+    }), ...tids, children: /* @__PURE__ */ jsxs64("div", { ...trussProps65({
       width: "w100",
       maxWidth: ["maxw_var", {
         "--maxWidth": `${maxContentWidthPx}px`
@@ -19917,7 +19934,7 @@ function SidePanel(props) {
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-import { trussProps as trussProps73 } from "@homebound/truss/runtime";
+import { trussProps as trussProps73, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
 import { jsx as jsx152, jsxs as jsxs78 } from "react/jsx-runtime";
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
@@ -19959,8 +19976,21 @@ function TableReviewLayout(props) {
       bordered: true
     }, stickyHeader: true });
   }
-  return /* @__PURE__ */ jsxs78("div", { className: "fixed top0 bottom0 left0 right0 z_1000 bgWhite df fdc", ...tid, children: [
+  return /* @__PURE__ */ jsxs78("div", { ...trussProps73({
+    position: "fixed",
+    top: "top0",
+    bottom: "bottom0",
+    left: "left0",
+    right: "right0",
+    zIndex: ["z_var", {
+      "--zIndex": maybeCssVar42(zIndices.pageOverlay)
+    }],
+    backgroundColor: "bgWhite",
+    display: "df",
+    flexDirection: "fdc"
+  }), ...tid, children: [
     /* @__PURE__ */ jsxs78("header", { className: "pl3 pr3 pt3 pb2 fs0", ...tid.header, children: [
+      /* @__PURE__ */ jsx152(Toast, {}),
       /* @__PURE__ */ jsxs78("div", { className: "df jcsb aic", children: [
         /* @__PURE__ */ jsxs78("div", { children: [
           breadCrumb && /* @__PURE__ */ jsx152(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
@@ -20361,7 +20391,7 @@ function getStyles(type) {
 }
 
 // src/components/Card.tsx
-import { trussProps as trussProps76, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
+import { trussProps as trussProps76, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
 import { jsx as jsx157, jsxs as jsxs82 } from "react/jsx-runtime";
 function Card(props) {
   const {
@@ -20414,7 +20444,7 @@ function Card(props) {
       width: "w100",
       height: "h100",
       objectFit: ["objectFit_var", {
-        "--objectFit": maybeCssVar42(imageFit)
+        "--objectFit": maybeCssVar43(imageFit)
       }]
     }), src: imgSrc, alt: title, ...tid.img }) }),
     isHovered && buttonMenuItems && /* @__PURE__ */ jsx157("div", { ...trussProps76({
@@ -20855,7 +20885,7 @@ function ResponsiveGridItem(props) {
 
 // src/components/Grid/useResponsiveGrid.ts
 import { useMemo as useMemo44 } from "react";
-import { maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
+import { maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
 var __maybeInc12 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -20874,11 +20904,11 @@ function useResponsiveGrid(props) {
     return {
       display: "dg",
       gridTemplateColumns: ["gtc_var", {
-        "--gridTemplateColumns": maybeCssVar43(gridTemplateColumns)
+        "--gridTemplateColumns": maybeCssVar44(gridTemplateColumns)
       }],
       containerType: "ctis",
       gap: ["gap_var", {
-        "--gap": maybeCssVar43(__maybeInc12(gridGap))
+        "--gap": maybeCssVar44(__maybeInc12(gridGap))
       }]
     };
   }, [minColumnWidth, gap, columns]);
@@ -21003,7 +21033,7 @@ function HbSpinnerProvider({
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect2, useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
 import { useCallback as useCallback25, useEffect as useEffect31, useRef as useRef51, useState as useState46 } from "react";
-import { trussProps as trussProps81, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
+import { trussProps as trussProps81, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
 import { jsx as jsx164, jsxs as jsxs84 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
@@ -21031,7 +21061,7 @@ function MaxLines({
     /* @__PURE__ */ jsx164("div", { ref: elRef, ...trussProps81({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
-          "--WebkitLineClamp": maybeCssVar44(maxLines)
+          "--WebkitLineClamp": maybeCssVar45(maxLines)
         }],
         overflow: "oh",
         display: "d_negwebkit_box",
@@ -21049,7 +21079,7 @@ import { useEffect as useEffect32, useMemo as useMemo47, useRef as useRef52, use
 import { mergeProps as mergeProps25, useFocusRing as useFocusRing14, useHover as useHover18 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link5, useLocation } from "react-router-dom";
-import { trussProps as trussProps82, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
+import { trussProps as trussProps82, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
 import { Fragment as Fragment38, jsx as jsx165, jsxs as jsxs85 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -21225,7 +21255,7 @@ function getTabStyles() {
   const borderBottomStyles = {
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": maybeCssVar45(`${borderBottomWidthPx}px`)
+      "--borderBottomWidth": maybeCssVar46(`${borderBottomWidthPx}px`)
     }],
     paddingBottom: ["pb_var", {
       "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
@@ -21345,7 +21375,7 @@ function PageHeader2(props) {
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
 import { useCallback as useCallback26, useMemo as useMemo48, useRef as useRef53, useState as useState48 } from "react";
-import { trussProps as trussProps84, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
+import { trussProps as trussProps84, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
 import { jsx as jsx167, jsxs as jsxs87 } from "react/jsx-runtime";
 function ScrollShadows(props) {
   const {
@@ -21370,7 +21400,7 @@ function ScrollShadows(props) {
     const commonStyles = {
       position: "absolute",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar46(zIndices.scrollShadow)
+        "--zIndex": maybeCssVar47(zIndices.scrollShadow)
       }],
       pointerEvents: "pointerEvents_none"
     };
@@ -21403,7 +21433,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar46(startGradient)
+          "--background": maybeCssVar47(startGradient)
         }]
       }
     }, {
@@ -21411,7 +21441,7 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar46(endGradient)
+          "--background": maybeCssVar47(endGradient)
         }]
       }
     }];
@@ -21439,7 +21469,7 @@ function ScrollShadows(props) {
   return /* @__PURE__ */ jsxs87("div", { ...trussProps84({
     display: "df",
     flexDirection: ["fd_var", {
-      "--flexDirection": maybeCssVar46(!horizontal ? "column" : "row")
+      "--flexDirection": maybeCssVar47(!horizontal ? "column" : "row")
     }],
     position: "relative",
     overflow: "oh",
@@ -21456,7 +21486,7 @@ function ScrollShadows(props) {
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar46(showStartShadow ? 1 : 0)
+          "--opacity": maybeCssVar47(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
@@ -21464,7 +21494,7 @@ function ScrollShadows(props) {
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar46(showEndShadow ? 1 : 0)
+          "--opacity": maybeCssVar47(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
@@ -21687,7 +21717,7 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-import { trussProps as trussProps86, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
+import { trussProps as trussProps86, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
 import { Fragment as Fragment39, jsx as jsx169, jsxs as jsxs89 } from "react/jsx-runtime";
 var __maybeInc13 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -21736,7 +21766,7 @@ function AppNavGroupDisclosure(props) {
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
-        "--height": maybeCssVar47(__maybeInc13(contentHeight))
+        "--height": maybeCssVar48(__maybeInc13(contentHeight))
       }]
     }), ...tid.panel, children: /* @__PURE__ */ jsx169("div", { ref: setContentEl, className: "df fdc pl2", children: /* @__PURE__ */ jsx169(AppNavItems, { items: linkGroup.items, panelCollapsed: false, ...tid }) }) })
   ] });
@@ -22043,7 +22073,7 @@ var snackbarId = 1;
 // src/components/Stepper.tsx
 import { useRef as useRef56 } from "react";
 import { useButton as useButton12, useFocusRing as useFocusRing16, useHover as useHover20 } from "react-aria";
-import { trussProps as trussProps89, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
+import { trussProps as trussProps89, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
 import { jsx as jsx175, jsxs as jsxs92 } from "react/jsx-runtime";
 import { createElement as createElement4 } from "react";
 var __maybeInc14 = (inc) => {
@@ -22102,7 +22132,7 @@ function Stepper(props) {
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": maybeCssVar48(__maybeInc14(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": maybeCssVar49(__maybeInc14(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -22520,7 +22550,7 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps91, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
+import { trussProps as trussProps91, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
 import { jsx as jsx180, jsxs as jsxs96 } from "react/jsx-runtime";
 function SideNavLayout(props) {
   const hasProvider = useHasSideNavLayoutProvider();
@@ -22569,7 +22599,7 @@ function SideNavLayoutContent(props) {
       overflow: "oh",
       transition: "transitionWidth",
       zIndex: ["zIndex_var", {
-        "--zIndex": maybeCssVar49(zIndices.sideNav)
+        "--zIndex": maybeCssVar50(zIndices.sideNav)
       }]
     },
     ...collapsed ? {