@homebound/beam 3.13.0 → 3.14.0

package/dist/index.d.cts

@@ -4498,6 +4498,7 @@ declare const Icons: {
     unarchive: JSX.Element;
     duplicate: JSX.Element;
     filter: JSX.Element;
+    impersonate: JSX.Element;
     errorCircle: JSX.Element;
     checkCircle: JSX.Element;
     infoCircle: JSX.Element;
@@ -8813,7 +8814,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

@@ -4498,6 +4498,7 @@ declare const Icons: {
     unarchive: JSX.Element;
     duplicate: JSX.Element;
     filter: JSX.Element;
+    impersonate: JSX.Element;
     errorCircle: JSX.Element;
     checkCircle: JSX.Element;
     infoCircle: JSX.Element;
@@ -8813,7 +8814,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

@@ -4482,6 +4482,11 @@ var Icons = {
     /* @__PURE__ */ jsx3("path", { d: "M20 2H8V4H20V16H22V4C22 2.897 21.103 2 20 2Z" })
   ] }),
   filter: /* @__PURE__ */ jsx3("path", { d: "M7.625 4C7.14175 4 6.75 4.39797 6.75 4.88889V5.92952C5.73046 6.29559 5 7.28336 5 8.44444C5 9.60553 5.73046 10.5933 6.75 10.9594V19.1111C6.75 19.602 7.14175 20 7.625 20C8.10825 20 8.5 19.602 8.5 19.1111V10.9594C9.51954 10.5933 10.25 9.60553 10.25 8.44444C10.25 7.28336 9.51954 6.29559 8.5 5.92952V4.88889C8.5 4.39797 8.10825 4 7.625 4ZM8.5 8.44444C8.5 8.93537 8.10825 9.33333 7.625 9.33333C7.14175 9.33333 6.75 8.93537 6.75 8.44444C6.75 7.95353 7.14175 7.55556 7.625 7.55556C8.10825 7.55556 8.5 7.95353 8.5 8.44444ZM16.375 4C15.8917 4 15.5 4.39797 15.5 4.88889V12.1517C14.4805 12.5178 13.75 13.5056 13.75 14.6667C13.75 15.8277 14.4805 16.8156 15.5 17.1816V19.1111C15.5 19.602 15.8917 20 16.375 20C16.8583 20 17.25 19.602 17.25 19.1111V17.1816C18.2695 16.8156 19 15.8277 19 14.6667C19 13.5056 18.2695 12.5178 17.25 12.1517V4.88889C17.25 4.39797 16.8583 4 16.375 4ZM17.25 14.6667C17.25 15.1576 16.8583 15.5556 16.375 15.5556C15.8917 15.5556 15.5 15.1576 15.5 14.6667C15.5 14.1757 15.8917 13.7778 16.375 13.7778C16.8583 13.7778 17.25 14.1757 17.25 14.6667Z" }),
+  impersonate: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx3("path", { d: "M17.882 7L18.5 7L18.5 4L22.5 8L18.5 12L18.5 9L17.882 9L15.5 9L15.5 7L17.882 7Z" }),
+    /* @__PURE__ */ jsx3("path", { d: "M16.618 14.5L16 14.5L16 11.5L12 15.5L16 19.5L16 16.5L16.618 16.5L19 16.5L19 14.5L16.618 14.5Z" }),
+    /* @__PURE__ */ jsx3("path", { d: "M9 13C9.88746 13 10.7211 13.2335 11.4443 13.6406L9.93457 15.1504C9.64021 15.0536 9.3263 15 9 15H7C5.346 15 4 16.346 4 18V19H2V18C2 15.243 4.243 13 7 13H9ZM12.0859 18H12C12 17.9703 11.9979 17.9407 11.9971 17.9111L12.0859 18ZM8 4C10.28 4 12 5.72 12 8C12 10.28 10.28 12 8 12C5.72 12 4 10.28 4 8C4 5.72 5.72 4 8 4ZM8 6C6.822 6 6 6.822 6 8C6 9.178 6.822 10 8 10C9.178 10 10 9.178 10 8C10 6.822 9.178 6 8 6Z" })
+  ] }),
   // Alerts
   errorCircle: /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsx3("path", { d: "M11.953 2C6.465 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.493 2 11.953 2ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.567 4 11.953 4C16.391 4 20 7.589 20 12C20 16.411 16.411 20 12 20Z" }),
@@ -5744,8 +5749,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 +18281,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 +19939,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 +19981,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 +20396,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 +20449,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 +20890,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 +20909,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 +21038,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 +21066,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 +21084,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 +21260,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 +21380,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 +21405,7 @@ function ScrollShadows(props) {
     const commonStyles = {
       position: "absolute",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar46(zIndices.scrollShadow)
+        "--zIndex": maybeCssVar47(zIndices.scrollShadow)
       }],
       pointerEvents: "pointerEvents_none"
     };
@@ -21403,7 +21438,7 @@ function ScrollShadows(props) {
       ...startShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar46(startGradient)
+          "--background": maybeCssVar47(startGradient)
         }]
       }
     }, {
@@ -21411,7 +21446,7 @@ function ScrollShadows(props) {
       ...endShadowStyles2,
       ...{
         background: ["background_var", {
-          "--background": maybeCssVar46(endGradient)
+          "--background": maybeCssVar47(endGradient)
         }]
       }
     }];
@@ -21439,7 +21474,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 +21491,7 @@ function ScrollShadows(props) {
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar46(showStartShadow ? 1 : 0)
+          "--opacity": maybeCssVar47(showStartShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
@@ -21464,7 +21499,7 @@ function ScrollShadows(props) {
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
-          "--opacity": maybeCssVar46(showEndShadow ? 1 : 0)
+          "--opacity": maybeCssVar47(showEndShadow ? 1 : 0)
         }]
       }
     }), "data-chromatic": "ignore" }),
@@ -21687,7 +21722,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 +21771,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 +22078,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 +22137,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 +22555,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 +22604,7 @@ function SideNavLayoutContent(props) {
       overflow: "oh",
       transition: "transitionWidth",
       zIndex: ["zIndex_var", {
-        "--zIndex": maybeCssVar49(zIndices.sideNav)
+        "--zIndex": maybeCssVar50(zIndices.sideNav)
       }]
     },
     ...collapsed ? {