@homebound/beam 2.417.6 → 2.417.8

package/dist/index.js

@@ -1,5 +1,6 @@
 import {
   EmptyRef,
+  clearInlineStyles,
   defaultTestId,
   fail,
   isAbsoluteUrl,
@@ -13,9 +14,10 @@ import {
   pluralize,
   safeEntries,
   safeKeys,
+  setInlineStyles,
   toToggleState,
   useTestIds
-} from "./chunk-XH44AYND.js";
+} from "./chunk-ZPT2ZR5B.js";
 
 // src/Css.ts
 var CssBuilder = class _CssBuilder {
@@ -4157,11 +4159,7 @@ var Icon = React3.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
         },
@@ -4745,20 +4743,8 @@ var Icons = {
     /* @__PURE__ */ jsx3("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__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx3(
-      "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__ */ jsx3(
-      "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__ */ jsx3("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__ */ jsx3("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__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsx3("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" }),
@@ -6455,13 +6441,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 } = useButton2(
+  const { buttonProps, isPressed: isPressedFromEvents } = useButton2(
     {
       ...ariaProps,
       onPress: typeof onPress === "string" ? noop : onPress,
@@ -6469,8 +6455,11 @@ function AvatarButton(props) {
     },
     ref
   );
-  const { focusProps, isFocusVisible } = useFocusRing2(ariaProps);
-  const { hoverProps, isHovered } = useHover3(ariaProps);
+  const { focusProps, isFocusVisible: isFocusVisibleFromEvents } = useFocusRing2(ariaProps);
+  const { hoverProps, isHovered: isHoveredFromEvents } = useHover3(ariaProps);
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
+  const isPressed = __storyState?.pressed ?? isPressedFromEvents;
   const tid = useTestIds(props, avatarProps.name);
   const styles = useMemo9(
     () => ({
@@ -6493,7 +6482,7 @@ function AvatarButton(props) {
   };
   const content = /* @__PURE__ */ jsxs11(Fragment5, { children: [
     /* @__PURE__ */ jsx23(Avatar, { ...avatarProps, ...tid, disableTooltip: true }),
-    (isPressed || forcePressedStyles) && /* @__PURE__ */ jsx23("span", { css: pressedOverlayCss })
+    isPressed && /* @__PURE__ */ jsx23("span", { css: pressedOverlayCss })
   ] });
   return maybeTooltip({
     // Default the tooltip to the avatar's name, if defined.
@@ -7156,21 +7145,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",
@@ -7189,6 +7176,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" }),
@@ -7457,10 +7445,10 @@ function applyRowFn(column2, row, api, level, expanded, dragData) {
 var ASC = "ASC";
 var DESC = "DESC";
 var emptyCell = { content: () => /* @__PURE__ */ jsx31(Fragment9, {}), 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) {
@@ -7851,7 +7839,7 @@ function ColumnResizeHandle({
 import { useContext as useContext8 } from "react";
 import { jsx as jsx33, jsxs as jsxs20 } from "@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 } = useContext8(TableStateContext);
   const numHiddenSelectedRows = useComputed(() => tableState.keptRows.length, [tableState]);
@@ -7860,6 +7848,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(" + ")})`).$
       },
@@ -8174,6 +8166,9 @@ function RowImpl(props) {
     cellHighlight,
     omitRowHover,
     hasExpandableHeader,
+    isFirstHeadRow,
+    isFirstBodyRow,
+    isLastBodyRow,
     resizedWidths,
     setResizedWidth,
     disableColumnResizing = true,
@@ -8192,6 +8187,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;
@@ -8207,6 +8204,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.
@@ -8219,6 +8219,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),
@@ -8239,7 +8240,17 @@ function RowImpl(props) {
     [onDragOver]
   );
   const onDragOverDebounced = useDebouncedCallback4(dragOverCallback, 100);
-  const RowContent = () => /* @__PURE__ */ jsx34(RowTag, { css: rowCss, ...others, "data-gridrow": true, ...getCount(row.id), ref, className: BorderHoverParent, children: isKeptGroupRow ? /* @__PURE__ */ jsx34(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length }) : columns.map((column2, columnIndex) => {
+  const RowContent = () => /* @__PURE__ */ jsx34(RowTag, { css: rowCss, ...others, "data-gridrow": true, ...getCount(row.id), ref, className: BorderHoverParent, children: isKeptGroupRow ? /* @__PURE__ */ jsx34(
+    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) {
@@ -8323,8 +8334,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
@@ -8340,7 +8359,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)
@@ -8535,6 +8554,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
@@ -12166,6 +12186,7 @@ function Switch(props) {
     label,
     labelStyle = "inline",
     hideLabel = false,
+    __storyState,
     ...otherProps
   } = props;
   const isDisabled = !!disabled;
@@ -12173,8 +12194,10 @@ function Switch(props) {
   const state = toToggleState(isSelected, onChange);
   const ref = useRef32(null);
   const { inputProps } = useSwitch({ ...ariaProps, "aria-label": label }, state, ref);
-  const { isFocusVisible: isKeyboardFocus, focusProps } = useFocusRing7(otherProps);
-  const { hoverProps, isHovered } = useHover13(ariaProps);
+  const { isFocusVisible: isFocusVisibleFromEvents, focusProps } = useFocusRing7(otherProps);
+  const { hoverProps, isHovered: isHoveredFromEvents } = useHover13(ariaProps);
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
   const tooltip = resolveTooltip(disabled, props.tooltip);
   const tid = useTestIds(otherProps, label);
   return /* @__PURE__ */ jsxs45(
@@ -12207,7 +12230,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
@@ -12374,7 +12397,7 @@ import { useFocusRing as useFocusRing8, useHover as useHover14, usePress, useSwi
 import { useToggleState as useToggleState3 } from "react-stately";
 import { jsx as jsx77, jsxs as jsxs46 } from "@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] = useState27(false);
   const isDisabled = !!disabled || asyncInProgress;
   const ariaProps = { "aria-label": label, isSelected, isDisabled, ...otherProps };
@@ -12391,11 +12414,14 @@ function ToggleButton(props) {
   });
   const labelRef = useRef35(null);
   const ref = useRef35(null);
-  const tid = useTestIds(props, label);
-  const { isPressed, pressProps } = usePress({ ref: labelRef, isDisabled });
+  const tid = useTestIds(otherProps, label);
+  const { isPressed: isPressedFromEvents, pressProps } = usePress({ ref: labelRef, isDisabled });
   const { inputProps } = useSwitch2(ariaProps, state, ref);
-  const { isFocusVisible: isKeyboardFocus, focusProps } = useFocusRing8({ ...otherProps, within: true });
-  const { hoverProps, isHovered } = useHover14({ isDisabled });
+  const { isFocusVisible: isFocusVisibleFromEvents, focusProps } = useFocusRing8({ ...otherProps, within: true });
+  const { hoverProps, isHovered: isHoveredFromEvents } = useHover14({ isDisabled });
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  const isPressed = __storyState?.pressed ?? isPressedFromEvents;
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const tooltip = resolveTooltip(disabled);
   const labelAttrs = {
     ...focusProps,
@@ -12406,7 +12432,7 @@ function ToggleButton(props) {
       ...isHovered && toggleHoverStyles,
       ...isPressed && togglePressStyles,
       ...isSelected && !isDisabled && Css.blue700.$,
-      ...isKeyboardFocus && toggleFocusStyles,
+      ...isFocusVisible && toggleFocusStyles,
       ...isDisabled && Css.gray300.cursorNotAllowed.$
     },
     ...tid
@@ -13778,7 +13804,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__ */ jsx81(
         Row,
         {
@@ -13797,6 +13841,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,
@@ -13895,27 +13942,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__ */ jsxs48(
-          "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__ */ jsx81("div", { css: { ...style.firstRowMessageCss }, "data-gridrow": true, children: firstRowMessage }),
-              visibleDataRows
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs48("div", { children: [
+          keptSelectedRows,
+          firstRowMessage && /* @__PURE__ */ jsx81(
+            "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
+        ] })
       ]
     }
   );
@@ -13927,10 +13977,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
@@ -13940,7 +13986,30 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firs
         /* @__PURE__ */ jsx81("thead", { css: Css.if(stickyHeader).sticky.topPx(stickyOffset).z(zIndices.stickyHeader).$, children: tableHeadRows }),
         /* @__PURE__ */ jsxs48("tbody", { children: [
           keptSelectedRows,
-          firstRowMessage && /* @__PURE__ */ jsx81("tr", { children: /* @__PURE__ */ jsx81("td", { colSpan: columns.length, css: { ...style.firstRowMessageCss }, children: firstRowMessage }) }),
+          firstRowMessage && /* @__PURE__ */ jsx81(
+            "tr",
+            {
+              css: {
+                ...tableRowPrintBreakCss,
+                ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
+                ...visibleDataRows.length === 0 && style.lastRowCss
+              },
+              children: /* @__PURE__ */ jsx81(
+                "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
         ] })
       ]
@@ -13993,7 +14062,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__ */ jsx81("div", { css: getTableRefWidthStyles(true), children: /* @__PURE__ */ jsx81("div", { css: { ...style.firstRowMessageCss }, children: firstRowMessage }) })
+              /* @__PURE__ */ jsx81(
+                "div",
+                {
+                  css: {
+                    ...getTableRefWidthStyles(true),
+                    ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
+                    ...visibleDataRows.length === 0 && style.lastRowCss
+                  },
+                  children: /* @__PURE__ */ jsx81(
+                    "div",
+                    {
+                      css: {
+                        ...style.firstRowMessageCss,
+                        ...visibleDataRows.length === 0 && style.lastRowCellCss,
+                        ...visibleDataRows.length === 0 && style.lastRowFirstCellCss,
+                        ...visibleDataRows.length === 0 && style.lastRowLastCellCss
+                      },
+                      children: firstRowMessage
+                    }
+                  )
+                }
+              )
             );
           }
           index--;
@@ -14031,20 +14121,12 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
 var VirtualRoot = memoizeOne(
   (gs, _columns, id, xss) => {
     return React13.forwardRef(function VirtualRoot2({ style, children }, ref) {
-      const isHeader = Object.keys(style || {}).length === 0;
       return /* @__PURE__ */ jsx81(
         "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
@@ -14663,7 +14745,7 @@ function SuperDrawer() {
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import React16, { createRef, useCallback as useCallback22, useEffect as useEffect24, useMemo as useMemo34, useRef as useRef43, useState as useState37 } from "react";
+import React16, { createRef, useCallback as useCallback22, useEffect as useEffect24, useMemo as useMemo34, useRef as useRef43, useState as useState38 } from "react";
 import { useButton as useButton9, useFocusRing as useFocusRing11 } from "react-aria";
 
 // src/forms/BoundCheckboxField.tsx
@@ -15557,17 +15639,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: 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 = cloneElement(child, { isFirst: firstFormHeading });
           firstFormHeading = false;
-          return clone;
+          return /* @__PURE__ */ jsx114("div", { css: Css.mb(gap).$, children: clone });
         } else {
-          return child;
+          return /* @__PURE__ */ jsx114("div", { css: Css.mb(gap).$, children: child });
         }
       })
     }
@@ -15733,7 +15816,7 @@ function boundTreeSelectField(props) {
 }
 
 // src/components/internal/CompoundField.tsx
-import { cloneElement as cloneElement2 } from "react";
+import { cloneElement as cloneElement2, useState as useState34 } from "react";
 import { jsx as jsx116, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
 function CompoundField({ children }) {
   if (children?.length !== 2) {
@@ -15741,45 +15824,46 @@ function CompoundField({ children }) {
   }
   const commonStyles = Css.df.aic.fs1.maxwPx(550).bt.bb.bcGray300.$;
   const internalProps = { compound: true };
-  return /* @__PURE__ */ jsxs59(
-    "div",
-    {
-      css: {
-        ...Css.df.$,
-        "&:focus-within > div:nth-of-type(2)": Css.bgBlue700.$
-        // Separation line when inputs are focused
-      },
-      children: [
-        /* @__PURE__ */ jsx116(
-          "div",
-          {
-            css: {
-              ...commonStyles,
-              ...Css.bl.borderRadius("4px 0 0 4px").$,
-              "&:focus-within": Css.bcBlue700.$
-            },
-            children: cloneElement2(children[0], {
-              internalProps
-            })
-          }
-        ),
-        /* @__PURE__ */ jsx116("div", { css: Css.wPx(1).fn.bgGray300.$ }),
-        /* @__PURE__ */ jsx116(
-          "div",
-          {
-            css: {
-              ...commonStyles,
-              ...Css.fg1.br.borderRadius("0 4px 4px 0").$,
-              "&:focus-within": Css.bcBlue700.$
-            },
-            children: cloneElement2(children[1], {
-              internalProps
-            })
-          }
-        )
-      ]
+  const [hasFocusWithin, setHasFocusWithin] = useState34(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__ */ jsxs59("div", { css: Css.df.$, onFocusCapture, onBlurCapture, children: [
+    /* @__PURE__ */ jsx116(
+      "div",
+      {
+        css: {
+          ...commonStyles,
+          ...Css.bl.borderRadius("4px 0 0 4px").$,
+          "&:focus-within": Css.bcBlue700.$
+        },
+        children: cloneElement2(children[0], {
+          internalProps
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx116("div", { css: { ...Css.wPx(1).fn.bgGray300.$, ...hasFocusWithin && Css.bgBlue700.$ } }),
+    /* @__PURE__ */ jsx116(
+      "div",
+      {
+        css: {
+          ...commonStyles,
+          ...Css.fg1.br.borderRadius("0 4px 4px 0").$,
+          "&:focus-within": Css.bcBlue700.$
+        },
+        children: cloneElement2(children[1], {
+          internalProps
+        })
+      }
+    )
+  ] });
 }
 
 // src/forms/BoundSelectAndTextField.tsx
@@ -15875,11 +15959,11 @@ import { useDebouncedCallback as useDebouncedCallback5 } from "use-debounce";
 
 // src/components/RightSidebar.tsx
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-motion";
-import { useState as useState34 } from "react";
+import { useState as useState35 } from "react";
 import { Fragment as Fragment24, jsx as jsx121, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
 var RIGHT_SIDEBAR_MIN_WIDTH = "250px";
 function RightSidebar({ content, headerHeightPx: headerHeightPx2 }) {
-  const [selectedIcon, setSelectedIcon] = useState34(void 0);
+  const [selectedIcon, setSelectedIcon] = useState35(void 0);
   const tid = useTestIds({}, "rightSidebar");
   return /* @__PURE__ */ jsxs62(Fragment24, { children: [
     /* @__PURE__ */ jsx121("div", { css: Css.df.jcfe.absolute.right0.pr3.$, children: /* @__PURE__ */ jsx121(AnimatePresence2, { children: !selectedIcon && /* @__PURE__ */ jsx121(
@@ -15940,7 +16024,7 @@ function IconButtonList({ content, selectedIcon, onIconClick }) {
 }
 
 // src/components/Toast/ToastContext.tsx
-import { createContext as createContext5, useCallback as useCallback21, useContext as useContext14, useMemo as useMemo32, useState as useState35 } from "react";
+import { createContext as createContext5, useCallback as useCallback21, useContext as useContext14, useMemo as useMemo32, useState as useState36 } from "react";
 import { jsx as jsx122 } from "@emotion/react/jsx-runtime";
 var ToastContext = createContext5({
   setNotice: () => {
@@ -15951,7 +16035,7 @@ var ToastContext = createContext5({
   notice: void 0
 });
 function ToastProvider(props) {
-  const [notice, setNotice] = useState35();
+  const [notice, setNotice] = useState36();
   const clear = useCallback21(() => setNotice(void 0), [setNotice]);
   const contextValue = useMemo32(() => ({ setNotice, notice, clear }), [notice, clear]);
   return /* @__PURE__ */ jsx122(ToastContext.Provider, { value: contextValue, children: props.children });
@@ -15969,13 +16053,13 @@ function Toast() {
 }
 
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
-import { Fragment as Fragment26, useMemo as useMemo33, useState as useState36 } from "react";
+import { Fragment as Fragment26, useMemo as useMemo33, useState as useState37 } from "react";
 import { Link as Link4 } from "react-router-dom";
 import { Fragment as Fragment27, jsx as jsx124, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
 function PageHeaderBreadcrumbs({ breadcrumb }) {
   const tids = useTestIds({}, "pageHeaderBreadcrumbs");
   const breadcrumbs = useMemo33(() => Array.isArray(breadcrumb) ? breadcrumb : [breadcrumb], [breadcrumb]);
-  const [collapsed, setCollapsed] = useState36(true);
+  const [collapsed, setCollapsed] = useState37(true);
   function renderBreadcrumb(bc, index, hideDivisor) {
     return (
       // Adding index to key to prevent rendering issues when multiple items have the same label
@@ -16139,7 +16223,7 @@ function SectionNavLink(props) {
   );
 }
 function useActiveSection(sectionsWithRefs) {
-  const [activeSection, setActiveSection] = useState37(null);
+  const [activeSection, setActiveSection] = useState38(null);
   const debouncedIntersectionCallback = useDebouncedCallback5(
     (entries) => {
       const sectionsInView = entries.filter((entry) => entry.isIntersecting && entry.intersectionRatio > 0.2).sort((a, b) => {
@@ -16196,7 +16280,7 @@ function FullBleed({ children, omitPadding = false }) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import React17, { useEffect as useEffect27, useMemo as useMemo38, useState as useState40 } from "react";
+import React17, { useEffect as useEffect27, useMemo as useMemo38, useState as useState41 } from "react";
 
 // src/components/ButtonMenu.tsx
 import { useRef as useRef44 } from "react";
@@ -16248,7 +16332,7 @@ function isSelectionButtonMenuProps(props) {
 }
 
 // src/components/Filters/FilterDropdownMenu.tsx
-import { memo as memo2, useMemo as useMemo36, useState as useState39 } from "react";
+import { memo as memo2, useMemo as useMemo36, useState as useState40 } from "react";
 
 // src/components/CountBadge.tsx
 import { jsx as jsx127 } from "@emotion/react/jsx-runtime";
@@ -16633,7 +16717,7 @@ var CheckboxFilter = class extends BaseFilter {
 };
 
 // src/components/Filters/FilterModal.tsx
-import { useState as useState38 } from "react";
+import { useState as useState39 } from "react";
 
 // src/components/Modal/OpenModal.tsx
 import { useEffect as useEffect25 } from "react";
@@ -16659,7 +16743,7 @@ function FilterModal(props) {
   const { filter, filters, onApply } = props;
   const testId = useTestIds(props, filterTestIdPrefix);
   const { closeModal } = useModal();
-  const [modalFilter, setModalFilter] = useState38(filter);
+  const [modalFilter, setModalFilter] = useState39(filter);
   return /* @__PURE__ */ jsxs68(Fragment31, { children: [
     /* @__PURE__ */ jsx137(ModalHeader, { children: "More Filters" }),
     /* @__PURE__ */ jsx137(ModalBody, { children: /* @__PURE__ */ jsx137("div", { css: Css.df.fdc.$, children: safeEntries(filters).map(([key, f]) => /* @__PURE__ */ jsx137(ModalFilterItem, { label: f.hideLabelInModal ? void 0 : f.label, children: f.render(
@@ -16814,7 +16898,7 @@ import { Fragment as Fragment32, jsx as jsx140, jsxs as jsxs70 } from "@emotion/
 function FilterDropdownMenu(props) {
   const { filter, onChange, filterDefs, groupBy } = props;
   const testId = useTestIds(props, filterTestIdPrefix);
-  const [isOpen, setIsOpen] = useState39(false);
+  const [isOpen, setIsOpen] = useState40(false);
   const activeFilterCount = useMemo36(() => getActiveFilterCount(filter), [filter]);
   const filterImpls = useMemo36(() => buildFilterImpls(filterDefs), [filterDefs]);
   const renderFilters = () => {
@@ -17239,7 +17323,7 @@ function useGridTableLayoutState({
   const filterFallback = { filterDefs: {}, storageKey: "unset-filter" };
   const { filter, setFilter } = usePersistedFilter(persistedFilter ?? filterFallback);
   const groupBy = useGroupBy(maybeGroupBy ?? { none: "none" });
-  const [searchString, setSearchString] = useState40("");
+  const [searchString, setSearchString] = useState41("");
   const columnsFallback = "unset-columns";
   const [visibleColumnIds, setVisibleColumnIds] = useSessionStorage(
     persistedColumns?.storageKey ?? columnsFallback,
@@ -17252,7 +17336,7 @@ function useGridTableLayoutState({
     100
     // default page size
   );
-  const [page, setPage] = useState40({
+  const [page, setPage] = useState41({
     offset: 0,
     limit: persistedPageSize
   });
@@ -17295,7 +17379,7 @@ function Header2(props) {
 }
 function SearchBox({ onSearch }) {
   const [{ search: initialValue }, setQueryParams] = useQueryParams3({ search: StringParam2 });
-  const [value, setValue] = useState40(initialValue || "");
+  const [value, setValue] = useState41(initialValue || "");
   const [debouncedSearch] = useDebounce2(value, 300);
   useEffect27(() => {
     onSearch(debouncedSearch);
@@ -17327,7 +17411,7 @@ function PreventBrowserScroll({ children }) {
 }
 
 // src/components/Layout/RightPaneLayout/RightPaneContext.tsx
-import React18, { useCallback as useCallback23, useContext as useContext15, useMemo as useMemo39, useState as useState41 } from "react";
+import React18, { useCallback as useCallback23, useContext as useContext15, useMemo as useMemo39, useState as useState42 } from "react";
 import { jsx as jsx148 } from "@emotion/react/jsx-runtime";
 var RightPaneContext = React18.createContext({
   openInPane: () => {
@@ -17340,8 +17424,8 @@ var RightPaneContext = React18.createContext({
   rightPaneContent: null
 });
 function RightPaneProvider({ children }) {
-  const [rightPaneContent, setRightPaneContent] = useState41(void 0);
-  const [isRightPaneOpen, setIsRightPaneOpen] = useState41(false);
+  const [rightPaneContent, setRightPaneContent] = useState42(void 0);
+  const [isRightPaneOpen, setIsRightPaneOpen] = useState42(false);
   const openInPane = useCallback23(
     (opts) => {
       setRightPaneContent(opts?.content);
@@ -17526,19 +17610,43 @@ function ButtonGroup(props) {
     // Adding `line-height: 0` prevent inheriting line-heights that might throw off sizing within the button group.
     /* @__PURE__ */ jsx152("div", { ...tid, css: Css.df.lh(0).add({ ...sizeStyles2[size] }).$, children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => (
       // Disable the button if the ButtonGroup is disabled or if the current button is disabled.
-      /* @__PURE__ */ jsx152(GroupButton, { ...buttonProps, disabled: disabled || buttonDisabled, size, ...tid }, i)
+      /* @__PURE__ */ jsx152(
+        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 = useRef47(null);
   const { buttonProps, isPressed } = useButton10(ariaProps, ref);
   const { isFocusVisible, focusProps } = useFocusRing12();
   const { hoverProps, isHovered } = useHover15(ariaProps);
   const tid = useTestIds(props);
-  return /* @__PURE__ */ jsx152("span", { css: getButtonStyles2(), children: maybeTooltip({
+  return /* @__PURE__ */ jsx152("span", { css: getButtonStyles2(isFirst, isLast), children: maybeTooltip({
     title: resolveTooltip(disabled, tooltip),
     placement: "top",
     children: /* @__PURE__ */ jsxs78(
@@ -17569,15 +17677,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 = {
@@ -17597,13 +17705,13 @@ import { useHover as useHover16 } from "react-aria";
 
 // src/components/Tag.tsx
 import { useResizeObserver as useResizeObserver4 } from "@react-aria/utils";
-import { useRef as useRef48, useState as useState42 } from "react";
+import { useRef as useRef48, useState as useState43 } from "react";
 import { jsx as jsx153, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
 function Tag(props) {
   const { text, type, xss, preventTooltip = false, ...otherProps } = props;
   const typeStyles2 = getStyles(type);
   const tid = useTestIds(otherProps);
-  const [showTooltip, setShowTooltip] = useState42(false);
+  const [showTooltip, setShowTooltip] = useState43(false);
   const ref = useRef48(null);
   useResizeObserver4({
     ref,
@@ -17707,9 +17815,9 @@ function Copy(props) {
   return /* @__PURE__ */ jsx155(
     "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
     }
@@ -17742,6 +17850,7 @@ function DnDGrid(props) {
   const reorderViaKeyboard = useRef49(false);
   const transformFrom = useRef49({ x: 0, y: 0 });
   const tid = useTestIds(props, "dndGrid");
+  const activeStyles4 = activeItemStyles ?? Css.bshModal.$;
   const getGridItems = useCallback24(() => {
     return gridEl.current ? Array.from(gridEl.current.querySelectorAll(`[${gridItemIdKey}]`)) : [];
   }, []);
@@ -17751,19 +17860,19 @@ function DnDGrid(props) {
   const initReorder = useCallback24(() => {
     if (gridEl.current && dragEl.current) {
       initialOrder.current = getGridItemIdOrder();
-      dragEl.current.classList.add(activeGridItemClass);
+      setInlineStyles(dragEl.current, activeStyles4);
     }
-  }, [getGridItemIdOrder]);
+  }, [getGridItemIdOrder, activeStyles4]);
   const commitReorder = useCallback24(() => {
     if (gridEl.current && dragEl.current) {
       const currentOrder = getGridItemIdOrder();
       if (!equal2(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 = useCallback24(() => {
     if (gridEl.current && dragEl.current && initialOrder.current) {
       const currentOrder = getGridItemIdOrder();
@@ -17781,11 +17890,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 = useCallback24((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
       const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
@@ -17824,18 +17933,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 = useCallback24(
     (e) => {
@@ -17909,7 +18021,7 @@ function DnDGrid(props) {
     {
       ref: gridEl,
       css: {
-        ...Css.ctis.dg.addIn(`& .${activeGridItemClass}`, activeItemStyles ?? Css.bshModal.$).$,
+        ...Css.ctis.dg.$,
         ...gridStyles
       },
       onTouchStart: onDragStart,
@@ -17923,7 +18035,6 @@ function DnDGrid(props) {
 }
 var gridItemIdKey = "dndgrid-itemid";
 var gridCloneKey = "dndgrid-clone";
-var activeGridItemClass = "dndgrid-active";
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
 import { mergeProps as mergeProps12, useFocusRing as useFocusRing13, useHover as useHover17 } from "react-aria";
@@ -18108,12 +18219,12 @@ function HbSpinnerProvider({ quips = [], children }) {
 
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect2, useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
-import { useCallback as useCallback25, useEffect as useEffect29, useRef as useRef50, useState as useState43 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect29, useRef as useRef50, useState as useState44 } from "react";
 import { jsx as jsx161, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
 function MaxLines({ maxLines, children }) {
   const elRef = useRef50(null);
-  const [hasMore, setHasMore] = useState43(false);
-  const [expanded, setExpanded] = useState43(false);
+  const [hasMore, setHasMore] = useState44(false);
+  const [expanded, setExpanded] = useState44(false);
   useLayoutEffect2(() => {
     if (!elRef.current) return;
     setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
@@ -18134,7 +18245,7 @@ function MaxLines({ maxLines, children }) {
 
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
-import { useCallback as useCallback26, useMemo as useMemo47, useRef as useRef51, useState as useState44 } from "react";
+import { useCallback as useCallback26, useMemo as useMemo47, useRef as useRef51, useState as useState45 } from "react";
 import { jsx as jsx162, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
 function ScrollShadows(props) {
   const { children, xss, horizontal = false, bgColor = "rgba(255,255,255,1)" /* White */ } = props;
@@ -18143,8 +18254,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] = useState44(false);
-  const [showEndShadow, setShowEndShadow] = useState44(false);
+  const [showStartShadow, setShowStartShadow] = useState45(false);
+  const [showEndShadow, setShowEndShadow] = useState45(false);
   const scrollRef = useRef51(null);
   const [startShadowStyles, endShadowStyles] = useMemo47(() => {
     const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
@@ -18589,7 +18700,7 @@ var SuperDrawerContent = ({ children, actions }) => {
 
 // src/components/Tabs.tsx
 import { camelCase as camelCase5 } from "change-case";
-import { useEffect as useEffect31, useMemo as useMemo49, useRef as useRef53, useState as useState45 } from "react";
+import { useEffect as useEffect31, useMemo as useMemo49, useRef as useRef53, useState as useState46 } from "react";
 import { mergeProps as mergeProps13, useFocusRing as useFocusRing15, useHover as useHover19 } from "react-aria";
 import { matchPath, Route } from "react-router";
 import { Link as Link5, useLocation } from "react-router-dom";
@@ -18635,7 +18746,7 @@ function Tabs(props) {
   ) : props.selected;
   const { isFocusVisible, focusProps } = useFocusRing15();
   const tid = useTestIds(others, "tabs");
-  const [active, setActive] = useState45(selected);
+  const [active, setActive] = useState46(selected);
   const ref = useRef53(null);
   useEffect31(() => setActive(selected), [selected]);
   function onKeyUp(e) {