@homebound/beam 3.20.0 → 3.21.0

package/dist/index.js

@@ -5447,7 +5447,12 @@ var iconButtonOutline = {
   borderRadius: "br8",
   width: "w_48px",
   height: "h_40px",
-  borderColor: "bcGray300",
+  backgroundColor: ["bgColor_var", {
+    "--backgroundColor": "var(--b-surface)"
+  }],
+  borderColor: ["bc_var", {
+    "--borderColor": "var(--b-surface-separator)"
+  }],
   borderStyle: "bss",
   borderWidth: "bw1",
   display: "df",
@@ -19593,24 +19598,11 @@ function FilterDropdownMenu(props) {
         opacity: "o0"
       } : {}
     }), children: searchTextField }),
-    sm && hasSearch && /* @__PURE__ */ jsx141(Button, { label: "", "aria-label": "Search", icon: "search", onClick: () => setSearchIsOpen(!searchIsOpen), active: searchIsOpen, variant: "secondaryBlack", ...testId.searchButton }),
-    hasFilters && /* @__PURE__ */ jsx141(Button, { label: sm ? "" : "Filter", "aria-label": "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ jsxs70("div", { className: "df aic gap1", children: [
+    sm && hasSearch && /* @__PURE__ */ jsx141(IconButton, { variant: "outline", icon: "search", label: "Search", onClick: () => setSearchIsOpen(!searchIsOpen), active: searchIsOpen, ...testId.searchButton }),
+    sm && hasFilters && /* @__PURE__ */ jsx141(IconButton, { variant: "outline", icon: "filter", label: "Filter", active: isOpen, onClick: () => setIsOpen(!isOpen), ...testId.button }),
+    !sm && hasFilters && /* @__PURE__ */ jsx141(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ jsxs70("div", { className: "df aic gap1", children: [
       activeFilterCount > 0 && /* @__PURE__ */ jsx141(CountBadge, { count: activeFilterCount }),
-      /* @__PURE__ */ jsx141(Icon, { xss: {
-        ...sm ? {
-          position: "absolute",
-          overflow: "oh",
-          clip: "cli_inset_50",
-          clipPath: "clp_none",
-          border: "bd_0",
-          height: "h_1px",
-          margin: "m_neg1px",
-          width: "w_1px",
-          padding: "p_0",
-          whiteSpace: "wsnw",
-          opacity: "o0"
-        } : {}
-      }, icon: isOpen ? "chevronUp" : "chevronDown" })
+      /* @__PURE__ */ jsx141(Icon, { icon: isOpen ? "chevronUp" : "chevronDown" })
     ] }), variant: "secondaryBlack", onClick: () => setIsOpen(!isOpen), active: isOpen, ...testId.button }),
     searchIsOpen && /* @__PURE__ */ jsx141("div", { ...trussProps69({
       width: "w100",
@@ -19748,13 +19740,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 +19758,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 +19777,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 +19834,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 +19842,7 @@ function TableActions(props) {
     children,
     right
   } = props;
-  return /* @__PURE__ */ jsxs73("div", { ...trussProps70({
+  return /* @__PURE__ */ jsxs73("div", { ...trussProps71({
     ...{
       display: "df",
       gap: "gap1",
@@ -19848,7 +19866,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 +19879,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 +19890,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",
@@ -19946,7 +19964,7 @@ function parseStoredTableView(raw) {
 }
 
 // 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})`;
@@ -19990,12 +20008,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",
@@ -20015,7 +20028,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",
@@ -20147,7 +20160,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",
@@ -20226,7 +20239,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})`;
@@ -20246,7 +20259,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)`))
@@ -20271,7 +20284,7 @@ function RightPaneLayout(props) {
         } : {}
       }
     }), children }),
-    /* @__PURE__ */ jsxs76("div", { ...trussProps73({
+    /* @__PURE__ */ jsxs76("div", { ...trussProps74({
       position: "relative",
       ...!!defaultPaneContent ? {
         width: ["w_var", {
@@ -20279,7 +20292,7 @@ function RightPaneLayout(props) {
         }]
       } : {}
     }), children: [
-      defaultPaneContent && /* @__PURE__ */ jsx151("div", { ...trussProps73({
+      defaultPaneContent && /* @__PURE__ */ jsx151("div", { ...trussProps74({
         height: "h100",
         width: ["w_var", {
           "--width": `${paneWidth}px`
@@ -20297,7 +20310,7 @@ function RightPaneLayout(props) {
         {
           layout: "position",
           "data-testid": "rightPaneContent",
-          ...trussProps73({
+          ...trussProps74({
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": maybeCssVar42(paneBgColor)
             }],
@@ -20380,7 +20393,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) {
@@ -20422,7 +20435,7 @@ function TableReviewLayout(props) {
       bordered: true
     }, stickyHeader: true });
   }
-  return /* @__PURE__ */ jsxs78("div", { ...trussProps74({
+  return /* @__PURE__ */ jsxs78("div", { ...trussProps75({
     position: "fixed",
     top: "top0",
     bottom: "bottom0",
@@ -20447,7 +20460,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",
@@ -20470,7 +20483,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`
@@ -20593,7 +20606,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 {
@@ -20604,7 +20617,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"
@@ -20653,10 +20666,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",
@@ -20763,7 +20776,7 @@ 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 useState48 } from "react";
-import { trussProps as trussProps76 } from "@homebound/truss/runtime";
+import { trussProps as trussProps77 } from "@homebound/truss/runtime";
 import { jsx as jsx158, jsxs as jsxs81 } from "react/jsx-runtime";
 function Tag(props) {
   const {
@@ -20787,7 +20800,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",
@@ -20837,7 +20850,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 {
@@ -20868,8 +20881,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`
@@ -20886,14 +20899,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",
@@ -20909,7 +20922,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",
@@ -20999,7 +21012,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 {
@@ -21182,7 +21195,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"
@@ -21195,7 +21208,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 {
@@ -21225,7 +21238,7 @@ function DnDGridItemHandle(props) {
     borderRadius: "br4",
     borderWidth: "bw1"
   };
-  return /* @__PURE__ */ jsx162("button", { ...trussProps79({
+  return /* @__PURE__ */ jsx162("button", { ...trussProps80({
     ...compact ? iconButtonCompact2 : iconButtonNormal2,
     ...{
       cursor: "cursor_grab",
@@ -21287,7 +21300,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 {
@@ -21308,12 +21321,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 {
@@ -21326,7 +21339,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
@@ -21477,7 +21490,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})`;
@@ -21488,7 +21501,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)
     }],
@@ -21504,7 +21517,7 @@ function HomeboundLogo(props) {
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect5, useResizeObserver as useResizeObserver7 } from "@react-aria/utils";
 import { useCallback as useCallback29, useEffect as useEffect32, useRef as useRef54, useState as useState49 } from "react";
-import { trussProps as trussProps83, maybeCssVar as maybeCssVar47 } from "@homebound/truss/runtime";
+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,
@@ -21529,7 +21542,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)
@@ -21555,7 +21568,7 @@ import { useCallback as useCallback31, useEffect as useEffect33, useMemo as useM
 // 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 {
@@ -21599,7 +21612,7 @@ function AppNavGroupTrigger(props) {
     })
   }), children: [
     label,
-    /* @__PURE__ */ jsx168("span", { ...trussProps84({
+    /* @__PURE__ */ jsx168("span", { ...trussProps85({
       ...{
         display: "df",
         alignItems: "aic",
@@ -21752,7 +21765,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})`;
@@ -21797,7 +21810,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", {
@@ -21829,7 +21842,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 {
@@ -21855,7 +21868,7 @@ function AppNavSectionView(props) {
       "--borderColor": "var(--b-surface-separator)"
     }]
   };
-  return /* @__PURE__ */ jsxs87("div", { ...trussProps86({
+  return /* @__PURE__ */ jsxs87("div", { ...trussProps87({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -21863,7 +21876,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",
@@ -21931,7 +21944,7 @@ 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 {
@@ -21961,7 +21974,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",
@@ -21981,7 +21994,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",
@@ -22026,7 +22039,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 {
@@ -22046,7 +22059,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",
@@ -22066,7 +22079,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"
@@ -22075,7 +22088,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",
@@ -22110,7 +22123,7 @@ import { useEffect as useEffect35, useMemo as useMemo49, useRef as useRef56, use
 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) ? {} : {
@@ -22143,7 +22156,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) {
@@ -22185,7 +22198,7 @@ function Tabs(props) {
       setActive(selected);
     }
   }
-  return /* @__PURE__ */ jsxs90("div", { ...trussProps89({
+  return /* @__PURE__ */ jsxs90("div", { ...trussProps90({
     ...{
       display: "df",
       alignItems: "aic",
@@ -22249,7 +22262,7 @@ function TabImpl(props) {
     role: "tab",
     tabIndex: active ? 0 : -1,
     ...others,
-    ...trussProps89({
+    ...trussProps90({
       ...baseStyles5,
       ...active && activeStyles3,
       ...isDisabled && disabledStyles4,
@@ -22370,7 +22383,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 {
@@ -22380,7 +22393,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",
@@ -22406,7 +22419,7 @@ function PageHeader2(props) {
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
 import { useCallback as useCallback32, useMemo as useMemo50, useRef as useRef57, useState as useState54 } from "react";
-import { trussProps as trussProps91, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
+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 {
@@ -22497,7 +22510,7 @@ function ScrollShadows(props) {
     ref: scrollRef,
     onResize
   });
-  return /* @__PURE__ */ jsxs92("div", { ...trussProps91({
+  return /* @__PURE__ */ jsxs92("div", { ...trussProps92({
     display: "df",
     flexDirection: ["fd_var", {
       "--flexDirection": maybeCssVar51(!horizontal ? "column" : "row")
@@ -22513,7 +22526,7 @@ function ScrollShadows(props) {
       width: width2
     }
   }), ...tid, children: [
-    /* @__PURE__ */ jsx177("div", { ...trussProps91({
+    /* @__PURE__ */ jsx177("div", { ...trussProps92({
       ...startShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -22521,7 +22534,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx177("div", { ...trussProps91({
+    /* @__PURE__ */ jsx177("div", { ...trussProps92({
       ...endShadowStyles,
       ...{
         opacity: ["o_var", {
@@ -22529,7 +22542,7 @@ function ScrollShadows(props) {
         }]
       }
     }), "data-chromatic": "ignore" }),
-    /* @__PURE__ */ jsx177("div", { ...trussProps91({
+    /* @__PURE__ */ jsx177("div", { ...trussProps92({
       ...xss,
       ...{
         overflow: "oa",
@@ -22609,7 +22622,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 {
@@ -22624,7 +22637,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",
@@ -22635,7 +22648,7 @@ function SideNav(props) {
         paddingBottom: "pb4"
       } : {}
     }), ...tid.top, children: top }),
-    /* @__PURE__ */ jsx179("div", { ...trussProps92({
+    /* @__PURE__ */ jsx179("div", { ...trussProps93({
       flexGrow: "fg1",
       overflowY: "oya",
       display: "df",
@@ -22648,7 +22661,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",
@@ -22725,7 +22738,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) => {
@@ -22746,7 +22759,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",
@@ -22756,7 +22769,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",
@@ -22768,7 +22781,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",
@@ -22779,7 +22792,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",
@@ -22820,7 +22833,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",
@@ -22888,7 +22901,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",
@@ -22903,7 +22916,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 {
@@ -22929,7 +22942,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"
@@ -23202,7 +23215,7 @@ function useToast() {
 }
 
 // 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})`;
@@ -23232,7 +23245,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",
@@ -23300,7 +23313,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",