@homebound/beam 3.19.0 → 3.20.1

package/dist/index.js

@@ -18885,7 +18885,7 @@ function invertSpacing(value) {
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
 import { useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
-import React17, { useCallback as useCallback25, useEffect as useEffect28, useLayoutEffect as useLayoutEffect4, useMemo as useMemo38, useRef as useRef48, useState as useState44 } from "react";
+import React17, { useCallback as useCallback26, useEffect as useEffect28, useLayoutEffect as useLayoutEffect4, useMemo as useMemo38, useRef as useRef48, useState as useState45 } from "react";
 
 // src/components/ButtonMenu.tsx
 import { useRef as useRef46 } from "react";
@@ -19748,13 +19748,13 @@ function toPageNumberSize(page) {
 import { Fragment as Fragment34, useCallback as useCallback24, useMemo as useMemo36, useRef as useRef47 } from "react";
 import { useMenuTrigger as useMenuTrigger3 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState3 } from "react-stately";
+import { trussProps as trussProps70 } from "@homebound/truss/runtime";
 import { jsx as jsx143, jsxs as jsxs72 } from "react/jsx-runtime";
 function EditColumnsButton(props) {
   const {
     defaultOpen,
     disabled,
     columns,
-    trigger,
     api
   } = props;
   const state = useMenuTriggerState3({
@@ -19766,7 +19766,7 @@ function EditColumnsButton(props) {
   } = useMenuTrigger3({
     isDisabled: !!disabled
   }, state, buttonRef);
-  const tid = useTestIds(props, isTextButton(trigger) ? labelOr(trigger, "editColumnsButton") : isNavLinkButton(trigger) ? defaultTestId(trigger.navLabel) : isIconButton(trigger) ? trigger.icon : trigger.name);
+  const tid = useTestIds(props, "kanban");
   const {
     sm
   } = useBreakpoint();
@@ -19785,12 +19785,38 @@ function EditColumnsButton(props) {
     api.resetColumnWidths();
     api.setVisibleColumns(columns.filter((column2) => column2.canHide ? ids.includes(column2.id) : true).map((c) => c.id));
   }, [columns, api]);
-  return /* @__PURE__ */ jsx143(OverlayTrigger, { ...props, menuTriggerProps, state, buttonRef, hideEndAdornment: sm, ...tid, children: /* @__PURE__ */ jsxs72("div", { className: "dg gtc_1fr_auto gap2 bgWhite pt2 pb2 pr2 pl2 maxw_326px h_bshHover", children: [
-    options.map((option) => /* @__PURE__ */ jsxs72(Fragment34, { children: [
+  return /* @__PURE__ */ jsx143(OverlayTrigger, { ...props, trigger: {
+    icon: "kanban",
+    size: "md",
+    label: "",
+    variant: "secondaryBlack"
+  }, menuTriggerProps, state, buttonRef, hideEndAdornment: sm, ...tid, children: /* @__PURE__ */ jsxs72("div", { ...trussProps70({
+    display: "df",
+    flexDirection: "fdc",
+    backgroundColor: ["bgColor_var", {
+      "--backgroundColor": "var(--b-surface)"
+    }],
+    maxWidth: "maxw_326px",
+    maxHeight: "maxh_512px",
+    boxShadow: "h_bshHover"
+  }), children: [
+    /* @__PURE__ */ jsx143("div", { className: "dg gtc_1fr_auto gap2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ jsxs72(Fragment34, { children: [
       /* @__PURE__ */ jsx143("div", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis pr1", children: option.label }),
       /* @__PURE__ */ jsx143(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
-    ] }, option.value)),
-    /* @__PURE__ */ jsx143("div", { className: "gc_1_1 df jcc", children: /* @__PURE__ */ jsx143(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
+    ] }, option.value)) }),
+    /* @__PURE__ */ jsx143("div", { ...trussProps70({
+      display: "df",
+      justifyContent: "jcc",
+      paddingTop: "pt2",
+      paddingBottom: "pb2",
+      paddingRight: "pr2",
+      paddingLeft: "pl2",
+      borderTopStyle: "bts_solid",
+      borderTopWidth: "btw_1px",
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-on-surface-muted)"
+      }]
+    }), children: /* @__PURE__ */ jsx143(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
   ] }) });
 }
 
@@ -19816,7 +19842,7 @@ function ViewToggleButton({ view, onChange, defaultOpen }) {
 }
 
 // src/components/Table/TableActions.tsx
-import { trussProps as trussProps70 } from "@homebound/truss/runtime";
+import { trussProps as trussProps71 } from "@homebound/truss/runtime";
 import { jsx as jsx145, jsxs as jsxs73 } from "react/jsx-runtime";
 function TableActions(props) {
   const {
@@ -19824,7 +19850,7 @@ function TableActions(props) {
     children,
     right
   } = props;
-  return /* @__PURE__ */ jsxs73("div", { ...trussProps70({
+  return /* @__PURE__ */ jsxs73("div", { ...trussProps71({
     ...{
       display: "df",
       gap: "gap1",
@@ -19848,7 +19874,7 @@ function isGridTableProps(props) {
 import { useMemo as useMemo37 } from "react";
 
 // src/components/LoadingSkeleton.tsx
-import { trussProps as trussProps71, maybeCssVar as maybeCssVar40 } from "@homebound/truss/runtime";
+import { trussProps as trussProps72, maybeCssVar as maybeCssVar40 } from "@homebound/truss/runtime";
 import { jsx as jsx146 } from "react/jsx-runtime";
 function LoadingSkeleton({
   rows = 1,
@@ -19861,7 +19887,7 @@ function LoadingSkeleton({
   const rowHeight = sizeToPixels2[size];
   const rowCells = (rowNumber) => {
     const flexGrowForCell = randomizeWidths ? getRandomizedFlexBasisByRowIndex(rowNumber) : 1;
-    return cellArray.map((_, i) => /* @__PURE__ */ jsx146("div", { ...trussProps71({
+    return cellArray.map((_, i) => /* @__PURE__ */ jsx146("div", { ...trussProps72({
       borderRadius: "br4",
       animation: "animation_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite",
       flexGrow: ["flexGrow_var", {
@@ -19872,7 +19898,7 @@ function LoadingSkeleton({
       }]
     }) }, `row-${rowNumber}-cell-${i}`));
   };
-  return /* @__PURE__ */ jsx146("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ jsx146("div", { ...trussProps71({
+  return /* @__PURE__ */ jsx146("div", { "aria-label": "Loading", children: rowArray.map((_, i) => /* @__PURE__ */ jsx146("div", { ...trussProps72({
     display: "df",
     gap: "gap1",
     marginBottom: "mb1",
@@ -19912,8 +19938,41 @@ function LoadingTable(props) {
   ] });
 }
 
+// src/components/Layout/GridTableLayout/usePersistedTableView.ts
+import { useCallback as useCallback25, useState as useState44 } from "react";
+function usePersistedTableView(defaultView, persist) {
+  const storageKey = persist ? getGridTableViewStorageKey(window.location.pathname) : void 0;
+  const [view, setView] = useState44(() => {
+    if (!storageKey) return defaultView;
+    try {
+      return parseStoredTableView(localStorage.getItem(storageKey)) ?? defaultView;
+    } catch {
+      return defaultView;
+    }
+  });
+  const setViewAndPersist = useCallback25(
+    (next) => {
+      setView(next);
+      if (storageKey) {
+        try {
+          localStorage.setItem(storageKey, next);
+        } catch {
+        }
+      }
+    },
+    [storageKey]
+  );
+  return [view, setViewAndPersist];
+}
+function getGridTableViewStorageKey(pathname) {
+  return `beam.gridTableLayout.view.${pathname}`;
+}
+function parseStoredTableView(raw) {
+  return raw === "list" || raw === "card" ? raw : void 0;
+}
+
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import { trussProps as trussProps72, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
+import { trussProps as trussProps73, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
 import { Fragment as Fragment36, jsx as jsx148, jsxs as jsxs75 } from "react/jsx-runtime";
 var __maybeInc14 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -19941,7 +20000,7 @@ function GridTableLayoutComponent(props) {
     return columns.some((c) => c.canHide);
   }, [columns, hideEditColumns]);
   const api = useMemo38(() => tableProps.api ?? new GridTableApiImpl(), [tableProps.api]);
-  const [view, setView] = useState44(defaultView);
+  const [view, setView] = usePersistedTableView(defaultView, !!withCardView);
   const clientSearch = layoutState?.search === "client" ? layoutState.searchString : void 0;
   const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView);
   const isVirtualized = tableProps.as === "virtual";
@@ -19957,12 +20016,7 @@ function GridTableLayoutComponent(props) {
   }, [visibleColumnIds, layoutState]);
   const visibleColumnsStorageKey = layoutState?.persistedColumnsStorageKey;
   const tableActionsEl = /* @__PURE__ */ jsx148(TableActions, { right: (hasHideableColumns || withCardView) && /* @__PURE__ */ jsxs75("div", { className: "df gap1", children: [
-    hasHideableColumns && /* @__PURE__ */ jsx148(EditColumnsButton, { columns, api, tooltip: "Display columns", trigger: {
-      icon: "kanban",
-      size: "md",
-      label: "",
-      variant: "secondaryBlack"
-    }, ...tid.editColumnsButton }),
+    hasHideableColumns && /* @__PURE__ */ jsx148(EditColumnsButton, { columns, api, tooltip: "Display columns", ...tid.editColumnsButton }),
     withCardView && /* @__PURE__ */ jsx148(ViewToggleButton, { view, onChange: setView })
   ] }), xss: {
     paddingTop: "pt3",
@@ -19982,7 +20036,7 @@ function GridTableLayoutComponent(props) {
     layoutState && totalCount !== void 0 && /* @__PURE__ */ jsx148(Pagination, { page: [layoutState.page, layoutState._pagination.setPage], totalCount, pageSizes: layoutState._pagination.pageSizes, ...tid.pagination })
   ] });
   const tableScrollContent = /* @__PURE__ */ jsxs75(Fragment36, { children: [
-    showTableActions && /* @__PURE__ */ jsx148("div", { ref: tableActionsRef, ...trussProps72({
+    showTableActions && /* @__PURE__ */ jsx148("div", { ref: tableActionsRef, ...trussProps73({
       ...inDocumentScrollLayout ? {
         transition: "transitionTop",
         position: "sticky",
@@ -20036,7 +20090,7 @@ function useGridTableLayoutState({
   const groupBy = useGroupBy(maybeGroupBy ?? {
     none: "none"
   });
-  const [searchString, setSearchString] = useState44("");
+  const [searchString, setSearchString] = useState45("");
   const columnsFallback = "unset-columns";
   const [visibleColumnIds, setVisibleColumnIds] = useSessionStorage(persistedColumns?.storageKey ?? columnsFallback, void 0);
   const paginationFallbackKey = "unset-pagination";
@@ -20046,7 +20100,7 @@ function useGridTableLayoutState({
     100
     // default page size
   );
-  const [page, setPage] = useState44({
+  const [page, setPage] = useState45({
     offset: 0,
     limit: persistedPageSize
   });
@@ -20078,7 +20132,7 @@ function useGridTableLayoutState({
   };
 }
 function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
-  const syncHeightVar = useCallback25(() => {
+  const syncHeightVar = useCallback26(() => {
     const tableWrapper = tableWrapperRef.current;
     if (!tableWrapper) return;
     if (!enabled) {
@@ -20114,7 +20168,7 @@ function Header2(props) {
     actionMenu
   } = props;
   const tids = useTestIds(props);
-  return /* @__PURE__ */ jsx148(FullBleed, { children: /* @__PURE__ */ jsxs75("header", { ...trussProps72({
+  return /* @__PURE__ */ jsx148(FullBleed, { children: /* @__PURE__ */ jsxs75("header", { ...trussProps73({
     ...{
       paddingTop: "pt3",
       paddingBottom: "pb3",
@@ -20156,7 +20210,7 @@ function PreventBrowserScroll({
 }
 
 // src/components/Layout/RightPaneLayout/RightPaneContext.tsx
-import React18, { useCallback as useCallback26, useContext as useContext18, useMemo as useMemo39, useState as useState45 } from "react";
+import React18, { useCallback as useCallback27, useContext as useContext18, useMemo as useMemo39, useState as useState46 } from "react";
 import { jsx as jsx150 } from "react/jsx-runtime";
 var RightPaneContext = React18.createContext({
   openInPane: () => {
@@ -20169,17 +20223,17 @@ var RightPaneContext = React18.createContext({
   rightPaneContent: null
 });
 function RightPaneProvider({ children }) {
-  const [rightPaneContent, setRightPaneContent] = useState45(void 0);
-  const [isRightPaneOpen, setIsRightPaneOpen] = useState45(false);
-  const openInPane = useCallback26(
+  const [rightPaneContent, setRightPaneContent] = useState46(void 0);
+  const [isRightPaneOpen, setIsRightPaneOpen] = useState46(false);
+  const openInPane = useCallback27(
     (opts) => {
       setRightPaneContent(opts?.content);
       setIsRightPaneOpen(true);
     },
     [setRightPaneContent]
   );
-  const closePane = useCallback26(() => setIsRightPaneOpen(false), []);
-  const clearPane = useCallback26(() => setRightPaneContent(void 0), [setRightPaneContent]);
+  const closePane = useCallback27(() => setIsRightPaneOpen(false), []);
+  const clearPane = useCallback27(() => setRightPaneContent(void 0), [setRightPaneContent]);
   const context = useMemo39(
     () => ({ openInPane, closePane, clearPane, rightPaneContent, isRightPaneOpen }),
     [openInPane, closePane, rightPaneContent, clearPane, isRightPaneOpen]
@@ -20193,7 +20247,7 @@ function useRightPaneContext() {
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 import { AnimatePresence as AnimatePresence3, motion as motion3 } from "framer-motion";
 import { useEffect as useEffect29 } from "react";
-import { trussProps as trussProps73, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
+import { trussProps as trussProps74, maybeCssVar as maybeCssVar42 } from "@homebound/truss/runtime";
 import { Fragment as Fragment37, jsx as jsx151, jsxs as jsxs76 } from "react/jsx-runtime";
 var __maybeInc15 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -20213,7 +20267,7 @@ function RightPaneLayout(props) {
   } = useRightPaneContext();
   useEffect29(() => closePane, [closePane]);
   return /* @__PURE__ */ jsx151("div", { className: "h100 df oxh", children: /* @__PURE__ */ jsxs76(Fragment37, { children: [
-    /* @__PURE__ */ jsx151("div", { ...trussProps73({
+    /* @__PURE__ */ jsx151("div", { ...trussProps74({
       ...{
         width: ["w_var", {
           "--width": maybeCssVar42(__maybeInc15(`calc(100% - ${paneWidth + 24}px)`))
@@ -20238,7 +20292,7 @@ function RightPaneLayout(props) {
         } : {}
       }
     }), children }),
-    /* @__PURE__ */ jsxs76("div", { ...trussProps73({
+    /* @__PURE__ */ jsxs76("div", { ...trussProps74({
       position: "relative",
       ...!!defaultPaneContent ? {
         width: ["w_var", {
@@ -20246,7 +20300,7 @@ function RightPaneLayout(props) {
         }]
       } : {}
     }), children: [
-      defaultPaneContent && /* @__PURE__ */ jsx151("div", { ...trussProps73({
+      defaultPaneContent && /* @__PURE__ */ jsx151("div", { ...trussProps74({
         height: "h100",
         width: ["w_var", {
           "--width": `${paneWidth}px`
@@ -20264,7 +20318,7 @@ function RightPaneLayout(props) {
         {
           layout: "position",
           "data-testid": "rightPaneContent",
-          ...trussProps73({
+          ...trussProps74({
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": maybeCssVar42(paneBgColor)
             }],
@@ -20323,7 +20377,7 @@ function ScrollableFooter(props) {
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
 import { AnimatePresence as AnimatePresence4, motion as motion4 } from "framer-motion";
-import { useEffect as useEffect30, useState as useState46 } from "react";
+import { useEffect as useEffect30, useState as useState47 } from "react";
 
 // src/components/Layout/TableReviewLayout/SidePanel.tsx
 import { jsx as jsx153, jsxs as jsxs77 } from "react/jsx-runtime";
@@ -20347,7 +20401,7 @@ function SidePanel(props) {
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
-import { trussProps as trussProps74, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
+import { trussProps as trussProps75, maybeCssVar as maybeCssVar43 } from "@homebound/truss/runtime";
 import { jsx as jsx154, jsxs as jsxs78 } from "react/jsx-runtime";
 var defaultRightPaneWidth = 450;
 function TableReviewLayout(props) {
@@ -20363,7 +20417,7 @@ function TableReviewLayout(props) {
     rightPaneWidth = defaultRightPaneWidth
   } = props;
   const tid = useTestIds(props, "tableReviewLayout");
-  const [isPanelVisible, setIsPanelVisible] = useState46(!!panelContent);
+  const [isPanelVisible, setIsPanelVisible] = useState47(!!panelContent);
   useEffect30(() => {
     setIsPanelVisible(!!panelContent);
   }, [panelContent]);
@@ -20389,7 +20443,7 @@ function TableReviewLayout(props) {
       bordered: true
     }, stickyHeader: true });
   }
-  return /* @__PURE__ */ jsxs78("div", { ...trussProps74({
+  return /* @__PURE__ */ jsxs78("div", { ...trussProps75({
     position: "fixed",
     top: "top0",
     bottom: "bottom0",
@@ -20414,7 +20468,7 @@ function TableReviewLayout(props) {
       /* @__PURE__ */ jsx154("div", { className: "fw4 fz_14px lh_20px gray700 mt2", ...tid.description, children: description })
     ] }),
     /* @__PURE__ */ jsxs78("div", { className: "fg1 df mh0", ...tid.content, children: [
-      /* @__PURE__ */ jsx154("div", { ...trussProps74({
+      /* @__PURE__ */ jsx154("div", { ...trussProps75({
         ...{
           flexGrow: "fg1",
           overflowY: "oya",
@@ -20437,7 +20491,7 @@ function TableReviewLayout(props) {
         ease: "linear",
         duration: 0.2
       }, className: "df fdc fs0 relative", children: [
-        /* @__PURE__ */ jsxs78("div", { ...trussProps74({
+        /* @__PURE__ */ jsxs78("div", { ...trussProps75({
           position: "absolute",
           top: ["top_var", {
             "--top": `${-32}px`
@@ -20560,7 +20614,7 @@ function ButtonDatePicker(props) {
 // src/components/ButtonGroup.tsx
 import { useRef as useRef51 } from "react";
 import { useButton as useButton10, useFocusRing as useFocusRing12, useHover as useHover15 } from "react-aria";
-import { trussProps as trussProps75 } from "@homebound/truss/runtime";
+import { trussProps as trussProps76 } from "@homebound/truss/runtime";
 import { jsx as jsx157, jsxs as jsxs80 } from "react/jsx-runtime";
 function ButtonGroup(props) {
   const {
@@ -20571,7 +20625,7 @@ function ButtonGroup(props) {
   const tid = useTestIds(props, "buttonGroup");
   return (
     // Adding `line-height: 0` prevent inheriting line-heights that might throw off sizing within the button group.
-    /* @__PURE__ */ jsx157("div", { ...tid, ...trussProps75({
+    /* @__PURE__ */ jsx157("div", { ...tid, ...trussProps76({
       ...{
         display: "df",
         lineHeight: "lh_0"
@@ -20620,10 +20674,10 @@ function GroupButton(props) {
     isHovered
   } = useHover15(ariaProps);
   const tid = useTestIds(props);
-  return /* @__PURE__ */ jsx157("span", { ...trussProps75(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
+  return /* @__PURE__ */ jsx157("span", { ...trussProps76(getButtonStyles2(isFirst, isLast)), children: maybeTooltip({
     title: resolveTooltip(disabled, tooltip),
     placement: "top",
-    children: /* @__PURE__ */ jsxs80("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps75({
+    children: /* @__PURE__ */ jsxs80("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps76({
       ...{
         fontWeight: "fw6",
         fontSize: "fz_14px",
@@ -20729,8 +20783,8 @@ import { useHover as useHover16 } from "react-aria";
 
 // src/components/Tag.tsx
 import { useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
-import { useRef as useRef52, useState as useState47 } from "react";
-import { trussProps as trussProps76 } from "@homebound/truss/runtime";
+import { useRef as useRef52, useState as useState48 } from "react";
+import { trussProps as trussProps77 } from "@homebound/truss/runtime";
 import { jsx as jsx158, jsxs as jsxs81 } from "react/jsx-runtime";
 function Tag(props) {
   const {
@@ -20742,7 +20796,7 @@ function Tag(props) {
   } = props;
   const typeStyles2 = getStyles(type);
   const tid = useTestIds(otherProps);
-  const [showTooltip, setShowTooltip] = useState47(false);
+  const [showTooltip, setShowTooltip] = useState48(false);
   const ref = useRef52(null);
   useResizeObserver6({
     ref,
@@ -20754,7 +20808,7 @@ function Tag(props) {
   });
   return maybeTooltip({
     title: !preventTooltip && showTooltip ? text : void 0,
-    children: /* @__PURE__ */ jsxs81("span", { ...tid, ...trussProps76({
+    children: /* @__PURE__ */ jsxs81("span", { ...tid, ...trussProps77({
       ...{
         display: "dif",
         fontWeight: "fw6",
@@ -20804,7 +20858,7 @@ function getStyles(type) {
 }
 
 // src/components/Card.tsx
-import { trussProps as trussProps77, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
+import { trussProps as trussProps78, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
 import { jsx as jsx159, jsxs as jsxs82 } from "react/jsx-runtime";
 function Card(props) {
   const {
@@ -20835,8 +20889,8 @@ function Card(props) {
     ...isHovered && cardHoverStyles,
     ...isDisabled && disabledStyles3
   }), [isDisabled, isHovered, bordered, type, isList]);
-  return /* @__PURE__ */ jsxs82("div", { ...trussProps77(styles), ...hoverProps, ...tid, children: [
-    /* @__PURE__ */ jsx159("div", { ...trussProps77({
+  return /* @__PURE__ */ jsxs82("div", { ...trussProps78(styles), ...hoverProps, ...tid, children: [
+    /* @__PURE__ */ jsx159("div", { ...trussProps78({
       ...{
         height: ["h_var", {
           "--height": `${imgHeight}px`
@@ -20853,14 +20907,14 @@ function Card(props) {
         filter: "filter_brightness_1"
       },
       ...isHovered && !isList && imageHoverStyles
-    }), children: /* @__PURE__ */ jsx159("img", { ...trussProps77({
+    }), children: /* @__PURE__ */ jsx159("img", { ...trussProps78({
       width: "w100",
       height: "h100",
       objectFit: ["objectFit_var", {
         "--objectFit": maybeCssVar44(imageFit)
       }]
     }), src: imgSrc, alt: title, ...tid.img }) }),
-    isHovered && buttonMenuItems && /* @__PURE__ */ jsx159("div", { ...trussProps77({
+    isHovered && buttonMenuItems && /* @__PURE__ */ jsx159("div", { ...trussProps78({
       position: "absolute",
       right: "right1",
       top: "top1",
@@ -20876,7 +20930,7 @@ function Card(props) {
     /* @__PURE__ */ jsxs82("div", { className: "df fdc aifs gap1", children: [
       /* @__PURE__ */ jsxs82("div", { children: [
         /* @__PURE__ */ jsx159("div", { className: "fw6 fz_12px lh_16px gray700", ...tid.subtitle, children: subtitle }),
-        /* @__PURE__ */ jsx159("div", { ...trussProps77({
+        /* @__PURE__ */ jsx159("div", { ...trussProps78({
           fontWeight: "fw6",
           fontSize: "fz_14px",
           lineHeight: "lh_20px",
@@ -20952,7 +21006,7 @@ function Copy(props) {
 
 // src/components/DnDGrid/DnDGrid.tsx
 import equal2 from "fast-deep-equal";
-import { useCallback as useCallback27, useRef as useRef53 } from "react";
+import { useCallback as useCallback28, useRef as useRef53 } from "react";
 
 // src/components/DnDGrid/DnDGridContext.tsx
 import { createContext as createContext10, useContext as useContext20 } from "react";
@@ -20966,7 +21020,7 @@ function useDnDGridContext() {
 }
 
 // src/components/DnDGrid/DnDGrid.tsx
-import { trussProps as trussProps78 } from "@homebound/truss/runtime";
+import { trussProps as trussProps79 } from "@homebound/truss/runtime";
 import { jsx as jsx161 } from "react/jsx-runtime";
 function DnDGrid(props) {
   const {
@@ -20988,19 +21042,19 @@ function DnDGrid(props) {
   const activeStyles3 = activeItemStyles ?? {
     boxShadow: "bshModal"
   };
-  const getGridItems = useCallback27(() => {
+  const getGridItems = useCallback28(() => {
     return gridEl.current ? Array.from(gridEl.current.querySelectorAll(`[${gridItemIdKey}]`)) : [];
   }, []);
-  const getGridItemIdOrder = useCallback27(() => {
+  const getGridItemIdOrder = useCallback28(() => {
     return getGridItems().map((child) => child.getAttribute(gridItemIdKey)).filter(isDefined);
   }, [getGridItems]);
-  const initReorder = useCallback27(() => {
+  const initReorder = useCallback28(() => {
     if (gridEl.current && dragEl.current) {
       initialOrder.current = getGridItemIdOrder();
       setInlineStyles(dragEl.current, activeStyles3);
     }
   }, [getGridItemIdOrder, activeStyles3]);
-  const commitReorder = useCallback27(() => {
+  const commitReorder = useCallback28(() => {
     if (gridEl.current && dragEl.current) {
       const currentOrder = getGridItemIdOrder();
       if (!equal2(currentOrder, initialOrder.current)) onReorder(currentOrder);
@@ -21010,7 +21064,7 @@ function DnDGrid(props) {
       initialOrder.current = currentOrder;
     }
   }, [onReorder, getGridItemIdOrder, activeStyles3]);
-  const cancelReorder = useCallback27(() => {
+  const cancelReorder = useCallback28(() => {
     if (gridEl.current && dragEl.current && initialOrder.current) {
       const currentOrder = getGridItemIdOrder();
       if (!equal2(currentOrder, initialOrder.current)) {
@@ -21032,7 +21086,7 @@ function DnDGrid(props) {
       reorderViaKeyboard.current = false;
     }
   }, [getGridItemIdOrder, getGridItems, activeStyles3]);
-  const onMove = useCallback27((e) => {
+  const onMove = useCallback28((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
       const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
       const clientY = "clientY" in e ? e.clientY : e.touches[0].clientY;
@@ -21055,7 +21109,7 @@ function DnDGrid(props) {
       }
     }
   }, []);
-  const onDragStart = useCallback27((e) => {
+  const onDragStart = useCallback28((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && gridEl.current) {
       initReorder();
       const rect = dragEl.current.getBoundingClientRect();
@@ -21085,7 +21139,7 @@ function DnDGrid(props) {
       gridEl.current.addEventListener("touchmove", onMove);
     }
   }, [initReorder, onMove, activeStyles3]);
-  const onDragEnd = useCallback27((e) => {
+  const onDragEnd = useCallback28((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
       e.preventDefault();
       cloneEl.current.replaceWith(dragEl.current);
@@ -21098,7 +21152,7 @@ function DnDGrid(props) {
       gridEl.current.removeEventListener("touchmove", onMove);
     }
   }, [commitReorder, onMove]);
-  const onDragHandleKeyDown = useCallback27((e) => {
+  const onDragHandleKeyDown = useCallback28((e) => {
     const moveHandle = e.target;
     if (dragEl.current instanceof HTMLElement && moveHandle instanceof HTMLElement && gridEl.current) {
       const isSpaceKey = e.key === " ";
@@ -21149,7 +21203,7 @@ function DnDGrid(props) {
   return /* @__PURE__ */ jsx161(DnDGridContext.Provider, { value: {
     dragEl,
     onDragHandleKeyDown
-  }, children: /* @__PURE__ */ jsx161("div", { ref: gridEl, ...trussProps78({
+  }, children: /* @__PURE__ */ jsx161("div", { ref: gridEl, ...trussProps79({
     ...{
       containerType: "ctis",
       display: "dg"
@@ -21162,7 +21216,7 @@ var gridCloneKey = "dndgrid-clone";
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
 import { mergeProps as mergeProps24, useFocusRing as useFocusRing13, useHover as useHover17 } from "react-aria";
-import { trussProps as trussProps79 } from "@homebound/truss/runtime";
+import { trussProps as trussProps80 } from "@homebound/truss/runtime";
 import { jsx as jsx162 } from "react/jsx-runtime";
 function DnDGridItemHandle(props) {
   const {
@@ -21192,7 +21246,7 @@ function DnDGridItemHandle(props) {
     borderRadius: "br4",
     borderWidth: "bw1"
   };
-  return /* @__PURE__ */ jsx162("button", { ...trussProps79({
+  return /* @__PURE__ */ jsx162("button", { ...trussProps80({
     ...compact ? iconButtonCompact2 : iconButtonNormal2,
     ...{
       cursor: "cursor_grab",
@@ -21254,7 +21308,7 @@ var gridItemDataAttribute = "data-grid-item-span";
 var ResponsiveGridContext = createContext11(void 0);
 
 // src/components/Grid/ResponsiveGrid.tsx
-import { trussProps as trussProps80 } from "@homebound/truss/runtime";
+import { trussProps as trussProps81 } from "@homebound/truss/runtime";
 import { jsx as jsx163 } from "react/jsx-runtime";
 function ResponsiveGrid(props) {
   const {
@@ -21275,12 +21329,12 @@ function ResponsiveGrid(props) {
     gap,
     columns
   }), [minColumnWidth, gap, columns]);
-  return /* @__PURE__ */ jsx163(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ jsx163("div", { ...trussProps80(gridStyles), children }) });
+  return /* @__PURE__ */ jsx163(ResponsiveGridContext.Provider, { value: config, children: /* @__PURE__ */ jsx163("div", { ...trussProps81(gridStyles), children }) });
 }
 
 // src/components/Grid/ResponsiveGridItem.tsx
 import { mergeProps as mergeProps25 } from "react-aria";
-import { trussProps as trussProps81 } from "@homebound/truss/runtime";
+import { trussProps as trussProps82 } from "@homebound/truss/runtime";
 import { jsx as jsx164 } from "react/jsx-runtime";
 function ResponsiveGridItem(props) {
   const {
@@ -21293,7 +21347,7 @@ function ResponsiveGridItem(props) {
   } = useResponsiveGridItem({
     colSpan
   });
-  return /* @__PURE__ */ jsx164("div", { ...mergeProps25(gridItemProps, trussProps81(gridItemStyles)), children });
+  return /* @__PURE__ */ jsx164("div", { ...mergeProps25(gridItemProps, trussProps82(gridItemStyles)), children });
 }
 
 // src/components/Grid/useResponsiveGrid.ts
@@ -21444,7 +21498,7 @@ function HbSpinnerProvider({
 }
 
 // src/components/HomeboundLogo.tsx
-import { trussProps as trussProps82, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
+import { trussProps as trussProps83, maybeCssVar as maybeCssVar46 } from "@homebound/truss/runtime";
 import { jsx as jsx166 } from "react/jsx-runtime";
 var __maybeInc17 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -21455,7 +21509,7 @@ function HomeboundLogo(props) {
     width: width2 = "auto",
     height = "auto"
   } = props;
-  return /* @__PURE__ */ jsx166("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...trussProps82({
+  return /* @__PURE__ */ jsx166("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...trussProps83({
     fill: ["fill_var", {
       "--fill": maybeCssVar46(fill)
     }],
@@ -21470,16 +21524,16 @@ function HomeboundLogo(props) {
 
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect5, useResizeObserver as useResizeObserver7 } from "@react-aria/utils";
-import { useCallback as useCallback28, useEffect as useEffect32, useRef as useRef54, useState as useState48 } from "react";
-import { trussProps as trussProps83, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
+import { useCallback as useCallback29, useEffect as useEffect32, useRef as useRef54, useState as useState49 } from "react";
+import { trussProps as trussProps84, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
 import { jsx as jsx167, jsxs as jsxs84 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
   children
 }) {
   const elRef = useRef54(null);
-  const [hasMore, setHasMore] = useState48(false);
-  const [expanded, setExpanded] = useState48(false);
+  const [hasMore, setHasMore] = useState49(false);
+  const [expanded, setExpanded] = useState49(false);
   useLayoutEffect5(() => {
     if (!elRef.current) return;
     setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
@@ -21487,7 +21541,7 @@ function MaxLines({
   useEffect32(() => {
     setExpanded(false);
   }, [children]);
-  const onResize = useCallback28(() => {
+  const onResize = useCallback29(() => {
     if (!elRef.current) return;
     !expanded && setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, [expanded]);
@@ -21496,7 +21550,7 @@ function MaxLines({
     onResize
   });
   return /* @__PURE__ */ jsxs84("div", { children: [
-    /* @__PURE__ */ jsx167("div", { ref: elRef, ...trussProps83({
+    /* @__PURE__ */ jsx167("div", { ref: elRef, ...trussProps84({
       ...!expanded ? {
         WebkitLineClamp: ["lineClamp_var", {
           "--WebkitLineClamp": maybeCssVar47(maxLines)
@@ -21517,12 +21571,12 @@ import { camelCase as camelCase6 } from "change-case";
 // src/components/AppNav/AppNavGroup.tsx
 import { useResizeObserver as useResizeObserver8 } from "@react-aria/utils";
 import { camelCase as camelCase5, kebabCase } from "change-case";
-import { useCallback as useCallback30, useEffect as useEffect33, useMemo as useMemo48, useState as useState50 } from "react";
+import { useCallback as useCallback31, useEffect as useEffect33, useMemo as useMemo48, useState as useState51 } from "react";
 
 // src/components/AppNav/AppNavGroupTrigger.tsx
 import { useMemo as useMemo47, useRef as useRef55 } from "react";
 import { mergeProps as mergeProps26, useButton as useButton11, useFocusRing as useFocusRing14, useHover as useHover18 } from "react-aria";
-import { trussProps as trussProps84, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
+import { trussProps as trussProps85, mergeProps as mergeProps_14 } from "@homebound/truss/runtime";
 import { jsx as jsx168, jsxs as jsxs85 } from "react/jsx-runtime";
 function AppNavGroupTrigger(props) {
   const {
@@ -21566,7 +21620,7 @@ function AppNavGroupTrigger(props) {
     })
   }), children: [
     label,
-    /* @__PURE__ */ jsx168("span", { ...trussProps84({
+    /* @__PURE__ */ jsx168("span", { ...trussProps85({
       ...{
         display: "df",
         alignItems: "aic",
@@ -21685,7 +21739,7 @@ function entryHasIcons(item) {
 }
 
 // src/components/AppNav/useAppNavGroupExpanded.ts
-import { useCallback as useCallback29, useState as useState49 } from "react";
+import { useCallback as useCallback30, useState as useState50 } from "react";
 var APP_NAV_EXPANDED_LINK_GROUPS_STORAGE_KEY = "beam.appNav.expandedLinkGroups";
 function loadStored() {
   try {
@@ -21704,13 +21758,13 @@ function persistLabel(label, expanded) {
 }
 function useAppNavGroupExpanded(linkGroup) {
   const { label } = linkGroup;
-  const [userExpanded, setUserExpanded] = useState49(() => {
+  const [userExpanded, setUserExpanded] = useState50(() => {
     const stored = loadStored();
     return label in stored ? stored[label] : null;
   });
   const hasActiveLink = appNavLinkGroupLinks(linkGroup).some((l) => l.active);
   const expanded = userExpanded !== null ? userExpanded : hasActiveLink ? true : linkGroup.defaultExpanded ?? false;
-  const onToggle = useCallback29(() => {
+  const onToggle = useCallback30(() => {
     const next = !expanded;
     setUserExpanded(next);
     persistLabel(label, next);
@@ -21719,7 +21773,7 @@ function useAppNavGroupExpanded(linkGroup) {
 }
 
 // src/components/AppNav/AppNavGroup.tsx
-import { trussProps as trussProps85, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
+import { trussProps as trussProps86, maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
 import { Fragment as Fragment39, jsx as jsx169, jsxs as jsxs86 } from "react/jsx-runtime";
 var __maybeInc18 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -21745,15 +21799,15 @@ function AppNavGroupDisclosure(props) {
   } = useAppNavGroupExpanded(linkGroup);
   const tid = useTestIds(props, "linkGroup");
   const navGroupId = `nav-group-${kebabCase(linkGroup.label)}`;
-  const [contentEl, setContentEl] = useState50(null);
+  const [contentEl, setContentEl] = useState51(null);
   const contentRef = useMemo48(() => ({
     current: contentEl
   }), [contentEl]);
-  const [contentHeight, setContentHeight] = useState50(expanded ? "auto" : "0");
+  const [contentHeight, setContentHeight] = useState51(expanded ? "auto" : "0");
   useEffect33(() => {
     setContentHeight(expanded && contentEl ? `${contentEl.scrollHeight}px` : "0");
   }, [expanded, contentEl]);
-  const onResize = useCallback30(() => {
+  const onResize = useCallback31(() => {
     if (contentEl && expanded) {
       setContentHeight(`${contentEl.scrollHeight}px`);
     }
@@ -21764,7 +21818,7 @@ function AppNavGroupDisclosure(props) {
   });
   return /* @__PURE__ */ jsxs86("div", { className: "df fdc", ...tid, children: [
     /* @__PURE__ */ jsx169(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, onClick: onToggle, ...tid }),
-    /* @__PURE__ */ jsx169("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...trussProps85({
+    /* @__PURE__ */ jsx169("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...trussProps86({
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
@@ -21796,7 +21850,7 @@ function AppNavGroupMenu({
 }
 
 // src/components/AppNav/AppNavSectionView.tsx
-import { trussProps as trussProps86 } from "@homebound/truss/runtime";
+import { trussProps as trussProps87 } from "@homebound/truss/runtime";
 import { jsx as jsx171, jsxs as jsxs87 } from "react/jsx-runtime";
 function AppNavSectionView(props) {
   const {
@@ -21822,7 +21876,7 @@ function AppNavSectionView(props) {
       "--borderColor": "var(--b-surface-separator)"
     }]
   };
-  return /* @__PURE__ */ jsxs87("div", { ...trussProps86({
+  return /* @__PURE__ */ jsxs87("div", { ...trussProps87({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -21830,7 +21884,7 @@ function AppNavSectionView(props) {
     },
     ...showDivider ? dividerStyles : {}
   }), ...tid, children: [
-    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ jsx171("div", { ...trussProps86({
+    section.label && !panelCollapsed && variant !== "global" && /* @__PURE__ */ jsx171("div", { ...trussProps87({
       fontWeight: "fw6",
       fontSize: "fz_10px",
       lineHeight: "lh_14px",
@@ -21894,18 +21948,18 @@ function AppNavItems(props) {
 
 // src/components/Navbar/NavbarMobileMenu.tsx
 import { AnimatePresence as AnimatePresence5, motion as motion5 } from "framer-motion";
-import { useEffect as useEffect34, useState as useState51 } from "react";
+import { useEffect as useEffect34, useState as useState52 } from "react";
 import { FocusScope as FocusScope5, usePreventScroll as usePreventScroll2 } from "react-aria";
 import { createPortal as createPortal6 } from "react-dom";
 import { useLocation } from "react-router-dom";
-import { trussProps as trussProps87, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
+import { trussProps as trussProps88, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
 import { Fragment as Fragment41, jsx as jsx173, jsxs as jsxs88 } from "react/jsx-runtime";
 function NavbarMobileMenu(props) {
   const {
     items
   } = props;
   const tid = useTestIds(props, "navbar");
-  const [isOpen, setIsOpen] = useState51(false);
+  const [isOpen, setIsOpen] = useState52(false);
   const {
     pathname,
     search
@@ -21928,7 +21982,7 @@ function NavbarMobileDrawer({
   tid
 }) {
   return /* @__PURE__ */ jsxs88(Fragment41, { children: [
-    /* @__PURE__ */ jsx173(motion5.div, { ...trussProps87({
+    /* @__PURE__ */ jsx173(motion5.div, { ...trussProps88({
       position: "fixed",
       top: "top0",
       right: "right0",
@@ -21948,7 +22002,7 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: onClose, ...tid.mobileMenuScrim }, "navbarMobileMenuScrim"),
-    /* @__PURE__ */ jsx173(FocusScope5, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ jsxs88(motion5.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...trussProps87({
+    /* @__PURE__ */ jsx173(FocusScope5, { autoFocus: true, contain: true, restoreFocus: true, children: /* @__PURE__ */ jsxs88(motion5.aside, { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", ...trussProps88({
       position: "fixed",
       top: "top0",
       bottom: "bottom0",
@@ -21993,7 +22047,7 @@ function NavbarMobileDrawer({
 }
 
 // src/components/Navbar/Navbar.tsx
-import { trussProps as trussProps88 } from "@homebound/truss/runtime";
+import { trussProps as trussProps89 } from "@homebound/truss/runtime";
 import { jsx as jsx174, jsxs as jsxs89 } from "react/jsx-runtime";
 function Navbar(props) {
   const {
@@ -22013,7 +22067,7 @@ function Navbar(props) {
     overflows
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
-  return /* @__PURE__ */ jsx174(ContrastScope, { children: /* @__PURE__ */ jsxs89("nav", { ...trussProps88({
+  return /* @__PURE__ */ jsx174(ContrastScope, { children: /* @__PURE__ */ jsxs89("nav", { ...trussProps89({
     backgroundColor: "bgGray800",
     flexShrink: "fs0",
     display: "df",
@@ -22033,7 +22087,7 @@ function Navbar(props) {
     /* @__PURE__ */ jsxs89("div", { className: "df aic gap3 fg1 mw0", children: [
       /* @__PURE__ */ jsxs89("div", { className: "df aic fs0 gap2", children: [
         showMobile && /* @__PURE__ */ jsx174(NavbarMobileMenu, { items, ...tid }),
-        /* @__PURE__ */ jsx174("div", { ...trussProps88({
+        /* @__PURE__ */ jsx174("div", { ...trussProps89({
           flexShrink: "fs0",
           ...hideBrandOnMobile && showMobile ? {
             display: "dn"
@@ -22042,7 +22096,7 @@ function Navbar(props) {
       ] }),
       !sm && // Stays mounted while overflowing (hidden) so the items remain measurable and the bar
       // can expand again as space frees up.
-      /* @__PURE__ */ jsx174("div", { ref: containerRef, ...trussProps88({
+      /* @__PURE__ */ jsx174("div", { ref: containerRef, ...trussProps89({
         display: "df",
         alignItems: "aic",
         flexGrow: "fg1",
@@ -22073,11 +22127,11 @@ function NavbarUserMenu({
 
 // src/components/Tabs.tsx
 import { camelCase as camelCase7 } from "change-case";
-import { useEffect as useEffect35, useMemo as useMemo49, useRef as useRef56, useState as useState52 } from "react";
+import { useEffect as useEffect35, useMemo as useMemo49, useRef as useRef56, useState as useState53 } from "react";
 import { mergeProps as mergeProps27, useFocusRing as useFocusRing15, useHover as useHover19 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link5, useLocation as useLocation2 } from "react-router-dom";
-import { trussProps as trussProps89, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
+import { trussProps as trussProps90, maybeCssVar as maybeCssVar50 } from "@homebound/truss/runtime";
 import { Fragment as Fragment42, jsx as jsx175, jsxs as jsxs90 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
@@ -22110,7 +22164,7 @@ function TabContent(props) {
   return (
     // Using FullBleed to allow the tab's bgColor to extend to the edges of the <ScrollableContent /> element.
     // Omit the padding from `FullBleed` if the caller passes in the `paddingLeft/Right` styles.
-    /* @__PURE__ */ jsx175(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx175("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps89(contentXss), children: selectedTab.render() }) })
+    /* @__PURE__ */ jsx175(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx175("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps90(contentXss), children: selectedTab.render() }) })
   );
 }
 function Tabs(props) {
@@ -22134,7 +22188,7 @@ function Tabs(props) {
     focusProps
   } = useFocusRing15();
   const tid = useTestIds(others, "tabs");
-  const [active, setActive] = useState52(selected);
+  const [active, setActive] = useState53(selected);
   const ref = useRef56(null);
   useEffect35(() => setActive(selected), [selected]);
   function onKeyUp(e) {
@@ -22152,7 +22206,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ jsxs90("div", { ...trussProps89({
+  return /* @__PURE__ */ jsxs90("div", { ...trussProps90({
     ...{
       display: "df",
       alignItems: "aic",
@@ -22216,7 +22270,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...trussProps89({
+    ...trussProps90({
       ...baseStyles5,
       ...active && activeStyles3,
       ...isDisabled && disabledStyles4,
@@ -22337,7 +22391,7 @@ function hideTabs(props) {
 }
 
 // src/components/PageHeader.tsx
-import { trussProps as trussProps90 } from "@homebound/truss/runtime";
+import { trussProps as trussProps91 } from "@homebound/truss/runtime";
 import { jsx as jsx176, jsxs as jsxs91 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
@@ -22347,7 +22401,7 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "pageHeader");
-  return /* @__PURE__ */ jsxs91("header", { ...tid, ...trussProps90({
+  return /* @__PURE__ */ jsxs91("header", { ...tid, ...trussProps91({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -22372,8 +22426,8 @@ function PageHeader2(props) {
 
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
-import { useCallback as useCallback31, useMemo as useMemo50, useRef as useRef57, useState as useState53 } from "react";
-import { trussProps as trussProps91, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
+import { useCallback as useCallback32, useMemo as useMemo50, useRef as useRef57, useState as useState54 } from "react";
+import { trussProps as trussProps92, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
 import { jsx as jsx177, jsxs as jsxs92 } from "react/jsx-runtime";
 function ScrollShadows(props) {
   const {
@@ -22390,8 +22444,8 @@ function ScrollShadows(props) {
   if (!bgColor.includes("rgba")) {
     throw new Error("ScrollShadows: bgColor prop must be in the format 'rgba(255, 255, 255, 1)'");
   }
-  const [showStartShadow, setShowStartShadow] = useState53(false);
-  const [showEndShadow, setShowEndShadow] = useState53(false);
+  const [showStartShadow, setShowStartShadow] = useState54(false);
+  const [showEndShadow, setShowEndShadow] = useState54(false);
   const scrollRef = useRef57(null);
   const [startShadowStyles, endShadowStyles] = useMemo50(() => {
     const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
@@ -22444,7 +22498,7 @@ function ScrollShadows(props) {
       }
     }];
   }, [horizontal, bgColor]);
-  const updateScrollProps = useCallback31((el) => {
+  const updateScrollProps = useCallback32((el) => {
     const {
       scrollTop,
       scrollHeight,
@@ -22459,12 +22513,12 @@ function ScrollShadows(props) {
     setShowStartShadow(start > 0);
     setShowEndShadow(start + boxSize < end);
   }, [horizontal]);
-  const onResize = useCallback31(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
+  const onResize = useCallback32(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
   useResizeObserver9({
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ jsxs92("div", { ...trussProps91({
+  return /* @__PURE__ */ jsxs92("div", { ...trussProps92({
     display: "df",
     flexDirection: ["fd_var", {
       "--flexDirection": maybeCssVar51(!horizontal ? "column" : "row")
@@ -22480,7 +22534,7 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ jsx177("div", { ...trussProps91({
+    /* @__PURE__ */ jsx177("div", { ...trussProps92({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -22488,7 +22542,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx177("div", { ...trussProps91({
+    /* @__PURE__ */ jsx177("div", { ...trussProps92({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -22496,7 +22550,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx177("div", { ...trussProps91({
+    /* @__PURE__ */ jsx177("div", { ...trussProps92({
       ...xss,
       ...{
         overflow: "oa",
@@ -22510,12 +22564,12 @@ function ScrollShadows(props) {
 // src/layouts/SideNavLayout/SideNavLayoutContext.tsx
 import {
   createContext as createContext12,
-  useCallback as useCallback32,
+  useCallback as useCallback33,
   useContext as useContext23,
   useEffect as useEffect36,
   useMemo as useMemo51,
   useRef as useRef58,
-  useState as useState54
+  useState as useState55
 } from "react";
 import { jsx as jsx178 } from "react/jsx-runtime";
 var SIDE_NAV_LAYOUT_STATE_STORAGE_KEY = "beam.sideNavLayout.navState";
@@ -22541,7 +22595,7 @@ function resolveInitialNavState(defaultNavState) {
 }
 var SideNavLayoutContext = createContext12(void 0);
 function SideNavLayoutProvider(props) {
-  const [navState, setNavStateInternal] = useState54(
+  const [navState, setNavStateInternal] = useState55(
     () => resolveInitialNavState(props.defaultNavState)
   );
   const bp = useBreakpoint();
@@ -22552,7 +22606,7 @@ function SideNavLayoutProvider(props) {
     }
     prevMdAndUp.current = bp.mdAndUp;
   }, [bp.mdAndUp]);
-  const setNavState = useCallback32((value2) => {
+  const setNavState = useCallback33((value2) => {
     setNavStateInternal((prev) => {
       const next = typeof value2 === "function" ? value2(prev) : value2;
       if (next === "expanded" || next === "collapse") {
@@ -22576,7 +22630,7 @@ function useHasSideNavLayoutProvider() {
 }
 
 // src/components/SideNav/SideNav.tsx
-import { trussProps as trussProps92 } from "@homebound/truss/runtime";
+import { trussProps as trussProps93 } from "@homebound/truss/runtime";
 import { jsx as jsx179, jsxs as jsxs93 } from "react/jsx-runtime";
 function SideNav(props) {
   const {
@@ -22591,7 +22645,7 @@ function SideNav(props) {
   const panelCollapsed = navState === "collapse";
   const hideOnCollapse = panelCollapsed && !allItemsHaveIcons(items);
   return /* @__PURE__ */ jsxs93("nav", { className: "df fdc h100 fs0", ...tid, children: [
-    top !== void 0 && /* @__PURE__ */ jsx179("div", { ...trussProps92({
+    top !== void 0 && /* @__PURE__ */ jsx179("div", { ...trussProps93({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -22602,7 +22656,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ jsx179("div", { ...trussProps92({
+    /* @__PURE__ */ jsx179("div", { ...trussProps93({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -22615,7 +22669,7 @@ function SideNav(props) {
         paddingTop: "pt5"
       } : {}
     }), ...tid.items, children: !hideOnCollapse && /* @__PURE__ */ jsx179(AppNavItems, { items, panelCollapsed }) }),
-    footer !== void 0 && /* @__PURE__ */ jsx179("div", { ...trussProps92({
+    footer !== void 0 && /* @__PURE__ */ jsx179("div", { ...trussProps93({
       flexShrink: "fs0",
       paddingLeft: "pl2",
       paddingRight: "pr2",
@@ -22631,10 +22685,10 @@ function SideNav(props) {
 }
 
 // src/components/Snackbar/useSnackbar.tsx
-import { useCallback as useCallback33, useEffect as useEffect37 } from "react";
+import { useCallback as useCallback34, useEffect as useEffect37 } from "react";
 function useSnackbar() {
   const { setNotices, setOffset } = useSnackbarContext();
-  const onClose = useCallback33(
+  const onClose = useCallback34(
     (noticeId) => {
       setNotices((prev) => {
         let returnValue = prev;
@@ -22651,7 +22705,7 @@ function useSnackbar() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const triggerNotice = useCallback33(
+  const triggerNotice = useCallback34(
     (props) => {
       const noticeId = props.id ?? `beamSnackbar:${snackbarId++}`;
       let maybeTimeout;
@@ -22680,7 +22734,7 @@ function useSnackbar() {
     },
     [onClose, setNotices]
   );
-  const closeNotice = useCallback33((id) => onClose(id), [onClose]);
+  const closeNotice = useCallback34((id) => onClose(id), [onClose]);
   const useSnackbarOffset = ({ bottom }) => useEffect37(() => {
     setOffset({ bottom });
     return () => setOffset({});
@@ -22692,7 +22746,7 @@ var snackbarId = 1;
 // src/components/Stepper.tsx
 import { useRef as useRef59 } from "react";
 import { useButton as useButton12, useFocusRing as useFocusRing16, useHover as useHover20 } from "react-aria";
-import { trussProps as trussProps93, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
+import { trussProps as trussProps94, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
 import { jsx as jsx180, jsxs as jsxs94 } from "react/jsx-runtime";
 import { createElement as createElement4 } from "react";
 var __maybeInc19 = (inc) => {
@@ -22713,7 +22767,7 @@ function Stepper(props) {
   const minStepWidth = 100;
   const gap = 8;
   return /* @__PURE__ */ jsxs94("nav", { "aria-label": "steps", className: "df fdc w100", ...tid, children: [
-    /* @__PURE__ */ jsx180("ol", { ...trussProps93({
+    /* @__PURE__ */ jsx180("ol", { ...trussProps94({
       padding: "p_0",
       margin: "m_0",
       listStyle: "lis_none",
@@ -22723,7 +22777,7 @@ function Stepper(props) {
       }]
     }), children: steps.map((step) => {
       const isCurrent = currentStep === step.value;
-      return /* @__PURE__ */ createElement4("li", { ...trussProps93({
+      return /* @__PURE__ */ createElement4("li", { ...trussProps94({
         display: "df",
         flexGrow: "fg1",
         flexDirection: "fdc",
@@ -22735,7 +22789,7 @@ function Stepper(props) {
         }]
       }), key: step.label, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx180(StepButton, { ...step, onClick: () => onChange(step.value), isCurrent, ...tid.stepButton }));
     }) }),
-    /* @__PURE__ */ jsx180("div", { ...trussProps93({
+    /* @__PURE__ */ jsx180("div", { ...trussProps94({
       marginTop: "mt1",
       backgroundColor: "bgGray300",
       height: "h_4px",
@@ -22746,7 +22800,7 @@ function Stepper(props) {
         "--minWidth": `${steps.length * minStepWidth + (steps.length - 1) * gap}px`
       }],
       width: "w100"
-    }), children: /* @__PURE__ */ jsx180("div", { ...trussProps93({
+    }), children: /* @__PURE__ */ jsx180("div", { ...trussProps94({
       backgroundColor: "bgBlue600",
       transition: "transition_width_200ms",
       height: "h100",
@@ -22787,7 +22841,7 @@ function StepButton(props) {
     boxShadow: "bshFocus"
   };
   const tid = useTestIds(props, "stepButton");
-  return /* @__PURE__ */ jsxs94("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps93({
+  return /* @__PURE__ */ jsxs94("button", { ref, ...buttonProps, ...focusProps, ...hoverProps, ...trussProps94({
     ...{
       fontWeight: "fw6",
       fontSize: "fz_14px",
@@ -22855,7 +22909,7 @@ function StepIcon({
   if (state === "complete") {
     return /* @__PURE__ */ jsx180(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ jsx180("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx180("div", { ...trussProps93({
+  return /* @__PURE__ */ jsx180("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ jsx180("div", { ...trussProps94({
     width: "w_10px",
     height: "h_10px",
     borderStyle: "bss",
@@ -22870,7 +22924,7 @@ function StepIcon({
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
 import { createPortal as createPortal7 } from "react-dom";
-import { trussProps as trussProps94 } from "@homebound/truss/runtime";
+import { trussProps as trussProps95 } from "@homebound/truss/runtime";
 import { jsx as jsx181, jsxs as jsxs95 } from "react/jsx-runtime";
 function SuperDrawerHeader(props) {
   const {
@@ -22896,7 +22950,7 @@ function SuperDrawerHeader(props) {
       ] }),
       props.right && /* @__PURE__ */ jsx181("div", { className: "fs0", children: props.right })
     ] }) : /* @__PURE__ */ jsx181("div", { className: "fg1", children: props.children }),
-    !hideControls && /* @__PURE__ */ jsx181("div", { ...trussProps94({
+    !hideControls && /* @__PURE__ */ jsx181("div", { ...trussProps95({
       flexShrink: "fs0",
       ...isDetail ? {
         visibility: "vh"
@@ -23161,15 +23215,15 @@ function visit(rows, fn) {
 }
 
 // src/components/Toast/useToast.tsx
-import { useCallback as useCallback34 } from "react";
+import { useCallback as useCallback35 } from "react";
 function useToast() {
   const { setNotice, clear } = useToastContext();
-  const showToast = useCallback34((props) => setNotice(props), [setNotice]);
+  const showToast = useCallback35((props) => setNotice(props), [setNotice]);
   return { showToast, clear };
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps95, mergeProps as mergeProps29, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
+import { trussProps as trussProps96, mergeProps as mergeProps29, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
 import { jsx as jsx185, jsxs as jsxs98 } from "react/jsx-runtime";
 var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -23199,7 +23253,7 @@ function SideNavLayoutContent(props) {
   const railOffsetPx = !showRail ? 0 : !bp.mdAndUp || collapsed ? railCollapsedWidthPx : railWidthPx;
   const navTop = `var(${beamNavbarLayoutHeightVar}, 0px)`;
   const railViewportHeight = `calc(var(${beamLayoutViewportHeightVar}, 100vh) - var(${beamNavbarLayoutHeightVar}, 0px))`;
-  const rail = showRail && /* @__PURE__ */ jsxs98("div", { ...trussProps95({
+  const rail = showRail && /* @__PURE__ */ jsxs98("div", { ...trussProps96({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -23267,7 +23321,7 @@ function SideNavLayoutContent(props) {
     width: "w100"
   }), ...tid, children: [
     contrastRail ? /* @__PURE__ */ jsx185(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ jsx185("div", { ...trussProps95({
+    /* @__PURE__ */ jsx185("div", { ...trussProps96({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -23287,7 +23341,7 @@ import { useMemo as useMemo53, useRef as useRef61 } from "react";
 import { mergeProps as mergeProps30, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
-import { useLayoutEffect as useLayoutEffect6, useRef as useRef60, useState as useState55 } from "react";
+import { useLayoutEffect as useLayoutEffect6, useRef as useRef60, useState as useState56 } from "react";
 var THRESHOLD = 80;
 function getInitialAutoHideState() {
   if (typeof window === "undefined" || window.scrollY <= 0) {
@@ -23297,9 +23351,9 @@ function getInitialAutoHideState() {
 }
 function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
   const initial = getInitialAutoHideState();
-  const [state, setState] = useState55(initial.state);
+  const [state, setState] = useState56(initial.state);
   const stateRef = useRef60(initial.state);
-  const [atTop, setAtTop] = useState55(initial.atTop);
+  const [atTop, setAtTop] = useState56(initial.atTop);
   const atTopRef = useRef60(initial.atTop);
   const getTopOffsetRef = useRef60(getTopOffset);
   getTopOffsetRef.current = getTopOffset;
@@ -23378,10 +23432,10 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 
 // src/layouts/useMeasuredHeight.ts
 import { useResizeObserver as useResizeObserver10 } from "@react-aria/utils";
-import { useCallback as useCallback35, useLayoutEffect as useLayoutEffect7, useState as useState56 } from "react";
+import { useCallback as useCallback36, useLayoutEffect as useLayoutEffect7, useState as useState57 } from "react";
 function useMeasuredHeight(ref, enabled) {
-  const [height, setHeight] = useState56(0);
-  const syncElementHeight = useCallback35(() => {
+  const [height, setHeight] = useState57(0);
+  const syncElementHeight = useCallback36(() => {
     const el = ref.current;
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
@@ -23475,7 +23529,7 @@ function NavbarLayout(props) {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { useCallback as useCallback36, useMemo as useMemo54, useRef as useRef62 } from "react";
+import { useCallback as useCallback37, useMemo as useMemo54, useRef as useRef62 } from "react";
 import { mergeProps as mergeProps31, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
 import { jsx as jsx188, jsxs as jsxs100 } from "react/jsx-runtime";
 var __maybeInc22 = (inc) => {
@@ -23490,7 +23544,7 @@ function PageHeaderLayout(props) {
   const navbarHeight = useNavbarLayoutHeight();
   const navbarHeightRef = useRef62(navbarHeight);
   navbarHeightRef.current = navbarHeight;
-  const getNavbarBottom = useCallback36(() => navbarHeightRef.current, []);
+  const getNavbarBottom = useCallback37(() => navbarHeightRef.current, []);
   const headerMetricsRef = useRef62(null);
   const spacerRef = useRef62(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);