@shortstravelmgmt/component-lib 0.3.0-canary.70.g764f77e → 0.3.0

package/dist/index.js

@@ -8576,6 +8576,14 @@ const rootStyle = {
         textTransform: 'none',
         color: 'var(--color-ink, #1b2a41)',
     },
+    // The tab labels are bare spans too, so a host's span rule reaches them
+    // directly (inheritance alone can't undo it): they take the tab's own type.
+    // `:not([class])` leaves the classed icon and count spans their own sizes.
+    '&& [role="tab"] > span:not([class])': {
+        font: 'inherit',
+        letterSpacing: 'inherit',
+        textTransform: 'inherit',
+    },
 };
 const tabRowStyle = {
     label: 'TeamPicker-tabRowStyle',
@@ -12613,16 +12621,16 @@ GridHeaderRow.displayName = 'GridHeaderRow';
  * where it wins on order, exactly as it did in the stylesheet.
  */
 const tableStyle$8 = {
-    label: "GridTable-tableStyle",
-    position: "relative",
+    label: 'GridTable-tableStyle',
+    position: 'relative',
     borderRadius: 12,
-    "@media (min-width: 768px)": {
-        border: "1px solid var(--color-subtle, #eff0f0)",
+    '@media (min-width: 768px)': {
+        border: '1px solid var(--color-subtle, #eff0f0)',
     },
 };
 const gridStyle$7 = {
-    label: "GridTable-gridStyle",
-    display: "grid",
+    label: 'GridTable-gridStyle',
+    display: 'grid',
 };
 /**
  * The always-visible banner row above the heading. Spans the full width and
@@ -12631,15 +12639,15 @@ const gridStyle$7 = {
  * Its background is left to the caller's node.
  */
 const bannerStyle$2 = {
-    label: "GridTable-bannerStyle",
-    width: "100%",
+    label: 'GridTable-bannerStyle',
+    width: '100%',
     borderTopLeftRadius: 12,
     borderTopRightRadius: 12,
     // The wrapper is transparent, so its own radius rounds nothing — the caller's
     // node paints the background. Round that direct child's top corners too, so a
     // full-width banner background follows the table's rounded top edge instead of
     // painting square corners over it. No overflow clip, so dropdowns still escape.
-    "& > *": {
+    '& > *': {
         borderTopLeftRadius: 12,
         borderTopRightRadius: 12,
     },
@@ -12649,72 +12657,72 @@ const bannerStyle$2 = {
  * row becomes a card and every cell carries its own label instead.
  */
 const headerStyle$x = {
-    label: "GridTable-headerStyle",
-    display: "none",
-    width: "100%",
+    label: 'GridTable-headerStyle',
+    display: 'none',
+    width: '100%',
     fontWeight: 500,
     /* Navy brand ground with rail foreground ink, matching the widget headers. */
-    background: "var(--color-primary, #19345f)",
-    color: "var(--nav-rail-fg, #8fa6c4)",
-    "@media (min-width: 768px)": {
-        display: "block",
+    background: 'var(--color-primary, #19345f)',
+    color: 'var(--nav-rail-fg, #8fa6c4)',
+    '@media (min-width: 768px)': {
+        display: 'block',
     },
 };
 const headingStyle$2 = {
-    label: "GridTable-headingStyle",
-    display: "flex",
-    alignItems: "flex-end",
+    label: 'GridTable-headingStyle',
+    display: 'flex',
+    alignItems: 'flex-end',
     minWidth: 0,
-    padding: "12px 16px",
+    padding: '12px 16px',
     fontSize: 14,
     fontWeight: 500,
-    color: "var(--nav-rail-fg, #8fa6c4)",
-    textAlign: "left",
-    background: "none",
-    border: "none",
-    fontFamily: "inherit",
+    color: 'var(--nav-rail-fg, #8fa6c4)',
+    textAlign: 'left',
+    background: 'none',
+    border: 'none',
+    fontFamily: 'inherit',
 };
 /** Contests nothing in `headingStyle` — it sets neither cursor nor width. */
 const sortableStyle = {
-    label: "GridTable-sortableStyle",
-    cursor: "pointer",
-    width: "100%",
+    label: 'GridTable-sortableStyle',
+    cursor: 'pointer',
+    width: '100%',
 };
 const headingInnerStyle = {
-    label: "GridTable-headingInnerStyle",
-    display: "flex",
-    alignItems: "center",
-    minWidth: "100%",
+    label: 'GridTable-headingInnerStyle',
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: '100%',
 };
 const headingIconStyle = {
-    label: "GridTable-headingIconStyle",
+    label: 'GridTable-headingIconStyle',
     marginRight: 8,
     flexShrink: 0,
-    display: "inline-flex",
+    display: 'inline-flex',
 };
 const sortIconStyle$1 = {
-    label: "GridTable-sortIconStyle",
+    label: 'GridTable-sortIconStyle',
     marginLeft: 8,
     flexShrink: 0,
-    display: "inline-flex",
+    display: 'inline-flex',
 };
 const bodyStyle$5 = {
-    label: "GridTable-bodyStyle",
-    display: "flex",
-    flexDirection: "column",
+    label: 'GridTable-bodyStyle',
+    display: 'flex',
+    flexDirection: 'column',
     gap: 16,
-    "@media (min-width: 768px)": {
+    '@media (min-width: 768px)': {
         gap: 0,
     },
 };
 const rowStyle$5 = {
-    label: "GridTable-rowStyle",
+    label: 'GridTable-rowStyle',
     padding: 8,
     fontSize: 14,
-    background: "#fff",
+    background: '#fff',
     borderRadius: 12,
-    "@media (min-width: 768px)": {
-        display: "grid",
+    '@media (min-width: 768px)': {
+        display: 'grid',
         padding: 0,
         borderRadius: 0,
     },
@@ -12729,51 +12737,51 @@ const rowStyle$5 = {
  * over `.row.bordered` (0,2,0).
  */
 const borderedStyle = {
-    label: "GridTable-borderedStyle",
-    border: "1px solid var(--border-color-dark, #d5d5d5)",
-    "@media (min-width: 768px)": {
-        borderWidth: "0 0 1px 0",
-        "&:last-child": {
+    label: 'GridTable-borderedStyle',
+    border: '1px solid var(--border-color-dark, #d5d5d5)',
+    '@media (min-width: 768px)': {
+        borderWidth: '0 0 1px 0',
+        '&:last-child': {
             borderBottomWidth: 0,
         },
     },
 };
 const cellWrapStyle = {
-    label: "GridTable-cellWrapStyle",
+    label: 'GridTable-cellWrapStyle',
     minWidth: 0,
-    background: "#fff",
-    "@media (min-width: 768px)": {
-        display: "flex",
-        flexDirection: "column",
+    background: '#fff',
+    '@media (min-width: 768px)': {
+        display: 'flex',
+        flexDirection: 'column',
     },
 };
 const cellStyle$2 = {
-    label: "GridTable-cellStyle",
-    display: "flex",
-    alignItems: "center",
-    minHeight: "100%",
-    padding: "4px 8px",
-    "@media (min-width: 768px)": {
-        padding: "12px 16px",
+    label: 'GridTable-cellStyle',
+    display: 'flex',
+    alignItems: 'center',
+    minHeight: '100%',
+    padding: '4px 8px',
+    '@media (min-width: 768px)': {
+        padding: '12px 16px',
     },
 };
 /** Top-aligns a cell's content; applied over `cellStyle` when `alignTop`. */
 const cellTopStyle = {
-    label: "GridTable-cellTopStyle",
-    alignItems: "flex-start",
+    label: 'GridTable-cellTopStyle',
+    alignItems: 'flex-start',
 };
 const valueStyle$2 = {
-    label: "GridTable-valueStyle",
-    display: "block",
-    overflow: "hidden",
-    overflowWrap: "break-word",
+    label: 'GridTable-valueStyle',
+    display: 'block',
+    overflow: 'hidden',
+    overflowWrap: 'break-word',
 };
 const stackedLabelStyle = {
-    label: "GridTable-stackedLabelStyle",
+    label: 'GridTable-stackedLabelStyle',
     minWidth: 100,
     /* The heading row is visible again, so per-cell labels would duplicate it. */
-    "@media (min-width: 768px)": {
-        display: "none",
+    '@media (min-width: 768px)': {
+        display: 'none',
     },
 };
 /**
@@ -12781,11 +12789,21 @@ const stackedLabelStyle = {
  * the top; on the desktop grid it carries a bottom rule so it reads as a row above
  * the data. The caller styles and lays out the node inside it.
  */
+/**
+ * The `editRow` slot: full width, and its borders are the row it replaces —
+ * `borderedStyle` joins it only when the table is bordered, and that rule
+ * already drops the last row's bottom border — unlike `draftRowStyle`, whose
+ * separator is for a row pinned above the data.
+ */
+const editRowStyle = {
+    label: 'GridTable-editRowStyle',
+    width: '100%',
+};
 const draftRowStyle = {
-    label: "GridTable-draftRowStyle",
-    width: "100%",
-    "@media (min-width: 768px)": {
-        borderBottom: "1px solid var(--border-color-dark, #d5d5d5)",
+    label: 'GridTable-draftRowStyle',
+    width: '100%',
+    '@media (min-width: 768px)': {
+        borderBottom: '1px solid var(--border-color-dark, #d5d5d5)',
     },
 };
 /**
@@ -12795,52 +12813,52 @@ const draftRowStyle = {
  * white so it settles cleanly when the caller clears `flashRowKey`.
  */
 const flashRowStyle = {
-    label: "GridTable-flashRowStyle",
-    "@keyframes gridtable-row-flash": {
-        from: { backgroundColor: "var(--color-alert-success-bg, #d1f0e0)" },
-        to: { backgroundColor: "#fff" },
+    label: 'GridTable-flashRowStyle',
+    '@keyframes gridtable-row-flash': {
+        from: { backgroundColor: 'var(--color-alert-success-bg, #d1f0e0)' },
+        to: { backgroundColor: '#fff' },
     },
-    "& > *": {
-        animation: "gridtable-row-flash 2.5s ease-out",
+    '& > *': {
+        animation: 'gridtable-row-flash 2.5s ease-out',
     },
 };
 const emptyStyle$d = {
-    label: "GridTable-emptyStyle",
-    padding: "12px 16px",
-    textAlign: "center",
-    color: "var(--color-slate, #5c5c5c)",
+    label: 'GridTable-emptyStyle',
+    padding: '12px 16px',
+    textAlign: 'center',
+    color: 'var(--color-slate, #5c5c5c)',
 };
 /** The leading control cell that holds a row's expand/collapse toggle. */
 const expandCellStyle = {
-    label: "GridTable-expandCellStyle",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: "4px",
-    "@media (min-width: 768px)": {
+    label: 'GridTable-expandCellStyle',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '4px',
+    '@media (min-width: 768px)': {
         // 10px, not the cells' 12px: the 28px toggle then centres on the 24px
         // first text line of the top-aligned cells beside it (10 + 14 = 12 + 12).
-        padding: "10px 4px",
-        alignItems: "flex-start",
+        padding: '10px 4px',
+        alignItems: 'flex-start',
     },
 };
 /** The toggle button itself: an icon-only target that inherits row ink. */
 const expandButtonStyle$1 = {
-    label: "GridTable-expandButtonStyle",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
+    label: 'GridTable-expandButtonStyle',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     width: 28,
     height: 28,
     padding: 0,
-    color: "var(--color-slate, #5c5c5c)",
-    background: "none",
-    border: "none",
+    color: 'var(--color-slate, #5c5c5c)',
+    background: 'none',
+    border: 'none',
     borderRadius: 6,
-    cursor: "pointer",
-    "&:hover": {
-        color: "var(--color-primary, #19345f)",
-        background: "var(--color-subtle, #eff0f0)",
+    cursor: 'pointer',
+    '&:hover': {
+        color: 'var(--color-primary, #19345f)',
+        background: 'var(--color-subtle, #eff0f0)',
     },
 };
 /**
@@ -12854,46 +12872,46 @@ const expandButtonStyle$1 = {
  * Colour defaults to the brand success green.
  */
 const markerStyle = {
-    label: "GridTable-markerStyle",
-    position: "relative",
+    label: 'GridTable-markerStyle',
+    position: 'relative',
     height: 20,
-    "@media (min-width: 768px)": {
+    '@media (min-width: 768px)': {
         height: 0,
     },
 };
 /** The rule itself: spans the full width, centred on the boundary. */
 const markerLineStyle = {
-    label: "GridTable-markerLineStyle",
-    position: "absolute",
+    label: 'GridTable-markerLineStyle',
+    position: 'absolute',
     left: 0,
     right: 0,
-    top: "50%",
-    transform: "translateY(-50%)",
+    top: '50%',
+    transform: 'translateY(-50%)',
     height: 2,
-    background: "var(--color-success, #138660)",
+    background: 'var(--color-success, #138660)',
 };
 /** The label, overlaid at the left with a solid ground that masks the rule behind it. */
 const markerLabelStyle = {
-    label: "GridTable-markerLabelStyle",
-    position: "absolute",
+    label: 'GridTable-markerLabelStyle',
+    position: 'absolute',
     left: 16,
-    top: "50%",
-    transform: "translateY(-50%)",
+    top: '50%',
+    transform: 'translateY(-50%)',
     paddingRight: 8,
-    background: "#fff",
+    background: '#fff',
     fontSize: 12,
     fontWeight: 700,
     lineHeight: 1,
-    color: "var(--color-success, #138660)",
+    color: 'var(--color-success, #138660)',
 };
 const totalCellStyle = {
-    label: "GridTable-totalCellStyle",
-    padding: "12px 16px",
+    label: 'GridTable-totalCellStyle',
+    padding: '12px 16px',
 };
 const totalValueStyle = {
-    label: "GridTable-totalValueStyle",
-    padding: "12px 16px",
-    textAlign: "right",
+    label: 'GridTable-totalValueStyle',
+    padding: '12px 16px',
+    textAlign: 'right',
     fontWeight: 600,
 };
 /**
@@ -12903,19 +12921,19 @@ const totalValueStyle = {
  * it keeps its (0,3,0) rank over the plain `.totalCell` rule without doubling.
  */
 const footerStyle$8 = {
-    label: "GridTable-footerStyle",
-    display: "none",
-    width: "100%",
+    label: 'GridTable-footerStyle',
+    display: 'none',
+    width: '100%',
     fontWeight: 500,
-    background: "var(--color-subtle, #eff0f0)",
-    borderTop: "1px solid var(--border-color, #ededed)",
-    position: "sticky",
+    background: 'var(--color-subtle, #eff0f0)',
+    borderTop: '1px solid var(--border-color, #ededed)',
+    position: 'sticky',
     bottom: 0,
     [`& .${sx(totalCellStyle)}:first-child`]: {
         fontWeight: 600,
     },
-    "@media (min-width: 768px)": {
-        display: "block",
+    '@media (min-width: 768px)': {
+        display: 'block',
     },
 };
 
@@ -12923,7 +12941,7 @@ const ChevronUp = () => (jsxRuntime.jsx("svg", { width: "16", height: "16", view
 const ChevronDown = () => (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) }));
 const ChevronRight$3 = () => (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" }) }));
 /** Width of the leading control column added when `expandable`. */
-const EXPAND_COLUMN_WIDTH = "44px";
+const EXPAND_COLUMN_WIDTH = '44px';
 function defaultComparator(name) {
     return (a, b) => {
         const av = a[name];
@@ -12935,9 +12953,9 @@ function defaultComparator(name) {
 }
 /** Pulls a number out of a formatted value, so totals work on rendered text. */
 function toNumber(value) {
-    if (typeof value === "number")
+    if (typeof value === 'number')
         return value;
-    const parsed = parseFloat(String(value).replace(/[^0-9.-]+/g, ""));
+    const parsed = parseFloat(String(value).replace(/[^0-9.-]+/g, ''));
     return Number.isNaN(parsed) ? 0 : parsed;
 }
 /** The row's own key — `rowKey`, then `id` — or undefined when it has neither. */
@@ -12996,7 +13014,7 @@ function deriveKeys(rows, data, rowKey) {
  * again to reverse — and an optional total row sums a column into a sticky
  * footer.
  */
-function GridTable({ columns, data, gridTemplateColumns = `repeat(${columns.length}, minmax(0, 1fr))`, rowKey, header = {}, initialSortColumn, initialSortAscending, secondarySortComparator, bordered = true, hideHeader = false, emptyMessage = "No data available.", totalRow, expandable = false, defaultExpandedRowKeys, expandAll, expandLabel = "row", banner, alignTop = false, rowMarker, draftRow, editRow, flashRowKey, className = "", }) {
+function GridTable({ columns, data, gridTemplateColumns = `repeat(${columns.length}, minmax(0, 1fr))`, rowKey, header = {}, initialSortColumn, initialSortAscending, secondarySortComparator, bordered = true, hideHeader = false, emptyMessage = 'No data available.', totalRow, expandable = false, defaultExpandedRowKeys, expandAll, expandLabel = 'row', banner, alignTop = false, rowMarker, draftRow, editRow, flashRowKey, className = '', }) {
     const [sortColumn, setSortColumn] = React.useState(initialSortColumn);
     // Ascending unless told otherwise: an omitted initial direction means the
     // first sort column reads ascending (matching the sort itself and the
@@ -13024,9 +13042,7 @@ function GridTable({ columns, data, gridTemplateColumns = `repeat(${columns.leng
     });
     // The control column is a fixed leading track prepended to the caller's
     // template, so every grid — heading, rows and footer — stays aligned.
-    const template = expandable
-        ? `${EXPAND_COLUMN_WIDTH} ${gridTemplateColumns}`
-        : gridTemplateColumns;
+    const template = expandable ? `${EXPAND_COLUMN_WIDTH} ${gridTemplateColumns}` : gridTemplateColumns;
     const sorted = React.useMemo(() => {
         if (!sortColumn)
             return data;
@@ -13091,11 +13107,11 @@ function GridTable({ columns, data, gridTemplateColumns = `repeat(${columns.leng
     const heading = (column, { interactive }) => {
         const sortable = interactive && !!column.sortable && !!column.name;
         const isSorted = sortable && column.name === sortColumn;
-        const content = (jsxRuntime.jsxs("span", { className: sx(headingInnerStyle), children: [column.icon && (jsxRuntime.jsx("span", { className: sx(headingIconStyle), children: column.icon })), column.label, column.labelAs?.({ name: column.name }), isSorted && (jsxRuntime.jsx("span", { className: sx(sortIconStyle$1), children: ascending ? jsxRuntime.jsx(ChevronUp, {}) : jsxRuntime.jsx(ChevronDown, {}) }))] }));
+        const content = (jsxRuntime.jsxs("span", { className: sx(headingInnerStyle), children: [column.icon && jsxRuntime.jsx("span", { className: sx(headingIconStyle), children: column.icon }), column.label, column.labelAs?.({ name: column.name }), isSorted && jsxRuntime.jsx("span", { className: sx(sortIconStyle$1), children: ascending ? jsxRuntime.jsx(ChevronUp, {}) : jsxRuntime.jsx(ChevronDown, {}) })] }));
         if (!sortable) {
-            return (jsxRuntime.jsx("div", { className: cx(sx(headingStyle$2), column.labelClassName ?? ""), children: content }));
+            return jsxRuntime.jsx("div", { className: cx(sx(headingStyle$2), column.labelClassName ?? ''), children: content });
         }
-        return (jsxRuntime.jsx("button", { type: "button", className: cx(sx(headingStyle$2), sx(sortableStyle), column.labelClassName ?? ""), onClick: () => handleSort(column.name), "aria-sort": isSorted ? (ascending ? "ascending" : "descending") : "none", children: content }));
+        return (jsxRuntime.jsx("button", { type: "button", className: cx(sx(headingStyle$2), sx(sortableStyle), column.labelClassName ?? ''), onClick: () => handleSort(column.name), "aria-sort": isSorted ? (ascending ? 'ascending' : 'descending') : 'none', children: content }));
     };
     const total = React.useMemo(() => {
         if (!totalRow)
@@ -13103,25 +13119,21 @@ function GridTable({ columns, data, gridTemplateColumns = `repeat(${columns.leng
         const column = columns.find((c) => c.name === totalRow.columnName);
         return data.reduce((sum, row) => {
             const raw = row[totalRow.columnName];
-            return (sum + toNumber(column?.format ? column.format(raw, row) : raw));
+            return sum + toNumber(column?.format ? column.format(raw, row) : raw);
         }, 0);
     }, [columns, data, totalRow]);
-    const totalIndex = totalRow
-        ? columns.findIndex((c) => c.name === totalRow.columnName)
-        : -1;
+    const totalIndex = totalRow ? columns.findIndex((c) => c.name === totalRow.columnName) : -1;
     // Only meaningful in a chronological order: shown when unsorted (the given
     // order) or sorted ascending by the nominated column.
     const markerActive = !!rowMarker &&
-        (rowMarker.showWhenSortedBy === undefined ||
-            sortColumn === undefined ||
-            (sortColumn === rowMarker.showWhenSortedBy && ascending !== false));
-    const marker = rowMarker && markerActive ? (jsxRuntime.jsxs("div", { className: sx(markerStyle), role: "separator", "aria-label": typeof rowMarker.label === "string" ? rowMarker.label : undefined, children: [jsxRuntime.jsx("span", { className: sx(markerLineStyle), "aria-hidden": "true" }), rowMarker.label != null && (jsxRuntime.jsx("span", { className: sx(markerLabelStyle), children: rowMarker.label }))] })) : null;
+        (rowMarker.showWhenSortedBy === undefined || sortColumn === undefined || (sortColumn === rowMarker.showWhenSortedBy && ascending !== false));
+    const marker = rowMarker && markerActive ? (jsxRuntime.jsxs("div", { className: sx(markerStyle), role: "separator", "aria-label": typeof rowMarker.label === 'string' ? rowMarker.label : undefined, children: [jsxRuntime.jsx("span", { className: sx(markerLineStyle), "aria-hidden": "true" }), rowMarker.label != null && jsxRuntime.jsx("span", { className: sx(markerLabelStyle), children: rowMarker.label })] })) : null;
     // `atEnd` is the fallback for when no row matches, so it must not also fire when
     // `beforeKey` does — otherwise a marker set with both would render twice. Test
     // membership rather than truthiness so a legitimate empty-string key still
     // counts as a match.
     const markerBeforeMatches = rowMarker?.beforeKey != null && allKeys.includes(rowMarker.beforeKey);
-    return (jsxRuntime.jsxs("div", { className: cx(sx(tableStyle$8), className), children: [banner && jsxRuntime.jsx("div", { className: sx(bannerStyle$2), children: banner }), !hideHeader && (jsxRuntime.jsxs("div", { className: sx(headerStyle$x), children: [header.above, jsxRuntime.jsxs("div", { className: sx(gridStyle$7), style: { gridTemplateColumns: template }, children: [expandable && (jsxRuntime.jsx("div", { className: sx(headingStyle$2), "aria-hidden": "true" })), columns.map((column, i) => (jsxRuntime.jsx(React.Fragment, { children: heading(column, { interactive: true }) }, i)))] }), header.below] })), !sorted.length && !draftRow ? (jsxRuntime.jsx("div", { className: sx(emptyStyle$d), children: emptyMessage })) : (jsxRuntime.jsxs("div", { className: sx(bodyStyle$5), children: [draftRow && jsxRuntime.jsx("div", { className: sx(draftRowStyle), children: draftRow }), sorted.map((row, rowIndex) => {
+    return (jsxRuntime.jsxs("div", { className: cx(sx(tableStyle$8), className), children: [banner && jsxRuntime.jsx("div", { className: sx(bannerStyle$2), children: banner }), !hideHeader && (jsxRuntime.jsxs("div", { className: sx(headerStyle$x), children: [header.above, jsxRuntime.jsxs("div", { className: sx(gridStyle$7), style: { gridTemplateColumns: template }, children: [expandable && jsxRuntime.jsx("div", { className: sx(headingStyle$2), "aria-hidden": "true" }), columns.map((column, i) => (jsxRuntime.jsx(React.Fragment, { children: heading(column, { interactive: true }) }, i)))] }), header.below] })), !sorted.length && !draftRow ? (jsxRuntime.jsx("div", { className: sx(emptyStyle$d), children: emptyMessage })) : (jsxRuntime.jsxs("div", { className: sx(bodyStyle$5), children: [draftRow && jsxRuntime.jsx("div", { className: sx(draftRowStyle), children: draftRow }), sorted.map((row, rowIndex) => {
                         const record = row;
                         const key = allKeys[rowIndex];
                         // Only an expandable table exposes expansion; without it, a lingering
@@ -13129,33 +13141,14 @@ function GridTable({ columns, data, gridTemplateColumns = `repeat(${columns.leng
                         // after expandable was turned off) must not leak `expanded: true` to
                         // renderers that have no toggle to collapse it.
                         const expanded = expandable && expandedKeys.has(key);
-                        return (jsxRuntime.jsxs(React.Fragment, { children: [marker && rowMarker?.beforeKey === key && marker, editRow?.key === key ? (jsxRuntime.jsx("div", { className: sx(draftRowStyle), "data-rowid": key, "data-testid": `row-${key}`, "data-editing": "true", children: editRow.content })) : (jsxRuntime.jsxs("div", { className: cx(sx(rowStyle$5), bordered ? sx(borderedStyle) : "", flashRowKey === key ? sx(flashRowStyle) : ""), style: { gridTemplateColumns: template }, "data-rowid": key, "data-testid": `row-${key}`, "data-flash": flashRowKey === key ? "true" : undefined, children: [expandable && (jsxRuntime.jsx("div", { className: sx(expandCellStyle), children: jsxRuntime.jsx("button", { type: "button", className: sx(expandButtonStyle$1), onClick: () => toggleRow(key), "aria-expanded": expanded, "aria-label": `${expanded ? "Collapse" : "Expand"} ${typeof expandLabel === "function" ? expandLabel(row, rowIndex) : expandLabel}`, children: expanded ? jsxRuntime.jsx(ChevronDown, {}) : jsxRuntime.jsx(ChevronRight$3, {}) }) })), columns.map((column, colIndex) => {
-                                            const value = column.name
-                                                ? record[column.name]
-                                                : undefined;
-                                            const formatted = column.format
-                                                ? column.format(value, row)
-                                                : value;
-                                            return (jsxRuntime.jsxs("div", { className: sx(cellWrapStyle), ...(column.name
-                                                    ? { "data-colname": column.name }
-                                                    : {}), children: [column.label && (jsxRuntime.jsx("div", { className: sx(stackedLabelStyle), children: heading(column, { interactive: false }) })), jsxRuntime.jsx("div", { className: cx(sx(cellStyle$2), alignTop ? sx(cellTopStyle) : "", column.className ?? ""), children: column.as ? (column.as({
-                                                            row,
-                                                            rowIndex,
-                                                            name: column.name,
-                                                            expanded,
-                                                        })) : column.name ? (jsxRuntime.jsx("span", { className: sx(valueStyle$2), children: formatted || jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2013" }) })) : null })] }, colIndex));
+                        return (jsxRuntime.jsxs(React.Fragment, { children: [marker && rowMarker?.beforeKey === key && marker, editRow?.key === key ? (jsxRuntime.jsx("div", { className: cx(sx(editRowStyle), bordered ? sx(borderedStyle) : ''), "data-rowid": key, "data-testid": `row-${key}`, "data-editing": "true", children: editRow.content })) : (jsxRuntime.jsxs("div", { className: cx(sx(rowStyle$5), bordered ? sx(borderedStyle) : '', flashRowKey === key ? sx(flashRowStyle) : ''), style: { gridTemplateColumns: template }, "data-rowid": key, "data-testid": `row-${key}`, "data-flash": flashRowKey === key ? 'true' : undefined, children: [expandable && (jsxRuntime.jsx("div", { className: sx(expandCellStyle), children: jsxRuntime.jsx("button", { type: "button", className: sx(expandButtonStyle$1), onClick: () => toggleRow(key), "aria-expanded": expanded, "aria-label": `${expanded ? 'Collapse' : 'Expand'} ${typeof expandLabel === 'function' ? expandLabel(row, rowIndex) : expandLabel}`, children: expanded ? jsxRuntime.jsx(ChevronDown, {}) : jsxRuntime.jsx(ChevronRight$3, {}) }) })), columns.map((column, colIndex) => {
+                                            const value = column.name ? record[column.name] : undefined;
+                                            const formatted = column.format ? column.format(value, row) : value;
+                                            return (jsxRuntime.jsxs("div", { className: sx(cellWrapStyle), ...(column.name ? { 'data-colname': column.name } : {}), children: [column.label && jsxRuntime.jsx("div", { className: sx(stackedLabelStyle), children: heading(column, { interactive: false }) }), jsxRuntime.jsx("div", { className: cx(sx(cellStyle$2), alignTop ? sx(cellTopStyle) : '', column.className ?? ''), children: column.as ? (column.as({ row, rowIndex, name: column.name, expanded })) : column.name ? (jsxRuntime.jsx("span", { className: sx(valueStyle$2), children: formatted || jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2013" }) })) : null })] }, colIndex));
                                         })] }, key))] }, key));
-                    }), marker &&
-                        rowMarker?.atEnd &&
-                        !markerBeforeMatches &&
-                        sorted.length > 0 &&
-                        marker] })), totalRow && (jsxRuntime.jsx("div", { className: sx(footerStyle$8), children: jsxRuntime.jsxs("div", { className: sx(gridStyle$7), style: { gridTemplateColumns: template }, children: [expandable && (jsxRuntime.jsx("div", { className: sx(totalCellStyle), "aria-hidden": "true" })), columns.map((_, i) => (jsxRuntime.jsx("div", { className: i === totalIndex ? sx(totalValueStyle) : sx(totalCellStyle), children: i === 0
-                                ? totalRow.label
-                                : i === totalIndex
-                                    ? total.toLocaleString()
-                                    : null }, i)))] }) }))] }));
-}
-GridTable.displayName = "GridTable";
+                    }), marker && rowMarker?.atEnd && !markerBeforeMatches && sorted.length > 0 && marker] })), totalRow && (jsxRuntime.jsx("div", { className: sx(footerStyle$8), children: jsxRuntime.jsxs("div", { className: sx(gridStyle$7), style: { gridTemplateColumns: template }, children: [expandable && jsxRuntime.jsx("div", { className: sx(totalCellStyle), "aria-hidden": "true" }), columns.map((_, i) => (jsxRuntime.jsx("div", { className: i === totalIndex ? sx(totalValueStyle) : sx(totalCellStyle), children: i === 0 ? totalRow.label : i === totalIndex ? total.toLocaleString() : null }, i)))] }) }))] }));
+}
+GridTable.displayName = 'GridTable';
 
 /**
  * HubAppShell's compiled rules.