@homebound/beam 2.417.6 → 2.417.8

package/dist/index.cjs

@@ -4351,6 +4351,31 @@ var import_react_dom = require("react-dom");
 var import_react_popper = require("react-popper");
 var import_react_stately = require("react-stately");
 
+// src/utils/inlineStyles.ts
+function isInlineStyleValue(value) {
+  return typeof value === "string" || typeof value === "number";
+}
+function setInlineStyles(el, styles) {
+  Object.entries(styles).forEach(([prop, value]) => {
+    if (!isInlineStyleValue(value)) return;
+    if (prop.startsWith("--")) {
+      el.style.setProperty(prop, String(value));
+    } else {
+      el.style[prop] = String(value);
+    }
+  });
+}
+function clearInlineStyles(el, styles) {
+  Object.entries(styles).forEach(([prop, value]) => {
+    if (!isInlineStyleValue(value)) return;
+    if (prop.startsWith("--")) {
+      el.style.removeProperty(prop);
+    } else {
+      el.style[prop] = "";
+    }
+  });
+}
+
 // src/utils/defaultTestId.ts
 var import_change_case = require("change-case");
 function defaultTestId(label) {
@@ -4535,11 +4560,7 @@ var Icon = import_react4.default.memo((props) => {
         viewBox: "0 0 24 24",
         xmlns: "http://www.w3.org/2000/svg",
         css: {
-          // Spread these in b/c they don't type-check for some reason...
-          ...{
-            "& > path": Css.fill(color).$,
-            "& > rect": Css.fill(color).$
-          },
+          ...Css.fill(color).$,
           ...bgColor && Css.bgColor(bgColor).$,
           ...xss
         },
@@ -5123,20 +5144,8 @@ var Icons = {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7.43848 0.0527344C8.92278 0.0527344 10.1259 1.25595 10.126 2.74023C10.126 4.22459 8.78231 5.87619 7.43848 7.66797C6.09464 5.87619 4.75098 4.22459 4.75098 2.74023C4.75107 1.25601 5.95425 0.0528239 7.43848 0.0527344ZM7.4375 1.84473C6.94279 1.84478 6.54203 2.24552 6.54199 2.74023C6.54199 3.23499 6.94276 3.63569 7.4375 3.63574C7.93229 3.63574 8.33301 3.23502 8.33301 2.74023C8.33296 2.24549 7.93226 1.84473 7.4375 1.84473Z" })
   ] }),
   buildings: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "path",
-      {
-        d: "M14.1787 3.58594V23.6494H0V3.60449L7.08887 0.347656L14.1787 3.58594ZM3.42285 20.2275H5.86719V17.7832H3.42285V20.2275ZM8.31348 17.7832V20.2275H10.7578V17.7832H8.31348ZM3.42285 16.3174H5.86719V13.873H3.42285V16.3174ZM8.31348 16.3174H10.7578V13.873H8.31348V16.3174ZM3.42285 12.4062H5.86719V9.96191H3.42285V12.4062ZM8.31348 12.4062H10.7578V9.96191H8.31348V12.4062ZM3.42285 8.49414H5.86719V6.0498H3.42285V8.49414ZM8.31348 8.49414H10.7578V6.0498H8.31348V8.49414Z",
-        fill: "#8D8D8D"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "path",
-      {
-        d: "M22 23.6523H15.6445V8.00684H22V23.6523ZM17.5996 18.7617V21.2061H20.0439V18.7617H17.5996ZM17.5996 17.2959H20.0439V14.8516H17.5996V17.2959ZM17.5996 13.3828H20.0439V10.9385H17.5996V13.3828Z",
-        fill: "#8D8D8D"
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14.1787 3.58594V23.6494H0V3.60449L7.08887 0.347656L14.1787 3.58594ZM3.42285 20.2275H5.86719V17.7832H3.42285V20.2275ZM8.31348 17.7832V20.2275H10.7578V17.7832H8.31348ZM3.42285 16.3174H5.86719V13.873H3.42285V16.3174ZM8.31348 16.3174H10.7578V13.873H8.31348V16.3174ZM3.42285 12.4062H5.86719V9.96191H3.42285V12.4062ZM8.31348 12.4062H10.7578V9.96191H8.31348V12.4062ZM3.42285 8.49414H5.86719V6.0498H3.42285V8.49414ZM8.31348 8.49414H10.7578V6.0498H8.31348V8.49414Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M22 23.6523H15.6445V8.00684H22V23.6523ZM17.5996 18.7617V21.2061H20.0439V18.7617H17.5996ZM17.5996 17.2959H20.0439V14.8516H17.5996V17.2959ZM17.5996 13.3828H20.0439V10.9385H17.5996V13.3828Z" })
   ] }),
   community: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M6.41018 0.520509C6.61589 0.334405 6.93017 0.334214 7.13576 0.520509L11.1797 4.20899C11.1553 4.22924 11.1302 4.24904 11.1065 4.27051L11.1016 4.27539L7.85549 7.23535V6.22266H5.69045V8.96289C5.69045 9.2644 5.44619 9.51172 5.14846 9.51172H3.52444C3.22683 9.51157 2.98342 9.26431 2.98342 8.96289V5.12598H2.0635C1.81449 5.12598 1.70074 4.8129 1.88479 4.64844L6.41018 0.520509ZM10.5615 8.96289C10.5615 9.2644 10.3183 9.51172 10.0205 9.51172H8.39651C8.24437 9.51169 8.10738 9.44603 8.00881 9.34277L10.5615 7.01465V8.96289Z" }),
@@ -6824,13 +6833,13 @@ function AvatarButton(props) {
     menuTriggerProps,
     openInNew,
     forceFocusStyles = false,
-    forcePressedStyles = false,
+    __storyState,
     ...avatarProps
   } = props;
   const isDisabled = !!disabled;
   const ariaProps = { onPress, isDisabled, autoFocus, ...menuTriggerProps };
   const ref = useGetRef(buttonRef);
-  const { buttonProps, isPressed } = (0, import_react_aria6.useButton)(
+  const { buttonProps, isPressed: isPressedFromEvents } = (0, import_react_aria6.useButton)(
     {
       ...ariaProps,
       onPress: typeof onPress === "string" ? noop : onPress,
@@ -6838,8 +6847,11 @@ function AvatarButton(props) {
     },
     ref
   );
-  const { focusProps, isFocusVisible } = (0, import_react_aria6.useFocusRing)(ariaProps);
-  const { hoverProps, isHovered } = (0, import_react_aria6.useHover)(ariaProps);
+  const { focusProps, isFocusVisible: isFocusVisibleFromEvents } = (0, import_react_aria6.useFocusRing)(ariaProps);
+  const { hoverProps, isHovered: isHoveredFromEvents } = (0, import_react_aria6.useHover)(ariaProps);
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
+  const isPressed = __storyState?.pressed ?? isPressedFromEvents;
   const tid = useTestIds(props, avatarProps.name);
   const styles = (0, import_react22.useMemo)(
     () => ({
@@ -6862,7 +6874,7 @@ function AvatarButton(props) {
   };
   const content = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Avatar, { ...avatarProps, ...tid, disableTooltip: true }),
-    (isPressed || forcePressedStyles) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { css: pressedOverlayCss })
+    isPressed && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { css: pressedOverlayCss })
   ] });
   return maybeTooltip({
     // Default the tooltip to the avatar's name, if defined.
@@ -7525,21 +7537,19 @@ function memoizedTableStyles() {
         cellCss: {
           ...Css[cellTypography].gray900.bgWhite.ai(alignItems).pxPx(12).boxShadow(`inset 0 -1px 0 ${"rgba(236, 235, 235, 1)" /* Gray200 */}`).$,
           ...rowHeight === "flexible" ? Css.pyPx(12).$ : Css.wsnw.hPx(inlineEditing ? 48 : 36).$,
-          ...cellHighlight ? { "&:hover": Css.bgGray100.$ } : {},
-          ...bordered && { "&:first-child": Css.bl.bcGray200.$, "&:last-child": Css.br.bcGray200.$ }
-        },
-        firstRowCss: {
-          ...Css.addIn("& > *:first-of-type", Css.borderRadius("8px 0 0 0 ").$).addIn(
-            "& > *:last-of-type",
-            Css.borderRadius("0 8px 0 0").$
-          ).$,
-          ...bordered && Css.addIn("& > *", Css.bt.bcGray200.$).$
+          ...cellHighlight ? { "&:hover": Css.bgGray100.$ } : {}
         },
-        // Only apply border radius styles to the last row when using the `bordered` style table.
-        lastRowCss: bordered ? Css.addIn("& > *:first-of-type", Css.borderRadius("0 0 0 8px").$).addIn(
-          "& > *:last-of-type",
-          Css.borderRadius("0 0 8px 0").$
-        ).$ : Css.addIn("> *", Css.bsh0.$).$,
+        firstCellCss: bordered ? Css.bl.bcGray200.$ : void 0,
+        lastCellCss: bordered ? Css.br.bcGray200.$ : void 0,
+        firstRowCellCss: bordered ? Css.bt.bcGray200.$ : void 0,
+        firstRowFirstCellCss: Css.borderRadius("8px 0 0 0 ").$,
+        firstRowLastCellCss: Css.borderRadius("0 8px 0 0").$,
+        // Keep `betweenRowsCss` on all body rows, but on the final body row
+        // remove the inset shadow and, when bordered, replace it with a true bottom border.
+        lastRowCellCss: bordered ? Css.bsh0.bb.bcGray200.$ : Css.bsh0.$,
+        // Only apply bottom corner radii to the final body-row cells when using `bordered`.
+        lastRowFirstCellCss: bordered ? Css.borderRadius("0 0 0 8px").$ : void 0,
+        lastRowLastCellCss: bordered ? Css.borderRadius("0 0 8px 0").$ : void 0,
         presentationSettings: {
           borderless: true,
           typeScale: "xs",
@@ -7558,6 +7568,7 @@ function memoizedTableStyles() {
 var getTableStyles = memoizedTableStyles();
 var totalsRowHeight = 40;
 var expandableHeaderRowHeight = 40;
+var tableRowPrintBreakCss = Css.add("pageBreakAfter", "auto").add("pageBreakInside", "avoid").$;
 var defaultStyle = getTableStyles({});
 var condensedStyle = {
   ...getTableStyles({ rowHeight: "fixed" }),
@@ -7826,10 +7837,10 @@ function applyRowFn(column2, row, api, level, expanded, dragData) {
 var ASC = "ASC";
 var DESC = "DESC";
 var emptyCell = { content: () => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, {}), value: "" };
-function getFirstOrLastCellCss(style, columnIndex, columns) {
+function getFirstOrLastCellCss(style, columnIndex, columns, colspan = 1) {
   return {
     ...columnIndex === 0 ? style.firstCellCss : {},
-    ...columnIndex === columns.length - 1 ? style.lastCellCss : {}
+    ...columnIndex + colspan >= columns.length ? style.lastCellCss : {}
   };
 }
 function isJSX(content) {
@@ -8220,7 +8231,7 @@ function ColumnResizeHandle({
 var import_react32 = require("react");
 var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
 function KeptGroupRow(props) {
-  const { as, columnSizes, style, row, colSpan } = props;
+  const { as, columnSizes, style, row, colSpan, isLastBodyRow } = props;
   const CellTag = as === "table" ? "td" : "div";
   const { tableState } = (0, import_react32.useContext)(TableStateContext);
   const numHiddenSelectedRows = useComputed(() => tableState.keptRows.length, [tableState]);
@@ -8229,6 +8240,10 @@ function KeptGroupRow(props) {
     {
       css: {
         ...style.cellCss,
+        ...style.betweenRowsCss,
+        ...isLastBodyRow && style.lastRowCellCss,
+        ...isLastBodyRow && style.lastRowFirstCellCss,
+        ...isLastBodyRow && style.lastRowLastCellCss,
         ...style.keptGroupRowCss,
         ...Css.pl0.w(`calc(${columnSizes.join(" + ")})`).$
       },
@@ -8543,6 +8558,9 @@ function RowImpl(props) {
     cellHighlight,
     omitRowHover,
     hasExpandableHeader,
+    isFirstHeadRow,
+    isFirstBodyRow,
+    isLastBodyRow,
     resizedWidths,
     setResizedWidth,
     disableColumnResizing = true,
@@ -8561,6 +8579,8 @@ function RowImpl(props) {
   const isTotals = row.kind === TOTALS;
   const isExpandableHeader = row.kind === EXPANDABLE_HEADER;
   const isKeptGroupRow = row.kind === KEPT_GROUP;
+  const isBodyRow = !isHeader && !isTotals && !isExpandableHeader;
+  const isFirstHeadCellRow = isExpandableHeader || !hasExpandableHeader && (isHeader || isTotals);
   const rowStyle = rowStyles?.[row.kind];
   const RowTag = as === "table" ? "tr" : "div";
   const sortOn = tableState.sortConfig?.on;
@@ -8576,6 +8596,9 @@ function RowImpl(props) {
   };
   const rowCss = {
     ...!reservedRowKinds.includes(row.kind) && style.nonHeaderRowCss,
+    ...isFirstBodyRow && style.firstBodyRowCss,
+    ...isFirstHeadRow && style.firstRowCss,
+    ...as === "table" && tableRowPrintBreakCss,
     // Optionally include the row hover styles, by default they should be turned on.
     ...showRowHoverColor && {
       // Even though backgroundColor is set on the cellCss, the hover target is the row.
@@ -8588,6 +8611,7 @@ function RowImpl(props) {
     ...levelIndent && Css.mlPx(levelIndent).$,
     // For virtual tables use `display: flex` to keep all cells on the same row.
     ...as === "table" ? {} : Css.relative.df.fg1.fs1.$,
+    ...isLastBodyRow && style.lastRowCss,
     // Apply `cursorPointer` to the row if it has a link or `onClick` value.
     ...(rowStyle?.rowLink || rowStyle?.onClick) && { "&:hover": Css.cursorPointer.$ },
     ...maybeApplyFunction(row, rowStyle?.rowCss),
@@ -8608,7 +8632,17 @@ function RowImpl(props) {
     [onDragOver]
   );
   const onDragOverDebounced = (0, import_use_debounce4.useDebouncedCallback)(dragOverCallback, 100);
-  const RowContent = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RowTag, { css: rowCss, ...others, "data-gridrow": true, ...getCount(row.id), ref, className: BorderHoverParent, children: isKeptGroupRow ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length }) : columns.map((column2, columnIndex) => {
+  const RowContent = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RowTag, { css: rowCss, ...others, "data-gridrow": true, ...getCount(row.id), ref, className: BorderHoverParent, children: isKeptGroupRow ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    KeptGroupRow,
+    {
+      as,
+      style,
+      columnSizes,
+      row,
+      colSpan: columns.length,
+      isLastBodyRow
+    }
+  ) : columns.map((column2, columnIndex) => {
     const maybeExpandedColumn = expandColumnHidden ? columns[columnIndex - 1] : column2;
     const isExpanded = tableState.isExpandedColumn(maybeExpandedColumn.id);
     if (column2.hideOnExpand && isExpanded) {
@@ -8692,8 +8726,16 @@ function RowImpl(props) {
       ...maybeStickyColumnStyles,
       // Apply any static/all-cell styling
       ...style.cellCss,
+      // Apply between-row cell styling for body rows.
+      ...isBodyRow && style.betweenRowsCss,
+      ...isFirstHeadCellRow && style.firstRowCellCss,
+      ...isLastBodyRow && style.lastRowCellCss,
       // Then override with first/last cell styling
-      ...getFirstOrLastCellCss(style, columnIndex, columns),
+      ...getFirstOrLastCellCss(style, columnIndex, columns, currentColspan),
+      ...columnIndex === 0 && isFirstHeadCellRow && style.firstRowFirstCellCss,
+      ...columnIndex === columns.length - 1 && isFirstHeadCellRow && style.firstRowLastCellCss,
+      ...columnIndex === 0 && isLastBodyRow && style.lastRowFirstCellCss,
+      ...columnIndex === columns.length - 1 && isLastBodyRow && style.lastRowLastCellCss,
       // Then override with per-cell/per-row justification
       ...justificationCss,
       // Then apply any header-specific override
@@ -8709,7 +8751,7 @@ function RowImpl(props) {
       // Only apply if not the last column in the table AND when this column is the last column in the group of expandable column or not expanded AND
       ...hasExpandableHeader && columnIndex + currentColspan < columns.length && (isHeader || isTotals) && currentExpandedColumnCount === 0 && Css.boxShadow(`inset -1px -1px 0 ${"rgba(236, 235, 235, 1)" /* Gray200 */}`).$,
       // Or level-specific styling
-      ...!isHeader && !isTotals && !isExpandableHeader && levelStyle?.cellCss,
+      ...isBodyRow && levelStyle?.cellCss,
       // Level specific styling for the first content column
       ...applyFirstContentColumnStyles && levelStyle?.firstContentColumn,
       // The specific cell's css (if any from GridCellContent)
@@ -8904,6 +8946,7 @@ function TextFieldBase(props) {
     },
     input: {
       ...Css.w100.mw0.outline0.fg1.bgTransparent.$,
+      // Keep `addIn` for `::selection` until we finish the StyleX migration.
       // Not using Truss's inline `if` statement here because `addIn` properties do not respect the if statement.
       ...contrast && !inputStylePalette && Css.addIn("&::selection", Css.bgGray800.$).$,
       // For "multiline" fields we add top and bottom padding of 7px for compact, or 11px for non-compact, to properly match the height of the single line fields
@@ -12526,6 +12569,7 @@ function Switch(props) {
     label,
     labelStyle = "inline",
     hideLabel = false,
+    __storyState,
     ...otherProps
   } = props;
   const isDisabled = !!disabled;
@@ -12533,8 +12577,10 @@ function Switch(props) {
   const state = toToggleState(isSelected, onChange);
   const ref = (0, import_react63.useRef)(null);
   const { inputProps } = (0, import_react_aria35.useSwitch)({ ...ariaProps, "aria-label": label }, state, ref);
-  const { isFocusVisible: isKeyboardFocus, focusProps } = (0, import_react_aria35.useFocusRing)(otherProps);
-  const { hoverProps, isHovered } = (0, import_react_aria35.useHover)(ariaProps);
+  const { isFocusVisible: isFocusVisibleFromEvents, focusProps } = (0, import_react_aria35.useFocusRing)(otherProps);
+  const { hoverProps, isHovered: isHoveredFromEvents } = (0, import_react_aria35.useHover)(ariaProps);
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
   const tooltip = resolveTooltip(disabled, props.tooltip);
   const tid = useTestIds(otherProps, label);
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
@@ -12567,7 +12613,7 @@ function Switch(props) {
             css: {
               ...Css.wPx(toggleWidth(compact)).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,
               ...isHovered && switchHoverStyles,
-              ...isKeyboardFocus && switchFocusStyles,
+              ...isFocusVisible && switchFocusStyles,
               ...isDisabled && Css.bgGray300.$,
               ...isSelected && Css.bgBlue700.$,
               ...isSelected && isHovered && switchSelectedHoverStyles
@@ -12734,7 +12780,7 @@ var import_react_aria38 = require("react-aria");
 var import_react_stately15 = require("react-stately");
 var import_jsx_runtime77 = require("@emotion/react/jsx-runtime");
 function ToggleButton(props) {
-  const { selected: isSelected = false, disabled = false, label, onChange, icon, ...otherProps } = props;
+  const { selected: isSelected = false, disabled = false, label, onChange, icon, __storyState, ...otherProps } = props;
   const [asyncInProgress, setAsyncInProgress] = (0, import_react66.useState)(false);
   const isDisabled = !!disabled || asyncInProgress;
   const ariaProps = { "aria-label": label, isSelected, isDisabled, ...otherProps };
@@ -12751,11 +12797,14 @@ function ToggleButton(props) {
   });
   const labelRef = (0, import_react66.useRef)(null);
   const ref = (0, import_react66.useRef)(null);
-  const tid = useTestIds(props, label);
-  const { isPressed, pressProps } = (0, import_react_aria38.usePress)({ ref: labelRef, isDisabled });
+  const tid = useTestIds(otherProps, label);
+  const { isPressed: isPressedFromEvents, pressProps } = (0, import_react_aria38.usePress)({ ref: labelRef, isDisabled });
   const { inputProps } = (0, import_react_aria38.useSwitch)(ariaProps, state, ref);
-  const { isFocusVisible: isKeyboardFocus, focusProps } = (0, import_react_aria38.useFocusRing)({ ...otherProps, within: true });
-  const { hoverProps, isHovered } = (0, import_react_aria38.useHover)({ isDisabled });
+  const { isFocusVisible: isFocusVisibleFromEvents, focusProps } = (0, import_react_aria38.useFocusRing)({ ...otherProps, within: true });
+  const { hoverProps, isHovered: isHoveredFromEvents } = (0, import_react_aria38.useHover)({ isDisabled });
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  const isPressed = __storyState?.pressed ?? isPressedFromEvents;
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const tooltip = resolveTooltip(disabled);
   const labelAttrs = {
     ...focusProps,
@@ -12766,7 +12815,7 @@ function ToggleButton(props) {
       ...isHovered && toggleHoverStyles,
       ...isPressed && togglePressStyles,
       ...isSelected && !isDisabled && Css.blue700.$,
-      ...isKeyboardFocus && toggleFocusStyles,
+      ...isFocusVisible && toggleFocusStyles,
       ...isDisabled && Css.gray300.cursorNotAllowed.$
     },
     ...tid
@@ -14138,7 +14187,25 @@ function GridTable(props) {
     let visibleDataRows2 = [];
     const { visibleRows } = tableState;
     const hasExpandableHeader = visibleRows.some((rs) => rs.row.id === EXPANDABLE_HEADER);
+    const bodyRowsCount = visibleRows.filter((rs) => ![HEADER, EXPANDABLE_HEADER, TOTALS].includes(rs.kind)).length;
+    const onlyKeptBodyRows = bodyRowsCount > 0 && visibleRows.every(
+      (rs) => (
+        // For our purposes, "body rows" are any non-header / non-totals rows.
+        [HEADER, EXPANDABLE_HEADER, TOTALS].includes(rs.kind) || rs.isKept || rs.kind === KEPT_GROUP
+      )
+    );
+    let bodyRowsSeen = 0;
+    let foundFirstBodyRow = false;
+    let foundFirstHeadRow = false;
     visibleRows.forEach((rs) => {
+      const isHeadRow = [HEADER, EXPANDABLE_HEADER, TOTALS].includes(rs.kind);
+      const isFirstHeadRow = isHeadRow && !foundFirstHeadRow;
+      const isBodyRow = ![HEADER, EXPANDABLE_HEADER, TOTALS].includes(rs.kind);
+      const isFirstBodyRow = isBodyRow && !foundFirstBodyRow;
+      if (isHeadRow) foundFirstHeadRow = true;
+      if (isBodyRow) bodyRowsSeen += 1;
+      if (isBodyRow) foundFirstBodyRow = true;
+      const isLastBodyRow = isBodyRow && bodyRowsSeen === bodyRowsCount && !onlyKeptBodyRows;
       const row = /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         Row,
         {
@@ -14157,6 +14224,9 @@ function GridTable(props) {
             cellHighlight: "cellHighlight" in maybeStyle && maybeStyle.cellHighlight === true,
             omitRowHover: "rowHover" in maybeStyle && maybeStyle.rowHover === false,
             hasExpandableHeader,
+            isFirstHeadRow,
+            isFirstBodyRow,
+            isLastBodyRow,
             resizedWidths,
             setResizedWidth: handleColumnResize,
             disableColumnResizing,
@@ -14255,27 +14325,30 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstR
           "div",
           {
             css: {
-              ...style.firstRowCss && Css.addIn("& > div:first-of-type", style.firstRowCss).$,
               ...Css.if(stickyHeader).sticky.topPx(stickyOffset).z(zIndices.stickyHeader).$
             },
             children: tableHeadRows
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
-          "div",
-          {
-            css: {
-              ...style.betweenRowsCss ? Css.addIn(`& > div > *`, style.betweenRowsCss).$ : {},
-              ...style.firstNonHeaderRowCss ? Css.addIn(`& > div:first-of-type`, style.firstNonHeaderRowCss).$ : {},
-              ...style.lastRowCss && Css.addIn("& > div:last-of-type", style.lastRowCss).$
-            },
-            children: [
-              keptSelectedRows,
-              firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { css: { ...style.firstRowMessageCss }, "data-gridrow": true, children: firstRowMessage }),
-              visibleDataRows
-            ]
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { children: [
+          keptSelectedRows,
+          firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+            "div",
+            {
+              css: {
+                ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
+                ...style.firstRowMessageCss,
+                ...visibleDataRows.length === 0 && style.lastRowCss,
+                ...visibleDataRows.length === 0 && style.lastRowCellCss,
+                ...visibleDataRows.length === 0 && style.lastRowFirstCellCss,
+                ...visibleDataRows.length === 0 && style.lastRowLastCellCss
+              },
+              "data-gridrow": true,
+              children: firstRowMessage
+            }
+          ),
+          visibleDataRows
+        ] })
       ]
     }
   );
@@ -14287,10 +14360,6 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firs
       ref: tableContainerRef,
       css: {
         ...Css.w100.add("borderCollapse", "separate").add("borderSpacing", "0").$,
-        ...Css.addIn("& tr ", { pageBreakAfter: "auto", pageBreakInside: "avoid" }).$,
-        ...Css.addIn("& > tbody > tr > * ", style.betweenRowsCss || {}).addIn("& > tbody > tr:first-of-type", style.firstNonHeaderRowCss || {}).$,
-        ...Css.addIn("& > tbody > tr:last-of-type", style.lastRowCss).$,
-        ...Css.addIn("& > thead > tr:first-of-type", style.firstRowCss).$,
         ...style.rootCss,
         ...style.minWidthPx ? Css.mwPx(style.minWidthPx).$ : {},
         ...xss
@@ -14300,7 +14369,30 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firs
         /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("thead", { css: Css.if(stickyHeader).sticky.topPx(stickyOffset).z(zIndices.stickyHeader).$, children: tableHeadRows }),
         /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("tbody", { children: [
           keptSelectedRows,
-          firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("td", { colSpan: columns.length, css: { ...style.firstRowMessageCss }, children: firstRowMessage }) }),
+          firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+            "tr",
+            {
+              css: {
+                ...tableRowPrintBreakCss,
+                ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
+                ...visibleDataRows.length === 0 && style.lastRowCss
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+                "td",
+                {
+                  colSpan: columns.length,
+                  css: {
+                    ...style.betweenRowsCss,
+                    ...style.firstRowMessageCss,
+                    ...visibleDataRows.length === 0 && style.lastRowCellCss,
+                    ...visibleDataRows.length === 0 && style.lastRowFirstCellCss,
+                    ...visibleDataRows.length === 0 && style.lastRowLastCellCss
+                  },
+                  children: firstRowMessage
+                }
+              )
+            }
+          ),
           visibleDataRows
         ] })
       ]
@@ -14353,7 +14445,28 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
           if (index === 0) {
             return (
               // Ensure the fallback message is the same width as the table
-              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { css: getTableRefWidthStyles(true), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { css: { ...style.firstRowMessageCss }, children: firstRowMessage }) })
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+                "div",
+                {
+                  css: {
+                    ...getTableRefWidthStyles(true),
+                    ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
+                    ...visibleDataRows.length === 0 && style.lastRowCss
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+                    "div",
+                    {
+                      css: {
+                        ...style.firstRowMessageCss,
+                        ...visibleDataRows.length === 0 && style.lastRowCellCss,
+                        ...visibleDataRows.length === 0 && style.lastRowFirstCellCss,
+                        ...visibleDataRows.length === 0 && style.lastRowLastCellCss
+                      },
+                      children: firstRowMessage
+                    }
+                  )
+                }
+              )
             );
           }
           index--;
@@ -14391,20 +14504,12 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
 var VirtualRoot = (0, import_memoize_one.default)(
   (gs, _columns, id, xss) => {
     return import_react74.default.forwardRef(function VirtualRoot2({ style, children }, ref) {
-      const isHeader = Object.keys(style || {}).length === 0;
       return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         "div",
         {
           ref,
           style: { ...style, ...{ minWidth: "fit-content" } },
           css: {
-            // Add an extra `> div` due to Item + itemContent both having divs
-            ...Css.addIn("& > div + div > div > *", gs.betweenRowsCss || {}).$,
-            // Table list styles only
-            ...isHeader ? Css.addIn("& > div:first-of-type > *", gs.firstRowCss).$ : {
-              ...Css.addIn("& > div:first-of-type", gs.firstNonHeaderRowCss).$,
-              ...Css.addIn("& > div:last-of-type > *", gs.lastRowCss).$
-            },
             ...gs.rootCss,
             ...gs.minWidthPx ? Css.mwPx(gs.minWidthPx).$ : {},
             ...xss
@@ -15917,17 +16022,18 @@ function FormLines(props) {
     {
       css: {
         // Note that we're purposefully not using display:flex so that our children's margins will collapse.
-        ...Css.w(sizes[width2]).$,
-        // Purposefully use this instead of childGap3 to put margin-bottom on the last line
-        "& > *": Css.mb(gap).$
+        ...Css.w(sizes[width2]).$
       },
       children: import_react86.Children.map(children, (child) => {
+        if (child === null || child === void 0 || typeof child === "boolean") {
+          return child;
+        }
         if (child && typeof child === "object" && "type" in child && child.type.isFormHeading) {
           const clone = (0, import_react86.cloneElement)(child, { isFirst: firstFormHeading });
           firstFormHeading = false;
-          return clone;
+          return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { css: Css.mb(gap).$, children: clone });
         } else {
-          return child;
+          return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { css: Css.mb(gap).$, children: child });
         }
       })
     }
@@ -16101,45 +16207,46 @@ function CompoundField({ children }) {
   }
   const commonStyles = Css.df.aic.fs1.maxwPx(550).bt.bb.bcGray300.$;
   const internalProps = { compound: true };
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
-    "div",
-    {
-      css: {
-        ...Css.df.$,
-        "&:focus-within > div:nth-of-type(2)": Css.bgBlue700.$
-        // Separation line when inputs are focused
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-          "div",
-          {
-            css: {
-              ...commonStyles,
-              ...Css.bl.borderRadius("4px 0 0 4px").$,
-              "&:focus-within": Css.bcBlue700.$
-            },
-            children: (0, import_react88.cloneElement)(children[0], {
-              internalProps
-            })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { css: Css.wPx(1).fn.bgGray300.$ }),
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-          "div",
-          {
-            css: {
-              ...commonStyles,
-              ...Css.fg1.br.borderRadius("0 4px 4px 0").$,
-              "&:focus-within": Css.bcBlue700.$
-            },
-            children: (0, import_react88.cloneElement)(children[1], {
-              internalProps
-            })
-          }
-        )
-      ]
+  const [hasFocusWithin, setHasFocusWithin] = (0, import_react88.useState)(false);
+  function onFocusCapture() {
+    setHasFocusWithin(true);
+  }
+  function onBlurCapture(e) {
+    const nextFocusedElement = e.relatedTarget;
+    if (nextFocusedElement instanceof Node && e.currentTarget.contains(nextFocusedElement)) {
+      return;
     }
-  );
+    setHasFocusWithin(false);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { css: Css.df.$, onFocusCapture, onBlurCapture, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+      "div",
+      {
+        css: {
+          ...commonStyles,
+          ...Css.bl.borderRadius("4px 0 0 4px").$,
+          "&:focus-within": Css.bcBlue700.$
+        },
+        children: (0, import_react88.cloneElement)(children[0], {
+          internalProps
+        })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { css: { ...Css.wPx(1).fn.bgGray300.$, ...hasFocusWithin && Css.bgBlue700.$ } }),
+    /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+      "div",
+      {
+        css: {
+          ...commonStyles,
+          ...Css.fg1.br.borderRadius("0 4px 4px 0").$,
+          "&:focus-within": Css.bcBlue700.$
+        },
+        children: (0, import_react88.cloneElement)(children[1], {
+          internalProps
+        })
+      }
+    )
+  ] });
 }
 
 // src/forms/BoundSelectAndTextField.tsx
@@ -17887,18 +17994,42 @@ 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__ */ (0, import_jsx_runtime152.jsx)("div", { ...tid, css: Css.df.lh(0).add({ ...sizeStyles2[size] }).$, children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(GroupButton, { ...buttonProps, disabled: disabled || buttonDisabled, size, ...tid }, i)) })
+    /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { ...tid, css: Css.df.lh(0).add({ ...sizeStyles2[size] }).$, children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+      GroupButton,
+      {
+        ...buttonProps,
+        disabled: disabled || buttonDisabled,
+        size,
+        isFirst: i === 0,
+        isLast: i === buttons.length - 1,
+        ...tid
+      },
+      i
+    )) })
   );
 }
 function GroupButton(props) {
-  const { icon, iconInc, iconColor, text, active, onClick: onPress, disabled, size, tooltip, ...otherProps } = props;
+  const {
+    icon,
+    iconInc,
+    iconColor,
+    text,
+    active,
+    onClick: onPress,
+    disabled,
+    size,
+    tooltip,
+    isFirst,
+    isLast,
+    ...otherProps
+  } = props;
   const ariaProps = { onPress, isDisabled: !!disabled, ...otherProps };
   const ref = (0, import_react106.useRef)(null);
   const { buttonProps, isPressed } = (0, import_react_aria47.useButton)(ariaProps, ref);
   const { isFocusVisible, focusProps } = (0, import_react_aria47.useFocusRing)();
   const { hoverProps, isHovered } = (0, import_react_aria47.useHover)(ariaProps);
   const tid = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { css: getButtonStyles2(), children: maybeTooltip({
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { css: getButtonStyles2(isFirst, isLast), children: maybeTooltip({
     title: resolveTooltip(disabled, tooltip),
     placement: "top",
     children: /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
@@ -17929,15 +18060,15 @@ var pressedStyles = Css.bgGray200.$;
 var activeStyles3 = Css.bgGray300.$;
 var hoverStyles3 = Css.bgGray100.$;
 var defaultFocusRingStyles2 = Css.relative.z2.bshFocus.$;
-function getButtonStyles2() {
+function getButtonStyles2(isFirst, isLast) {
   return {
     ...Css.z1.bgWhite.bcGray300.bw1.ba.gray900.br0.oh.$,
-    // Our first button should have a rounded left border
-    "&:first-of-type": Css.add("borderRadius", "4px 0 0 4px").$,
-    // Our last button should have a rounded right border
-    "&:last-of-type": Css.add("borderRadius", "0 4px 4px 0").$,
-    // Nudge buttons one pixel to the left so they visually share a border
-    "&:not(:first-of-type)": Css.mlPx(-1).$
+    // Our first button should have a rounded left border.
+    ...isFirst && Css.add("borderRadius", "4px 0 0 4px").$,
+    // Our last button should have a rounded right border.
+    ...isLast && Css.add("borderRadius", "0 4px 4px 0").$,
+    // Nudge buttons one pixel to the left so they visually share a border.
+    ...!isFirst && Css.mlPx(-1).$
   };
 }
 var sizeStyles2 = {
@@ -18067,9 +18198,9 @@ function Copy(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
     "div",
     {
+      className: "beam-copy",
       css: {
-        ...Css.sm.gray700.mt2.mb3.wPx(480).$,
-        "& > p": Css.my2.$
+        ...Css.sm.gray700.mt2.mb3.wPx(480).$
       },
       children: props.children
     }
@@ -18102,6 +18233,7 @@ function DnDGrid(props) {
   const reorderViaKeyboard = (0, import_react110.useRef)(false);
   const transformFrom = (0, import_react110.useRef)({ x: 0, y: 0 });
   const tid = useTestIds(props, "dndGrid");
+  const activeStyles4 = activeItemStyles ?? Css.bshModal.$;
   const getGridItems = (0, import_react110.useCallback)(() => {
     return gridEl.current ? Array.from(gridEl.current.querySelectorAll(`[${gridItemIdKey}]`)) : [];
   }, []);
@@ -18111,19 +18243,19 @@ function DnDGrid(props) {
   const initReorder = (0, import_react110.useCallback)(() => {
     if (gridEl.current && dragEl.current) {
       initialOrder.current = getGridItemIdOrder();
-      dragEl.current.classList.add(activeGridItemClass);
+      setInlineStyles(dragEl.current, activeStyles4);
     }
-  }, [getGridItemIdOrder]);
+  }, [getGridItemIdOrder, activeStyles4]);
   const commitReorder = (0, import_react110.useCallback)(() => {
     if (gridEl.current && dragEl.current) {
       const currentOrder = getGridItemIdOrder();
       if (!(0, import_fast_deep_equal2.default)(currentOrder, initialOrder.current)) onReorder(currentOrder);
-      dragEl.current.classList.remove(activeGridItemClass);
+      clearInlineStyles(dragEl.current, activeStyles4);
       dragEl.current = void 0;
       reorderViaKeyboard.current = false;
       initialOrder.current = currentOrder;
     }
-  }, [onReorder, getGridItemIdOrder]);
+  }, [onReorder, getGridItemIdOrder, activeStyles4]);
   const cancelReorder = (0, import_react110.useCallback)(() => {
     if (gridEl.current && dragEl.current && initialOrder.current) {
       const currentOrder = getGridItemIdOrder();
@@ -18141,11 +18273,11 @@ function DnDGrid(props) {
           }
         }
       }
-      dragEl.current.classList.remove(activeGridItemClass);
+      clearInlineStyles(dragEl.current, activeStyles4);
       dragEl.current = void 0;
       reorderViaKeyboard.current = false;
     }
-  }, [getGridItemIdOrder, getGridItems]);
+  }, [getGridItemIdOrder, getGridItems, activeStyles4]);
   const onMove = (0, import_react110.useCallback)((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
       const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
@@ -18184,18 +18316,21 @@ function DnDGrid(props) {
         );
         cloneEl.current?.setAttribute(gridCloneKey, "true");
         cloneEl.current.removeAttribute("id");
-        cloneEl.current?.classList.remove(activeGridItemClass);
         gridEl.current.insertBefore(cloneEl.current, dragEl.current.nextSibling);
-        dragEl.current.setAttribute(
-          "style",
-          `pointer-events: none; position:fixed; z-index: 9999; top:${top}px; left:${left}px; width:${rect.width}px; height:${rect.height}px;`
-        );
+        dragEl.current.style.pointerEvents = "none";
+        dragEl.current.style.position = "fixed";
+        dragEl.current.style.zIndex = "9999";
+        dragEl.current.style.top = `${top}px`;
+        dragEl.current.style.left = `${left}px`;
+        dragEl.current.style.width = `${rect.width}px`;
+        dragEl.current.style.height = `${rect.height}px`;
+        setInlineStyles(dragEl.current, activeStyles4);
         gridEl.current.style.cursor = "grabbing";
         gridEl.current.addEventListener("mousemove", onMove);
         gridEl.current.addEventListener("touchmove", onMove);
       }
     },
-    [initReorder, onMove]
+    [initReorder, onMove, activeStyles4]
   );
   const onDragEnd = (0, import_react110.useCallback)(
     (e) => {
@@ -18269,7 +18404,7 @@ function DnDGrid(props) {
     {
       ref: gridEl,
       css: {
-        ...Css.ctis.dg.addIn(`& .${activeGridItemClass}`, activeItemStyles ?? Css.bshModal.$).$,
+        ...Css.ctis.dg.$,
         ...gridStyles
       },
       onTouchStart: onDragStart,
@@ -18283,7 +18418,6 @@ function DnDGrid(props) {
 }
 var gridItemIdKey = "dndgrid-itemid";
 var gridCloneKey = "dndgrid-clone";
-var activeGridItemClass = "dndgrid-active";
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
 var import_react_aria49 = require("react-aria");